CreateaProfessionalWeb2.

0La out
Mahmoud on Feb 15th 2010 with 406 comments

TutorialDetails
Program: Adobe Photoshop Difficult : Intermediate Completion Time: 2 hours

DownloadSourceFiles
Source files for this tutorial are available to Premium members. Get a Premium Membership

FinalProductWhatYou'llBeCreating

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

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

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

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

Step4
Lets create our header. well start by creating a selection of 1020x100px. then click Shift+Backspace to fill it (with any color just for now).

Give it a Gradient Overlay according to the following image:

Now call this layer: header_bg.

Step5
Write your Web site title with these settings: Font Famil : Rockwell (get it from here) Font si e: 30px Font weight: Regular Anti-aliasing setting: Smooth Color: Wont matter, cause were gonna give it a Gradient Overlay

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

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

Step6
Write your navigation text with these settings: Font Famil : Arial Font si e: 20px Font weight: Regular Anti-aliasing setting: 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).

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

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

Step7
Its time to create the featured designs area. well start by setting our lower borders by adding a new horizontal guide after 430px.

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

Then give it a Gradient Overlay with the following settings:

Now lets create the glaze effect! create a selection of 1020x120px, fill it with any color.

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

Now reduce this layer opacity to 40%

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

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

I guarantee youll have perfect pixel details

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

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

Write some welcoming words with these settings: Font Famil : Rockwell Font si e: 40px Font weight: Regular Anti-aliasing setting: Sharp

Color: #f4f4f4

I personally have written: Heres our brand new work. Oops Welcome! but we need to emphasize the word Welcome! in somehow. so basically well give it a Gradient Overlay. follow up with the image

Now drag two new horizontal guides according to the following image

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

Step10
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

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

Step11
To create our shadow, well 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 were 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!

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

Write some description with these character settings: Font Famil : Arial Font si e: 15px Font weight: Regular Anti-aliasing setting: None Color: #82aa48

Make sure to keep your document tidy!

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

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

Well also give it a Stroke. use the following image for reference

And heres what weve got!

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

Step14
Lets create our sliding button! well 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

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

You should have something like this

Dont forget to align your button according to the following image

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

Step15
Lets work on the content area. start by creating a selection of 1020x815px

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 youre having perfect pixel details!

Step16
We need to set upper borders to our content area. therefore were 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 Famil : Rockwell Font si e: 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 Famil : Arial Font si e: 15px Font weight: Regular Anti-aliasing setting: None Color: #2f3235

Drag more three guides according to the following image

Step17
Its 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.

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

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 rectangles 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 Famil : Tahoma (get it from here) Font si e: 12px Font weight: Regular Anti-aliasing setting: None Color: #ffffff

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

Step18
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

Dont forget to organize your layers. take a look at mine!

Step19
Make three copies of what weve created in the previous two steps. and have something like this!

Step20
Lets 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.

Step21
Well start working on our lower content area, by dragging a new guide after 50px.

Add a title with these character settings:

Font Famil : Rockwell Font si e: 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 Famil : Arial Font si e: 14px Font weight: Regular Anti-aliasing setting: None Color: #505150

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

Step22
Write another title and text using the same character settings weve used in the previous step.

Type a quotation mark on your keyboard, with these character settings: Font Famil : Arial Font si e: 200px Font weight: Regular Anti-aliasing setting: Smooth Color: #505150 And reduce its layers Opacity to 50%

Write a word of wise or quote of yours with these character settings: Font Famil : Arial Font si e: 14px Font weight: Italic Anti-aliasing setting: Smooth Color: #81aa48

Step23
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, Heres how I organized them.

Step24
Write yet another title like the ones on the left (Try writing something that represents the team, for example Ive written Our Team).

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.

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!

Step25
Write some text about the member, using these character settings: Font Famil : Arial Font si e: 14px Font weight: Regular Anti-aliasing setting: Smooth Color: #7ba344

Well create the social media icons ourselves! lets start with Twitter, Type t letter with these character settings: Font Famil : Pico-Black (get it from here) Font si e: 30px Font weight: Regular Anti-aliasing setting: Smooth Color: #2fcfff Then Give it a Stroke according to the following image.

Lets create the LinkedIn one! Type in word with these character settings: Font Famil : Myriad Pro (get it from here) Font si e: 30px Font weight: Bold Anti-aliasing setting: Smooth Color: #0081ac

Facebook!? Type f letter with these character settings: Font Famil : Klavika (get it from here) Font si e: 30px Font weight: Bold Anti-aliasing setting: Smooth Color: #395796

Step26
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 weve written before using the same character settings, but give them all this color value: #505150.

So obviously the member will look gray when its not hovered! Make two copies and align them this way

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

Ive organized my layers, you?

Step27
Before we start working on the social media links area, we need to set some borders, thats why well drag two new guides according to the following image!

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 rectangle of 70x45px. 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 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.

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

Write t letter with these character settings: Font Famil : Pico-Black Font si e: 35px Font weight: Regular Anti-aliasing setting: Smooth Color: Wont matter cause were gonna add a Gradient Overlay Also give it some layer styles according to the following image.

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

Step29
Write some text which is actually should be a Tweet with these character settings: Font Famil : Arial Font si e: 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.

Step30

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 Famil : Pico-Black Font si e: 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.

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

Write the word in with these character settings: Font Famil : Myriad Pro Font si e: 35px Font weight: Bold Anti-aliasing setting: Smooth Color: white (#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.

Write f letter with these character settings: Font Famil : Klavika Font si e: 35px Font weight: Bold Anti-aliasing setting: Smooth Color: white (#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.

Write the word fr with these character settings: Font Famil : Frutiger Black (get it from here Font si e: 35px Font weight: Bold Anti-aliasing setting: Smooth Color: f: #0079d2 r: #ff3093

Put each of the icons in a separate group, and while selection the four of them click on Distribute left edges .

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

Apply a Gradient Overlay to it. use the image below for reference.

You should have a nice shadow!

with the Single Row Marquee Tool (M) create a 1px selection and fill it with white (#ffffff).

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

Write a title with these character settings: Font Famil : Rockwell Font si e: 30px Font weight: Regular Anti-aliasing setting: Sharp Color: #7ea547

Write a sub-title with these character settings: Font Famil : Arial Font si e: 15px Font weight: Regular Anti-aliasing setting: None 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.

Align it this way.

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

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

Write some text inside the two rectangles with these character settings: Font Famil : Arial Font si e: 15px Font weight: Regular Anti-aliasing setting: 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 weve created in step 17. and align it like the following image

Step35
Write another title like the one on the left.

Write some text. use the image below for reference.

Make two copies of what youve done.

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

Now your footer should look like this.

Step37
Were almost there! drag a new horizontal guide after 50px.

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

Write some copyright text with these character settings: Font Famil : Arial Font si e: 15px Font weight: Regular Anti-aliasing setting: None Color: white (#ffffff) #82aa48

With the same character settings write a sub-navigation.

Make sure to organize your layers and group them together. Heres how mine looks!

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

I really have tried to explain every single thing carefully. However, if youve faced any problems please dont hesitate to ask for help, just drop a comment and Ill do my best to help.
Like 263 like .

B Mahmoud
A web and graphics designer from Egypt. Hes also a blogger and tutorial writer, at a young age of 15. Send him a tweet @MahmoudKhaled, Connect with him on Facebook, or visit his site and blog called mkhaled.com.