SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50

Hybrid View

  1. #1
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vista Aero Glass Buttons in Photoshop

    Vista Aero Glass Buttons
    by Hamish Macpherson (http://blog.hamstu.com) | March 26, 2007



    Requirements:
    • Adobe Photoshop (7+)
    • Basic knowledge of said software


    This tutorial will teach you how to make Vista style buttons, much like the ones found on the new Task Bar. However, the basics of the effect are found throughout the OS, and therefore can be applied to other shapes / objects as well.

    Step 1.

    Startup Photoshop. Create a new document, make sure it's RGB, with a White background, 72ppi resolution. Size (W x H) is up to you.

    Step 2.

    Select the Rounded Rectangle tool (1).
    - Click the arrow in the options bar, and make sure Snap to Pixels (2) is checked, also make sure Shape layers (3) are enabled.
    - Make the corner Radius about 8px, I have 3px in the screenshot, but that's a bit too small.
    - We'll add layer effects soon, so the color of your rectangle doesn't matter.



    Step 3.

    Draw a rounded rectangle as wide as you want, and about 40px high.

    Step 4.

    Now it's time for some layer effects. Start by pressing Layer --> Layer Style --> Stroke...
    Use the settings in the screenshot below:



    Next we'll add a gradient.



    Step 5.

    At this point we have a decent glass button. But lets add a few more effects to give it that Vista flare.

    We'll start with an Inner Glow.



    Now, a Drop Shadow (though the actual effect isn't much of a shadow)



    And lastly, an Inner Shadow (again, we're actually using this for a highlight, not a shadow)



    OK, we're done the effects. One quick note, the drop shadow we added earlier won't be visible on a white background, so select the Background layer and fill it (Alt+Backspace) with a medium gray.

    Here is my final result (the typeface is "Lucida Sans Unicode"). Read below to find out how to change color.



    Step 6, Tweaking

    Changing shape

    Since the button is a shape object, you can easily use the Direct Selection Tool (Press the A key) to drag the points and resize the button. Just be careful when moving points, since they won't be restrained to pixel values, your edges might go blurry -- to fix that, zoom in and move the points until the edges becomes sharp again. To avoid the problem you can use the Arrow keys, and Shift+Arrow keys, to move the points in increments.

    Note: Make sure the button isn't too high, since the Gradient Overlay (due to the way it works) will begin to look a little blurry. Of course, this might not bother you, so do whatever looks best

    Changing color

    For precise color modification, your best bet is to modify the Gradient Overlay in the layer styles.

    But for something a little quicker, you can:
    • Ctrl+Click the layer
    • Add a new Hue & Saturation adjustment layer
    • Adjust as desired



    -
    Thanks.

    Well, that's all. Thanks for reading. If you enjoyed this tutorial, or if you have any questions, feel free to post in this thread, and I'll see what I can do.
    Last edited by AutisticCuckoo; Oct 16, 2008 at 23:42. Reason: Fixed Images

  2. #2

  3. #3
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hamish

    Regarding the gradient - you don't have to place opacity stops in the same places, where the color stops are.
    It would be enough to make just 2 ones, on both ends of the gradient (both 100% opacity)
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  4. #4
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.

    Quote Originally Posted by Varelse View Post
    Regarding the gradient - you don't have to place opacity stops in the same places, where the color stops are.
    It would be enough to make just 2 ones, on both ends of the gradient (both 100% opacity)
    Oh, I do believe you are right.
    I'll change that bit. (Edit: Done)
    Last edited by hamstu; Mar 27, 2007 at 15:42.

  5. #5
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If the opacity doesn't change along the gradient, there's no need for sub-steps.
    But it doesn't change the value of your tutorial!
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  6. #6
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been looking for an Aero tutorial for a while now.

    Thanks Hamish!

  7. #7
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad you liked it Iceman, thanks for the feedback

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to be a pest but do you have this somewhere where the images load up instead of showing links (just so I can print it out)

    Many thanks

    R

  9. #9
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rikki View Post
    Sorry to be a pest but do you have this somewhere where the images load up instead of showing links (just so I can print it out)
    This doesn't work for you?
    http://www.sitepoint.com/forums/prin...d.php?t=468442

    The images are showing up for me.

  10. #10
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Images are showing fine, so this must be a problem with Rikki's computer or internet connection.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, well in this thread I see this:



    Where it would look better (to print) as this kind of thing:



    R.

  12. #12
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! Turns out there is an option in the settings here :

    Visible Post ElementsYou have the option to show or hide various elements of messages, which may be of use to users on slow internet connections, or who want to remove extraneous clutter from posts.
    Show Signatures
    Show Avatars
    Show Images (including attached images and images in [IMG] code)

    Never seen that before (and I've been registered on here for years!).

    Fixed now

    R

  13. #13
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice tutorial fella

    Si

  14. #14
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rikki View Post
    Doh! Turns out there is an option in the settings here :

    Visible Post ElementsYou have the option to show or hide various elements of messages, which may be of use to users on slow internet connections, or who want to remove extraneous clutter from posts.
    Show Signatures
    Show Avatars
    Show Images (including attached images and images in [IMG] code)

    Never seen that before (and I've been registered on here for years!).

    Fixed now

    R
    Ah, glad to hear it

  15. #15
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, I couldn't miss this, bookmarked. I usually create rounded rectangle using smooth selection tool after I did a rectangle selection. Seems rounded rectangle tool is a better way to go.

  16. #16
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Smooth selection tool produces jagged edges instead of really smooth round corners, so rounded rectangle tool is a better solution.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  17. #17
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those buttons look nothing less than perfect.
    thx.

  18. #18
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope, those buttons look cool.

  19. #19
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanku for the tutorial

    have a try
    hehe~~

    12.jpg

  20. #20
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ICactioN View Post
    have a try
    hehe~~

    12.jpg
    Looks great! I'm glad you liked it.

  21. #21
    SitePoint Member
    Join Date
    May 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great tutorial, any way of doing this directly in flash rather than photoshop?

  22. #22
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bilderbach View Post
    great tutorial, any way of doing this directly in flash rather than photoshop?
    Well, you could probably do it with several layers and some tricky gradients, but unless you absolutely need it in vector, I would make it in Photoshop first, and then export the PNG for Flash. (I'm assuming you have Photoshop, of course.)

  23. #23
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I sava this page to my computer I Like it just wanna say Great GReat and Great !!! thanks ...

  24. #24
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by radeondt View Post
    Ok I sava this page to my computer I Like it just wanna say Great GReat and Great !!! thanks ...
    Thanks a lot, I'm glad you like it!

  25. #25
    SitePoint Addict EJ's Avatar
    Join Date
    Sep 2005
    Location
    Hills
    Posts
    237
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you should submit this to Good-Tutorials, get some extra exposure. Maybe.

    Nice effect by the way!
    “There's a way to do it better - find it.”
    — Thomas Edison


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •