This will be your final result
1. The first thing we want to do is open up Photoshop and create a new document with the dimensions of 1024×998.
2. Next lets go ahead and change our background color. Using your Paint Bucket Tool fill your background layer with #CCD8E1
3. Now we want to start off by creating the banner in our header. Using your Rectangle Tool create a rectangle similar to the following
4. Now right click your rectangles layer and choose blending options from the drop down menu and insert the following
5. Next we want to add a little ‘shine’ to the top of our banner. To do so make a 1px high selection across the top of the banner and fill it with #FFFFFF on its own layer. Using your arrow keys nudge it down 1px, and it will look something like this
6. Now just change that layers blending mode to Soft Light. I chose to leave the opacity at 100%, but you can modify it as you like.
7. I then added some dummy text, where you can provide a short description of your company. Next use your Rounded Rectangle Tool with the radius set to 5px and make a rounded rectangle similar to the following

8. On your Rounded Rectangle layer insert the following blending options
7. Go ahead and place some text on your button and add a little reflection and it will look something like this

8. Now just repeat those steps and you will have something very similar to this

9. For our logo we want to have something terribly simple. For the ‘Design’ I used the color #62686D and for ‘Studio’ I used the color #8ABC16

10. Now insert the following blending options onto our text logo layer
You will have something that looks like this when your complete

11. Next we want to go ahead and add some text for our links in the right. For the text I used the color #3E4041

12. We want to go ahead and show what an active or a hovering link will look like. Using your Rounded Rectangle Tool with a radius set to 3 to 5 pixels make a rectangle similar to the following under your ‘Home’ text.

13. Now lets go ahead and right click that layer and insert the following blending options
14. Your header should now look something like this
15. Now we want to go ahead and make a selection from the bottom of our banner to the bottom of our document. Fill it with any color and then insert the following blending options onto its layer

16. All thats left is to organize your content in a way you wish. This is what I came up with
17. And thats it! 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






















33 Responses
Mike Meisner
Another great tutorial and layout. Thanks and keep em coming.
psaddict
Added to http://www.psaddict.com
sonja (hophnung - twitter)
thx dude
cheers from germany..keep up the good stuff!
Paul Morales
Nice simple layout. Thanks I learned a bunch.
Matthew Heidenreich
happy you enjoyed!
binocle
Nice tut’, simple and well explained.
However I think that someone who really needs such a basic tutorial to realize its own site don’t run a design studio…
Matthew Heidenreich
@binocle
Its not really the fact of using it word for word and using it for your own site, but just learning others techniques for different areas.
Nokadota
This isn’t bad for a beginning designer. Nice tutorial.
Mark Joudrey
Hey, I’m having a lot of trouble figuring how I can get this online. I loved the tutorial. Looks amazing once I finished
Can someone help me get this up and running? My email is markjoudrey78@gmail.com
Thanks for the tutorial and whoever helps me get it up and running =) =)
joyoge designers' bookmark
nice tutorial thanks..
Marocplus
Thank you for
mushroom
I like this washed colours.
Great tutorial
CgBaran Tuts
Great tutorial
Grumar
What is the font used in this tutorial.
Matthew Heidenreich
I believe Helvetica is the font used in this tutorial. If it is not Helvetica (which i’m positive it is), it would be Myriad Pro
Grumar
Thx
Mohammed Zatari
great tutorial. thx
Alex
Hello, great tutorial, used here! http://alex-e.deviantart.com/art/John-Doe-Portfolio-120426283
Pyter
Fonts .. ?
Matthew Heidenreich
All fonts used are either Helvetica or Myriad Pro. Hope this helps
photo retouching
Great tutorial, nice looking layout
kasmi
thanks alot man….
I appreciate your work
Lek za sidu
Nice tutorial, but I really think you should add font info in step 7 and 9 (btw you have step 7 and 8 doubled) and in step 7 (the second one) it would be nice if there was some instruction about the best way or easiest to make that reflection.
Other than that, nice little tutorial
Wine Tours Italy
Great tutorial and layout. Thanks!
AB Web Design, LLC
Clean layout, centered, large text, visually stimulating…very web 2.0. I like it!
Froz
Thanks for the tutorial! Something that might help others maybe would be to add screen shots and locations of where to use guides. It would help keep things aligned better and help people new to photoshop I think. Here’s what I came up with: http://www.flickr.com/photos/42479544@N04/3922656906/ Thanks again!
Viktor Hanáček
Great simple design!
Ruhul Ali
Hi, I would just like to know the protection on this tuturial. Is it OK for me to produce this website from the tutorial change a few things, add my own content logo etc then upload to my server and use as my own site. Is this OK? please remember that I shall not be just downloading the files and uploading straight to web but actually making the site from scracth using the instructions from the tutorial and then using it.
Thanks and I look forward to your response.
Ruhul
Jean-Baptiste Jung
@Ruhul: You have to get a licence for that. Licence only cost $29 for an unlimited use.
Marcos Watanabe
Nice tutorial.
Chris
How do you apply this to a widescreen? e.g not a centered layout. Would the gradient header be repeated-x?
Tutorial Lounge
excellent work in whole tutorial.
Shaleen S V
Excellent list! These tutorials will surely help me to improve my skills. I have been working on Photoshop but I never had a proper idea how to create a website layout. Thanks for the mention. The “Dark Style Web Template” is also good.