Illustrated designs - http://www.illustrateddesigns.com
Microsoft Vista Stick
http://www.illustrateddesigns.com/articles/2767/1/Microsoft-Vista-Stick/Page1.html
By Art-D !
Published on 02/21/2007
 
Create Microsoft Vista Stick in Photoshop CS Microsoft Vista Stick
In this tutorial we will create vista stick for windows media player.
Microsoft Vista Stick - part 1
In this tutorial we will create vista stick for windows media player.

Open a new file that would have 1024x768 px and 72 dpi and paint it in black, as you may see below:

Create Microsoft Vista Stick in Photoshop CS

Insert now the name, keeping the demands for the letters from the tables shown below:

Create Microsoft Vista Stick in Photoshop CS

(Vista Stick)

Create Microsoft Vista Stick in Photoshop CS

(For Windows Media Player 10 & 11)

Create Microsoft Vista Stick in Photoshop CS

Take the next instrument and represent on the upper part of the picture a lighter zone.

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 2
Blending Options-Gradient Overlay

Create Microsoft Vista Stick in Photoshop CS

Gradient?s parameters:

Create Microsoft Vista Stick in Photoshop CS

Take the following tool now and create the lowest layer reserved for the media player?s panel. It should be colored in 121212.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Take the next shown instrument and represent for the beginning the layer of those two buttons, then click on the Alt button and apply the next tool to separate the buttons.

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 3
Create Microsoft Vista Stick in Photoshop CS

Blending Options-Gradient Overlay

Create Microsoft Vista Stick in Photoshop CS

Gradient?s parameters:

Create Microsoft Vista Stick in Photoshop CS

Blending Options-Stroke

Create Microsoft Vista Stick in Photoshop CS

Using the next instrument , draw a flare on the media player?s panel that must have this color?s code ? 5A5A5A.
Apply after that this tool to erase the unnecessary tops. Finally apply this instrument to correct the lowest corners.

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 4
Create Microsoft Vista Stick in Photoshop CS

On the layers we have

Create Microsoft Vista Stick in Photoshop CS

The Opacity is of 50%.
Select the next shown instrument now and choose from the next table the corresponding clich? for the picture. It is indicated with red color.

Create Microsoft Vista Stick in Photoshop CS

Make use of the Free Transform option to turn it around and choose the instrument from here to represent the button?s indicator. All the elements should have the color 696969.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 5
on the layers

Create Microsoft Vista Stick in Photoshop CS

For your convenience now, we should combine in a group all the layers, containing the button indicator?s elements. Make a copy of this new made group and make use of Free Transform option again to turn it around and place it the way it is demonstrated here:

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Choose again the next instrument to select the appropriate clich?, that one from the next table:

Create Microsoft Vista Stick in Photoshop CS

Take the instrument from here to move off the unnecessary tops of the elements. The color?s code is DFDFDF.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 6
on the layers we have

Create Microsoft Vista Stick in Photoshop CS

Choose the following instrument to draw the Stop button now, colored in DFDFDF.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Using the next tool, it?s possible to draw a small stripe on the bottom of the menu. Its color is 484848.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 7
Take the next tool now and represent on the upper part of the panel a stripe, like that one shown below:

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Fill 0% on the layers.
Blending Options-Gradient Overlay

Create Microsoft Vista Stick in Photoshop CS

Gradient?s parameters:

Create Microsoft Vista Stick in Photoshop CS

Select after that this indicated instrument and create the lowest layer of one more button, colored with 484848.

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 8
Create Microsoft Vista Stick in Photoshop CS

Take the previous instrument to represent one more layer colored this time with 1E339C.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Choose the last tool to represent another layer, reserved for one more button.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 9
Blending Options-Gradient Overlay

Create Microsoft Vista Stick in Photoshop CS

Gradient?s parameters:

Create Microsoft Vista Stick in Photoshop CS

Blending Options-Stroke

Create Microsoft Vista Stick in Photoshop CS

Take the next instrument and insert on the upper part of the button shown next, a flare of white color. Make the necessary corrections also on its shape, applying the instrument form here .

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 10
Fill 22% on the layers.
Blending Options-Inner Shadow

Create Microsoft Vista Stick in Photoshop CS

For your convenience we should merge down in a group all the layers composing the big button
Make a copy of the group and using Free Transform option, it?s possible to minimize it a little and place everything the way it is indicated below:

Create Microsoft Vista Stick in Photoshop CS

Get back to the big button and insert one more layer.
Take the following instrument again to select from the next table a clich? that one encircled in red.

Create Microsoft Vista Stick in Photoshop CS

Using the Free Transform option, turn around the element and choose the white color for it.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 11
Blending Options-Stroke

Create Microsoft Vista Stick in Photoshop CS

Apply the instrument from here to represent a thin stripe placed under the small copy of the big button.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Blending Options-Gradient Overlay

Create Microsoft Vista Stick in Photoshop CS

Gradient?s parameters:

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 12
Write now the name of the track and its period of Play time.

Create Microsoft Vista Stick in Photoshop CS

Create Microsoft Vista Stick in Photoshop CS

Take the next tool and represent the divide zone between the information and media player?s buttons.

Create Microsoft Vista Stick in Photoshop CS

Blending Options-Gradient Overlay

Create Microsoft Vista Stick in Photoshop CS

Gradient?s parameters:

Create Microsoft Vista Stick in Photoshop CS
Microsoft Vista Stick - part 13
Create Microsoft Vista Stick in Photoshop CS

The media player is finished!

View full size here.