Sorry its been a while since the last tutorial, but lets go ahead and get started This will be your final result
1. First thing we want to do is create a new document with the dimensions of 1024×810.
2. Using your Paint Bucket Tool fill your background with #15181C
3. Next use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #121518. This will serve as the background to your navigational menu.
4. Now choose your Text Tool and make some links similar to the following
5. We want to go ahead and create our ‘dividers’ between each links. Make a 1px wide selection similar to the following and fill it with #1C2024.

6. Now create a new layer and make a selection similar to the following and fill it with #717070

7. Go ahead and create those dividers in between all your links and you should have something that looks like this
8. I went ahead and added in a simple text logo. The first part is #FFFFFF, and the second part is #13B71E

9. I searched sxc.hu and found a nice and simple stock photo to use for the purpose of this tutorial.
10. To split up the navigational menu and the stock photo, make a new layer above your stock photo and make a white bar across the top

11. Depending on the picture, you’ll want to lower the opacity to about 30%.
12. To add something to the stock photo I went ahead and added some text. It can be a slogan, or just any line of text you want.

13. I used these blending options onto the fonts layer
14. The content area and footer are pretty self explanatory for this simple layout. The background for the footer and the ‘Web Design’ and ‘Print Design’ box are #121518.
15. Your final result should look something like this
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.


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


















Loading...
22 Responses
pfaudere
Very nice design. Extremely clean and efficient. I could definitely stand to see more of this type of layout.
Murray
^^^ Agreed, very slick.
Abraham
PERFECT DESING, PERFECT !!!!!!!
Hello, i have a question:
How to create a link button in web layout, in photoshop?
Thanks.
Matthew Heidenreich
@Abraham
You would have to slice and code it. I currently do not provide any tutorials yet on how to do this, but you can visit this post to get you in the right direction
http://psdvibe.com/2009/03/03/13-tutorials-for-turning-your-psd-into-xhtml-and-css/
Elias
Excellent tutorial. Thanks and keep up the great work.
psaddict
Added to http://www.psaddict.com
Eric Shafer
@Matthiew: If you ever get the time, doing a web design and coding it tutorial would be pretty sweet. Particularly if you can do one that follows the standards of the day. I’ve noticed that a lot of PSD to HTML/CSS tutorials out there either don’t follow any xHTML standards, or they break in either IE or FF, and they just overall suck.
Matthew Heidenreich
yeah, i am not the ‘best’ at writing coding tutorials, so eventually I will actually be paying people more qualified to write some coding tutorials for the site. Once i start getting some revenue I will be dumping it all into the site to provide better content
and that means coding tutorials
Colorblind
Great work Matthew. I just love every design and interface that you create.
Keep up the good work !
Cheers
Anto
Designs are nothing without content. But in this case less content goes well, keeps things clean.
Good work Matt
Eric Shafer
Hehe, can’t wait Matt.
Featured here: http://www.presidiacreative.com/web-picks-17/
Matthew Heidenreich
thanks for the link Eric
Doug
Very nice design; clean efficient, love it.
Brochure Printing
Very nice! The layout is clean and organized. Simple yet striking, and very professional. Thanks for sharing this!
CgBaran Tuts
Nice layout for business websites
Marc
Nice layout!
landrew
amazing! very simple but nice layout
VASILIS
This is the perfect layout good work.
dental products
The layout is really good. Neat, clean and very nature loving. Thanks for sharing!
JAAN
Nice design!!!!
Leonard Casci
very profesional! nice design.
jp
superb.
great help, thank you for your efforts.