Creating Images for Button States

I was recently asked about techniques for creating images for button states and how to keep the button shape and text properly aligned (i.e., maintain consistent registration points) across the states to avoid any pixel shifts when the images change.

There are a few different techniques for creating button images, and the method you use depends on how you are using the button images. The traditional JavaScript method (and even some CSS-based methods) use separate images for each button state, and the CSS Sprite method uses one larger image as a background image with all of the button states in that single image then changing the position of the background image to show the different button states. You can use Adobe Fireworks to create button state images for either of these methods.

Creating One Image with All Button States

Create a Fireworks document with a page size large enough to contain all of your button images on a single page. Buttons may have from two to four states:

  • Up – the default state of the button when the web page loads,
  • Down – the state of the button when the visitor clicks or taps on it, and this state is often used as a persistent indicator for a button that has been selected,
  • Over – the state of the button when the visitor hovers their mouse cursor over it while it is in the Up state,
  • Over while Down – the state of the button when the visitor hovers their mouse over it while it is in the Down state.

Draw the Up state of your button first, then select it, Duplicate it (Edit > Duplicate or CTRL+ALT+D), and move the duplicate adjacent to the original. I prefer to stack the button states vertically on the page, but some designers like to create a horizontal button states. Either approach will work.

Modify the duplicate button image to create the Down state. Duplicate the Down state, and move the duplicate adjacent to the Down state, then modify the appearance to create the Over state. Finally, duplicate the Over state, and move the duplicate adjacent to the Over state, then modify the appearance to create the Over While Down state. Here is a simple example of four button states stacked vertically in a single image:

Four button states in a single image

Since we duplicated the button graphics, we know that each state has the same size graphics, and we can use either the grid (View > Grid) or guides (View > Guides) to make certain that they are all aligned on the left and right sides. I like to put at least one pixel of blank space between button states, but some designers like to put more blank space (especially if they are using live HTML text over the background image instead of flattening the text into the button state image) and some designers place the button states without any blank space at all. How you position the button state images is your choice.

The text in this example varies from state to state (though this is unusual for most real buttons), so to make certain that the text remains properly positioned from state to state I use area text object in Fireworks. Area text objects have a defined width and are created by selecting the Text tool, and slicking and dragging on the drawing canvas to define the width of the text object. The width of an area text object can also be edited in the Properties panel. Area text objects will automatically wrap when the pre-defined width is reached. (Point text objects are created by simply clicking on the drawing canvas with the Text tool, and they have no pre-defined width, so the text will not wrap and continue to produce one potentially very long line.)

The area text object is centered within the button graphic, and the text within it is center aligned, so that when the text is edited (either from state to state or if you create multiple buttons with the same graphics but different labels) it remains properly aligned within the button.

To export all of the button states in a single image, select all of the buttons (or select everything on the page with CTRL+A), then right-click and choose Insert Rectangular Slice. Since you have selected multiple objects, Fireworks will present a dialog asking if you want to insert a single or multiple slices. Choose single slice, and Fireworks will place one large slice over all of the button states.

Select the slice just created, and define the image optimization settings in either the Properties panel or the Optimization panel. Right-click on the slice and choose Export Selected Slice to get a single image with all of the button states. This single image can now be used as a background image for the CSS Sprite technique to create buttons by changing the position of the background image.

Creating Multiple Images for All Button States

If you prefer to work with separate images for the states when creating buttons, you can easily export each button state as a separate image. Select only the main button shape objects (in this case, select only the rounded rectangles) and not any of the text or other graphic objects, then right-click and choose Insert Rectangular Slice, and select Multiple slices (instead of Single slice as we did previously.) This will insert a separate slice over each button state.

If you happen to select more than just the main button shape, Fireworks will insert MANY slices, one for each object selected, and you may not get single images for each button. If you have irregularly shaped buttons or are using multiple vector objects to define the button shape, you may need to use the Slice tool to draw slices. If you use the Slice tool to manually draw slices, you will need to make sure that each button state has a slice of the same size and shape. Luckily you can select a slice, duplicate it, and position the duplicate slice over the next button state image to ensure that each exported image will be the same size. Give each slice a unique name in the Properties panel, because this name will become the filename when the images are exported.

