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:

Aero Glass Final

Let’s start:

1. Create a new project (Width: 230, Height: 180) and fill it with dark gray (#2a2a2a):

Aero Glass 1

2. Select the Rounded Rectangle Tool, set the radius to 5 px, color to black and draw something like this:

Aero Glass 2

3. Now we will add some effects with Layer > Layer Style> Blending Options:

Aero Glass 3

Aero Glass 4

Aero Glass 5

Aero Glass 6

Aero Glass 7

4. Now that we have created the button, let’s make it glossy. Select the Selection Tool and select this area:

Aero Glass 8

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:

Aero Glass Tip

Aero Glass 9

7. Set the foreground color to white and fill the selection using the Paint Bucket Tool. You’ll get something like this:

Aero Glass 10

8. Set the transparent of this layer to 20% (You can do that from the layers panel)

Aero Transparency

Aero Glass 11

9. And finally, you will type some text to get this final result:

Aero Glass Final

Optional: Let’s make it shiny with Flash (new)

Stay tuned… :)

  • Mad Scientist

    Great tutorial again :D :D i love it :P

  • Steve

    step 6 says “sh*t”! haha.

  • http://apalu.50webs.com Xsarq
  • Johny1000

    That toturial is good, but it’s english, so it’s not easy for other languages.

  • coffee

    LoL yea it does say ctrl + shit +alt

  • Maky

    Please how I set radius at rectange tool ??

    Thank you

  • http://www.eKhoury.com fusion

    when you select the Rounded Rectangle Tool, a toolbar on the top shows up containing some options… one of them is “Radius”…

  • Marion

    yep that true( I’m French ) but you can always get on internet and look for translation…

  • abhishek

    hey i liked ur work .. n this tutorial was very good

  • Maky

    Thank you

  • Marjolein

    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?

  • Marjolein

    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?

  • http://www.eKhoury.com fusion

    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!

  • Marjolein

    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…

  • http://www.eKhoury.com fusion

    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?

  • Marjolein

    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…

  • http://www.eKhoury.com fusion

    Check the tutorial again… I updated the transparency part

  • http://www.xcdesigners.com Dan[xcd]
  • Marjolein

    I’ll try it over again later and maybe it’s working then… Thnx for helping me;)

  • http://users.telenet.be/yv3z Yv3z

    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”

  • http://i18.tinypic.com/5z69nnn.jpg Gadget

    here is mine

    [img]http://i18.tinypic.com/5z69nnn.jpg[/img]

    thanks for the tut
    its very important to me

    thanks

  • Sander

    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

  • snoobi

    nice tutorial ….. everything is very good decrbed

    NICE :P

  • http://pheonixelite.com Elitet3

    nice, way too nice ;) , what font do you use?

  • http://www.eKhoury.com fusion

    try the MS Sans Serif… the default windows font… or verdana

  • Friction

    Great tutorial, but what are the hex colors for the gradient?

  • Diogo F.

    Nice tutorial!!

    My result:

    http://img443.imageshack.us/img443/3383/vistash8.gif

    Keep the good work!

    Tks again!

  • Diogo

    Hi!

    Use the code #148791

    See Ya! =D

  • Pyro

    THANK YOU! that’s an awesome tutorial!! I am using it as my site nav bar!

  • http://www.newmobilephone.net NewMobilePhone.net

    Thanks for this tutorial, it was easy to follow and the button looks great!

  • http://razorinc.com Admin

    Cool , smart, n easy tutorial.Thanks a lot man.
    I have bookmarked ur website for further tutorials.

    Thanks a ton!

  • buzz

    still trying to find the ‘shit’ button on my keyboard.

  • http://www.eKhoury.com fusion

    funny :P

  • Pete

    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.

  • Finau

    Wowww…that’s what i’m looking for…What a nice shot mannn..keep up the good work.

  • Fares.Misr

    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

  • Charles

    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?

  • http://www.ekhoury.com/2007/06/28/shiny-glass-button-in-flash-mx/ Fusion Live Blog » Shiny Glass Button in Flash MX

    [...] Fusion Live Blog v3 » « Aero Glass Vista Button with Photoshop [...]

  • Jihad

    Thanks that was very very helpful

  • mranderson

    Hmm.. I’m stuck at step 8, I set the Opacity to 20% but mine looks grey. Pleasae help.

    thx

  • http://www.eKhoury.com Elie Khoury

    It looks gray simply because your gradient starts from Black… therefore, transparent white over black gives you gray

  • mranderson

    Thanks a lot Elie Khoury, changing gradient fix the issue. This tutorial rules.

  • aftab alam

    Never design this type of button before this, How stonoshing and simple. Thanks a lot.

  • aftab alam

    How stonoshing button, Good by all mean. I never desinged button like this before. Thanks a lot

  • keel

    great tutorial. It helped me a lot in a multimedia class I had :)

  • David Ryan

    nathan musser likes it up the ass

  • http://www.oyuncusincap.com oyun

    This is very nice tutorial and button is really great. Thank for this great tutorial.

  • http://www.psd-tutorials.de/modules/Forum/11_photoshop/47651-will-das-gerne-machen-kann-aber-nicht.html#post596377 Will das gerne machen kann aber nicht – PSD-Tutorials.de – Forum

    [...] 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 [...]

  • http://www.photoshophome.com Raj

    absolutely awesome tutorial. Thanx m8.

  • http://sourabhsalgia.blog.co.in/2008/06/25/tutorials-for-web-development/ Tutorials for Web Development

    [...] Aero-glass-vista-button-with-photoshop [...]

  • http://www.vaishnomata.org avn

    thanks buddy… it’s a fantastic tutorial…
    cheers!!

    avn

  • http://www.hunsadesign.com cyberpat

    Thank You U so much

  • Joel

    Great tutorial! Really helpful and the buttons look great! Thanks

  • pccong

    greate. thanks

  • NETBUSTER

    NICE MAN WORK JUST FINE GREAT JOB

  • http://thephotoshopper.blogspot.com Abhinav Rastogi

    great tute!! really easy to follow.. thanks!!

  • http://www.glasstuts.com glasstuts

    Never thought these buttons can be created in such an easy way! Thanks for sharing your tutorial. Dugg it!

  • http://glasstutorials.wordpress.com/2008/09/13/glass-vista-button-in-photoshop-tutorial/ Glass Vista Button in Photoshop Tutorial « Glass Potoshop Tutorials

    [...] read more | digg story [...]

  • http://guiwells.wordpress.com/2008/09/15/master-photoshop-by-elite/ Master Photoshop by Elite « Guiwells’s Blog

    [...] Aero Glass Vista Button With Photoshop [...]

  • Vitaliy

    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.

  • JULS

    m juls from Philippines thanx for ur nice tutorial. it really helps.

  • http://elitebydesign.com/how-to-master-photoshop-in-just-one-week-pt-2/ How To Master Photoshop In Just One Week Pt. 2

    [...] Aero Glass Vista Button With Photoshop . . . [...]

  • http://www.photoshop-pack.com/photoshop-packs/pack-002-twenty-photoshop-button-tutorials-that-will-inspire-you/66 Photoshop Packs » Pack 002: Twenty Photoshop Button Tutorials That Will Inspire You

    [...] Aero Glass Vista Button with Photoshop [...]

  • abhijit.crusader

    good tutorial buddy.

    this help me increating a new theme for xp. :D

  • http://www.photoshop-pack.com/photoshop-packs/twenty-photoshop-web20-button-tutorials/219 Twenty Web 2.0 Button Photoshop Tutorials | Photoshop-Pack · Adobe Photoshop Tutorials, Interviews, Inspiration, Videos, Tips, and Support Forums

    [...] Aero Glass Vista Button with Photoshop button_15 [...]

  • http://photoshop-pack.com/2009/06/twenty-web-20-button-photoshop-tutorials/ Twenty Web 2.0 Button Photoshop Tutorials | Photoshop-Pack · Adobe Photoshop Tutorials, Interviews, Inspiration, Videos, Tips, and Support Forums

    [...] Aero Glass Vista Button with Photoshop button_15 [...]

  • Sunshine

    a button to my happiness))))

  • http://www.webforview.com Sanjeev Chak

    Very Nice Tutorial

blog comments powered by Disqus