Her

Home Photoshop Tutorials Web Layout Cool Blue Header Design

Cool Blue Header Design

Author: CoolJeba.com Author's URL: www.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:

image 1

image 2

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.

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:

image 5

image 6

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:

image 8

image 9

image 10

image 11

image 12

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.

image 14

image 15

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

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%.

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.

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:

image 19

image 20

image 21

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:

image 23

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%.

image 25

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

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:

image 27

image 28

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

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:

image 30

image 31

image 32

image 22

image 34

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

image 35

Final Image: Cool Blue Header Design.

Cool Blue Header Design