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

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



Author's URL: PSDVIBE
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Professional Dark Header"

Captcha