Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Professional Dark Header

Professional Dark Header


1. First thing we want to do is create new document with the dimensions of 1000x215

Professional Dark Header image 1

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

Professional Dark Header image 2

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

Professional Dark Header image 3

Professional Dark Header image 4

Professional Dark Header image 5

Professional Dark Header image 6

5. Your document will look something like this

Professional Dark Header image 7

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

Professional Dark Header image 8

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

Professional Dark Header image 9

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

Professional Dark Header image 10

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

Professional Dark Header image 11

Professional Dark Header image 12

Professional Dark Header image 13

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

Professional Dark Header image 14

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.

Professional Dark Header image 15

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

Professional Dark Header image 16

13. Now input the following blending options

Professional Dark Header image 17

Professional Dark Header image 18

Professional Dark Header image 19

14. It should look like this

Professional Dark Header image 20

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

Professional Dark Header image 21

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

Professional Dark Header image 22

17. And insert the following blending options onto your button

Professional Dark Header image 23

Professional Dark Header image 24

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

Professional Dark Header image 25

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

Professional Dark Header Tutorial: Final Result



Author's URL: PSDVIBE
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Professional Dark Header"

Only registered users can write comment

No comments yet...