Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Stitches Text Effect Create a very scary, and cool stitches, or zombie text effect! Great Tutorial! read more...
Join our Mailing List to receive:
  • Site Updates
  • Photoshop Tutorials
  • Webmaster Tips
  • Hot Site Reviews
  • & much more...

  • Mailing List: Privacy Policy

    Your Link Here

    www.VidPit.com: Funny, Cool & Sexy videos!

    Windows GUI MODS

    Photoshop Family :: Great photoshop tutorials!

    Link to us
    ( Link to PhotoshopTower.com )

    wholesale computers

    PhotoshopForce.com - Photoshop Tutorials

    Site By: Coastal Web Innovations

    Some web hosting solutions you can find yourself on WHG and a list of
    web hosting companies.
    MAC OSX Buttons
    In this tutorial we are going to re-create those fancy buttons that are used on Mac OSX, that you see all over the place these days. These buttons are highly stylized and really give a great sense of depth to your web site layouts, and application utilities.

    Page 1 of 1

    Step 1.)
    Open an existing document of any size, or create a new one. I will be working on a sample grid background

    that you see on all OSX alert and prompt boxes.

    Step 2.)
    Create a new layer, and name this layer 'button base'. Get out your rectangular marquee tool () and make a square selection as l've done here:

    Step 3.)
    Go to Select->Modify->Smooth with a setting of 6 pixels:


    Step 4.)
    Set your foreground color to: #373EA3 and your background color to: #94DDF6

    Now get out your gradient fill tool (), and set it up with a foreground, to background gradient as l've done here:

    Now fill in your selection with a dark to light gradient as l've done here:

    Do not deselect the selection.

    Step 5.)
    Double click this layer, and apply the following blending options:

    Drop Shadow:


    Do not deselect the selection.

    Step 6.)
    Create a new layer, by pressing CTRL+ SHIFT + N on your keyboard.

    Your selection should still be active, if not hold down the CTRL Key on your keyboard, and click the layer named "button base".

    Get out the rectangular marquee tool (). Now while holding down the ALT key on your keyboard deselect the bottom half of our selection as l've done here:

    Set your foreground color to white (#FFFFFF), get out the gradient fill tool () and set your gradient style to "foreground to transparent":

    Now fill in this selection with our gradient, with a white to transparent, like l've done here:

    Press CTRL + D on your keyboard to deselect the selection

    Step 7.)
    Next press CTRL + T on your keyboard to get out the free transform tool.
    Here's how your screen should look:

    Now hold down the SHIFT + CTRL + ALT keys on your keyboard, place your cursor near the node (small square) in the bottom left corner of the box and drag it slightly inward as l've done here:

    Press RETURN on your keyboard to finalize the transformation, result:

    Step 8.)
    Now press the V key on your keyboard to get out the move tool. and tap the DOWN ARROW on your keyboard once, to nudge the gloss down one pixel, result:

    Step 9.)
    Drop the opacity of this layer down to 80 percent as l've done here:

    This should lighten it up, just a little bit.

    Step 10.)
    The only thing left to do is add some text to this bad boy and call it good. The text that is used on the actual Mac OSX buttons is a 12pt Verdana, with the SHARP setting:

    Try changing the colors used in step #xx to get a different looking button, as l've done below you'll see l used a pale grey, and a slightly shaded white color for the 'continue' button:

    I hope you've had fun learning this technique, please be sure to check out the rest of our great tutorials while you're here!

    Home | Tutorials | About Us | Services | Contact Us | Affiliates | Search | SM | Top^