All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
design-a-colorful-header-in-photoshop

Design a Colorful Header in Photoshop

3-22-08Category Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 1000×300 pixels canvas set at 72dpi, and I filled my background with a white color. In a new layer draw a rectangle with 910×166 px dimensions and #FF6C00 color shade.

Step 2:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your orange rectangle layer. Then set the layers opacity level to 22%.

Step 3:
Create a new layer, below your orange rectangle draw a rectangle with 910×25 px dimensions and #7B9ABD color shade.

Step 4:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending option to your light purple rectangle layer. Then set the layers opacity level to 33%.

Step 5:
Now add some clear navigation tabs, in a new layer draw a white rectangle with 128×22 px dimensions.

Step 6:
Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your tab layer. Then set the layers blending mode to Lighten.

Step 7:
Select the Horizontal Type Tool from the tools palette and set the font family to Arial, bold, 11 pt, none and #495B70 color shade. In a new text layer type one of your navigation link.

Step 8:
Now complete your navigation interface by creating a new tab for each link.

Step 9:
At the right end of your header, add a tab for your rss feed and email updates.

Step 10:
Now select the Horizontal Type Tool again and set the font family to Eurostile, regular, 30 pt, strong and #88E3E4 color shade. In a new text layer type your website name on the left side just above your navigation interface.

Step 11:
Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending optiosn to your website name text layer.

Step 12:
Now add your slogan with a smaller font size and black color shade.

Concept Web Logo:
Read Tutorial | Download PSD File.

Step 14:
That should complete the header, click here to see the full view.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

2 Responses to “Design a Colorful Header in Photoshop”

  1. » Design a Colorful Header in Photoshop Says:
    March 22nd, 2008 at 3:59 pm

    […] lukeroberts.us wrote an interesting post today onHere’s a quick excerpt In this photoshop tutorial you will learn how to create an effective Colorful Header for your websites. (more…) […]

  2. Tutorials Inc Says:
    March 22nd, 2008 at 5:04 pm

    Nice tutorial and thanks for submitting it to tutorial-effect.net!

Add a Comment