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

Classy Header


Step 1.

Create a new document that is 700x200 and fill the background with a pale white, I used: #F6F5F5

Step 2.

Using the rectangular marquee tool, select a rectangular similar to this at the top of the canvas.

image 1

Step 3.

a

Fill the selection with #C9D2D2

image 2

and apply these blending options to the layer:

Drop Shadow:

image 3

Stroke:

image 4

If done correctly here's how it should look:

image 5

Step 4.

Now we'll start the buttons, with the rectangular marquee tool, make a selection similar to this:

image 6

Step 5.

Fill this selection with #88B6C2, and apply the following blending options:

Gradient Overlay

image 7

Stroke:

image 8

Here's what you'll get:

image 9

Step 6.

Next make a selection (with the rectangular marquee tool) 1 pixel bellow the button layer, like this:

image 10

and fill it with: #9CACAB

image 11

Step 7.

Next create a new layer, set your foreground color to: #DCE6E8 and draw a 2px line with the pencil tool directly bellow the rectangle created in the previous step:

image 12

Step 8.

Next make a selection with the rectangular marquee tool, 1 pixel above our button layer as shown:

image 13

Fill this selection with a gradient that is: #CFD5D3 (foreground) and #FFFFFF (background):

image 14

Result:

image 15

Step 9.

Next set your foreground color to: #9CACAB and draw a 1 pixel line all the way across like so:

image 16

Step 10.

Next create a new layer, and create a selection like so (the same size as the large rectangle for the buttons):

image 17

Step 11.

Get out the Eclipse marquee tool, and while holding down Alt (to deselect) deselect the bottom portion of the selection:

image 18

Fill this area with white, go to Filter->Blur->Gaussian blur, and apply these settings:

image 19

And drop the opacity of this layer down to about 19 percent:

image 20

Step 12.

Create a new layer, set your foreground color to #FFFFFF (white) and apply the text to your buttons. I used the font Aerial Black, with a size of 12 pt:

image 21

Apply these blending options to this layer:

Drop Shadow

image 22

Here's what I've got:

image 23

Next I divided my buttons with a simple 1 pixel dashed line with a pale white color:

image 24

Now you just need to slap on your company logo, and any other header information onto the piece and it's good. I've refined this version slightly as you can see. Have fun and enjoy!

Classy Header Tutorial: Final Result



Author's URL: Webmaster
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 "Classy Header"

Only registered users can write comment

No comments yet...