06web Drawing and styling a button in ImageReady

Difficulty Level: Beginners
PhotoShop Version: 7
Assumed Knowledge: Limited

 

Now you can create a button that the Web page viewers will use to bring up an order form. You will create the button on its own layer, so that you can more easily apply effects to it.

Since you want to make the new button match the colours of the existing buttons on the Web page, the first step will be to sample a colour from the Web page using the eyedropper tool.

The eyedropper tool samples colour from wherever you click in the active image and sets the current foreground colour to the sampled colour. It is the easiest method for copying colours from one part of an image to another.

  1. Create a new Layer, name it: Order Button.

  2. Select the eyedropper tool , and then click on any of the green buttons on the left of the Web page to sample the colour.

  3. Select the ellipse tool , which is hidden beneath the rectangle tool in the toolbox. Click on the rectangle tool, and drag to select the ellipse tool.

  4. Click in the lower left of the main window, below the button that says Contact, and drag to create an oval button.

  5. Use the paint bucket tool to fill the selection area.

  6. Go to: Select > Deselect.


    Elliptical Button

    Now, to make the button appear three-dimensional, you will add a bevel and emboss effect to the button.

  7. In the Layers palette, click the Effects button to display the Effects pop-up menu.
  8. Choose Bevel and Emboss from the Effects popup menu. Adding a Bevel and Emboss effect creates a 3-D appearance.
  9. Now you'll add some text to the order button using the text tool. Select the text tool .
  10. In the toolbox, click the Default Foreground/Background Colour button to select black as the foreground colour.
  11. If the type options palette are not visible, choose Window > Options.
  12. In the Options palette, enter a value of 18 in the Size box.
  13. Click with the I-bar pointer in the oval button where you want the text to appear. (Don't worry if the positioning isn't perfect-you can move the text later with the move tool.)
  14. Type: ORDER NOW!
  15. Select the move tool . Click the text, and then drag to position the text in the centre of the button.
  16. Repositioning text on button with move tool


  17. Choose File> Save to save your changes.


Applying a style

 

To make your button stand out more, you can add a texture and some effects. For example, the bevel and emboss effect gives it a more three-dimensional look, and a wood-style texture will tie it into the theme of your furniture maker.

You could apply these effects one-by-one, but it would be a tedious process-you would have to change the settings on each effect to make them look good together. Instead, you can apply them both at once, using a style. Styles are one or more effects that you can save and later apply to layers in any ImageReady document. You can create your own styles, or you can choose from a variety of pre-programmed styles.

In the example, you will use a pre-programmed style called Button-wood that contains a bevel effect and a wood-grain pattern. All of the effects contained within a particular style are displayed in the Styles palette.

  1. In the Layers palette, select the Order Button layer.
  2. If the Styles palette is not visible, choose Window> Show Styles. Choose Small List from the Styles palette menu.
  3. Select the Button-wood style name.
  4. Do one of the following to apply the style:

Back to PhotoShop Home Page