Clean Professional Header

In this tutorial you will learn how to create a professional and simple red header with navigational menu. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

This will be your final result

1. First thing we want to do is create a new document with the dimensions of 1024×180.

2. Chances are your background will be #FFFFFF by default, so lets go ahead and use our paint bucket tool to fill it with #000000 (black).

3. Next, make a selection with your rectangle marquee simlar to the following and fill it with #FFFFFF. You can also use your rectangle tool if desired.

4. Now on that layer insert the following blending options



5. You should have something that looks like this

6. Next thing we want to do is create the back of our horizontal navigation bar. Using your rectangle tool make a rectangle similar to the following filled with #FFFFFF

*Note, you want to overlap the stroke on the rectangle you previously created.

7. Now on your newly created rectangle, insert the following blending options onto its layer


8. Your document should now look something like this

9. Next use your rectangle marquee tool to make a selection similar to the following and fill it with #000000

10. Lower the opacity of that layer to around 21%, and you’ll have yourself a nice little shadow

11. Now lets go ahead and add some text to our navigation bar. Our active link will be #2e2d2d and our non-active links will be #FFFFFF

12. We are going to have a sort of ‘tab’ behind our active link. So using your rectangle marquee tool, create a selection similar to the following and fill it with #FFFFF on a layer below your font.

13. Lets go ahead and add a little gradient to that layer, so input the following


14. Now lets go ahead and make a search box. First thing we want to do is make our input field. So using your rectangle tool with a foreground of #FFFFFF make a rectangle similar to the following

15. We want to add a little stroke, so right click its layer and input the following

16. Next lets make our search button. Using your rectangle tool again, make another rectangle similar to the following

17. Now insert the following blending options onto that layer



18. Now i just added a little gloss to the button and added a simple magnifying glass icon I pulled from the default photoshop shapes pallet and this is what I came up with

19. The last thing I did was to add a little logo (used Helvetica Neu) and added a couple simple square buttons to the top right and this is what I came up with

 
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

Show Some Love
Thank you for your support

28 Responses

  • ayesh

    nice tutorial.thx 4 the tutorial.we need more tutorials from u all.
    l

  • Marco

    Thank you for your tutorial, it is very easy to folow up, and very understanble

  • best-tutorials.org

    Add to best-tutorials.org

  • Karen's coffee shop Cairo

    Thank you so much for your tutorial. I love the colours.
    Looking forward to learn more from you.

  • File

    Cant download the PSD…..

  • stevn brown

    all your tutorials are based on simple headers and navigations, id like to see some more tutorials that i can get my teeth into. Once you’ve made one header and nav bar you can make them all. theres nothing fantastic about them.

    overall goodly written tutorial, keep it up.

  • ady

    I can’t download the psd file. A 404 error is displayed

  • ghawyy

    wow wow you always make lovely design look like that great one

    i apply it now and its look like so so nice i really love ur works thanks mate i wait more and more lovely tuts thanks again

  • Matthew Heidenreich

    @stevn brown

    Yeah, this and the design studio header tutorial are very similar. I wouldn’t say the other ones are like it. I will start making more dynamic ones. Thanks for the feedback.

    And, i’ll go ahead and fix that link on the PSD

  • Khanji

    Very nice tutorial, well described and easy to follow up, thanks

  • Drupal Darren

    Nice tutorial. Just the essential info to create this simple but effective design. Thanks.

  • Atak Teknoloji

    clean and easy technic. thanks.

  • BillVUE

    What was the purpose of the stroke, since the nav bar overlaps it?

  • Matthew Heidenreich

    @BillVUE

    It only overlaps it on the bottom, but you should still be able to see the stroke at the top

  • Noah

    Hello,

    Thank you for the nice tutorial. I love to see in the future some logo creating to fit with this nice header.

    One question where i would like to have an anwser on;

    How can i make the menu in this PSD work. So when i put my mouse on ABOUT it gives the rollover effect?

    Thank you very much for the instructions.

  • Business Card Printing

    Pretty basic stuff. Very professional looking. Your tutorials are always really helpful. Thanks for posting this!

  • CgBaran Tuts

    Nice header thankss

  • carlos lopez

    I love the layout, but how do I make it active? It really is just a picture, how do I make the rollovers and stuff?

  • Noah

    Hello,

    I hope to read a response on my message of the 25th of March.

    How can we make this an active header?

  • Matthew Heidenreich

    @Noah

    Sorry for not getting to you sooner. You would need to slice and code it using Photoshop/Dreamweaver to make it a working web navigation system. We currently do not have a tutorial on how to make this into a working navigation

  • romina

    hola soy de cordoba-argentina….me ha gustado mucho este tutorial.muchas muchas gracias,me ayuda mucho.estoy estudiando diseno y estoy busando hacer una pasantia y esot me ayudara para poner como un trabajito mas…quisiera saber si tienes algo hacerca de aprender hacer algun logo para una empresa de diseno web,gracias

  • huwaw69

    the color blending of the header is good black and red, i might try this one out soon… thanks for sharing…

  • Matt

    Nice tutorial. Might be using this in a web design class that I’m teaching to high-schoolers.

  • Andrei

    I loved the tutorial but i don’t understand how you transfer it all to dreamweaver. Please email me @ macpinter@gmail.com

  • Zoran

    Thanks buddy… I am photshop noob, but good developer, i needed something like this.

  • Mohammad Anisur Rahman

    Excellent tutorial. Nice header very professional looking. Your tutorials are always really helpful. Thank you very much for posting this tutorial.

  • niki

    nice tutorial, but i prefer to hire someone to do something like this 😀

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors