www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
3 Step Grunge Borders Create a rustic grunge border in only three steps! User Requested! 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!



    9 tutorials - Photoshop tutorials , Flash tutorials, PHP tutorials and much more

    Pixel-EFX.net :: Where The Web & Mind Combine





    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.
    Slick XP Buttons


    In this tutorial l will show you how to create some slick xp style buttons that look great on any e-commerce or data relay site. You can also change the colors used in this tutorial to get a completely different looking button, but l think the green and blue compliment each other well, and the idea for this tutorial came to me while l was looking at my XP tool bar.

    Page 1 of 1

    Step 1.)
    Open an existing document or start a new one, l'm using a new 500 x 300 document for the purposes of this tutorial





    Step 2.)
    Fill the background with any color, l choose a pale white (#EFEEE0) light colors seem to work better with this style of buttons.





    Step 3.)
    Create a new layer name this layer "Button Base". Get out the rectangular marquee tool (), and make a selection on the canvas similar to this:


    Go to Select->Modify->Smooth with a setting of 7 pixels:


    Fill this selection with #287DBE, and leave the selection active:






    Step 4.)
    Create a new layer and name it "Button Icon". Get out the elliptical marquee tool ().
    While holding down the ALT key on your keyboard, deselect a portion of the selection so that you have a selection similar to this:


    Fill this selection with #32A500






    Step 5.)
    Now click the "Button Base" layer to activate it, and tap "DELETE" on your keyboard to remove delete this area from the base layer.

    Double click the "Button Base" layer and apply the following blending options:
    Stroke:
    (Color used is #0E287D)






    Step 6.)
    Now double click the "Button Icon" layer and apply the following blending options:
    Stroke:
    (Color used is: #166723)


    Result:






    Step 7.)
    Now create a new layer, and name it "shine".
    Hold down the CTRL + SHIFT keys on your keyboard and click both the "Button Base" and the "Button Icon" layer, to make a selection of both layer contents:



    Fill this selection with black (#000000).
    (Click two or three times to ensure you fill the entire area)


    Change the 'blending mode' of this layer to 'screen':
    (this will make the "black" invisible)


    Double click this layer, and apply the following blending options:
    Drop Shadow:


    Bevel & Emboss


    Result:






    Step 8.)
    Next you'll want to apply an icon to the button. You can create your own by using the pencil tool or you could download very high quality icons for an affordable price at www.WebsiteIcons.com. Which is a site l highly recommend.






    Step 9.)
    Finally you want to add the text to your button. The font used here is a basic Verdana Bolded with a size of 10 pt.

    I then applied the following blending option (by double clicking the text layer) to give it a little more depth:
    Stroke:


    Result:


    Finishing Touches:
    Another nice touch is to get out the Dodge tool with these settings:




    Result:






    Related Tutorials:
        View Glossy Buttons Glossy Buttons
    In this tutorial you will learn how to make quick and effective looking round gl ...
        View Interface Vents Interface Vents
    This tutorial will show you how to add a techno depth to your layouts with the u ...
        View Render Layout Tutorial vol. 5: Content Boxes Render Layout Tutorial vol. 5: Content Boxes
    In this tutorial you will learn how to create an entire layout by using an exsis ...


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