Replicate The Windows Vista Interface, Advanced - Graphic Intense Be Patient On Loading Rating Options

[alias.infnit]

This tutorial will teach you how to create a replica of the Vista User Experience as an image. I am not claiming this is the way the Windows Vista Team have done it but it is a method of creating an image with extreme likeness.

It could look like this if you are observant and follow the tutorial properly:

And with a different background:

This is an extremely long tutorial however it is not as detailed as I would like. It has over 28 steps to follow (and these are crucial steps) accompanied by over 40 images, you must watch the images closely because some minor changes I have not documented as this would put the tutorial over 100 steps. This could sometimes be moving something a few pixels, changing the color of a shape or changing the opacity of a shape. I urge you to still attempt to make these changes if you spot them even if there are no instructions as this is a great way to learn.
Step 1:
Open an 800x600 canvas and place on it your favorite wallpaper.

Step 2:
Create a rounder rectangle with 4px radius corners, the size of the shape should be the final size of the window you are creating.

Step 3:
Change the shape colour to a light blue colour, this will give a glassy colour to the final result.

Step 4:
Set the fill opacity to 25% and set the following stroke.

Step 5:
Duplicate this layer, switch the colour from light blue to white and turn off the stroke.

Step 6:
Make the background layer active/selected, then Ctrl-Click on the vector mask. Hit Ctrl-J to duplicate the background in the selection

Step 7:
On the duplicated part of the background perform a Gaussian Blur with about a 2px radius.

Step 8:

Now using the rectangle tool, draw the inside of the window with white foreground.

Step 9:
Apply the following Bevel and Emboss to the inside white rectangle.

Step 10:
To the light blue frame add the following gradient overlay, moving the center of the gradient to about a third up the frame (look closely in the screenshot to see where there is a light/dark split.

Step11:
To the white frame add the following inner glow.

Step 12:
Add the Windows Title, using the font Tahoma. Set the font layer to overlay, add the default outer glow and duplicate the layer.

Step 13:
I realized that the glass would cast a shadow and that when looking at Vista screenshots the are where the glass is, are darker. So perform a Brightness/Contrast on the blurred background layer with the following settings.

Step 14:
I created a guide to aid my alignment and then created a perfect circle (holding Shift) using black set to overlay. I then created another perfect circle a little bit smaller inside, changed this one’s colour to white and lowered the opacity to 31%.

I added a layer mask, made a selection (as seen below) and filled it will white, hit Ctrl-D, then I pull a gradient (set to 60% opaque) from the bottom of the previous selection to the bottom of the button.

Step 15:
Draw an arrow using the pen tool and make it black (for now)

Step 16:
Place the button shapes in a folder and call it button-left.

Step 17:
Duplicate the folder, rename it button-right and flip it horizontally.

Step 18:
Change the arrow colours to white and add the following stroke.

Step 19:
Zoom up close the the buttons. Draw 2 circles that are slightly larger than the buttons.

Step 20:
Now using the pen tool draw a shape like below. Then resize (whilst holding down shift) till the top most part of the new shape and the top most part of the circles line up, same with the bottom parts. Make these here shapes 100%opaque and move to below the buttons.

Step 20:
Apply the following gradient overlay.

Note: After performing the steps I noticed that I had to reverse the gradient in Step 20 and change the bottom most circle of each button opaque and change it to a light blue (average of the gradient.)
Step 21:
Draw the location bar using the rounded rectangle tool with a radius of 1px. Set the shape to white and 40% opaque.

Step 22:
Apply the following inner glow and strokes to the location bar. And change both fill and normal opacity to 60%

Step 23:
Now using the pen tool draw an arrow like below, duplicate it with the path selection tool, so that it is on the same layer. Flip the new arrow both horizontally and vertically. And apply the following gradient overlay and stroke.

Step 24:
The next step is quite easy, create a new text layer (size 10, Tahoma) and type out a location. Apply the same layer style as the window title but change the overlay to normal and set the opacity to 90%.

Then in between the location folders and triangles which are black and also 90% opaque.

Step 25:
Create the ‘word wheel’ or search bar the same way as you created the location bar (use the magnifying glass in the default custom shapes).

Step 26:
Draw a rounded rectangle with a 2px radius in the top right corner (as seen below) and apply the following blending options.

Step 27:
Now draw with the pencil tool 3 1px vertical lines on the window control button and set to 23%. Duplicate this and move an equal amount across. (The 3 buttons should go in size; small (minimize), small (maximize), and large (close).

Step 28:
Draw a minimize symbol using the rectangle tool and apply the following blending options:
Draw the maximize symbol utilizing the subtract feature and apply the same blending options.
Draw the close symbol using the default “X” in the custom shapes.

This is the end of the tutorial, please not that if you image does not resemble my image in any way then it is because I have made minor edits which you can easily also do if you pay close attention to the images. Where it is crucial for you to know that I have edited something I have added a Note after the step in question.
Results:

[*D*]

Awesome stuff, am definately going to try this even if it takes me an entire week to get through lol but I really love that transulent effect.

[RedDragon]

Looks great!!! Didnt know you already finished it lol, but thats a great tutorial!

[Eddie_K]

Man you are fast and have a lot of free time. Care to share some ?

Awesome tutorial and result. Keep up the outstanding work

Eddie

[lethal.7]

nice job, i think ill wat for vista tho

[Phryxus]

Awesome work Infnit!! The result looks great!

Can't try it because I doesn't have Photoshop..

[BMW_CHUBB]

Super tutorial

I tried to get the trans look on one of my skins and its quite a huge improovement on the whole smoothness of the graphics.

[RedDragon]

nice job BMW

[Ekklipse]

Very Nice Tut.. Think I Might Do This As I Write Music Tutorials For A Site Im On Might UseThis Effect To Blend It In To The Site..

[MysticMo]

First: I would like to say Hi
This is the first tutorial i've seen here. I am in aww right now. I have been looking for months for a tutorial on how to do exactly that. I can't wait to try it. You did a great job

Second: Question-Is there a way you can actually USE that as a theme? I have seen tons of tutorials on making custom interfaces but none have ever told you how to make it interactive?

Thanks for reading and for that awsome tutorial...I know what i am going to be doing this weekend