Create a cool yellow header with menu for your website

Complete website header with menu, login form and search form.

Enjoy!

Hello fellows and Welcome! Today I am going to show you how to create a nice header using Photoshop.

1.       Create a new 800x400px Photoshop document.

2.       Grab your Gradient Tool (G), and fill it with a gradient, using these settings:

3.       Set your foreground color to #c87e0b. Grab the Rounded Rectangle Tool (U), set the radius to 10px, and draw a shape like shown in the picture:

Make sure you have the “Shape Layers” Option on.

Apply these settings:

4.       Create new layer, draw 3 white circles and place them like shown:

Set layer’s opacity to 61%.

Duplicate the layer 4 times and place them as shown:

5.       Grab the Text Tool (T), set the color to black and add the links you need. These are mine:

6.       This is how the link will look like when rollover-ing the link:

Grab the Rounded Rectangle Tool (U), set the Foreground color to #cb850a, and draw the shape as shown. Apply these settings:

7.       THE LOGIN FORM. Grab the Rounded Rectangle Tool (U),  set your foreground color to # cb840a, and draw a shape in the right top corner as shown:

Apply these settings:

8.       Create a new layer, grab the Marquee Tool (M), and draw a square. Fill it with #e3bf83. Apply a 1px Stroke with #be6a0c. Duplicate the layer and place them both as shown :

9.       Add the text :

10.   Creating the Submit button. Create new layer. Grab the Marquee Tool and draw another square. Apply these settings to your new created layer.

11.   Grab the Text Tool and write “Submit” on your new created button:

Duplicate the layer created on step 4 and place it like this:

12.   Grab the Text Tool again and write down the website’s name and the slogan.

I’ve used black and white for the title and #efaa38 for the slogan.

13.   Create new layer, and using the Marquee Tool (M), draw a rectangle. Fill it with #bd680d, using the Bucket Tool (G). Grab the Marquee Tool again, right-click and select the Free Transform Option. Rotate the rectangle and place it as shown:

Set layer’s opacity to 60%. Duplicate the layer several times, and move the new created layers one over the other as shown:

14Create new layer, and using the Marquee Tool (M), draw a rectangle. Fill it with #FFFFFF.

15.   Select the Pen Tool (P).  Draw this shape:

Right click and select “Make Selection”. With the layer created at step 14 still selected, right click again and select “Layer via Cut”. This is going to form a new layer. Set its opacity to 49%. Select the layer created at step 14 again, and apply a 3px #ce8a0a Stroke.

16.   Set the Foreground Color to #e3bf83, create a new layer, and draw a rectangle. Open the Blending Option Panel, and apply a 1px #be6a0c Stroke. Duplicate the layer and place them both as shown:

17.   Grab the Text Tool and write down the text :

Styles used for the text:

·         Search a product: COLOR #000000; FONT Orator Std; FONT SIZE: 18pt;

·         Enter search terms: COLOR #FFFFFF; FONT Palatino Linotype; FONT SIZE: 14pt;

·         GO! : COLOR # be690c; FONT Arial; FONT SIZE: 18pt; Strong;

18.   Duplicate the shape created at step 4, and place it like this:

19.   Add some text and some images as shown and you are done. My result :

For any questions don’t hesitate to  email me, and I will respond as fast I can. Thanks for visiting my blogJ
Don't forget to share it:)!

Bye.