Al recently asked me how to make a glossy header image, similar to what you would see in Vista. Figured that I would share this with everyone.

Step 1

Start off with a new Photoshop document (ctrl+n), I used dimensions of 480px - 150px. You can use whatever size you want, we are, for the most part here, using layer styles. This means you can resize your object at any time and with minimal changes you should have the same effects.

Step 2

Using the rounded rectangle tool with a radius of 15px, again the shape can be anything you want. This is just if you’re following along at home.

Step 3

Let’s start adding some layer effects. Firstly Gradient Overlay. Use the standard settings, but change the angle to 90 degrees. The following colours are what I used:

Step 4

Let’s add a stroke and an inner glow next. Firstly, the settings for the stroke

If you don’t have images on, I’ll just list the settings here:

• Size - 1px
• Position - Outside
• Blend Mode - Normal
• Opacity - 100%
• Colour - #000000.

Now the settings for the inner glow:

Again if your not using images, here are the settings:

• Opacity - 60%
• Colour - #FFFFFF
• Technique - Precise
• Choke - 0
• Size - 1.

This is what you should be seeing by now if your following along with me

Step 5

Last steps now. This will make our title bar sparkle. Add an Inner Shadow to your other Layer Effects.

The settings:

• Blend Mode - Overlay
• Colour - #C3C3C3
• Opacity - 45%
• Angle - 90
• Distance - 69
• Choke - 0
• Size - 0.

The Distance is the one you’ll have to change if your header isn’t the same height as mine.

Step 6

Last step now. This step is a little more manual then the others, also if you change the size of the graphics this one will have to be done again. So ctrl click on the shape layer we made first. This will outline the object.

Then using the Rectangle Marquee Tool, and holding down alt, drag the marquee tool up from the bottom of the object, so that you now only select half of the rounded rectangle. Here is an image to compensate my terrible explanation.

Now using the gradient tool, with white as the colour (#FFFFFF), with foreground to transparent selected as the gradient style, which for those who don’t know, looks like this:

Drag the gradient from the top of the selection, to the bottom.

That’s it folks. As I’ve mentioned using layer styles you get good control over everything, and can change it later. Apart from the last step. So you can apply this to as many objects as you want.

Final Product

Try playing around with the colours and effects. For a closer match to vista, add a blue colour into the gradient near the bottom.

• Download the PSD

Filed Under Design, Tutorial