SitePoint Sponsor

User Tag List

Results 1 to 25 of 50

Threaded 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


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
  •