Design a unique header for your website with Photoshop

Step one , background design

before starting the background design, you should open a new document first. so here’re the values you should enter for this tutorial:

you will get one transparent layer in the layers box. select this layer by clicking on its title.

then, choose the ‘gradient tool’. a new top bar will be shown.

In the red part, you should choose the way you want the gradient to be. in this case I chose the linear gradient

copy the exact values from the non highlighted parts above. those values should be the default.

then, you should click on the gradient on the blue part of the image above.

it will take to into the gradient editor. there, you should fill in the values that in the next image

*changing the color code- double click on the bottom color tag and then in the ‘#’ filed- enter the desired color code

after its done, pull a line of the gradient tool like below:

Next thing you should add to the background is a pattern so it will look more special and unique.

I chose a mesh pattern that can be found in various versions on the net.

after you choose your own pattern or use the one I used, change the mode of this layer to ‘overlay’.

then, choose the gradient tool again, click on the arrow in the blue part and choose a simple white to black gradient.

after you make it, pull a line like the image below:

Step two, pages menu bar design

First, create a new layer,choose the ‘rectangular marquee tool’ (M), make a new selection like image below and paint it in blue (#245daf) with the ‘paint bucket tool’

Open a new layer and choose the rounded rectangle tool. change the radius from the top bar to 10px and make sure it’s on ’shape layers’ option so you’ll be able to edit it later.

make the shape and paint it in white (#ffffff).

choose the ‘convert point tool’ and click on the frame of the rounded rectangle you have just created now.

This action will show you 8 points of the shape that can be edited and will be edited very soon in here.

(1.) select the 2 left-handed bottom points with the ‘convert point tool’ (2.) right click on the mouth and then choose from the list the ‘free transform points’ option. (3.) a new top bar will be shown and on the left of this bar, there will be the anchor point controller. click on the left-bottom point

(4.) go to ‘edit > transform points > flip horizontal’. (5.) click on ENTER.

do the same 5 above steps to the right side. Here’s the result you should get till now:

Now, open a new layer, choose the rectangular marquee tool, make a new selection from the bottom line of the above shape to the bottom document

paint this selection in white (#ffffff) with the paint bucket tool.

Next step is making the buttons. I made 2 kinds of buttons. one for hover status and one for regular status.

lets start with the hover status: (1.) choose the rounded rectangle tool and change the radius to 3px on the top bar. once again, don’t forget to choose the shape layers option.

go to ‘fx’ icon on the bottom of the layers box and then choose ‘gradient overlay’ option from the list.

Here’re the values you should enter in the gradient overlay option:

save this style by clicking on “new style”. we’ll use this style in other buttons with few minor changes.

end result after doing all steps above till now should be like this:

For making this button a bit more special and unique, choose the convert points tool, click on the shape frame of the button layer and then choose the ‘pen tool’. draw a simple triangle but before, make sure you have the same parameters as below image:

duplicate the button shape layer, select the path selection tool and select the triangle path. one click on the triangle frame will select the whole triangle shape. then, just delete this path.

enter to the fx effects options into the gradient overlay option. then, just V the reserve option.

change the opacity value of this layer from 100% to 50% and you’re done with this.

all you need to do now is to duplicate this regular button 2 more times (right click on layer - duplicate layer) and place them like the image below:

next thing in the header design is the search filed and the search button. for this header, I think simple fields will be great for this design.

(1.) open a new layer (2.) choose the rectangular marquee tool and make the selection for the search filed. (3.) paint this selection in white (#ffffff).

(4.) duplicate this layer (right click on layer - duplicate layer) and then choose the ‘move tool’ and make sure that you have a ‘V’ in the top bar option of the ’show transform controls’. you’ll see transform controls all around the duplicated layer.

then, just make it narrow so it will fit to a ‘go!’ button. then just move it to the right.

Step three, adding texts

in fact, you’re almost done with the header design but if you. only thing you should add is the texts.

The menu’s texts are very simple and flat. I just made the text in the hover status button in blue color- #245daf and the regular button status in gray- #bab3b3.

and now to the logo texts:

Make a new text with the ‘horizontal type tool’ (T) and type your website’s title.

Here are the fx effects of the title:

Inner shadow values:

gradient overlay values:

Then, make a new text again with the horizontal type tool and write down your website’s slogan.

ofcource make it smaller that the title size.

please note that for the above 2 texts (the website’s title and slogan, you should choose from the ‘aa’ icon list the ’sharp’ option)

Now, after we’re almost done, all you need to do is to make again a new text but with the following settings:

(text color code of the above image is: #9e9e9e)

Here’s my final result from this tutorial: