www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
3D Abstract Crystals Learn how to create an awesome digital art piece! Very Cool! read more...
Join our Mailing List to receive:
  • Site Updates
  • Photoshop Tutorials
  • Webmaster Tips
  • Hot Site Reviews
  • & much more...

  • Mailing List: Privacy Policy


    Affiliates
    Your Link Here

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



    LearnIt2 | Adobe Photoshop, Adobe Illustrator and Adobe ImageReady Tutorials

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

    
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily.



    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:


    Result:






    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:


    Result:


    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!





    Related Tutorials:
        View Render Layout Tutorial vol. 4: Button Creation Render Layout Tutorial vol. 4: Button Creation
    In this tutorial you will learn how to create an entire layout by using an exsis ...
        View CMS Buttons CMS Buttons
    Learn how to create simple CMS or (Content Management System) buttons, quickly a ...
        View Macro Layout Macro Layout
    Learn the tricks and techniques used to create the Macro Layout. A great learnin ...


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