Vista Taskbar Tutorial
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:
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!!