This tutorial follows on from the early post on CSS sprites extraction and will cover the process of making a set of buttons, then exporting them as a rollover CSS sprite.
First we start with the usual set of icons dragged from the common library onto your document, you can use any you like. Select all and use the align palette to align and space them evenly.
Go to the “document library” and convert each icon image to a button symbol by double clicking each of the graphics in turn. Name each and click the radio button. See below.
Right click on the first icon and go down to “symbol”/and select“edit in place”. Then select the over state in the “State Drop-down Menu“. Once selected the icon will disappear, this is normal.
Click the “Copy Up Graphic Button” and the icon will reappear, select the icon representing the “over state” and change color or make the appropriate alterations. You now have two copies of the button one for the up state and one for the over state.
Now go to the top left of the document and click on “page 1″ link and then click the “preview button”. You can see the rollover effect.
Make sure the web layer is turned on in the layers palette. Name each one of the icons, right click on a icon and select “Export to CSS Sprites”. Pick the folder you want to save them to, then click the “options” button. Set as required. See Below.
Please send your thoughts or ideas, any problems, email me or take a look at the previous tutorial on Fireworks CS6 Sprites.