Create header for designer website


In this photoshop tutorial we will show you how to create nice colorful header for your website. We will create header with 5 categories, search box and links to your feed and Twitter accounts. In this tutorials we will use some objects that we created earlier.

Final Image Preview

create website header in photoshop

Step 1

Let’s start out by creating a new file. I used a1000×300 pixels canvas set at 72dpi, and I filled my background with #FFF2B4 color shade. Now create a new layer then draw a large rectangle with #2E2E2E color shade and 900 x 150 px dimensions.

create website header in photoshop

Step 2

Under Layer Style(Layer > Layer Style) add a Pattern Overlay blending option to the large gray rectangle layer.

create website header in photoshop

Result:

create website header in photoshop

Step 3

In a new layer draw a large light brown rectangle with #FFEDC1 color shade and 900 x 150 px dimensions.

create website header in photoshop

Step 4

Under Layer Style(Layer > Layer Style) add an Inner Glow and Pattern Overlay blending options to the light brown rectangle layer.

create website header in photoshop

create website header in photoshop

Result:

create website header in photoshop

Step 5

Grab the Eraser Tool with a large soft brush and erase the bottom half of the light brown rectangle design layer.

create website header in photoshop

Step 6

In a new layer draw a long white rectangle with 900 x 31 px dimensions between the large gray and light brown rectangle designs. Then under Layer Style(Layer > Layer Style) add a Drop Shadow and Inner Shadow blending options.

create website header in photoshop

create website header in photoshop

Result:

create website header in photoshop

Step 7

Select the Horizontal Type Tool then set the font family to Arial, regular, 14 pt, none and #007B17 color shade. In a new text layer type out your navigation links with spaces, use #F7CFA3 color shade for the bar spacer between each link.

create website header in photoshop

Step 8

On the right end of the dark gray rectangle leave a space for a search box, grab the file here. Few weeks earlier we published tutorial how to create this meter. Tutorial you can find here: Meter design in Photoshop.

create website header in photoshop

Step 9

Now add a simple mouse door on the white rectangle, do this by creating a black ellipse in a new layer then cut out the bottom half of the ellipse.

create website header in photoshop

Step 10

On the left side of the header add your logo or use the painting plate design on this tutorial, grab the here. Tutorial how to create painting plate you can find here: Create Painting plate in Photoshop

create website header in photoshop

Step 11

Select the Horizontal Type Tool then set the font family to Arial, bold italic, 24 pt, and smooth. In a new text layer type your website name next to the logo, use different color for each word on your name.

create website header in photoshop

Step 12

Under Layer Style(Layer > Layer Style) add a Stroke blending option to your website name text layer.

create website header in photoshop

Result:

create website header in photoshop

Result: Header for designer website

create website header in photoshop

Download Psd file

download psd file
Dainis

About the Author

Dainis is Webmaster of Psdeluxe - Design related website, where you will find newest photoshop tutorials, inspiration for designers and free design resources.

Subscribe to Psdeluxe feed


blog comments powered by Disqus

Sponsored by

PSD to XHTML

Grab Psdeluxe Rss feed

PsDeluxe rss feedGet nicest photoshop tutorials, design resources and articles directly in your email. Subscribe to Psdeluxe Feed and stay be informed about latest design news.

Subscribe by email:
Subscribe by Rss: Add to Google Reader or HomepageAdd to Yahoo pageBookmark Add to Netvibe

Community News

ere, we have collected over 90 wonderful Absolut ads made for different photoshop contests. Use these ads for your inspiration, creativity and even collection!

This tutorial explains how to make your own template for Google's Blogspot platform using Blogger Template Designer for free.Blogspot template designer helps Bloggers in easily making their own template

If you are a photographer or graphic artist and you want to share your art works then personal blog would be an ideal solution. To make your selection process easier we’ve gathered in this collection the best in our view premium WordPress themes, that mig

Even though iphone is ruling the world of smart phones, for some customers just entering the game Smartphone means some basic functionalities and pretty design. Here arises a pair of Motorola Android phones namely Devour and Backflip

At the start of a web project many designers find it extremely useful, and timesaving, to create page mockups in Photoshop or Illustrator. This is an opportunity to play around with ideas, try out different styles and generate themes for the site. There a

Thanks to...

Content Delivery Network Search Engine Optimization Suite for Joomla

The Best Fans on Facebook