To export multiple slices as multiple images, use File > Export, select Images Only, set “Slices:” to Export Slices for the Current Page, and UNcheck “Include areas without slices.” Fireworks will export a separate image for each button state which you can use with your preferred button method.

Why Do the Filenames All Have “_s1″ Appended?

Fireworks will automatically append “_s1″ to the end of each button state filename. This is the default behavior, and the “_s1″ is used to differentiate the images exported from State 1 of a page from images exported from other states under the same slice on the same page. This is handy if you regularly export images for the same slice from multiple states in the Fireworks document, but if you are only exporting images from State 1 it makes less sense, so you may want to change the default behavior.

To stop Fireworks from appending “_s1″ to exported image filenames, choose File > HTML Setup and go to the Document Specific tab. In the third row for “State Names:” choose “none” for both of the options. Click OK to save, and when you export the button images they will no longer have “_s1″ appended.

Keep in mind that if you want to export multiple images from different states under the same slice on a page in the future, Fireworks will not append “_s#” to each image to differentiate images from the different states, and you may find that images are being over-written, because each state is being given the same filename for that slice. You will need to turn the automatic appending of filenames for each state back on to prevent accidental over-writing.

Calculating Background Image Offsets

Finally, if you are using a single image and the CSS Sprite technique for your button states, you will need to know the coordinate position for each button state to specify the background image offset in the CSS.

Fireworks can also make this very easy. On the page with all of the button state images, make sure no objects are selected and choose “Fit Canvas” from the Properties panel. Fireworks will resize the drawing canvas to include only button states and the large slice over them. The top left corner of the canvas is the origin (i.e., the 0,0 coordinate position), and since the buttons are vertically stacked the value of the Y coordinate for each button will be the same as the offset value necessary for the CSS background image offset.

In this example, the coordinates for each state are:

  • Up – 0,0
  • Down – 0,41
  • Over – 0, 82
  • Over While Down – 0,123

Each button image is 40 pixels high, but with a one pixel blank space between each button state, the position for each state will be 41 pixels below the previous.

No matter which technique you use for button state images, Fireworks can make it easy to create, optimize, export, and position the images in the final HTML and CSS.

UPDATE: CSS Sprite Commands for Fireworks

Just after publishing this post, I heard from three very talented Fireworks experts about commands to export slices and/or states into images for CSS sprites, and one of the commands event exports preliminary code to use the CSS sprites in your web projects.

  1. John Dunning’s Frame and Layer Utilities contains a Stack command that will take images from multiple states (previously called frames in earlier versions of Fireworks, hence the name of the commands) and create either horizontal or vertical sprite images.
  2. Orange Commands just released (today! what great timing!) a new command to export CSS Sprite images and the preliminary code to use the sprite in your web projects.
  3. Aaron Beall has generously given us access to a beta version of a command he wrote to export multiple states of a slice or multiple slices to a single sprite image. You can get a copy of the command by right-clicking and saving this JSF file: Export Image Sprites. (Copy the saved JSF file into the Commands folder for Fireworks.)

These commands can be real time-savers and boost your productivity by automating some of the steps I described above, and they support using multiple slices or states and either vertical or horizontal stacking of the images.

Please give these experts your thanks and let them know if you use their commands.

Resources to Learn More About CSS Sprites

Be Sociable, Share!

2 thoughts on “Creating Images for Button States

  1. Hi Dave,
    Thanks so much for this! It answers a lot of questions. I can see why you wrote a separate post. It’s a bit more complicated than I had imagined. This makes it clearer by far.
    And thanks for the resources on CSS Sprites, as well. That’ll come in handy on another site I’m working on.
    Cheers,
    Dot

  2. Dot,

    Thanks for the note. I’m glad you found this post useful, and I hope it has answered your questions. It’s not really complicated or difficult, but I wanted to provide enough detail about the techniques to make it easier for people, so perhaps the post got longer than necessary.

    Dave

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>