Create Vista Buttons Using Styles Only
In this tutorial I’ll show you how to create vista styled buttons using Photoshop layer’s styles only.
This PSD was downloaded 6600 times.
First, we need new document (Ctrl + N) and new layer (Shift + Ctrl + N) to work. I’ve used 200×100 canvas and 105×29 button layer.
Apply some (no matter what) color to selected area
Let’s now work with the styles. First - select true glass gradient colors.
I’ve used : #656a6d - #000000; #434343 - #dedede;
Something like that:
Apply gradient style to layer and you should see:
The next - add some stroke to layer
I’ve used 1 px dark stroke
The result
The next step - apply another inner stroke, since it’s impossible - we’ll use “Inner Glow”
The result
The button is almost done, except one little thing - tiny rounded corners
I’ve used rectangle-circle technique to select soft corners (don’t forget to hold Shift while selecting rectangle)
To understand better what’s going on - disable styles
Deselect all corners except left top, then hit del. To select and delete other corners you can transform selection (Select->Transform selection) or copy the top left corner to another layer and then edit it. The second solution is prefarable cause you’ll get completely identycal corners
Enable styles and you will see:
That’s it!
You can compare my result with Vista screenshots
Save this style to use in future (Blending Options->New style)
As the bonus - another 9 buttons for you. Enjoy!
thank you
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ nice tutorial\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
The download link is broken.
Awesome. Simple technique - but effective.
thanks for sharing!
DM
Great tutorial, Iv’e been looking for a way to make Vista-buttons.. Thank u very much!! Maybe you could make one with making of the blueish light effect when mouse is moved across the button? Thanks again, keep up the good work
The download worked for me, although I doubt Ill need it as the instructions are clear and easy to follow. Thanks.
One small notice - you could add a “Inner Shadow” layer, with grey colour, small Distance (something like 5px), small Size (also, 5-7 px), and Angle of -90 degrees.
hi !
thanks for sharing the best learning
Please see this site:
www.majidonline.com
!!!!!!!!!!! WOW !!!!!!!!!!!! thanks 4 sharing brither : D
Here is the best vista effect buttons that i looking for. Thank you for giving PSD files
[…] Vista buttons using styles only from The Not Simple Solution […]
[…] Botões estilo vista - Créditos: The Not Simple Solution […]
use thefreewebstuff.com to generate vaist buttons online in seconds
This is the simplest solution ever for a Vista Style Glass button and possibilites are endless after doing this tutorial..
Thank you so much dude..
Wow! This is so beautiful buttons, I like it.
Nice tutorial
[…] "Vista Button" - Elie El Khoury » Aero Glass Vista Button with Photoshop ★ - The Not Simple Solutions » Create Vista Buttons Using Styles Only - Photoshop tutorial: Vista button wenn es unbedingt den helleren Bereich geschwungen haben soll, […]
[…] is based on: http://www.oscaralexander.com/tutori…-with-css.html My Photoshop is based on: The Not Simple Solutions Create Vista Buttons Using Styles Only The HTML is all up and running (see first link) but I need to customize the colors for my website. […]
[…] http://thenotsimple.com/2007/10/18/create-vista-buttons-using-styles-only/Popularity: […]