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! 
June 22nd, 2007 at 5:17 pm
Great tutorial again
:D i love it 
June 23rd, 2007 at 7:52 am
step 6 says “sh*t”! haha.
June 23rd, 2007 at 10:10 am
My rezult
http://img224.imageshack.us/img224/6627/resuoukltqx7.png
June 23rd, 2007 at 11:33 am
That toturial is good, but it’s english, so it’s not easy for other languages.
June 23rd, 2007 at 6:39 pm
LoL yea it does say ctrl + shit +alt
June 23rd, 2007 at 9:46 pm
Please how I set radius at rectange tool ??
Thank you
June 23rd, 2007 at 11:50 pm
when you select the Rounded Rectangle Tool, a toolbar on the top shows up containing some options… one of them is “Radius”…
June 24th, 2007 at 8:17 am
yep that true( I’m French ) but you can always get on internet and look for translation…
June 24th, 2007 at 8:45 am
hey i liked ur work .. n this tutorial was very good
June 24th, 2007 at 11:12 am
Thank you
June 24th, 2007 at 11:57 am
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?
June 24th, 2007 at 12:03 pm
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?
June 24th, 2007 at 1:38 pm
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!
June 24th, 2007 at 3:06 pm
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…
June 24th, 2007 at 3:10 pm
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?
June 24th, 2007 at 3:14 pm
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…
June 24th, 2007 at 3:47 pm
Check the tutorial again… I updated the transparency part
June 24th, 2007 at 3:53 pm
My Result ^_^
http://img518.imageshack.us/img518/9724/25963825qk5.png
June 24th, 2007 at 3:57 pm
I’ll try it over again later and maybe it’s working then… Thnx for helping me;)
June 24th, 2007 at 6:27 pm
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”
June 24th, 2007 at 6:51 pm
here is mine
[img]http://i18.tinypic.com/5z69nnn.jpg[/img]
thanks for the tut
its very important to me
thanks
June 25th, 2007 at 3:21 pm
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
June 25th, 2007 at 5:01 pm
nice tutorial ….. everything is very good decrbed
NICE
June 26th, 2007 at 4:01 am
nice, way too nice
, what font do you use?
June 26th, 2007 at 10:09 pm
try the MS Sans Serif… the default windows font… or verdana
June 29th, 2007 at 3:26 pm
Great tutorial, but what are the hex colors for the gradient?
June 30th, 2007 at 2:41 am
Nice tutorial!!
My result:
http://img443.imageshack.us/img443/3383/vistash8.gif
Keep the good work!
Tks again!
June 30th, 2007 at 2:48 am
Hi!
Use the code #148791
See Ya! =D
July 2nd, 2007 at 11:44 pm
THANK YOU! that’s an awesome tutorial!! I am using it as my site nav bar!
July 8th, 2007 at 8:37 pm
Thanks for this tutorial, it was easy to follow and the button looks great!
July 8th, 2007 at 9:54 pm
Cool , smart, n easy tutorial.Thanks a lot man.
I have bookmarked ur website for further tutorials.
Thanks a ton!
July 9th, 2007 at 10:50 am
still trying to find the ’shit’ button on my keyboard.
July 9th, 2007 at 10:53 am
funny
July 10th, 2007 at 5:55 am
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.
July 12th, 2007 at 5:09 am
Wowww…that’s what i’m looking for…What a nice shot mannn..keep up the good work.
July 27th, 2007 at 5:02 am
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
August 31st, 2007 at 5:01 pm
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?
September 27th, 2007 at 11:08 pm
[...] Fusion Live Blog v3 » « Aero Glass Vista Button with Photoshop [...]
November 1st, 2007 at 9:35 pm
Thanks that was very very helpful
December 11th, 2007 at 11:22 pm
Hmm.. I’m stuck at step 8, I set the Opacity to 20% but mine looks grey. Pleasae help.
thx
December 12th, 2007 at 8:36 am
It looks gray simply because your gradient starts from Black… therefore, transparent white over black gives you gray
December 12th, 2007 at 3:53 pm
Thanks a lot Elie Khoury, changing gradient fix the issue. This tutorial rules.
December 17th, 2007 at 4:10 pm
Never design this type of button before this, How stonoshing and simple. Thanks a lot.
December 17th, 2007 at 4:15 pm
How stonoshing button, Good by all mean. I never desinged button like this before. Thanks a lot
January 8th, 2008 at 6:26 pm
great tutorial. It helped me a lot in a multimedia class I had
January 18th, 2008 at 5:04 pm
nathan musser likes it up the ass
March 8th, 2008 at 1:41 am
This is very nice tutorial and button is really great. Thank for this great tutorial.
May 13th, 2008 at 4:11 pm
[...] 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 [...]
June 1st, 2008 at 9:27 am
absolutely awesome tutorial. Thanx m8.
June 24th, 2008 at 9:01 pm
[...] Aero-glass-vista-button-with-photoshop [...]
August 2nd, 2008 at 1:24 pm
thanks buddy… it’s a fantastic tutorial…
cheers!!
avn
August 2nd, 2008 at 5:21 pm
Thank You U so much
August 17th, 2008 at 6:30 am
Great tutorial! Really helpful and the buttons look great! Thanks
September 3rd, 2008 at 8:56 am
greate. thanks
September 5th, 2008 at 10:45 am
NICE MAN WORK JUST FINE GREAT JOB
September 7th, 2008 at 4:29 pm
great tute!! really easy to follow.. thanks!!
September 13th, 2008 at 1:07 pm
Never thought these buttons can be created in such an easy way! Thanks for sharing your tutorial. Dugg it!
September 13th, 2008 at 2:00 pm
[...] read more | digg story [...]
September 15th, 2008 at 6:32 am
[...] Aero Glass Vista Button With Photoshop [...]
September 23rd, 2008 at 3:06 am
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.
October 9th, 2008 at 2:37 am
m juls from Philippines thanx for ur nice tutorial. it really helps.
October 18th, 2008 at 11:01 pm
[...] Aero Glass Vista Button With Photoshop . . . [...]
October 28th, 2008 at 6:00 pm
[...] Aero Glass Vista Button with Photoshop [...]
June 21st, 2009 at 10:02 am
good tutorial buddy.
this help me increating a new theme for xp.