This will be your final result

1.The first thing we need to do is create a new document in Photoshop with the dimensions of 1024×998

2. Next lets go ahead and change our background color. Go to your Tools Pallet and choose your Paint Bucket tool and fill your background layer with #E3E8CF

3. Using your Rectangle Marquee tool make a rectangle similar to the following and fill it with #70AFC4

4. Now lets go ahead and make a 1px high selection at the bottom of our newly created rectangle spanning the whole document and fill it with #E3E8CF and lower the opacity of your layer to 55%

5. Next lets go ahead and create a text logo. For “Website Gallery” I used the color #17404E, and for the tagline I used #E3E8CF

6. Lets go ahead and create some navigational buttons now. Using your rectangle marquee tool make a rectangle similar to the following and fill it with #427383.

7. Now right click that layer and choose blending options from the drop down menu and insert the following blending options

8. Add some text and your button will look something like this

9. Now just go ahead and repeat steps 6-8 and you should have something that looks very similar to this

10. Next we want to go ahead and make the content boxes for our content. The top left with be our featured box, top right is our sponsors box, and the large box is for our website gallery listings.

11. Go ahead and apply the following blending options to all of your content boxes

12. For the featured box I used the color #C5617B for the pink stars, and for the gray stars I used #6e686a. You want users to know that it is a featured box, so I labeled it with the vertical text on the side. I used the font Helvetica Neu #FFFFFF with the opacity set to 80%. Once you place your content in it, it will look something like this

13. Next lets work on our gallery area. We want to give it a label similar to our featured area. Using the same method write the word “Gallery” vertical next to your content box with the font color #70AFC4. Then lower the opacity of the layer to 80% and it will look like this

14. Now we are going to work out how our websites will be displayed in the gallery. Using your rectangle marquee tool create a selection similar to the following and fill it with any color.

15. Now insert the following blending options onto its layer

16. Using your rectangle marquee tool create a rectangle similar to the following and fill it with #000000. Then lower the opacity of that layer to 50%

17. Again make another rectangle similar to the following with your rectangle marquee tool and fill it with #000000. Then lower the opacity of that layer to 30%, and make sure its on top of the last rectangle you created.

18. Now go ahead and add a thumbnail preview, and some text and stars for ratings similar to the ones in our featured area. You will then have something that looks like this

19. Then all I did was repeat the steps for the gallery view, and then repeated steps 3 and 4 for the footer area. I then added some copyright information in my footer and it should look something like this

20. You could stop there, but I want to go ahead and add some texture to our template. I used this cardboard texture for my header and footer, and then this cardboard texture one for the center of the background.

For my header and footer, I lowered the opacity to 35%, with the blend mode set to 35%. Then for the center of my background, all I did was set the layers blend mode to Overlay. Your final results will look something like this

 
Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors