Vista Taskbar Tutorial

Hey all!!

Here comes a tutorial that imitates the Windows Vista taskbar. And I think that it looks pretty good. I mean, it looks totally same as the real thing. Sometimes I amaze myself at my expertise. (Talk of being humble )

You can use this effect to make navigation bars on your website, or to simply make the taskbar.(Though I dont know what you can use a taskbar for…) So let’s start…

Step 1: The Basic Structure

Start with a suitable canvas. I used a 450×50 white background. We will use the “Rectangle Marquee Tool (M)” to make the taskbar. Make a new layer. Select the tool, and from the dropdown menu on top, select “Fixed Size”. Set the size to 450×30. Simply click on the canvas to make the rectangle.

Step 2: The Background

Set up a gradient from a very dark gray to black. See picture below for help.

Step 3: The glossy effect

Create a new layer, and select the “Rectangle Marquee Tool (M)”. Using “Fixed Size” with settings height: 15px, width: 400px. Simply click on the canvas to make the rectangle.

Using the “Gradient Tool (G)”, make a white to transparent gradient on the top layer, as shown:

Set the layer opacity to 60%.

Make a new layer. Select the “Single Row Marquee Tool” and make a single row selection simply by clicking on the canvas. It should be 1px or 2px below the upper edge of the taskbar.
Hit “Alt+Backspace” with the foreground color set to White, to fill it with White.

Step 4: The Buttons

We will again use the fixed size marquee tool. Set the size to height: 13px, width: 150px. Click on the canvas to make the rectangle. You will (must/should) notice that actually the vista taskbar buttons are quite rounded. To do that, we go to “Select>Modify>Smoothen”. Set the radius to 2px. The rectangle is now smoothed/rounded.

Fill the rectangle with the same dark gray as that in the gradient. Then go to “Layer>Layer Style” or simply double-click on the layer next to the layer name in the layers palette.

Next, we have to do again what we did in step 3 (the glossy effect). Make a fixed size rectangular marquee of height: 13px, width: 150px. Make the selection rounded (smoothen, 2px). Fill with white to transparent gradient from the top.

For inactive button:
Set opacity of the gradient to 60%.

For inactive button:
Set opacity of the gradient to 30%. Also go to the layer styles for the inactive button layer, and add an “inner shadow” to make it look engraved. Use settings:

Distance: 1px
Choke: 0px
Size: 1px

Step 5: The Text

On a new layer, type your text. Use font “Segoe UI” which is the official Vista font, and color “#fffdf2″, which is a little off-white. And voila, you are done!!

To make a navigation bar for your website, in the first step, instead of a simple rectangle of size 450×30, make it rounded (smoothen, 2px). That will make it look stand-alone.

Hope you liked the tutorial and were able to make the taskbar effect in Photoshop. I tried to make it as simple as possible. Please do vote in the sidebar regarding the level of difficulty of my tutorials!! And also, please do comment!!

Signing off,
The Photoshopper