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