PS web design tutorial XII - Create professional web2.0 web page layout in PS

As a coder, my art foundation is weak. We can refer to some mature web PS tutorials to improve our design capabilities. To paraphrase a sentence, "If you are familiar with three hundred Tang poems, you can recite them even if you don't know how to compose them."

The tutorials in this series come from online PS tutorials, all from abroad, and all in English. I try to translate these excellent tutorials. Due to limited translation capabilities, the details of the translation still need to be worked out. I hope that netizens will give you some advice.

Convention:

1. The software used in this article is Photoshop CS5 version

2. The screenshots of the original tutorial are in English. I took them again based on the re-production. Chinese version of Figure

3. Some operations in the original text do not give parameters. I measured some parameters through repeated testing, which are shown in red text. For some wrong parameters, the correct parameters are displayed directly in red text

For example: (90, 22, 231, 77) , indicating that the coordinates of the upper left corner of the rectangle are (90, 22) , width 231, height 77

For example: (90,22), indicating that the coordinates of the upper left corner of the rectangle are (90,22), the other two parameters of the rectangle have been specified in the tutorial

4. My own experience will be attached at the end of the tutorial. Some are optimizations of some steps in the tutorial, etc.

In this Photoshop tutorial we're going to learn how to create a web 2.0 layout, As we go through the tutorial we'll deal with so many Photoshop techniques. Seems kind of long ? that's because it's very detailed. I assure you'll find easy to follow and to get done, just give it a try!

In this PS tutorial, we will learn how to create web 2.0 Layout, we'll learn a lot of Photoshop tricks as we go through this tutorial. Seems too long? This is because it is very detailed. I promise you'll find it easy if you follow these steps, give it a try!

#Step 1

To keep everything aligned we're going to use 960s Grid System (Get it from here) once downloaded open up the file “960_grid_24_col.psd”.
We'll start by creating layer from background, right-click on the layer “Background”, then choose Layer From Background. and call it “bg”.

Step 1

In order to align the elements, we are going to use the 960s Grid System (obtained from here). After downloading, open the 960_grid_24_col.psd file

Start by creating the layer from the background, Right-click on Background, select the background layer, and name it bg

Since this translation does not use the 960s Grid System, this step is changed to create a new document, size: 1020px*1800px

Step 2

As we'll use guides so much, we need to view our Rulers. In order to do that go to View > Rulers.

Step 2

We need guides, we need to show our rulers. To do this, click: View > Ruler

Step 3

We need to set lower borders for the header area, therefore we'll drag a new horizontal guide after 100px. go to View > New Guide, Position: 100.

Step 3

We need to set the border of the head area. To do this drag a horizontal guide at 100px. Click: View> New Guide, Position: 100

Step 4

Let's create our header. we'll start by creating a selection of 1020x100px. then click Shift+Backspace to fill it (with any color just for now).

Step 4

Now create the head area. We first create a 1020px*100px selection. Then press Shift+Backspace to fill (fill with the current foreground color)

Suggestion: A less common approach, generally use the rectangle tool to create a rectangle (0, 0, 1020, 100), the difference is The rectangle tool will create a new layer

Give it a Gradient Overlay according to the following image:

Set the rectangle according to the image below Gradient Overlay Layer Style

Gradient Editor Colors: #161616, #202020, #131313

Now call this layer: “header_bg”.

Name this layer header_bg

Step 5

Write your Web site title with these settings:

• Font Family : Rockwell (get it from here)

• Font size: 30px

• Font weight : Regular

• Anti-aliasing setting: Smooth

• ##Color: Won 't matter, cause we're gonna give it a Gradient Overlay

Step 5

Follow the settings below , use the text tool to add the title of the website

• Font: Rockwell

• Font size: 30px

• Font style: Regular

• Anti-aliasing method: Smooth

• Color: No setting is required because we are going to add a gradient overlay

Now add a Gradient Overlay to your text with the following settings:

Now add a gradient overlay to your text with the following settings

Gradient editor color: #528037,# 84ac49

To align your Web site title with the header background; Select your title layer and “header_bg” layer then click on Align vertical centers.

To align the website's title to the header background, select your title layer and the header_bg layer, then click Vertical Center Align (

Click: Layer> Alignment> Vertical Center )

Step 6

Write your navigation text with these settings:

• Font Family: Arial

• Font size: 20px

• Font weight: Regular

