website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Cool Blue Header Design
rss

Cool Blue Header Design

Author: CoolJeba.com More by this author


Step one: Start with a 1000 x 130 pixels, #007EA2 canvas.

Create a new layer then draw a 1000 x 30 pixels, black rectangle across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact rectangle.

In your layers window set your layers blending mode to lighten and add the following layer styles:

Cool Blue Header Design image 1

Cool Blue Header Design image 2

Cool Blue Header Design image 3

Step two: In a new layer draw a 1000 x 5 pixels, #C6ACE2 thick line across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact line.

Cool Blue Header Design image 4

Step three: Now below all your current designs applied to your header add a 1000 x 30 pixels, #006C92 rectangle across your canvas.

Add the following layer styles:

Cool Blue Header Design image 5

Cool Blue Header Design image 6

Cool Blue Header Design image 7

Step four: In your layers window make a new layer set, name it Navigation. In a new layer 19 x 19 pixels, black circle. Use your ellipse tool to make the circle so you can use the fixed size setting under ellipse options to make the exact circle.

Add the following layer styles:

Cool Blue Header Design image 8

Cool Blue Header Design image 9

Cool Blue Header Design image 10

Cool Blue Header Design image 11

Cool Blue Header Design image 12

Cool Blue Header Design image 13

Step five: Create another layer. Inside your last circle draw a 10 x 10 pixels, white circle.

Add a stroke layer style to your circle layer.

Choose your text tool and type in your first navigation link using font Arial, bold, 11 pt, none and #FF0000 for color.

Cool Blue Header Design image 14

Cool Blue Header Design image 15

Step six: Now complete your navigation system. Just duplicate your navigation layer sets and modify the texts.

Cool Blue Header Design image 16

Step seven: In a new layer seperated from your layer sets draw a 1000 x 6, black line across your canvas.

Duplicate your thick line and nudge it below your original line, set the layers blending mode to Soft light at 28%.

Cool Blue Header Design image 17

Step eight: Again in a new layer draw a 1 pixel white line located on the bottom edge of your last thick line. In your layers window set the layers blending mode to Soft light.

Cool Blue Header Design image 18

Step nine: In a new layer draw a 1000 x 35 pixels, black rectangle across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the rectangle.

In your layers window set your layers blending mode to lighten and add the following layer styles:

Cool Blue Header Design image 19

Cool Blue Header Design image 20

Cool Blue Header Design image 21

Cool Blue Header Design image 22

Step ten: Just at the bottom of all your designs so far draw a 1000 x 11 pixels, black rectangle across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the rectangle.

In your layers window set your layers blending mode to lighten and add a gradient overlayer layer style:

Cool Blue Header Design image 23

Cool Blue Header Design image 24

Step eleven: Make a new layer set, name it Line detail. In a new layer draw a 1 pixel black line.

In another layer, draw a 1 pixel white line. Set your white line layers blending mode to Overlay at 37%.

Cool Blue Header Design image 25

Step twelve: Add a line separator for all your navigation links.

Cool Blue Header Design image 26

Step thirteen: Create a new layer then draw a 100 x 46 pixels, black rectangle above your second link. Note your second navigation might be different from this tutorial so your black rectangle should be different as well. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact rectangle.

In your layers window set your layers blending mode to lighten and add a gradient overlayer layer style:

Cool Blue Header Design image 27

Cool Blue Header Design image 28

Step fourteen: Add the same black rectangle structure on your other links.

Cool Blue Header Design image 29

Step fifteen: Choose your text tool and set the font type to Arial, bold, 22 pt, crisp and white for color. In a new text layer type your name.

Add the following layer styles:

Cool Blue Header Design image 30

Cool Blue Header Design image 31

Cool Blue Header Design image 32

Cool Blue Header Design image 33

Cool Blue Header Design image 34

Step sixteen: Now type your slogan using font arial, bold, 10 pt, crisp and #FF0000 for color.

Cool Blue Header Design image 35

Final Image: Cool Blue Header Design.

Cool Blue Header Design Tutorial: Final Result



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Cool Blue Header Design"