Create a Stylish Header in Photoshop

1-8-08 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 1000×160 pixels canvas set at 72dpi, and I filled my background with a white color. Then on the tools palette set the foreground color to a dark blue, color code #16579A. Now create a new layer and draw a dark blue rectangle size 1000×108 px.

Step 2:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending option to your dark blue rectangle layer.

Step 3:
Create a new layer and draw a black rectangle, same size as your blue rectangle.

Step 4:
Under Layer Style(Layer > Layer Style) add an Gradient Overlay blending option to your black rectangle. Then set the layers blending mode to Lighten.

Step 5:
Create a new layer, below your rectangle design draw another dark blue, color code #16579A rectangle, same width as your rectangle design and 34 px for the height.

Step 6:
In a new layer draw two lines across your header design, one black and one white. Then set the layers opacity level to 9%.

Search Button:
Read Tutorial | Download PSD File

Step 8:
Select the Rounded Rectangle Tool from your tools palette then above your screen under options palette choose Fill Pixels, set the radius to 8 px and check anti-aliased. Create a new layer and draw gray, color code #D0D0D0 rounded rectangle, size 59×20 px. Now cut the bottom half of your rounded rectangle.

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

---

6 Responses to “Create a Stylish Header in Photoshop”

1. photoshop tutorials Says:
   January 8th, 2008 at 2:30 pm

   very nice tutorial!
   I would change the logo color so it will stand out more..
   anyway- thanks for sharing!

2. SmartMan Says:
   January 8th, 2008 at 11:11 pm

   Great tutorial. As Always.

3. CFA Level 1 Says:
   January 14th, 2008 at 4:22 pm

   Good tutorial. Thanks.

4. stylish header photoshop - Domain Discussion Board Says:
   January 16th, 2008 at 3:02 pm

   [...] stylish header photoshop - 01-16-2008, 10:57 AM learn to do a search buton in the header of a site ! Link : HERE 1] Web hosting - Gen0cid.ro 2] Partener - PGamers.info 3] WebDesing - Deep-Graphics.com 4] Free Hosting - SweetPatronus.cn 5] Webmaster, Search Engine Optimization, Money making forums - Forums.geeksland.net [...]

5. FGDG Says:
   January 19th, 2008 at 11:23 pm

   http://krolewsko.jazwiecki.xorg.pl/
   królewsko pozytywnie niezale?ny blog

6. Likenota.com Says:
   April 5th, 2008 at 1:05 am

   very good.. i do not like the image you chose for the right side. other then that its really cool

Add a Comment

Name (required)

Mail (required)

Website