Creating Custom Command Panel Icons for Adobe Fireworks

One of the best features of Adobe Fireworks is the ability to extend its functionality with custom commands and command panels. However, most third-party command panels do not have their own icons for the workspace, and when you install them they are assigned the default command panel icons.

FW_default_icons

Unfortunately, these icons do not represent the actual functionality of the command panel, and with several custom command panels installed you might see this same icons several times in your workspace.

Fortunately, the Fireworks software team thought ahead and made it very easy to use custom icons for command panels installed as extensions. (Note: the native command panels have their icons built-in, so you cannot change them.)

To create your own custom command panel icons:

  1. Create two graphics for each icon – one grayscale and one full-color. The grayscale version is the default view, and the full-color version appears on rollover.
  2. Each graphic should be 23 x 23 pixels, created on a transparent background, and saved as a PNG 32 (not a Fireworks source file.)
  3. Each graphic needs to have a specific name in order to be recognized by Fireworks and assigned to the corresponding command panel:
    • panelname.png
    • panelname_over.png
    • “panelname” must EXACTLY match the filename of the command panel. For example, the Lorem Ipsum command panel is the LoremIpsum.swf file, so the icon files must be named LoremIpsum.png and LoremIpsum_over.png.
  4. The icon graphics files need to be copied into the same folder where the command panel source file is located:
    • On Windows XP this is usually C:\Program Files\Adobe\Adobe Fireworks CS5\Configuration\Command Panels
    • On Windows 7 this is either C:\Users\\AppData\Roaming\Adobe\Fireworks Cs5\Command Panels
    • Or on Windows 7 this might be C:\Program Files (x86)\Adobe\Adobe Fireworks CS5\Configuration\Command Panels
    • NOTE: Extension authors sometimes install the command panels in the user’s profile and sometimes in the Fireworks installation folder, so you will probably need to look for the extension file.
    • If someone posts the location on Mac OSX in the comments, I’ll update the post. Thanks!

Here are some custom icons for a few of my favorite command panels. This is a Fireworks source file, so you can save and edit it to create your own custom icons:

command_panel_icons.FW

Creating your own custom command panel icons is easy, and if you want them to look consistent with the built-in command panel icons, here are colors sampled from the command panel icons that ship with Fireworks:

FW_icon_color_palette

Finally, if you just want to use the icons I have created for the custom command panels listed above, here is a ZIP file of these 12 icons.

Download a ZIP file of the 12 Custom Command Panel Icons

4 thoughts on “Creating Custom Command Panel Icons for Adobe Fireworks

  1. Pingback: Tweets that mention IDUX » Creating Custom Command Panel Icons for Adobe Fireworks -- Topsy.com

  2. Great article, Dave:

    Here’s some Mac locations:

    ~User~/Library/Application Support/Adobe/Fireworks CS5/Command Panels
    and
    Applications/Adobe Fireworks CS5/Configuration/Command Panels

    On my system, the first path was empty, but I had several in the second path.

  3. Nice article. Which panel is the “Resize” panel in your example? It would be handy to get links to your favorite panel extensions.

  4. Thanks, John.

    Yeah, I need to update the post with links to the extensions I made these icons for.

    The Resize Panel was a demo panel you created – I think for JS to Flash framework for panels – it was a simple panel to set the registration point then resize the selected object.

Leave a Reply

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