Aero Glass Vista Button with Photoshop
The last tutorial I wrote was “How to draw a glossy black panel with photoshop”. Now, we’re gonna do something a bit similar but more useful for websites and GUI designers. I’m not going a lot through details, you should be a bit familiar with photoshop. Otherwise, you can check some older tutorials I’ve written on this blog. As usual, I’m gonna show you in the beginning what we will be working on:
Let’s start:
1. Create a new project (Width: 230, Height: 180) and fill it with dark gray (#2a2a2a):
2. Select the Rounded Rectangle Tool, set the radius to 5 px, color to black and draw something like this:
3. Now we will add some effects with Layer > Layer Style> Blending Options:
4. Now that we have created the button, let’s make it glossy. Select the Selection Tool and select this area:
5. Press Ctrl + Shift + N to create a new Layer.
6. Hold Ctrl + Shift + Alt and click the button’s icon in the Layers panel to get the intersection of the selection with the button. Then “Select > Modify > Contract” and contract the selection of 1 px:
7. Set the foreground color to white and fill the selection using the Paint Bucket Tool. You’ll get something like this:
8. Set the transparent of this layer to 20% (You can do that from the layers panel)
9. And finally, you will type some text to get this final result:
Optional: Let’s make it shiny with Flash (new)
Stay tuned… 
I am Elie El Khoury, from Lebanon (Byblos), Woopra co-founder & CIO, Web & Software Developer, Designer, Guitarist, Mac user and the worst blogger on earth! 
Great tutorial again
:D i love it 
step 6 says “sh*t”! haha.
My rezult
http://img224.imageshack.us/img224/6627/resuoukltqx7.png
That toturial is good, but it’s english, so it’s not easy for other languages.
yep that true( I’m French ) but you can always get on internet and look for translation…
LoL yea it does say ctrl + shit +alt
Please how I set radius at rectange tool ??
Thank you
when you select the Rounded Rectangle Tool, a toolbar on the top shows up containing some options… one of them is “Radius”…
hey i liked ur work .. n this tutorial was very good
Hello,
I’m Marjolein from Holland, but one thing, I don’t understand…
6. Hold Ctrl + Shit + Alt and click the button’s icon in the Layers panel to get the intersection of the selection with the button. Then “Select > Modify > Contract†and contract the selection of 1 px:
Can you help me please?
Hello ;; I’m Marjolein from Holland, but I don’t understand something.
5. Press Ctrl + Shift + N to create a new Layer.
6. Hold Ctrl + Shit + Alt and click the button’s icon in the Layers panel to get the intersection of the selection with the button. Then “Select > Modify > Contract†and contract the selection of 1 px:
Please, can you help me?
Same technique was used in the step 4 of the following tutorial:
http://www.ekhoury.com/2007/03/29/glossy-black-panel-with-photoshop/
Anyway, where you have the rectangle selection that you’ve done in step 4 of this tutorial, we want to have the intersection selection with the button… Check back what I added to the tutorial to make it more clear!
My Result ^_^
http://img518.imageshack.us/img518/9724/25963825qk5.png
I already put it on my site as a navbar, it looks great.
check: http://users.telenet.be/yv3z
Just enlarge the glow and use another gradient to get that “hover-effect”
here is mine
[img]http://i18.tinypic.com/5z69nnn.jpg[/img]
thanks for the tut
its very important to me
thanks
nice tutorial ….. everything is very good decrbed
NICE
nice, way too nice
, what font do you use?
try the MS Sans Serif… the default windows font… or verdana
Great tutorial, but what are the hex colors for the gradient?
Hi!
Use the code #148791
See Ya! =D
Nice tutorial!!
My result:
http://img443.imageshack.us/img443/3383/vistash8.gif
Keep the good work!
Tks again!
THANK YOU! that’s an awesome tutorial!! I am using it as my site nav bar!
Thanks for this tutorial, it was easy to follow and the button looks great!
Cool , smart, n easy tutorial.Thanks a lot man.
I have bookmarked ur website for further tutorials.
Thanks a ton!
still trying to find the ’shit’ button on my keyboard.
funny
Good tutorial. I learned a lot. Now this is probably a silly question
but how do I save just the button and not the initial background
Cheers Pete.
Wowww…that’s what i’m looking for…What a nice shot mannn..keep up the good work.
Nice Tutorial
Keep Going
You Can Create this Tutorial in PDF File to Share it Over The Internet
See my Result :>
http://img262.imageshack.us/my.php?image=vistabuttonxs6.png
Very Cool!
Now I’m looking for some steps to create a diferent look for the hover effect.
You can see what i’m trying to achieve here:
http://vista-buttons.com/website-button-graphics-vista-style-8-sample.html
Unfourtunatly i’m having the hardest time, and I’m about to give up.
How can i get that hover?
[...] Fusion Live Blog v3 » « Aero Glass Vista Button with Photoshop [...]
Thanks that was very very helpful
Hmm.. I’m stuck at step 8, I set the Opacity to 20% but mine looks grey. Pleasae help.
thx
It looks gray simply because your gradient starts from Black… therefore, transparent white over black gives you gray
Thanks a lot Elie Khoury, changing gradient fix the issue. This tutorial rules.
Never design this type of button before this, How stonoshing and simple. Thanks a lot.
How stonoshing button, Good by all mean. I never desinged button like this before. Thanks a lot
great tutorial. It helped me a lot in a multimedia class I had
nathan musser likes it up the ass
This is very nice tutorial and button is really great. Thank for this great tutorial.
[...] Will das gerne machen kann aber nicht Hey, Stichwort "Vista Button" – Elie El Khoury ? Aero Glass Vista Button with Photoshop ★ – The Not Simple Solutions ? Create Vista Buttons Using Styles Only – Photoshop tutorial: Vista [...]
absolutely awesome tutorial. Thanx m8.
[...] Aero-glass-vista-button-with-photoshop [...]
thanks buddy… it’s a fantastic tutorial…
cheers!!
avn
Thank You U so much
Great tutorial! Really helpful and the buttons look great! Thanks
greate. thanks
NICE MAN WORK JUST FINE GREAT JOB
great tute!! really easy to follow.. thanks!!
Never thought these buttons can be created in such an easy way! Thanks for sharing your tutorial. Dugg it!
[...] read more | digg story [...]
[...] Aero Glass Vista Button With Photoshop [...]
What is really stupid is that the author of this post didn’t say what gradient colors to use. The gradient color on the left is: #148791, and on the right is: #000f1b.
For the right one, it is just basically black color, so it doesn’t has to be #000f1b, it could be #000000.
m juls from Philippines thanx for ur nice tutorial. it really helps.
[...] Aero Glass Vista Button With Photoshop . . . [...]
[...] Aero Glass Vista Button with Photoshop [...]
good tutorial buddy.
this help me increating a new theme for xp.
[...] Aero Glass Vista Button with Photoshop button_15 [...]
[...] Aero Glass Vista Button with Photoshop button_15 [...]
a button to my happiness))))
Thank you
Thank you so much for helping! But another problem…
How can I get the foreground white?
Why it’s not working?
It’s a big problem that I don’t speak very good English… =(
A screenshot:
http://i9.tinypic.com/53z9ipv.jpg
I’m sorry for wasting your time…
you missed some steps man…
the Stroke, Inner and Outer glow…
in order to paint with white, you should create a new layer… did u miss that step?
Yes… That was stupid! But ;; I have it white now… And then, where can you do the transparent? I’m really sorry for wasting your time, but I don’t understand it, because I’m from Holland…
Check the tutorial again… I updated the transparency part
I’ll try it over again later and maybe it’s working then… Thnx for helping me;)
Marjolein, als je nog problemen hebt met vertalen, wil k je ook wel helpen (niet dat ik zow geweldig engels kan, maar k wil t wel proberen
)
Grtz, Sander