Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Trendy Bevels In this tutorial l will explain how to create those trendy bevel buttons that you see popping up all over the net. Must See! 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!

    titaniumWG.com .::. SMF Skins | Invision Forum Skins | Free MP3 Ringtones

    HV-DESIGNS.CO.UK :: Version 15 :: Back To Basics

    esem design - Photoshop Tutorialss

    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:
    (Color used is #0E287D)

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


    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


    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:


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


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