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

Clean Business Header


1) Make a new document. I used 650x180.

2) Start out by making a new layer and grabbing the Rectangular Marque Tool. Make a selection like below:

image 1

Fill it in with a dark color. I used #555555.

image 2

3) Make a new layer. Using the Rectangular Marque Tool make a selection like this:

image 3

Grab the Gradient Fill Tool and use these gradient settings:

image 4

Fill in the selection by dragging from bottom to the top of the selected square box with the gradient fill tool:

image 5

4) Make a new layer. Now grab the Line Tool, and make horizontal lines accross the bottom of the gradient like below:

image 6

I made a dark line and a white line under it:

image 7

Lines are pretty basic stuff and can make anything look better just by placing them correctly.
5) Make a new layer. Grab the Rounded Rectangular Shape Tool and use these settings:

image 8

Now make your button shape:

image 9

6) Right click the button layer and go to Blending Options. Apply these following settings:

image 10

image 11

image 12

Now make sure the line layer is above the button layer:

image 13

This way you can nudge the button down a bit to cover the bottom rounded corners like below:

image 14

7) Duplicate the button and move it to the right, duplicate it 3 times so you will have 4 buttons to line up like below:

image 15

8) Now you can start adding the fonts and logo detail. I used Tahoma Font for the buttons:

image 16

9) Now you go on and add your own detail, this is what I completed with:

Clean Business Header Tutorial: Final Result

Author's URL: Ryan Trafford
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

No comments yet...
Add comments to "Clean Business Header"

Captcha