How to Make this Cool Web Button with Adobe Photoshop CS4

This tutorial is a fairly easy one to create a neat object that can be used as a web button on a website. Here is a step by step tutorial to create a really neat web button.

  1. Launch Adobe Photoshop CS4 and create a new project selecting “web” as a preset. You can choose any size just make sure you give yourself enough room to work with
  2. Step 2

    Create a new layer. Rename it “bottom layer”.

  3. Step 3

    Select the rounded rectangle tool and set the radius to 10 px and draw the object.

  4. Step 4

    Rasterize the object you just drew by right clicking on the object and selecting “rasterize layer”.

  5. Step 5

    Create a new layer. Rename it “smaller layer”.

  6. Step 6

    Change the default color to white by pressing the letter “x” on your keyboard until the default color is white.

  7. Step 7

    Using the rounded rectangle tool with the radius still set to 10px. Draw a smaller object on top of the existing object you drew earlier, and rasterize the new object layer. Your drawing should looke like what is shown in the picture associated with this step.

  8. Step 8

    Select “smaller layer”, then click on the “Filter” menu item then select “Blur” then select “Gaussian Blur”.

  9. Step 9

    When the gaussian blur window appears set the radius to 7.0 pixels.

  10. Step 10

    Press “CTRL+T” keys on your keyboard to activate the transform tool. We will use this pull the smaller object to each of the edges of the biggler object. Once you are done click the checkmark to accept the changes.

  11. Step 11

    Select the bottom layer. We are now going to add the effects necessary to make it look like our final button.

  12. Step 12

    Click the “fx” icon located at the bottom of the layer window to bring up the “Layer Style” window.

  13. Step 13

    Click the “Drop Shadow” checkbox and use the settings as shown in the picture associated with this step.

  14. Step 14

    Click the “Inner Glow” checkbox and use the settings as shown in the picture associated with this step.

  15. Step 15

    Click the “Gradient Overlay” checkbox and use the settings as shown in the picture associated with this step.

  16. Step 16

    Click on the gradient drop down box to bring up the “gradient editor” window. Set the color of the left slider to “fa0707″ and the color of the right slider to “710202″ and the location of the left slider to 75%. Take a look at the picture associated with this step.

  17. Step 17

    Click the “Stroke” checkbox and use the settings as shown in the picture associated with this step.

  18. Step 18

    Need to download pc games 4 free and play for free.
    You now have the object in its final stage. Just add some text to it with the text tool and you are done.