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.

• Adobe Photoshop CS6 Classroom in a Book
• Photoshop CS6: Visual QuickStart Guide
• Photoshop CS6 For Dummies
• Adobe Photoshop CS6 Digital Classroom
• Photoshop CS6: The Missing Manual
• The Adobe Photoshop CS6 Book for Digital Photographers
• Adobe Master Class: Photoshop Inspiring artwork and tutorials by established and emerging artists

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.

New Document

Step 2

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

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.

Rectangular Marquee Tool

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

Gradient Overlay:

Gradient Overlay

Stroke:

Stroke

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

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.

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:

Stroke for Search Box

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

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:

Gradient Overlay for Small Box

Stroke:

Stroke for Small Box

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

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.

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:

Gradient Overlay for N-Bar

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

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.

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.

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:

Gradient Overlay for Hover State

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

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

• Web Layout Tutorial Category
• Creating Liquid and Elastic Layouts
• How to Create Financial Website Layout
• How to Create a Clean Portfolio Layout 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.