Adobe Fireworks CS6 – Rollover CSS Sprite

Pin It

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.

Adobe Fireworks CS6 – Rollover CSS Sprite

Rollover CSS sprite tutorial

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.

Extracting a Fireworks sprite

Icons

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.

Convert  To Symbol

Convert to Symbol Dialog Box

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.

Missing Icon

Select the “Copy up Graphic btn for the rollover state to show.

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.

Properties Panel

Properties Panel

Breadcrumb trail

Double clicking on the icon will take you into symbol editing mode. This can be seen at the top of document window “breadcrumb trail”

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.

Fireworks CS6 Preview Window

Fireworks CS6 Preview Window

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.

Export Dialog Box

Export Dialog Box

Rollover CSS Sprite

The Generated sprite for the rollover buttons

Generated Rollover CSS Sprite

The Generated CSS for Rollover Buttons

Please send your thoughts or ideas, any problems, email me or take a look at the previous tutorial on Fireworks CS6 Sprites.

This entry was posted in CSS3, Fireworks, Web design and tagged , , , , , , . Bookmark the permalink.

5 Responses to Adobe Fireworks CS6 – Rollover CSS Sprite

  1. Maxwell cousins says:

    Hi there. trying your tutorial for a mock up site I need to finish by tonight. I thought the rollover logos would be a nice touch. I had made three buttons, that worked fine in the preview in chrome.exe, but then i had tried to apply the button technique to my nav bar at the top of the screen, (in layers) underneath the sprites that i made for the nav page. Now none of them work, and the original contact icons disappear again. But when i double click them, they still have the up, over, down settings from before! please help me with this!!! I will send you amazing karma

  2. Stephen says:

    If you can send files i’ll take a look…

  3. Chris says:

    Thanks for this tutorial. Unfortunately I can’t get your process to work with Fireworks CS6. When I go to double click after creating a button symbol, the layer-1 turns into a composite layer and once I change the the color… there isn’t a color change when I hover over the button in preview mode. So if I change the button color to red, it stays red upon hover.

    -Chris

  4. Stephen says:

    Hi Chris

    Rather than double clicking on the button symbol (as it DID say in the tutorial), right click and go “symbol/edit in place” select the ” over state” in the dropdown menu, if the image disappears, press “copy up graphic” select the icon and change color. click back on (page 1 top left). click preview and see rollover effect. then follow as norm…

  5. Mr. Anonymous says:

    Hi there,

    I’ve been searching around the Internet for how to make rollover buttons &, while I’ve found a lot of great tips, there’s one thing that no one seems to answer.

    You see, I’m trying to create a rollover button to go on my forum signature, so I’m trying to find a proper way to save my file and upload it onto the internet. Is there any possible way to do this because I thought DreamWeaver only worked if you’re making a button for your own website?

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *

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

  • Contact details

  • Pinterest

    • 67500_50582234614769
    • Stay on the line
    • Zentangle #122 - Ins
    • Stay on the line | I
    • “Curiosity” by René
    • A Perfect Monster: T
    • Synesthesia Garden -
    • santiago caruso
    • santiago caruso
  • Follow Me on Pinterest
  • Recent Posts

  • Category Posts

  • RSS UX Web Design Tutorials

  • Twitter :@stephen_mp
  • Follow

    Get every new post delivered to your Inbox

    Join other followers