Loading...

Creating the Beautiful Sleek Look Header in Photoshop CS5

The most important graphical element of any website is its header. so it's important to get it looking good. In this tutorial, I am going to share with you that how to designing a website or blog header in adobe Photoshop CS5. I'll use layer styles, and a host of other expert techniques to create a sleek, modern website header.

It will take you one hour and a half to learn the procedure. This tutorial is worked out for the beginners, it gives you the detailed instructions and the professional tips. I hope you will like this useful website header tutorial. So, let's start!

Step 1

1st of all create a new document (Ctrl+N) with 960x180 of size.

img

New Document

Step 2

Take a new layer name it "BG" and fill it with black color.

img

New Layer

Step 3

Now take new layer name it layer "1st rectangle" with the help of rectangular marquee tool (M) make a selection and fill it with white color.

img

Rectangular Marquee Tool

Now we will applying layer styles on 1st rectangle layer.

Gradient Overlay:

img

Gradient Overlay

Stroke:

img

Stroke

After applying these layer style we have get a cool effect on this layer as like in preview below.

img

After Applying Layer Styles

Step 4

In this step now we will add a CS5Tutorials logo. Select the Text tool, type the text for your logo as u like. We have type CS5Tutorials.Com as like in preview. You can use the any one logo picture.

img

CS5Tutorials Logo

Step 5

Now we will create the search box right side of the header. 1st of all take a new layer select the rectangular marquee tool (M) take a selection fill it with white color and applying the stroke.

Stroke:

img

Stroke for Search Box

After applying stroke now in this box we will type Search this site for... as like in preview below.

img

Search Box

Step 6

Take a new layer select the again rectangular marquee tool (M) and make a small rectangle fill it white color, applying the gradient overlay and stroke.

Gradient Overlay:

img

Gradient Overlay for Small Box

Stroke:

img

Stroke for Small Box

After applying these layer styles we have cool effect as like in preview below.

img

Small Box

Now in this small box we have put the magnifi icon as like in preview below.

You can download free Magnifi Icon from internet and save it in your computer.

img

Magnifi Icon

Step 7

Now in this step we will create the Primary Navigation Bar. First create the primary navigation bar backgrond.

Take a new layer draw a rectangle with the help of rectangular marquee tool and fill it with white color and applying the gradient overlay.

Gradient Overlay:

img

Gradient Overlay for N-Bar

After applying gradient overlay we have perfect primary navigation bar bg.

img

Primary Navigation Bar BG

Step 8

Now we will type our navigation bar with the help of text tool (T) as like in preview below picture.

img

Navigation Bar

OK, if you want the make the hover state then you can easily create it. We want that Tutorials button convert in to hover state when we our mouse cursor take our the Tutorials button, first change the the color of Tutorials in to black.

img

Change the Text Color

Now choose the again rectangular marquee tool take a new layer bottom of the Tutorials button and create a rectangle and fill it with white color and applying gradient overlay.

Gradient Overlay:

img

Gradient Overlay for Hover State

After applying the gradient overlay we have get best hover state as like in screen short.

img

Hover State

Step 9

OK, now we will create the Secondary Navigation Bar top of the header.

In secondary navigation bar you can type your text as you like.

Final Preview

Creating the Beautiful Sleek Look Header in Photoshop CS5

Creating the Beautiful Sleek Look Header in Photoshop

Hope, following this comprehesive and detailed tutorial, it was easy for your to create this sample header. Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly. Be sure to visit our contact page if you have an idea for a tutorial you'd like to see.

Copyright © All Rights Reserved