Help - Search - Members - Calendar
Full Version: Replicate The Windows Vista Interface
13Dots Forum > Tutorials And Articles > Photoshop/Image Ready/Illustrator
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.
Click to view attachment
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.
Click to view attachment
Step 3:
Change the shape colour to a light blue colour, this will give a glassy colour to the final result.
Click to view attachment
Step 4:
Set the fill opacity to 25% and set the following stroke.
Click to view attachment
Step 5:
Duplicate this layer, switch the colour from light blue to white and turn off the stroke.
Click to view attachment
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
Click to view attachment
Step 7:
On the duplicated part of the background perform a Gaussian Blur with about a 2px radius.
Click to view attachment
Step 8:
Now using the rectangle tool, draw the inside of the window with white foreground.
Click to view attachment
Step 9:
Apply the following Bevel and Emboss to the inside white rectangle.
Click to view attachment
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.
Click to view attachment
Step11:
To the white frame add the following inner glow.
Click to view attachment
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.
Click to view attachment
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.
Click to view attachment
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.

Click to view attachment
Step 15:
Draw an arrow using the pen tool and make it black (for now)
Click to view attachment
Step 16:
Place the button shapes in a folder and call it button-left.
Click to view attachment
Step 17:
Duplicate the folder, rename it button-right and flip it horizontally.
Click to view attachmentClick to view attachment
Step 18:
Change the arrow colours to white and add the following stroke.
Click to view attachment
Step 19:
Zoom up close the the buttons. Draw 2 circles that are slightly larger than the buttons.
Click to view attachment
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.
Click to view attachment
Step 20:
Apply the following gradient overlay.
Click to view attachment
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.
Click to view attachment
Step 22:
Apply the following inner glow and strokes to the location bar. And change both fill and normal opacity to 60%
Click to view attachment
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.
Click to view attachmentClick to view attachment
Click to view attachment
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.
Click to view attachment
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).
Click to view attachment
Step 26:
Draw a rounded rectangle with a 2px radius in the top right corner (as seen below) and apply the following blending options.
Click to view attachmentClick to view attachment
Click to view attachmentClick to view attachment
Click to view attachment
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).
Click to view attachment
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.
Click to view attachmentClick to view attachment
Click to view attachment
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.

thumbsup.gif
RedDragon
Looks great!!! Didnt know you already finished it lol, but thats a great tutorial! smile.gif
Eddie_K
Man you are fast smile.gif and have a lot of free time. Care to share some ? biggrin.gif

Awesome tutorial and result. Keep up the outstanding work thumbsup.gif

Eddie
lethal.7
nice job, i think ill wat for vista tho victory.gif
Phryxus
Awesome work Infnit!! The result looks great!

Can't try it because I doesn't have Photoshop.. blush.gif
BMW_CHUBB
Super tutorial thumbsup.gif

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 thumbsup.gif
Ekklipse
Very Nice Tut.. Think I Might Do This As I Write Music Tutorials For A Site Im On smile.gif Might UseThis Effect To Blend It In To The Site.. bigwink.gif
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. biggrin.gif 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 blush.gif
alias.infnit
Firstly; Thanks, I try victory.gif

Secondly; Sorry but I am not a skinner - wait for thereal thing, much better bigwink.gif or try en.crystalxp.net
williethaman
hey as u can c im new but i wanted to ask if u can explain step 14 what more
ComputerGeek
I need help withstep 4 and step 5
ComputerGeek
I need help with steps 3, 4, 5, 6, and i can't get the glassy effect
alias.infnit
It's just drawing the shape with a light blue colour, adding a stroke to it and changing the blue shapes opacity to like 25%. Then duplicating the shape, turning off the stroke and changing the new shape's colour to white.
Darlyn
The only word I can use to describe this tutorial: AWESOME!
Thanks for posting this, Ive been looking for something on Vista ever since I heard of it.
alias.infnit
Thank you Darlyn
njron
very nice described
AuRoN
Looks great!!!
riteshldh007


Create Something Like This

Try to create shine effect like abv.
I have tried it but i am not near it.
take a look

http://img505.imageshack.us/my.php?image=82851566na2.swf

combination of photoshop & flash*
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.