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!
1st of all create a new document (Ctrl+N) with 960x180 of size.
Take a new layer name it "BG" and fill it with black color.
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.
After applying these layer style we have get a cool effect on this layer as like in preview below.
After Applying Layer Styles
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.
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 for Search Box
After applying stroke now in this box we will type Search this site for... as like in preview below.
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 for Small Box
Stroke for Small Box
After applying these layer styles we have cool effect as like in preview below.
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.
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 for N-Bar
After applying gradient overlay we have perfect primary navigation bar bg.
Primary Navigation Bar BG
Now we will type our navigation bar with the help of text tool (T) as like in preview below picture.
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 for Hover State
After applying the gradient overlay we have get best hover state as like in screen short.
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.
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.