This will be your final result
1. The first thing we want to do is create a new document with the dimensions of 1024×776.
2. Using your Paint Bucket Tool from your Tools Pallet go ahead and fill your background layer with #F1F8F9.
3. I like to start from the top and move my way down, so lets start on our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.
4. Next we need to add some blending options to this layer, so right click its layer and choose Blending Options from the drop down menu and insert the following
5. Now I wanted to add some halftones to our header to give it a bit more detail. I have provided you with the halftones and they can be found in the source files. Once you put it on your header, change its blend mode to Soft Light, and lower the opacity to 21% and it will look something like this
6. We now want to add a little ‘glow’ that will be behind our logo. Using your Elliptical Marquee Tool, make a selection similar to the following and make sure your feather is set to 18px and fill it with #FFFFFF.

7. Change the blend mode of your glow to Overlay, and then lower its opacity to 50% and it will look something like the following

8. For the logo I used the font Myriad Pro and laid my text out like the following. Make sure your tag line, and business name are on their own layers. On the “Squared” I have it set to “regular”, and the “Studio” is set to Bold.

9. On the “SQUAREDSTUDIOS” layer, insert the following blending options
10. I added a cheesy square to go along with the name, and this is what I came up with

11. Now it’s time for our navigation. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF
12. Insert the following blending options on the layer you just created
13. Now we need to make a little 1px high highlight, and a 1px high shadow to give it some depth. The top color is #2C9CD3, and the bottom is #FFFFFF.

14. When you zoom out it will look something like this
15. Links are all that we need now. We want to go ahead and get our active link out of the way, and how it will be shown. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #B7B7B7.

16. Now insert the following blending options onto its layer
17. For my text I used Helvetica with the color #525252 and after adding some links your header should look something like this
18. Next we are going to make our ‘featured’ area, where we will be displaying our latest work. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000
19. Insert the following blending options onto its layer
20. We want to have a nice 1px highlight at the bottom, so make a 1px high selection going across the bottom of the box you just created and fill it with #FFFFFF. Lower the opacity of its layer to 35%, and it will look something like this

21. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF
22. Now insert the following blending options onto its layer
23. It will look something like this after you add a thumbnail preview, and some text.
24. The last thing we need to do is add some buttons so users will be able to selection “previous, next, etc”. Using your Rounded Rectangle Tool, make a Rectangle similar to the following

25. Now insert the following blending options
26. Using your Text Tool, now add some text similar to the following with the color #323232.

27. Insert the following blending options onto your text layer
28. All you need to do is do that again for a “view entire portfolio” button, and your layout will look something like this by now
29. Time to move onto our content area. The first box we are making is a place for you to put a quote to get the attention of potential clients. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF
30. Now insert the following blending options onto its layer
31. For the “quotes” I used the color #B7B7B7, for the text I used #525252, and for the blue text I used #2590CE. I placed it in the following manor
32. The next box will be for putting a short description about yourself, or company. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF
33. Now insert the following blending options onto its layer
34. For the title I used the font Myriad Pro with the color #2590CE, and for the dots and the description I used #525252 with the font Helvetica. The icons are from a free icons pack that you can download here.

35. I then did the same thing for a “services” box.

36. The last step is adding a footer. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #B7B7B7
37. Insert the following blending options next
38. All that is left is to add some text and your done! This is what your final result should look like

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















































20 Responses
nhoss2
the final result picture is missing :S
nhoss2
err.. now its not.. something is probably wrong with my browser or something
psaddict
Nice work!
Added to http://www.psaddict.com
huwaw69
i liked the header if this layout the polka dots effect hahaha this is really great layout…
Andi
Again, nice template.
Grafpedia
Great tutorial. Keep up the good work
piervix
Great layut…simple but useful for company web site…
See also my free css template with tutorial:
http://www.pvmgarage.com/2009/05/designschool-coded-guida-per-realizzare-un-semplice-layout-xhtmlcss
ProfeCompu
Thanks for the detailed tutorial. Nice clean design
Jindent Chan
step 4 gradient color error
Markom Dizajn
Thanks, nice and simple, good for beginers like me
Freddie
Thank you very much! It’s a really simple and beatiful Project.
Web dizajn sajtotekar
Simple, elegant, very stylish and clean layout design, that’s what I need. Matthew Heidenreich, I like your thoroughly detailed tutorial for Photoshop and above all, appended psd file for download. Thanks for good work.
Kiper IT-konsult
Great tutorial again, Matthew!
I am really impressed by you.
You are both a skilled designer and a good teacher. That is a rare combination.
I wish you best of luck!
Mark
I guess me and J. Chan are the only ones that actually tried doing this.
The gradients in step 4 are wrong. #111111 and #454545 are not shades of blue.
moha
can you also make a tutorial with a descirption how you code this
Karel Zeman
Error found when i try to open this file in Adobe Photoshop 7.0
(Unknown data has been encountered reading layer “site box” and will be discarded continue?)
this is the error that i found and after that when i continue it never ends, until i have to close Photoshop forcefully.
Jean-Baptiste Jung
@Karel Zeman: Weird, maybe it is a compatibility issue (PS7 is quite old now) or it is windows, as always
dodo
I used this tutorial for my navigation bar, I think it’s beautiful
but I have problems with the rollover part for dreamweaver without having to chop the bar to pieces
any tips?
Herceg Novi
It looks a very useful tutorial, but I couldn’t use it with my older version of PShp. Any experience with versions it works with?
Akshat
How did you get shine in pink square.. :S