This will be your final result
1. The first step is to create a new document with the dimensions of 1024×1000. The size of your document may vary on your choosing.
2. The next thing we want to do is to go ahead and use our paint bucket tool to fill our background layer with #424347
3. Next, using your rectangle marquee tool, make a selection spanning the top of your document that looks similar to this and fill it with #353638.
4. We then want to add a inner shadow to this layer. To do so, right click its layer in the layers pallet and choose blending options from the drop down menu and insert the following
5. In the top right, I decided to add a little text showing the address to our business. The color of the font I used is #999a9a

6. The next step is adding our navigational buttons at the top. Go to your tools pallet and use your rectangle marquee tool to make a selection similar to the following and fill it with any color you’d like
7. Now we would like to add some blending options to our layer, so insert the following onto your layer
8. Next lets go ahead and choose our text tool from our tools pallet and insert a title for our button. I used the color #B1EE85 for my font

9. We then want to make a subtitle with the color #A4A5A7, and then place a number in the top left corner showing which number button it is

10. Just repeat steps 6-9 and you will have something that looks similar to this
11. The the extra space to the left, I added a little text logo with a slight gradient.

12. For the blue gradient I used the following blending options on its layer
13. And for the green I used these blending options
14. Next lets go ahead and make the background to our sidebar, and to our main content display area. Using your rectangle marquee tool, or rectangle tool, make two rectangles similar to the following and fill them with #353638
15. Then go ahead and make a footer area for your design. Fill it with the same #353638
16. Now all thats left is to plop in some content and some text and your layout is finished.

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





















16 Responses
psaddict
Added to http://www.psaddict.com
m3tal
love it.
thanks
greg
simple yet delicious.
Shiriyal
Nice tutorials fantastic
DarkWolf
Awesome tutorial !
Thank you.
HirenModi
thanks for this nice tut
Delftdirk
Great tutorial, i really enjoyed making it
I have one question, how exactly do i put this into a html document ?
I know i have to make slices but then what ?
Business Cards
Nice! The color’s a little too dark for my tastes, but the layout is really clean and neat. Thanks for sharing this tutorial!
Magda
Really nice. Thank you
Johan
What font is used?
kostas sidiropoulos
I like it too much.Perfect colors for a gallery.
VASILIS
NICE
LAZY
DUK
best gambling site web casinos
Excellent tutorial! I love the design, it’s clean, uncluttered, yet it still looks sleek and stands out. I even like the use of the color pink, and I’m not a pink fan haha
Thanks for sharing this awesome tutorial! Great job!
Igor
This is fantastic tutorial ! ! !
Leonard Casci
Loved it!! keep it up!