Step 10

Start by creating a selection of 250×150px (fill it with any color), this will be our image holder.

Call this layer “pic_holder” and try aligning it like the image above.

And give it a Stroke

Let’s add an image of a featured design, to do so go to File > Place and select an image. call its layer “pic”, and make sure to put it right above the layer “pic_holder”.

Right-click on “pic” layer and choose Create Clipping Mask.

Step 11

To create our shadow, we’ll start by duplicating the two layers “pic” and “pic_holder”.

While having the two duplicated layers selected, go to Edit > Free Transform, and adjust the height to: -100.0%

While we’re still selecting the two duplicated layers right-click on them and choose Convert to Smart Object; call this layer “shadow”. and make sure to place it at the bottom.

Select “shadow” layer then click on Add layer mask (at the bottom of the layers panel)

Choose the Gradient Tool (G) and with a black, white linear gradient drag from down to top.

You should have something like this!

Step 12

We need to add a description to our image. so we’ll create a selection of 240×25px, and fill it with this color value: #1a1919, This will work as the description background.

Write some description with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #82aa48

Make sure to keep your document tidy!

Step 13

Make another copy of the featured design image and align it to the right.

We’ll make the center image a bit bigger, so make a selection of 340×200px, align it like the following, and fill it with any color.

We’ll also give it a Stroke. use the following image for reference

And here’s what we’ve got!

Make sure to organize your layers and to group them. I personally have created three separate groups. here’s how they look

Step 14

Let’s create our sliding button! we’ll start by creating an Ellipse of 50×50px using the Elliptical Marquee Tool (M), and filling it with any color.

Now give it some layer styles according to the following image

With the Custom Shape Tool (U) create an arrow and give it the following layer styles

You should have something like this

Don’t forget to align your button according to the following image

Make another copy of the arrow and align it to the right

Step 15

Let’s work on the content area. start by creating a selection of 1020×815px

Click Shift+Backspace to fill your selection with this color: #e8e8e8