• ##Anti-aliasing setting

  : Smooth

• Color

  : #ffffff

Step 6

Add navigation text according to the settings below:

• Font:

  Arial

• Font Size:

  20px

• Font style:

  Regular

• Anti-aliased style:

  Smooth

• Color ：

  #ffffff

Create a rounded rectangle which will represent a hovered link. it should be about 65x35px size – 5px radius, (fill it with any color for now).

Add a rounded rectangle

(551,33)

to the hovered link. Size: 65px*35px, radius 5px, (fill with any color)

Give it a Stroke and Gradient Overlay according to the following image:

Adjust the circle according to the image below Set the layer style of stroke and gradient overlay for the corner rectangle:

Stroke color: #9dca5d

Gradient editor colors: #528037, #84ac49

Before we move to the next step, just make sure to keep your layers well-organized, Here's how mine looks!

Before taking the next step, just make sure to keep your layers well-organized (Merge these layers into the header group), here is what I did!

Step 7

It's time to create the featured designs area. we'll start by setting our lower borders by adding a new horizontal guide after 430px.

Step 7

It’s time to create a featured area. To set the border, add a horizontal guide 430px below the previous horizontal guide.

Create a selection of 1020x430px as a background for the featured designs area. and fill it with any color.

Add a background to the featured area and create a 1020px*430px of the constituency. Fill it with any color.

Suggestion: Use the rectangle tool to create a new rectangle (0, 100, 1020, 430)

## Then give it a Gradient Overlay with the following settings:

Then give it a Gradient Overlay with the following settings:

Gradient Editor Color: #528037,# 84ac49

##Now let's create the glaze effect! create a selection of 1020x120px, fill it with any color.

Create a bright glaze effect now! Create a selection of 1020px*120px and fill it with any color.

Suggestion: Use the rectangle tool to create a new rectangle (0, 410, 1020, 120)

And then add a Gradient Overlay. use the image below for reference.

Then set the color of the gradient overlay

gradient editor as shown below: #81aa48, #84ac49

Now reduce this layer opacity to 40%

Adjust the opacity of this layer to 40%

Step 8

Let's add some touches! with the Single Row Marquee Tool create a 1px selection and align it like the following:

Now add some polish! Use the single line selection tool to create a 1px selection and align it as follows

Set your foreground color to #acd86e then click on Shift+Backspace to fill it; make sure to use foreground color as a filling option.

Set your foreground color to #acd86e, then press Shift+Backspace to fill the selection; make sure the fill mode is the foreground color.

Suggestion: Use the straight line tool to create a straight line (0, 100, 1020, 1), color: #acd86e.

I guarantee you'll have perfect pixel details

I guarantee you'll have perfect single-pixel components

We're done creating the background elements. so make sure to give them ideal names, organize them, and group them together.

We're done creating the background elements. Be sure to give them ideal names, organize them, and group them together.

Step 9

Let us be more accurate! drag two new guides according to the following image

Step 9

For more precise positioning! Drag two guide lines as shown below (50px inside of the previous two guide lines)

Write some welcoming words with these settings :

• Font Family: Rockwell

• ##Font size: 40px

• Font weight: Regular

• Anti-aliasing setting: Sharp

• Color: #f4f4f4

Add welcome text according to the following settings:

• Font: Rockwell

• Font Size: 40px

• Font Style: Regular

• Anti-aliased style: Sharp

• Color: #f4f4f4

I personally have written: “Here's our brand new work. Oops Welcome!” ;) but we need to emphasize the word “Welcome!” in somehow. so basically we'll give it a Gradient Overlay. follow up with the image

Here's our brand new work. Oops Welcome!. ;). But we need to emphasize the word Welcome somehow. Therefore, we will add a gradient overlay to it as shown below.

In order to solve this step perfectly, use the text tool to write Here's our brand new work. and Oops and Welcome!, and then add a gradient overlay layer style to Welcome!

Gradient editor colors: #2f3032, #2f3336

##Now drag two new horizontal guides according to the following image

Now drag two new horizontal guides according to the image below (one aligned with the bottom of the text, the other 50px below the previous reference line),

By calculating the positions of the two reference lines, they are roughly 220px and 270px

Before we say goodbye to this step, just make sure to organize your text layers.

Before we say goodbye to this step, organize Your text layers (merged into a group)

Step 10

