Creating a Button

Help Center → Adobe ImageReady → Creating a Button

One of the most common uses of ImageReady is to create buttons with rollover effects. Lets first define the terms button and rollover.

A button is a clickable area on a website that provides the user a simple way to trigger an event. In most cases this event is opening a link to another website. For the purpose of this definition a button is any clickable region on a website. Hyperlinks, image maps, slices, text, and anything else that when selected has some event is considered a button.

In this example of www.adobe.com all the areas highlighted are clickable regions, and therefore buttons

A rollover effect is when different states are added to a button. These states are named Over and Down. You can keep adding more states but these are the two most commonly used. These different states are reactions our buttons have when something triggers the state. For Example:
The button below has a rollover effect for Over and Down. Try moving your mouse over the button below.

Over and Down both refer to triggers by the mouse. When the mouse moves over the button, It turns red. When the mouse clicks down it has a drop shadow.

Creating a Button with rollover effects

We are going to go step by step starting with a blank document. When creating a new button you don't have to start from a new document. Buttons are defined by slices and image maps, so if you add an image map or a slice to an existing image, you have now created a button. However for this demonstration we are starting from scratch.

  • Step one, Create a new document (File=>New). Set the pixel width to 200 and the pixel height to 50. Set the background to white. Click OK.

  • Next, Using your type tool. Type: "Button" in the middle of the blank document. Using the type tool select the text. In the tool bar, change the font to 48px.

    You can use your move tool or the arrow keys on the keyboard to center the text.

  • Next, In the Web content palette, click on the bump out arrow located at the top right of the palette. This will bring up a window. Select New Rollover State

    Now if we look in the web content palette we can see that a slice has been made encompassing our new document. An Over rollover state has been added. Click on the bump out arrow again and add another Rollover State. We should now have two rollover effects in our web content palette.

  • Next, Click on the Over state in the web content palette. Then click on Button in the layers palette. Next, Click on the Layer Styles button on the bottom of the layers palette. It is the icon of a a circle with an f in the middle of it. Select Color Overlay.

    When the dialogue box comes up. Click ok. If you wish to add more layer styles you can click on the check boxes on the right. You may also manipulate each layer effect you select.

  • Next, Select the Down state in the web content palette. Then click on Button in our layers palette. Next, Click on the Layer Styles button on the bottom of the layers palette. Select Drop Shadow. Click OK when the dialogue box appears.

  • We are now finished creating button. You can preview your button by going to (File=>Preview in) Just select a web browser and you can test our your new rollover effects.
  • If you wish to add a hyperlink to the button. Select the button in the web content palette. and in the slice palette fill out the appropriate info. ---click here to learn how to add a hyperlink to a slice---
  • The last step is to publish our button so that we may add it to our Website. To publish our button go to File > Save Optimized As. Make sure that the format is HTML and Images.

    Select where you want your files to go, and click save. We have now made a working button.