Adobe Fireworks Command Panel Icons

681

Thierry Lorey

118

119519

5 October, 2011

Description

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. Works with iconic mode and iconic mode with panel names. 

Requirement

All Fireworks versions

Tutorial

1. 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.)

2. How 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:
1. panelname.png
2. panelname_over.png
3. "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:
1. On Windows XP this is usually C:\Program Files\Adobe\Adobe Fireworks CS5\Configuration\Command Panels
2. On Windows 7 this is either C:\Users\\AppData\Roaming\Adobe\Fireworks Cs5\Command Panels
3. Or on Windows 7 this might be C:\Program Files (x86)\Adobe\Adobe Fireworks CS5\Configuration\Command Panels
4. Here's some Mac locations: ~User~/Library/Application Support/Adobe/Fireworks CS5/Command Panels
5. Applications/Adobe Fireworks CS5/Configuration/Command Panels
3. Some Custom Icons

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:



Where you can find the extensions:

1. Lorem Ipsum
2. Gradient
3. FontList
4. Calculator
5. Guides panel
6. Selection Sets
7. Duplicate, Offset, Rotate
8. Campus Tools
9. Object
10. Convert Pages To PSDs
11. PI_TextureList
12. Texture
13. Transformer
4. End Result

This is how it looks like in the Command Panels in the iconic mode with panel names:



5. Colors

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:



6. Switching mode

You can switch mode from iconic mode to iconic mode with panel names (or vice versa) with the switch mode dropdown menu. You can also resize manually the right bar. See picture.

Where to go from here:

Download