Learn to create a Web2.0 website template

Tags: lay-out, pink, Web Design, web-2.0

92,323 views

20 Comments

(21 votes, average: 3.9 out of 5)

Before starting this tutorial, be sure you have already created your Web 2.0 logo, and keep in mind if you used different colors that you will want to coordinate them instead of using the colors I do

Step 1
I will be using many of the same techniques too, so some of this should get easier. First things first, create a new canvas, make it 900px x 600px at 72 resolution and a white background. Now let’s make some guides, I do this by bring up the rulers. Do this with the Ctrl+R shortcut. Now to create our first guide, left mouse click into the horizontal ruler and drag downward. You should see the guide, typically depicted as a blue line. Drag it down and line it up with the 120px mark. To stop dragging the guide, simple release the mouse button. If you want to move the guide again, be sure to select the move tool from the tools palette. Do the same thing again, this time dragging the guide to the 200px mark. And one more to the 202px mark, you may have to zoom way in to get this one aligned just right. We have 2 more guides to place, these will be vertical guides and to start dragging these, click into the vertical ruler. Drag the first to the 100px mark, and the second to the 800px mark. You should have something resembling the screenshot below.

Step 2
Create a new layer by clicking the “Create new layer” icon in the layers palette then select the rectangular marquee tool from the tools palette create a rectangle starting at the farthest left and the 202px mark to the farthest right and to the very bottom. Set your background color to #fc2bbb in the tools palette and fill, I use the Ctrl+Backspace shortcut to do this. When finished use Ctrl+D to deselect. Next create a new layer and pick the gradient tool and the color white for the foreground color in the tools palette. Start from the bottom and create a gradient like in the screenshot.

Step 3
Create a new layer and set the foreground color to #434343 and create a very slight and small gradient from the top and another from the 200px mark up, as in the screen shot. Then insert your Web 2.0 logo and resize accordingly, also depicted in the screenshot.

Step 4
Create a new layer then select the rectangular marquee tool from the tools palette and make a selection starting from the vertical 200px mark up ~40px and across to the horizontal 800px mark. Fill with the color #fc2bbb, this will be the base of our nav. Now we want to round the corners. Select the elliptical marquee tool from the tools palette and set the feather to 0px. Look at the screenshot below to see where to make your selection. You can constrain proportions by holding Shift while sizing.

Step 5
Now select the eraser tool from the tools palette, set the diameter to 25px and hardness to 0%. We need to inverse the selection, to do this I use the Ctrl+I shortcut. Now use the eraser tool to round the corner, see the screen shot for reference. Once finished, repeat the step on the right side of the rectangle.

Step 6
Click on the thumb nail of the layer with the base nav element in the layers palette while holding Ctrl, this will make a selection around that element. Then go to “Select > Modify > Contract” contract by 1px. Select the gradient tool and set the foreground color to white, create a slight and subtle gradient starting at the bottom of the selection up. Use the screen shot as reference.

Step 7
Create a new layer then select the elliptical marquee tool, draw a selection like the one in the screen shot.

Step 8
Select the gradient tool and make a gradient starting from the top going down, use the screen shot as reference.

Step 9
Make a selection around the base nav element using the same technique as before, then contract the selection by 1px. Inverse the selection and hit the Backspace, this deletes all the unwanted parts of the elliptical gradient.

Step 10
Select the rectangular marquee tool and make a selection starting from the farthest left at the vertical 120px mark, down to the 200px mark and then all the way to the right. Fill this selection with the color #c9ccd6. You can add the 2px line at the top shown in the screen shot by using the Single Row Marquee tool and the color #3b3f4d.

Step 11
At this point, you know how to create rectangles and round the corners like in Step 4. Select the rectangular marquee tool and make a selection starting from the horizontal 100px mark at the vertical 202px mark down to the ~500px mark and across to the 800px mark. Round the bottom corners. Using the screen shot, create 2 rectangle selections inside this rectangle and fill the top one with the color #bed2ff and the bottom with #545454. As you can see I used gradients with slightly darker colors starting from top to bottom on both rectangles. This will be the base content layer.

Step 12
Create a new layer under the base content layer and use the method in Step 6 to create a selection around the object in the base content layer. Fill the selection with black. Then go to “Filter > Blur > Gaussian blur” and set the radius to 3.8px. Use the rectangle marquee tool to make a selection from the farthest left at the vertical 120px mark all the way up and over to the right, hit Backspace to delete this selection. You should have something like in the screen shot.

Step 13
Next, lets put the menu items into the nav. Create a new layer and select the text tool from the tools palette. Select the desired font, keep in mind that Trebuchet is a wildly popular Web 2.0 font. Type out the items and set the font size to 17.88pt, you can use the move tool to position the type according to the screen shot. Once positioned, right click on the texts layer in the layers palette and select “Blending options”.

Step 14
Click on drop shadow and configure the setting to match the screen shot.

Step 15
Now we add a few finishing touches like fake copy and some extra content pieces and we are done!

Copyright @ Norica 2007