Pin Me

How to Create Web 2.0 Styled Custom Buttons for Your Website Using Photoshop

written by: Dianna Monda Dill•edited by: Daniel P. McGoldrick•updated: 6/23/2011

This step-by-step Photoshop tutorial shows you how to create Web 2.0 styled forward and backward buttons for your website.

  • slide 1 of 12
  • slide 2 of 12

    Step #1

    • Create a new page by pressing the [Control + N] keys on your keyboard. Press the [Ctrl + Shift + N] keys to create a new layer.
    • Select the background layer. Double click on the layer and then press OK on the popup menu to unlock the layer. Delete the layer.
    • Draw a circular selection using Elliptical Marquee tool. Hold down the Shift key while drawing to make it a circle. Fill the selection using white color.
  • slide 3 of 12

    Step #2

    • Without canceling selection, add a new layer .
    • Contract the selection by 9 pixels [Select > Modify > Contract].
    • Fill the new selection with white color.
    • Select the first layer and then open Layer Styles.
    • Check the Gradient Overlay and set the values as shown in the image

    2 

     

  • slide 4 of 12

    Step #3

    • Check the Bevel and Emboss option.
    • Set the values as shown in the image

    14 

  • slide 5 of 12

    Step #4

    • Select the second layer. Open the Layer Styles.
    • Check the Gradient Overlay and the Bevel and Emboss options.
    • Set the values as in the previous layer.
  • slide 6 of 12

    Step #5

    • Add a new layer [Ctrl + Shift + N].
    • Draw the shape and then make it a selection [Ctrl + Enter].

    13 

  • slide 7 of 12

    Step #6

    • Open Layer Styles and then select Gradient Overlay.
    • Set the values as shown in the image below.

    12 

  • slide 8 of 12

    Step #7

    • Select Bevel and Emboss from the left-hand pane.
    • Set the values as shown in the image.

    6 

  • slide 9 of 12

    Step #8

    • Add a Drop Shadow from the left-hand pane.
    • Set the values as shown in the image.

    8 

  • slide 10 of 12

    Step #9

    • Merge all layers by selecting all layers then pressing the [Control + E].
    • Select all [Control + A] and then copy [Control + C].
    • Paste it into the same layer [Control + V].
    • Transform it vertical [Edit > Transform > Vertical].
    • Position it as shown in the image below.

    9 

  • slide 11 of 12

    Step #10

    • Click on the Erase tool, with the size at 200 and hardness at 10.
    • Use it to erase the lower layer as shown in the image below.
    • Save the file. And your Forward button is now done!

  • slide 12 of 12

    Step #11

    • Merge all the layers together [Control + Shift + E].
    • Select all [Control + A] and then copy [Control + C].
    • Open a new page and paste the image here.
    • Flip it horizontally [Edit > Transform > Horizontal].
    • Save the file. And your Backward button is now done!

    11