With the Single Row Marquee Tool (M) create a 1px selection, place it like the following image, and fill it with white (#ffffff).

Now you’re having perfect pixel details!

Step 16

We need to set upper borders to our content area. therefore we’re going to drag a new horizontal guide after 50px.
Download this Icon set: Basic Set – Pixel Mixer and place of them like the following.

Drag a new horizontal guide at the bottom of the icon, leave 20px then drag a new one.
Now write some heading with these settings:

• Font Family: Rockwell
• Font size: 29px
• Font weight: Regular
• Anti-aliasing setting: Sharp
• Color: #81aa48

Drag yet another two guides according to the following image

Write some text with these settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #2f3235

Drag more three guides according to the following image

Step 17

It’s time to create our “read more” button. With the Rounded Rectangle Tool (U) create a rectangle of 100×30px and 5px radius. and fill it with any color just for now.

Give this rectangle some layer styles. use the image below for reference.

With the Ellipse Tool (U) create an ellipse of 15×15px and fill it with this color value: #4d4d4d.
To align it correctly select its layer and the rectangle’s layer then click Align vertical centers while having both layers selected.

Type “+”, fill it with white (#ffffff) and place it like this

Write the word “read more” with the following character settings:

• Font Family: Tahoma (get it from here)
• Font size: 12px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #ffffff

Give it a drop shadow. use the image below for reference

Step 18

To create a vertical separating line, With the Line Tool (U) create two vertical lines next to each. and fill them with these values: #ffffff – #b3b3b3.

Align your line like the following image

Don’t forget to organize your layers. take a look at mine!

Step 19

Make three copies of what we’ve created in the previous two steps. and have something like this!

Step 20

Let’s create our separator.
Drag a new horizontal guide after 50px

With the Elliptical Marquee Tool (M) create a selection like the one below.

Set your foreground color to black (#000000) then click Shift+Backspace to fill your selection. call this layer “separator_bg”.

To make it looks blurry, go to Filter > Blur > Gaussian Blur – radius: 3px.

While selecting “separator_bg” layer selected, create a selection like the one below then hit delete.

Click on Add layer mask icon. and set your gradient editor to black, white, black.

With the Gradient Tool (G) drag with a linear gradient according to the following image.

Reduce the layer Opacity to 50%

With the Line Tool (U) create two horizontal lines on top of each other and place them right above the separator.
Fill them with #b3b3b3 – #ffffff and add the same layer mask to them.

Step 21

We’ll start working on our lower content area, by dragging a new guide after 50px.

Add a title with these character settings:

• Font Family: Rockwell
• Font size: 30px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #81aa48

Drag two new horizontal guides according to the following image.

Write some text with these character settings:

• Font Family: Arial
• Font size: 14px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #505150

Drag a new guide after 160px as a lower border for the content area.

Step 22

Write another title and text using the same character settings we’ve used in the previous step.

Type a quotation mark on your keyboard, with these character settings:

• Font Family: Arial
• Font size: 200px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #505150

And reduce its layer’s Opacity to 50%

Write a word of wise or quote of yours with these character settings:

• Font Family: Arial
• Font size: 14px
• Font weight: Italic
• Anti-aliasing setting: Smooth
• Color: #81aa48

Step 23

In order to create a vertical separating line, create two vertical lines next to each other, and fill them with these values: #ffffff – #b3b3b3.

Make sure to keep your layer organized, Here’s how I organized them.

Step 24

Write yet another title like the ones on the left (Try writing something that represents the team, for example I’ve written “Our Team”).

Using the Rectangle Tool (U) create a 90×90px rectangle, and fill it with any color. call this layer “photo1_holder”
This will work as a holder for a photo of a team member. Now give it a Stroke. Use the image below for reference.

Place a photo of a member and call its layer “photo1″. Make sure that the layer “photo1″ is right above “photo1_holder” layer. then right-click on “photo1″ layer and choose Create clipping mask. You should come up with something like below!

Step 25

Write some text about the member, using these character settings:

• Font Family: Arial
• Font size: 14px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #7ba344

We’ll create the social media icons ourselves! let’s start with Twitter, Type “t” letter with these character settings:

• Font Family: Pico-Black (get it from here)
• Font size: 30px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #2fcfff

Then Give it a Stroke according to the following image.

Let’s create the LinkedIn one! Type “in” word with these character settings:

• Font Family: Myriad Pro (get it from here)
• Font size: 30px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #0081ac

Facebook!? Type “f” letter with these character settings:

• Font Family: Klavika (get it from here)
• Font size: 30px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #395796

Step 26

Create another copy of the member photo. while selecting the photo layer, go to Layer > New Adjustment Layer > Black & White.
Make sure to check “Use Previous Layer to Create Clipping Mask”

Type the same text, social media letters we’ve written before using the same character settings, but give them all this color value: #505150.

So obviously the member will look gray when it’s not hovered!

Make two copies and align them this way

To make sure they’re well-aligned, make four separate groups each one of them contains a member’s content, and click on Distribute left edges in the control bar while having the four groups selected.

I’ve organized my layers, you?

Step 27

Before we start working on the social media links area, we need to set some borders, that’s why we’ll drag two new guides according to the following image!

Create a selection of about 940×70px and align it like the image below.

Fill it with any color, and then give it a Gradient Overlay. use the image below for reference.

Create a rectangle of 70×45px. use the image below to align it and to give it some layer styles. call this layer “tw_bg”

Hide the layer “tw_bg” to work freely.
Create another rectangle of 10×43px, and go to Edit > Transform Path > Skew. adjust these options in the control bar:

• X: 40px
• Y: 1253px
• V: -39

Call this layer “effect” and make “tw_bg” layer visible again.

Copy layer style from “tw_bg” layer and paste it into the layer “effect”.

Write “t” letter with these character settings:

• Font Family: Pico-Black
• Font size: 35px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: Won’t matter cause we’re gonna add a Gradient Overlay

Also give it some layer styles according to the following image.

Step 28

Repeat step 20 to create another separator or even copy it. then place it this way:

We need to cut the right part of the rectangle, eh!? to do that select “tw_bg” layer and click on Add layer mask.
Make a selection over the right part (that we need to cut) of the rectangle, set your foreground color to black (#000000) then click Shift+Backspace to fill it.

Step 29

Write some text – which is actually should be a Tweet – with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #222222

To align the text well, while having the text layer and the green bar layer selected, click on Align vertical centers.

Step 30

Repeat step 27 to create something like in the image below. Also create a rectangle, fill it with #334814 and reduce its layer Opacity to 40%.

Give the big rectangle some layer styles according to the following image

Now fill the skewed rectangle with a darker color of this value: #2a6788

Write “t” letter with these character settings:

• Font Family: Pico-Black
• Font size: 35px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #2fcfff

And give it a Stroke. use the image below for reference

Make sure to organize your layers and group them together.