Start by creating a selection of 250x150px (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

Step 10

Create a selection, size: 250px*150px (fill with any color), this will be our picture block

Name this layer pic_holder, move it to the appropriate position as shown below, and Add a stroke as shown below

Suggestion: Use the Rectangle Tool to create a new rectangle (100, 299), and add a stroke layer style as shown below

Stroke color: #496d23

##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.

Add an image in the featured area. To do this, click: File > Place and select a file. Name this layer pic and make sure the pic layer is above the pic_holder layer.

Right click on the pic layer and select 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%

Step 11

To create the picture shadow, we first copy the two layers pic and pic_holder

When the two copied When two layers are selected, click: Edit > Free Transform, adjust the height to -100%

##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.

Right-click on the duplicated layers and choose Convert to Smart Object; Object, named shadow. Then move the layer below the original image

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

Select the shadow layer and click 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.

Select the gradient tool, select the black-white linear gradient, and drag from bottom to top (shown as the red line in the picture below, drag from bottom to top)

You should have something like this!

The effect is as follows:

Step 12

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

Step 12

You need to add a description text to the image. So we are going to create a selection with size: 240px*25px and fill it with color: #1a1919, which will serve as the background of the caption.

Use the rectangle tool to create a new rectangle (105, 419) instead of this step. Color: #1a1919

Write some description with these character settings:

• Font Family: Arial

• Font size: 15px

• Font weight: Regular

• Anti-aliasing setting: None

• Color: #82aa48

Add caption according to the settings below:

• Font: Arial

• Font Size: 15px

• Font style: Regular

• Anti-aliased style: None

• Color: #82aa48

##Make sure to keep your document tidy!

Please Be sure to keep your documents tidy!

Step 13

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

Step 13

Repeat to add another image to the right of the featured area

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

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

We add a large picture in the middle, create a large selection, size: 340px*200px, place it as shown below, fill it with any color

Add a stroke to it as shown below.

Use the rectangle tool to create a rectangle (340, 270) with any color. And add the stroke style as shown below, replacing the stroke color of

in this step: #3d6013

Add images and shadows to the image blocks

And here's what we've got!

This is the current effect

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

Organize your layers and merge them into groups where appropriate. I merged the layers of the three pictures into three groups

Step 14

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

Now give it some layer styles according to the following image

Step 14

To create a sliding button! Use the Ellipse Selection Tool to create an elliptical selection, size: 50px*50px, fill it with any color

Use the Ellipse Tool directly to create an ellipse (28, 220), size: 50px*50px, any color.

Add a layer style to this layer as shown below

Stroke color: #6f9941

Gradient editor colors: #ffffff, #f3f3f3

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

Create an arrow with the Custom Shape Tool and add the layer style

the color of the inner shadow as shown below: #3c3c3c

Gradient editor colors: #619145, #8cb352

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

Copy an arrow on the right

##Step 15

Let's work on the content area. start by creating a selection of 1020x815px

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

Step 15

The next step is to create the content area. First create a selection, size: 1020*815

Press Click+Backspace to fill the selection with color #e8e8e8

After calculation in the following steps, this should be 1020*810

Suggestion: Use the rectangle tool directly to create a rectangle (0, 530, 1020, 810), 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!

Use the single line selection tool to create a 1px selection, place it as shown below, and fill it with white

Now you get the perfect single-pixel component

Suggestion: Use the straight line tool to draw a horizontal straight line (0, 530, 1020, 1) which is relatively simple. Color: #ffffff

##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.

Step 16

We need to set the boundaries of the content area. We need to drag a new horizontal guide 50px below the previous horizontal guide

Download the icon: Basic Set – Pixel Mixer and place it as shown below

Drag a new horizontal guide at the bottom of the icon, leave 20px then drag a new one.

Drag a horizontal guide at the bottom of the icon, to Drag another horizontal guide line 20px below

Now Write some heading with these settings:

• Font Family: Rockwell

• Font size: 29px

• Font weight: Regular

• Anti-aliasing setting: Sharp

• Color: #81aa48

Add header text according to the following settings:

• Font: Rockwell

• Font size: 29px

• ##Font style: Regular

• Anti-aliased style: Sharp

• Color: #81aa48

Drag yet another two guides according to the following image

Drag yet another two guides according to the following image (one at the bottom of the text, 20px further down)

##Write some text with these settings:

• Font Family

  : Arial

• Font size

  : 15px

##Font weight
• : Regular

Anti-aliasing setting
• : None
  ##Color
: #2f3235
Add text according to the following settings:

Font:

Arial

• Font Size:
15px

• Font Style:
Regular

• Anti-aliased style:
None

• ##Color:

  #2f3235

Drag more three guides according to the following image

Drag three horizontal guides according to the image below (one at the bottom of the text, one 20px down, and one 30px down )

Step 17

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

Step 17

It’s time to create the read more button It's time. Use the Rounded Rectangle Tool to create a rounded rectangle (100, 790), size: 100px*30px, radius 5px, fill it with any color

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

Add layer styles to this rounded rectangle as shown below

Color for highlight mode in Bevel and Emboss: #7da841

##Color for Gradient Editor : #66923e, #76a150

With the Ellipse Tool (U) create an ellipse of 15x15px 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.
##Create with the ellipse tool An ellipse, size: 15px*15px, color: #4d4d4d

For precise alignment, select this layer and the rounded rectangle layer, then click Vertical Center Align (

Click: Layers> ; Alignment> Vertical center

）

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

Enter +, fill it with white color, and place it as shown below

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

• Font Family

  : Tahoma

• Font size

  : 12px

• Font weight

  : Regular

• Anti-aliasing setting

  : None

• Color

  : #ffffff

Add text according to the settings below read more:

• Font:

  Tahoma

• Font Size:

  12px

• Font Style:

  Regular

• Anti-aliased Style:

  None

• Color:

  # ffffff

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

Add a drop shadow to the text. Set the projection and projection color as shown below: #7c7c7c

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.

Step 18

Create a vertical dividing line, use the straight line tool to create two vertical straight lines ((270, 600, 1, 200) and (271,600,1,200)). The colors are: #ffffff and #b3b3b3

Align your line like the following image

Align your line like the following image

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

Don't forget to organize your layers. Just like me.

Step 19

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

Step 19

Copy the above two steps 3 times. Complete the following picture

Step 20

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

Step 20

Create a horizontal separator

Create a new horizontal guide 50px below the previous horizontal guide

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”.

As shown below, use the Elliptical Selection Tool to create an elliptical selection

Set your foreground color to black (#000000 ), then press Shift+Backspace to fill your selection. Name this layer separator_bg

Suggestion: Use the Ellipse Tool to create an ellipse (30, 870, 960, 10), color: #000000

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

To make it look blurry, go to Filter > Blur > Gaussian Blur, Radius: 3px like the one below then hit delete.

When the separator_bg layer is selected, create a selection as shown below and press delete.

Press Ctrl+D to cancel the selection

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

Click the 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.

Use the gradient tool to drag a linear gradient as shown below (drag horizontally from right to left, press Shift while dragging)

Reduce the layer Opacity to 50%

Adjust the opacity of the layer 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.

Use the straight line tool to create two horizontal straight lines((30,868,960,1) and (30,869,960,1)), just now Just above the separator

fill their colors with #b3b3b3 and #ffffff respectively, and add the same layer mask as the separator

Step 21

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

Step 21

Now to create the lower content area, drag a new horizontal guide 50px below the previous guide

Add a title with these character settings:

• Font Family: Rockwell

• Font size: 30px

• ##Font weight: Regular

• ##Anti-aliasing setting

  : Smooth

• Color

  : #81aa48

##Add a title according to the settings below:

Font:
• Rockwell

Font Size:
• 30px

Font style:
• Regular

Anti-aliased style:
• Smooth
  ##Color:
#81aa48

##Drag two new horizontal guides according to the following image.

Create two horizontal reference lines as shown below (one 20px below, the other 70px below)

Write some text with these character settings:

Font Family

: Arial

• Font size

  : 14px

• Font weight

  : Regular

• ##Anti-aliasing setting: None

• Color: #505150

• Add text according to the following settings:

Font:

Arial

• Font Size: 14px

• Font style: Regular

• Anti-aliased style: None

• Color: #505150

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

Create a new horizontal guide line 160px below the previous one as the bottom edge of the content area

Step 22

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

Step 22

Add another title and text using the same evil settings as in the previous step. (As shown below, first create a new horizontal reference line 50px below the penultimate horizontal reference line)

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%

Press the quotation mark on the keyboard to enter a double quotation mark and follow the settings below:

• Font:

  Arial

• Font Size:

  200px

• Font Style:

  Regular

• Anti-aliased style:

  Smooth

• Color:

  #505150

Adjust the layer's Opacity is 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
  Enter some thoughts or quotes, follow the settings below:

Font:
• Arial

Font Size:
• 14px
  ##Font Style:
Italic

• Anti-aliased style:
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.

Step 23

Create a vertical separator and create two vertical straight lines( (509, 940, 1, 215) and (510, 940, 1, 215)) , the colors are #ffffff and #b3b3b3

respectively (#b3b3b3 is on the left side of #ffffff)

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

Make sure to keep your layer organized, Here's how I organized them. Layer grouping

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”).

Step 24

Write the same title and text on the right side as on the left ( Try writing something to represent the team, for example, Our Team here)

Using the Rectangle Tool (U) create a 90x90px 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. The rectangle tool creates a 90px*90px rectangle

(546, 1011)

with any color. Name this layer photo1_holder

This will be a picture block for team member photos. Now add the stroke layer style to it as shown below

Colors from Gradient Editor: #4d4d4d, #3b3b3b

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!

Insert a photo of the member and name this layer photo1. Make sure the photo1 layer is directly above the photo1_holder layer. Right-click on the photo1 layer and select Create Clipping Mask. Your work should look like this

Step 25

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

Input Member information text, follow the following settings:

• ##Font:

  Arial

• Font size:

  14px

• Font style:

  Regular

• Anti-aliased style:

  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 some social media icons ourselves! Starting from Twitter, enter the letter t as follows:

Font:

Pico-Black (get it here)

• Font size:
30px

• Font style:
Regular

• Eliminate Zigzag style:
Smooth

• Color:
#2fcfff

• Then add a stroke to it as shown below

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

We create LinkedIn! Enter the in letters as follows:

• Font: Myriad Pro (get it from here)

• Font size: 30px

• Font style: Bold

• ##Anti-aliased style: 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

  ## Facebook! ? Enter the letter f as follows:

Font:
• Klavika (get it from here)

Font Size:
• 30px

Font style:
• Bold
  ## Anti-aliasing style:
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”

Step 26

Create a copy of another member’s photo. With the copy's photo layer selected, click: Layer > New Adjustment Layer > Black and White.

Make sure Use previous layer to create clipping mask is checked

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

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

Obviously, when the mouse is not moved over the member, the gray one is

Use the same method to create two other copies

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.

To make sure they are oriented, use four separate groups, each of which contains member content, and click the control button to the left of the layer group to select each group.

I’ve organized my layers, you?

I’ve organized my layers like this, how about 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!

Step 27

Before we start making the social media area, we need to set some boundaries, so we follow the new guides below Two horizontal guides (one 50px down, one 70px further down),

Create a new horizontal guide line at the bottom of the content area

Create a selection of about 940x70px 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 rectangular selection as shown below, size: 940px*70px

Fill it with any color, and add a gradient overlay as shown below

Recommendation: Use the rectangle tool to create a rectangle ( 46, 1220, 940, 70), add gradient overlay as shown below

Color of Gradient Editor: #71953b, #7ea547

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

Create a new rectangle

(36,1236), size: 70px*45px. Place it as shown below and add layer styles as shown below. Name this layer tw_bg

#Gradient Editor Color: #202020, #323232

##Hide the layer “tw_bg” to work freely.

Create another rectangle of 10x43px, 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.

Hide the tw_bg layer to work more freely

Create another rectangle, size: 10x43px, and click: Edit > Transform Path > Bevel. Adjust the parameters on the toolbar according to the following numbers:

X: 40px

• Y: 1253px

• V: -39

• Name this layer effect and make tw_bg visible again

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

Copy the layer style of layer tw_bg to layer effect

Write “ t” letter with these character settings:

Font Family
• : Pico-Black (get it from here)

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.

Enter the letter t as follows:

• Font: Pico-Black (obtained from here)

• Font size: 35px

• Font style: Regular

• Anti-aliased Style: Smooth

• Color: Don’t worry because we are going to add a gradient overlay

Then follow the below Figure sets layer styles.



Outer glow color: #83ab48





## of the gradient editor Color: #71963c, #84ac49







##Step 28

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

Step 28

Repeat step 20 to create another separator or even make a copy. Then move to the position below:

Repeat the steps here, use the Ellipse Tool to create a new ellipse, and add a Gaussian blur with a radius of 3px, and adjust the appropriate position and size



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.


We need to cut off the right half of the rectangle ,Um! ? For this select the tw_bg layer and click Add Layer Mask

Create a selection on the right side of the rectangle (the part we want to cut away), set your foreground color to black (#000000) and press Shift +Backspace to fill it





Step 29
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

• Enter some text using the settings below - it will look like a Tweet:

##Font:

Arial

• Font size: 15px

• ##Font style: Regular

• Anti-aliased style: Smooth

• Color: #222222



##To align the text well, while having the text layer and the green bar layer selected, click on Align vertical centers.
To align To perfectly align the text, when the text layer and the green bar layer are selected, click Vertical Center Alignment (

Click: Layer> Alignment> Vertical Center)

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%.

Step 30

Repeat step 27 to create the following graphic. And create a rectangle, color: #334814, and set the opacity to 40%

First use the rectangle tool to create a new rectangle (701, 1213, 46, 46), and then create a triangle shadow on the right (There are many methods, not listed here), create a new rectangle (710, 1220, 42, 44), color: #334814, change the opacity to 40%, adjust the layer order reasonably, the effect is as follows



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





Color overlay color: #5296b9





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

Give the skewed rectangle

(triangle shadow)

A dark color: #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.
Enter the letter t as follows:
Font:
• Pico-Black

Font Size:
• 35px

Font style:
• Regular

Anti-aliased style:
• Smooth
  ## Color:
#2fcfff

• Then add a stroke to it as shown below



Step 31

Make another copy of the Twitter icon, change the Color Overlay (for the big rectangle) to: #0080ab, and fill the skewed rectangle with this color value: #00526d.

Step 31

Create another copy of the Twitter icon, change the color of the overlay The color (large rectangle) is: #0080ab, the color of the filled beveled rectangle (triangle shadow) is: #00526d



Write the word “in” with these character settings:

• Font Family: Myriad Pro

• Font size: 35px

• ##Font weight: Bold

• ##Anti-aliasing setting

  : Smooth

##Color
• : #ffffff
  Enter the letters in according to the following settings:
Font:
• Myriad Pro

Font Size:
• 35px

Font style:
• Bold

Anti-aliased style:
• Smooth

Color ：
• #ffffff



Create a third copy of the Twitter or LinkedIn icon, change the Color Overlay (for the big rectangle) to: #395796, and fill the skewed rectangle with this color value: #263e6f.
Create a third Twitter or LinkedIn icon and change the color of the color overlay (the big rectangle) to: #395796 , the color of the filled beveled rectangle

(triangle shadow)

is: #263e6f



Write “f” letter with these characters settings:
Font Family
• : Klavika

Font size
• : 35px

Font weight
• : Bold

Anti-aliasing setting
• : Smooth

Color
• : #ffffff
  Enter the letter f according to the following settings:
font :
• Klavika

Font size:
• 35px
  ##Font style:
Bold

• Anti-aliased style:
Smooth

• ##Color:

  #ffffff

Make a last copy, change the Color Overlay (for the big rectangle) to: #e8e8e8, and fill the skewed rectangle with this color value : #cdcdcd.

Make the last copy, change the color of the color overlay (large rectangle) to: #e8e8e8, fill the color of the beveled rectangle

(triangle shadow)

to: #cdcdcd

Write the word “fr” with these character settings:

Font Family

:Frutiger Black

• Font size

  : 35px

• Font weight

  : Bold

• Anti-aliasing setting

  : Smooth

• ##Color: f: #0079d2 – r: # ff3093

• Enter fr letters according to the following settings:

Font:

Frutiger Black

• Font size: 35px

• Font style: Bold

• Anti-aliased style: Smooth

• Color: Color of f: #0079d2 and color of r: #ff3093



##Put each of the icons in a separate group, and while selecting the four of them click on Distribute left edges
Put each of the icons in a separate group, and select them just click on the left edges Just control the button

Step 32

Keep it goin'! only the footer left. Create a selection of 1020x460px and fill it with any color for now.

Step 32

Continue! Only the footer is left. Create a rectangular selection, size: 1020px*460px, and fill it with any color

Suggestion: Use the rectangle tool to create a rectangle (0, 1340, 1020, 460) and fill it with any color



Apply a Gradient Overlay to it. use the image below for reference.
Add a gradient overlay to it as shown below



Gradient editor colors: #202020, #202020, #111111



You should have a nice shadow!
You will get a nice shadow



with the Single Row Marquee Tool (M) create a 1px selection and fill it with white (#ffffff).
Use the single line selection tool to create a 1px selection, and then fill it with white

Suggestion: Use the straight line tool to create a white horizontal line (0, 1340, 1020, 1)



#Step 33

Drag two new horizontal guides according to the following image.

Step 33

Drag two new horizontal guides according to the image below (one 50px below the previous guide line , another 50px further down)



Write a title with these character settings:

• Font Family: Rockwell

• ##Font size

  : 30px

• Font weight

  : Regular

• Anti-aliasing setting

  : Sharp

• Color

  : #7ea547

Add a title using the settings below:

• Font:

  Rockwell

• Font size:

  30px

• Font style:

  Regular

• Anti-aliased style:

  Sharp

• Color:

  #7ea547



Write a sub-title with these character settings:

##Font Family
• : Arial

• Font size: 15px

• ##Font weight: Regular

• Anti-aliasing setting: None

• Color: #d3d3d3

Add subtitle text according to the following settings:

• Font: Arial

• Font size: 15px

• Font style: Regular

• Anti-aliasing style: 无

• Color: #d3d3d3



Using the Line Tool (U) create two horizontal lines on top of each other, and fill them with these color values: #151515 – #2f2f2f.
Use the Line Tool to create two horizontal lines next to each other Straight lines, using colors: #151515 (top) and #2f2f2f (bottom)



Step 34

Drag two new horizontal guides according to the following image.

Step 34

Drag two new horizontal guides according to the image below (one in The reference line is 25px down and the other is 230px further down)



With the Rounded Rectangle Tool (U) create two rectangles of 210x25px – 5px radius , fill them with: #141313 and give them an Inner Shadow.
Use the Rounded Rectangle Tool to create two rounded rectangles

(respectively (37, 1460) and (37, 1496)), size: 210px*25px, radius 5px, color: #141313, and add the inner shadow style as shown below





Write some text inside the two rectangles with these character settings:
• ##Font Family

  : Arial

• Font size

  : 15px

• Font weight

  : Regular

• Anti-aliasing setting

  : None

##Color
• : #7ea547

Follow The following settings add text inside two rounded rectangles:
Font:
• Arial

Font Size:
• 15px
  ##Font style:
Regular

• Anti-aliased style:
None

• ## Color:

  #7ea547

## Create another rectangle like the ones above, but this time its height will be: 110px. Also write some text inside it with the same character settings above.

Make a copy of the button we've created in step 17. and align it like the following image

Create another rounded rectangle like the above

(37,1533)

, height: 110px. And add the text


inside with the same text settings. Copy the button created in step 17. Place it in the appropriate position as shown below

Step 35

Write another title like the one on the left.

Step 35

Add another title like the one on the left



Write some text . use the image below for reference.

Add some text as shown below



Step 36

Fill the right part with a third title and some text.

Step 36

Fill the right part with a third title and some text.



Step 37

We're almost there! drag a new horizontal guide after 50px.

Step 37

We are still there! Drag a new horizontal guide 50px down



Create two horizontal lines on top of each other, and fill them with these color values : #181818 – #2f2f2f.

Create two horizontal lines next to each other and use these color values: #181818 (top) – #2f2f2f (bottom).



Write some copyright text with these character settings:

• Font Family : Arial

• Font size: 15px

• Font weight: Regular

• Anti-aliasing setting: None

• Color: (#ffffff) – #82aa48

Add copyright information text according to the following settings:

• Font: Arial

• Font size: 15px

• Font style: Regular

• Anti-aliased style: None

• Color: (#ffffff) – #82aa48



Conclusion

There we have it! we've created a professional-looking web 2.0 layout. As you can see the techniques used here are simple. but they get nice results.

Conclusion

We have it! We create professional looking web 2.0 layouts. You can see that simple techniques are used here. But they get good results.



Postscript:

This is the most detailed tutorial I have ever translated, down to every small step. The tutorial is very suitable for beginners to copy and learn.

The highlights of this tutorial are two

1. The production of the picture slider in the featured area, which has a fresh and thorough feeling

2. The production of social media icons, Purely handmade, there is no process of importing images

For more PS web design tutorials XII - Creating professional web2.0 web page layouts in PS, please pay attention to the PHP Chinese website for related articles!