Tutorial – Creating Windows Vista Taskbar

Aight this is a very simple tutorial where I tried creating windows vista taskbar in Photoshop. Why you ask? Hmm... well you may want to create a skin, a theme for you cellphone or just want to experiment with layer styles like me. This is not an exact replication of Vista's taskbar it's just my way of doing things, so this is very simple and beginners' tutorial nothing fancy.

Step 1: Create a New Document

Create a new Photoshop document of any size but not too small of course :)

Step 2: Create a Rectangle

Create the taskbar using rectangle tool about 30px in height.

Step 3: Apply Layer Styles

Apply the following layer effects to the taskbar

Gradient Overlay
Click the gradient to open "gradient editor"
Double click on the left color stop (the bottom one) to open the "color picker" and select #131416 color
Double click on the right color stop to open the "color picker" and select # a3a3a3 color
Add an other color stop in the middle at about 53 position and add the #131416 color
Just about at 54 position add an other color stop with the color value of #343434

Stroke
Set the size to 1px
position to outside
and finally select #4e4e4e as the color

Bevel and Emboss
Style: Inner Bevel
Technique: Smooth
Depth: 91
Direction: up
Size: 2
Soften: 0
Angle: 90
Uncheck "Use Global Light"
Altitude: 20
Opacity for 1^st Highlight mode with white color (screen): 71
Opacity for Highlight mode with black color (multiply): 0

Click Ok

And you are done with the taskbar!
If you want to add an application's window on the taskbar keep reading.

Step 4: Create another Rectangle

Yes but this time make a rounded rectangle with about Radius of 2px width: 155px and height: 24px
Align this in the center of our taskbar

Step 5: Apply Layer Styles

Go to the layer's palette and copy the layer style of the taskbar layer
Paste the layer style to the rounded rectangle
Remove Bevel and Emboss style instead add outer and inner glow with the following settings:

Outer Glow
Blend mode: Screen
Opacity: 38%
Noise: 0%
Select Pure White Color
Technique: Precise
Spread: 0%
Size: 2px
Range: 20%

Inner Glow
Blend mode: Screen
Opacity: 58%
Noise: 0%
Select Pure White Color
Technique: Precise
Choke: 0%
Size: 1px
Range: 67%

Hit Ok

Step 6: Add Text and an Icon

I have added Firefox's icon and the text "Gmail – Inbox (139) …" you could add what ever you like oh btw the font is "Segoe UI"-comes with Vista

Well that's basically it.

Tip: If you want to create an active window representation, simply create levels adjustment layer and move the left triangle to a little right to create the darker effect.
I have to admit that I am not good with numbers so experiment with your layer styles tweak the sliders a bit to get the effect you want.

Tip: To create transparent "Aero effect" simply add an image in the background and reduce the opacity a bit for both the taskbar and the rounded rectangle layer.

Tip: To create a mouse over glow effect you could do this:
Ctrl + click the rounded rectangle layer's mask to select it
Select a big soft brush with a light sky blue color (or use #597a9c)
Reduce the brush opacity to about 40 or 50 and set the mode to color dodge

While previous selection still turned on gradually paint on the new layer just below the rounded rectangle. As you do multiple passes you will see the glowing effect emerges due to the brush blending mode. You could add a layer mask to the paint layer to remove any unwanted blue cast on the rounded rectangle. And finally you can tweak the color of this glow with a few adjustment layers.

Background Photo is beautiful wallpaper from http://airbagindustries.com/