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

Clean Professional Header


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

Clean Professional Header image 1

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.

Clean Professional Header image 2

4. Now on that layer insert the following blending options

Clean Professional Header image 3

Clean Professional Header image 4

Clean Professional Header image 5

5. You should have something that looks like this

Clean Professional Header image 6

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

Clean Professional Header image 7

*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

Clean Professional Header image 8

Clean Professional Header image 9

8. Your document should now look something like this

Clean Professional Header image 10

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

Clean Professional Header image 11

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

Clean Professional Header image 12

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

Clean Professional Header image 13

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.

Clean Professional Header image 14

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

Clean Professional Header image 15

Clean Professional Header image 16

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

Clean Professional Header image 17

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

Clean Professional Header image 18

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

Clean Professional Header image 19

17. Now insert the following blending options onto that layer

Clean Professional Header image 20

Clean Professional Header image 21

Clean Professional Header image 22

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

Clean Professional Header image 23

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

Clean Professional 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 "Clean Professional Header"

Only registered users can write comment

No comments yet...