Her

Home Photoshop Tutorials Web Layout Professional Dark Header

Professional Dark Header

Author: PSDVIBE Author's URL: psdvibe.com More by this author

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

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

image 2

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

image 3

image 4

image 5

image 6

5. Your document will look something like this

image 7

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

image 8

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

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

image 10

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

image 11

image 12

image 13

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

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.

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

image 16

13. Now input the following blending options

image 17

image 18

image 19

14. It should look like this

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

image 21

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

image 22

17. And insert the following blending options onto your button

image 23

image 24

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

image 25

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

Professional Dark Header