Professional Dark Header

In this tutorial you will learn how to create a dark professional header design. 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 new document with the dimensions of 1000×215

2. Next go ahead and use your paint bucket tool to fill your background with #000000

3. Now we want to use our rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF

4. Now on that layer, input the following blending options




5. Your document will look something like this

6. Next we want to make a selection similar to the following and fill it with #FFFFFF on its own layer.

7. Lower the opacity to around 31%, and then change the blending mode to Overlay and you should have something like this

8. Next we want to add a simple text logo onto our header. To do so switch to your text tool and put whatever you would like in the following area

9. Now right click your text layer and input the following blending options



10. I added a little shine to the text (which is optional) and this is what you should have come up with

11. Next we want to add the links to our header. Just use a simple font with all caps. I used Helvetica Neue in my example.

12. We need to show how our active link will look. So use your rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF

13. Now input the following blending options



14. It should look like this

15. The next step is adding a search box. Using your rectangle marquee tool and make a selection similar to the following and fill it with #FFFFFF

16. Using your rounded rectangle tool with the radius to 5 and make a button like the following

17. And insert the following blending options onto your button


18. Slap some text on there and it should look like this

19. I added a little ‘feed’ area and this is my final result

 
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

11 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors