Create a Shiny Header in Photoshop

2-27-08 Filed under Interface & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 800×180 pixels canvas set at 72dpi, and I filled my background with a white color. Now Select the Rounded Rectangle Tool then above your screen under the options palette choose Fill Pixels, set the radius to 20 px and check anti-aliased. Create a new layer and draw a gray rounded rectangle with #BCBCBC color shade and 729×56 px dimensions.

Step 2:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending option to your gray rounded rectangle.

Step 3:
Now add the Custom Shape on the shiny rounded rectangle.

Step 4:
Select the Horizontal Type Tool from and set the font family to Eurostile, regular, 28 pt, strong and white for color. In a new text layer type your navigation titles with blank spaces between each title. Change the font color of the first title to #66E8FF color shade.

Step 5:
Under Layer Style(Layer > Layer Style) add a Drop Shadow blending option to your text layer.

Step 6:
Create a new layer and using the Rectangle Tool draw a black rectangle with 9×26 px dimensions in between your first and second navigation title.

Step 7:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay and Pattern Overlay blending options to your black rectangle.

Step 8:
Now add the same spacer design for the rest of your navigation titles.

Step 9:
Finish it off with your website logo and a search box above the shiny header.

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

---

5 Responses to “Create a Shiny Header in Photoshop”

1. Create a Shiny Header in Photoshop Says:
   February 27th, 2008 at 2:40 pm

   [...] mattk wrote an interesting post today onHere’s a quick excerptA quick and simple photoshop tutorial for designing a shiny header. (more…) [...]

2. oyvind Says:
   March 14th, 2008 at 3:05 pm

   noob

3. ashfaq Says:
   March 21st, 2008 at 10:12 am

   this site is very best

4. PhotoShop Designer Says:
   April 12th, 2008 at 2:17 am

   Really nice, well done!

5. erice065 Says:
   April 30th, 2008 at 11:54 am

   does no good to give us the custom shape… how do you make the custom shape?

Add a Comment

Name (required)

Mail (required)

Website