In this tutorial, you will learn how to create your own Web 2.0 layout.

Step 1. To begin, open a new document.

Size: 800 x 700 pixels
Background Color: Transparent

Step 2. Create a new layer and name it header. Using the Rectangular Marquee Tool, make a selection at the very top of the document that spans the entire width and is about 70px high. You can use Photoshop’s built-in rulers to help (Ctrl+R).

Once you have created your selection, fill it in using any color.

Step 3. Right-click on the “header” layer and select blending options.

You can also access the blending options by clicking on the layer style icon in the bottom left-hand corner and clicking on blending options.

In the styles section on the left, click on Gradient overlay. Apply a gradient overlay using the settings below.

Step 4. Create a new layer. Use the Rectangular Marquee Tool to make a selection
directly under the header. This selection should be about 3 px tall and should span the entire width of the document. Set your foreground color to #67ae1b. Select the Paint Bucket Tool (G) and fill your selection with this green foreground color.

Step 5. At this point we are going to step ahead for just a moment to create the footer because it is basically a duplicate of what we’ve just created. So, select all of the layers in your pallette.

You can do this by holding shift and clicking on both layers. Right-click on one of the layers and click on “Duplicate Layers”. This will create a replica of both layers. While these duplicated layers are still highlighted, right-click on either one and select “Merge Layers”. Name this merged layer “footer”. Move this layer to the very bottom of the document.

Now, transform this layer by clicking Ctrl+t. Right click on the selection and click
“Flip Vertical”. You should now have a nice header and footer in your layout.

Step 6. Ok, it’s time to get back to the header. Create a new layer and name it “Shadow”.
Using the Rectangular Marquee Tool, make a selection directly under the green line. Your selection should be about 50px high and should span the entire width of the document. Fill
this selection with white (#FFFFFF). Apply a gradient overlay using the settings below.

Set the opacity of the shadow layer to 80% and the Fill to 30%.

Step 6. Now it’s time for the navigation menu. Create a new layer and call it “Navigation”.
Select the Rounded Rectangle Tool and change the Radius to 25px and the color to white.
Use the Rounded Rectangle Tool to create a navigation menu like the one below.

Rasterize this shape.

Let’s style the menu with some blending options.

Step 7. Now let’s create the content area. Create a new layer and name it “Content”.
Select the Rounded Rectangle Tool, using a radius of 25px and the color white.Use the Rounded Rectangle Tool to create a content area like the one below.

We’re going to use the same style of the navigation menu to the content area. To do this, you need to right-click on the “navigation menu” and select “Copy Layer Style”.Now right-click on the “Content” layer and select “Paste Layer Style”. Your layout should now look similar to the following.

Step 8. Now that you have completed most of the overall design, let’s fill it with some content. First, we’re going to add some links to the navigation menu. BelowI have used Verdana font with a text color of #343d46. The text size is 12px.

Now label the categories with a header that is 18px with font color #aeb0ab.

Step 9. Add a dotted border below each link. To make this dotted line you will need to open a new document.

Size: 2px x 1px
Background: Transparent.

Zoom in 800% using Ctrl and the + key.

Use the Pencil Tool with a 1px brush to draw 1px inside your canvas using the color
#aeb0ab.

Here is how it should look.

Now go to Edit > Define Pattern and name your pattern.

Switch back to your layout area. Create a new layer and call it “dotted line”. Use the Rectangular Marquee Tool to select a 1px selection below your first link.

Select the Paint Bucket Tool and fill the selected area with the pattern you just created.

Copy and paste your dotted line below each link.

Step 10. Now we’re going to add a green arrow beside each link. Click on Custom Shapes and select Arrow 2.

Create a small green arrow beside each link. Create one beside “Link 1″ and then simply
copy and paste your image beside each link. To help align each arrow correctly, you may
want to use the Grid tool (Ctrl+’).

Step 11. Now it’s time for the fun part… the logo! Create a new layer and call it “logo”.

In the top, left-hand corner, you’re going to place some white (#FFFFFF) text. I’ve used 26pt Alba font.

Once you’ve placed your text in the upper left-hand corner, apply some styles using the following blending options.

You should now have a completed Web 2.0 layout that looks like the following.

Congratulations!

In the future, I will be creating Wordpress themes. If you would like me to turn this layout into a Wordpress theme, please say so in the comments.

Filed under: Photoshop by Kim