Learn the basics on creating a Web 2.0 Template design for your web.

1. Start by opening a new 800 * 900 px file
2. Create a new layer and make a #4dbce9 to Transparent gradient form top to bottom like in the image below
Adobe Photoshop Free Tutorials

3. Create a new layer again, select the Rectangular Marquee Tool and set a fixed size of 750 * 30px, now place your selection at the top of the canvas and fill it with #000000
Adobe Photoshop Free Tutorials

4. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 750 * 5px, place your selection under your past one and fill it with #444444
Adobe Photoshop Free Tutorials

5. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 750 * 100px, place your sleection under the past one and fill it with #26ade4
Adobe Photoshop Free Tutorials

6. Apply this layer style
Gradient: #26ade4 to #40c1f6
Adobe Photoshop Free Tutorials

7. Create a new layer and using the Text Tool write the name of your site, place it as in the image
Adobe Photoshop Free Tutorials

8. Create a new layer and place it under your text layer, select the Elliptical Marquee Tool and make a selection as in the image below
Adobe Photoshop Free Tutorials

9. Make a White to Transparent Gradient from bottom to top
Adobe Photoshop Free Tutorials

10. Duplicate this layer(Ctrl+J), go to Edit -> Transform -> Flip Vertical
11. Change both layer’s blend mode to Overlay and Opacity to 40%-60%
Adobe Photoshop Free Tutorials

12. Create a new layer and place it over the text layer, select the Rectangular Marquee Tool and use a fixed size of 750 * 3px, place this selection under the blue block and fill it with #000000
Adobe Photoshop Free Tutorials

13. Create a new layer, select the Single Row Marquee Tool and make a selection 1px under the top of the last one, fill it with #ffffff and change this layer’s blend mode to Overlay
Adobe Photoshop Free Tutorials

14. Now we’re going to make the menu, using tabs. You can create a new Group of layers to be more organized.
15. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 60px * 25px, place your selection in the canvas and go to Select -> Modify -> Smooth and use 3px as radius, you will now get the 4 corners rounded, but we only need 2, the bottom ones, select the Rectangular Marquee Tool again but with using a fixed size and press Shift while select the top corners
Adobe Photoshop Free Tutorials

16. Fill your selection with any color and apply this layer style
Gradient: #202020 to #444444
Adobe Photoshop Free Tutorials

17. Duplicate this layer as many times as you need
Adobe Photoshop Free Tutorials

18. Now add text to each button with the Text Tool and a web-safe font(Verdana, Tahoma, Arial..)
Adobe Photoshop Free Tutorials

19. Now let’s continue with the main part, where the content is. First start by makin a container for it. Create a new layer(and a new group if you’re using them) and select your Rectangular Marquee Tool, set a fixed size of 750 * 700px and place your selection underneath the whole layout. Fill this selection with #f4f4f4
Adobe Photoshop Free Tutorials

20. Create a new layer again, select the Rectangular Marquee Tool and set a fixed size of 530 * 650px, go to Select -> Modify -> Smooth and use a 5px radius. Fill it with any color
Adobe Photoshop Free Tutorials

21.Now apply these layer styles to it
Inner Glow
Adobe Photoshop Free Tutorials

Stroke
Adobe Photoshop Free Tutorials

22. Here you can start writing your content, first off the heading. I’m using Trebuchet MS, 18pt and #26ade4 as color
Adobe Photoshop Free Tutorials

23. Write next the content, I’m going to use Lorem Ipsum as fill-up text. Verdana, 10pt and #aeaeae as color, I also added an image to it so it look less empty
Adobe Photoshop Free Tutorials

24. Now let’s add a list. Write a heading for it(duplicate the last heading layer and change it’s text) and make a new text layer with the list text on it. Make some kind of bullet using the Pencil Tool or use any small icon/bullet you have
Adobe Photoshop Free Tutorials

25. I added another list next to it and here’s what you should have done so far
Adobe Photoshop Free Tutorials

26. Now, let’s make the sidebar. Make a new layer group(not necessary) called Sidebar. Create a new layer inside it, select the Rectangular Marquee Tool and set a fixed size of 180 * 650px, go to Select -> Modify -> Smooth and set a 5px radius, place your selection next to the content container and fill it with White(#ffffff)
Adobe Photoshop Free Tutorials

27. Apply the same layer styles as in step 21
Adobe Photoshop Free Tutorials

28. Write “Main” using Trebuchet Ms, 14pt and #26ade4
Adobe Photoshop Free Tutorials

29. Now write a list of links using Verdana 10pt and #aeaeae. After each link place a dotted 1px height line
Adobe Photoshop Free Tutorials

30. To make this dotted lines you can use a pattern, open a new 2px * 1px file and using the Pencil Tool with a 1px default brush draw 1px inside the file(the following image has 1600x zoom)
Adobe Photoshop Free Tutorials

31. Now go to Edit -> Define Pattern and name your pattern whatever you want. Select the Rectangular Marquee Tool and set a fixed size of 150px * 1px, place your selection under your first link, create a new layer and go to Edit -> Fill
Adobe Photoshop Free Tutorials

32. You can add as many links as you need but since this is just an example, I will trow up an ad. This is what you should have so far
Adobe Photoshop Free Tutorials

33. Now, the last part, the footer. Create a new Layer Group called Footer and create a new layer inside it. Select the Rectangular Marquee Tool and set a fixed size of 720 * 20px, place your selection at the bottom of your template but inside of the grey container, go to Select -> Modify -> Smooth and use 5px as radius and fill it with White
Adobe Photoshop Free Tutorials

34. Apply the same layer styles as in Step 21
Adobe Photoshop Free Tutorials

35. Add some links to the footer, or a copyright notice and your done with it
Adobe Photoshop Free Tutorials

36. Your template should be finished by now, thanks for following this tutorial, I hope it helped you understand the basics of creating a web template and if you have any comment/question, don’t hesitate to leave them below :)
Adobe Photoshop Free Tutorials