This will be the final result
1. First thing we want to do is create a brand new document with a size of 1000×280.
2. I went ahead and made the background color #1c1c1c.
3. Next we want to go to our tools pallet and choose our rounded rectangle tool. Set the radius to 10px and create a rectangle similar to the following (doesn’t matter what color as we will be changing it later)
4. Now we want to go ahead and add some blending options to this layer. To do so, right click the rounded rectangles layer and choose blending options and insert the following:
5. Next, we want to add our logo. So use any font of your choice and place your text on the left of the rounded rectangle. For this tutorial, i’ve used the PSDVIBE logo.
6. Now we want to create the input boxes for our login area. To do so pull out your rectangle marquee tool and make a selection similar to the following and fill it with #FFFFFF

7. Next lets go ahead and right click that layer and choose blending options and input the following onto its layer
8. You can then place some text on top of the box and it will look something like this
9. Go ahead and repeat steps 6-8 for a password box and you’ll have something that looks like this

10. A login box isn’t much use if you don’t have a login button, so lets use our rectangle marquee tool to make another selection similar to the following and fill it with #FFFFFF

11. We want to go ahead and add some blending options, so lets input the following
12. Next we want to add a little shine to our button. Make a selection similar to the following and then fill it with white on its own layer

13. Lower the opacity to 20% and add some text. You’ll have something that looks like this

14. Using the same steps for the login form, you can then make a search form. This is what I came up with:
15. The last thing we need to do is create a navigation menu for our newly created header. I placed the following layers under my rounded rectangle layer so i could have some run off. Go ahead and use your rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF
16. Next, right click that layer and input the following blending options:
17. Now just add some text using a simple typeface (helvetica for example), and use a slight drop shadow for its blending options
18. Your document should look something like this when you are 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. Be sure to visit our contact page if you have an idea for a tutorial you’d like to see.

























20 Responses
David
Very nice tutorial, it was very easy to follow!
Cam
Great Tutorial, fantastic end result!
psaddict
Added to http://www.psaddict.com
helpfullhand
Just a detail, but you putted a Search button behind a Login…
Matthew Heidenreich
Thanks for noticing. I guess i just over looked that when i wad making it
Mark
Thanks! I can use this for a project I’m working on!
Alicia
Great tutorial!!! … If its not a bother, may I ask; what’s the name of the tex you used for the green “psp vibe” logo?
Matthew Heidenreich
no worries Alicia, its called vintage.
http://www.dafont.com/vintage.font
Alicia
Thank you Matthew. Much appreciated! =D
khanji
Great tutorial, keep it up
BD
Can you tell me all the different fonts you used on the tutorial?????
Matthew Heidenreich
I use the font Vintage for the PSDVIBE logo, and for the rest I used Helvetica I believe. Hope this helps
Kristel van den Akker
Great tutorial! Easy to follow… Basic but usefull… Love it!
keith
hey how to [ut code in it??
srinivas
it is very good.
Business Card Printing
Nice! The effect is very neat and sleek. Your tutorial is as always, one of the best. Keep up the good work@Thanks!
CgBaran Tuts
Good work nice tutorial thanks.
mahmoud
good tutorials nice & thanks