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:

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:

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

I prefer to work with vectors and editable filters and effects whenever possible, because it makes it much easier to edit a design later when the size or color needs to be changed. I wanted to see if it is possible to create a more complex and detailed button with nothing but two vector objects: a button and a text label. Here’s how I did it.

Step 1

Draw a 200 x 30 pixel rectangle. Give it a solid fill (#1E92C1) and a 2 px soft line stroke (#BBDDEC), then round the corners by 10 px (this option is in the Properties panel.)

Step 2

Create a highlight as if there were a light source from above the button by switching the fill from solid to Gradient > Ellipse with the colors ranging from light in the center (#61B2D3) to dark (#1E92C1).

Adjust the color points in the gradient to give it a sharper contrast between the light and dark region, then adjust the gradient handles on the button fill to create a curved highlight at the top of the button.

Step 3

Add some textures to the stroke and fill to give it a bit more character and make it less flat. Apply the Line-Diag 2 texture at 50% to the stroke, and apply the Mesh texture at 5% to the fill. (I use the mesh texture at a really light level to emulate adding noise; this smoothes the gradient for small objects. Fireworks CS5 now has gradient smoothing, but it is only available for Linear and Radial gradients, not for Ellipse.)

Step 4

Give the button some edge detail to give it stronger distinction from the background. We could just draw a few more rounded rectangles with no fills and create a group of multiple objects for the button body, but my goal is to create this button with only one vector object.

Apply two Live Filters from the Properties panel:

• Glow (width = 1, softness = 1, offset = 0, opacity = 100%, color = #1E92C1)
• Inner Glow (width = 2, softness = 1, offset = 4, opacity = 65%, color = #18739A)

The button now looks like it has a subtle bead border trim.

Step 5

Give the button additional lighting effects and depth as if the light source were directly overhead. (Fireworks and most other graphics programs default to shadows off the lower right corner, but most monitors are vertical surfaces likely to have light sources above them, so a shadow directly below the object is often more realistic.)

Apply two shadows to darken the lower portion of the button and give it some subtle elevation off the background:

• Drop Shadow (distance = 2, softness = 3, opacity = 70%, angle = 270, color = #666666)
• Inner Shadow (distance = 5, softness = 7, opacity = 40%, angle = 90, color = #111111)

Step 6

Finally, add the button text (here we use Myriad Pro (Regular) 14 pt in #FFFFFF) and apply a tight drop shadow from the Live Filters in the Properties panel to better delineate the text from the button body and make it consistent with the overhead lighting.

• Drop Shadow (distance = 1, softness = 0, opacity = 50%, angle = 270, color = #000000)

And there we have it, a better than plain button created with only two vector objects, and everything remains editable!

Download the Source Fireworks File (right-click and Save As…)

UPDATE 1: Michel created this button variation and shared it with us. It’s much better!

Update 2: Kaelig created this button and used one of the available Photoshop Live Effects. (I changed the font from the original, because I didn’t have the same font Kaelig used, so this version looks a little different.)

• Device Central Integration
• Selection Commands
• Text Overflow Indicator
• FXG 2.0 Support
• Text Enhancements
• Document Templates
• ASE Color Swatch Support
• Compound Shape Tools
• MXI Files for Extensions
• Snap-to-Pixel
• Multi-page Preview
• New Export Options
• and more!

Adobe Fireworks Tutorials and Downloads >

25 Awesome Adobe Fireworks Resources for Web Designers

John Dunning is on a roll! More new and updated FW extensions:

Frame and Layer Utilities

The columns marked “1″ and “2″ are the two sets of colors that you can quickly swap between simply by pressing the button.

This feature has been present for the previous few versions of Fireworks, but a change in Fireworks CS5 requires a change in our workflow to use this feature. This color swapping feature uses the Find and Replace feature to change the colors, but Find and Replace is actually a panel that is not loaded by default when Fireworks starts, so you will need to go to Edit > Find and Replace (or CTRL+F) and open the Find and Replace panel before color swapping from the Color Palette panel will work.

Adobe changed the way Flash panels are loaded in Fireworks CS5 to make the application run faster, use less memory, and have more stability. Flash panels are no longer loaded by default when Fireworks is started (anyone who has installed many additional extensions for panels can tell you that Fireworks CS5 starts and runs faster now), so any panel or command that uses another panel may not work properly until the other panel is opened and started. In the case of the Mixers tab of the Color Palette panel, you need to open the Find and Replace panel to start the find and replace functionality and make it available to the Color Palette panel.

Follow the instructions from the first color palette post to start using these swatches.

Download the color grid custom color palette for Adobe Fireworks (.ZIP)
Download the color grid custom color palette for Adobe Fireworks (.ACT)

Although these are common, standard colors, most people find them limiting and want a greater range of colors, like this:

You can create your own color palettes with custom swatches, save them, share them, and load them into Fireworks whenever you need. I have custom palettes like the color wheels above as well as custom palettes that I have created for projects. When you load a custom palette into the Fireworks Swatches Panel, it will be available for all documents you create or open – you will not need to load it every time you start Fireworks.

Let’s go step-by-step through the process of loading a custom color palette using the color wheels above. You can download the file at the end of this post.

1. Open the Swatches Panel, then open the Options menu (also called the context menu) from the top right corner.

2. Select “Replace Swatches” and browse to the color wheel file or any other saved swatches file. (Fireworks saves color swatches in the .ACT format.) Once you have loaded the color wheel palette, you may need to resize the Swatches Panel to make the full palette visible. (NOTE: If you select “Add Swatches” instead, the custom swatches you load will be appended to the end of the current set.)

3. The new custom color palette will now be available in the Swatches Panel every time you use Fireworks. If you want to return to the standard color cubes, just open the Options menu from the top right of the Swatches Panel, clear the swatches, then select Color Cubes or Continuous Tone.

4. If you open color pickers from the Property Inspector or from the Toolbar, you will see the default Color Cubes, not the new custom color palette.

5. If you want to use your custom color palette from any color picker, then open any color picker and open the Options menu from the arrow in the top right corner.

6. Select “Swatches Panel” from the list, and the next time you open any color picker tool, the custom color palette loaded into your Swatches Panel will be displayed.

7. You can return to the standard default color swatches for the color pickers at any time by opening the Options menu from the top corner of the color picker palette and selecting “Color Cubes” or “Continuous Tone.” This will return the color pickers to the default swatches, but it will not affect the Swatches Panel – this way you can have a custom color palette in the Swatches Panel and have access to the standard swatches in the color pickers.

Download the color wheel custom color palette for Adobe Fireworks

Create Your Own Custom Color Palette

If you want to create your own custom color palette from scratch, then you can select “Clear Swatches” from the Options menu in the top right corner of the Swatches Panel to remove the current set of color swatches.

1. Open a Fireworks file or bitmap image that contains the colors you want to use for your custom color palette.
2. Select the Eyedropper tool from the Tools panel, and choose the number of pixels to sample from the Sample pop-up menu in the Property inspector: 1 pixel, 3×3 Average, or 5×5 Average.
3. Click the Eyedropper tool on the image to sample the desired color.
4. To add a color swatch to the Swatches Panel, click the tip of the eyedropper in the open spaces after the last color swatch in the Swatches Panel.
5. To replace an existing color swatch with a new color, hold down the Shift key and click the eyedropper over the swatch you want to replace in the Swatches Panel.
6. To delete a color swatch, hold down the Control key (Windows) or Command key (Mac OS), and click the eyedropper on the swatch you want to delete from the Swatches Panel. (The remaining color swatches will all shift position to fill the space where the swatch was just deleted.)
7. To save a a custom color palette, select Save Swatches from the Options menu in the top right corner of the Swatches Panel, then choose a filename and directory in which to save the palette.

(NOTE: If you select “Snap To Web Safe” in the Options menu of any color picker, then any non-web safe color you select with the eyedropper tool will be changed to the nearest web safe color.)

Learn more about creating and managing color swatches in the Swatches Panel in the Adobe Fireworks Help documentation.

Today we focus on: Color.

Working with RGB and CMYK

Since Fireworks creates graphics for the screen, it works with RGBA (red-green-blue-alpha channel) colors. However, we are occasionally given CMYK (cyan-magenta-yellow-black) color values from print projects and need to convert them to RGB for screen graphics. Both the Color Mixer and the Color Palette panels offer options to work with colors in different ways.

You can enter and convert colors among RGB (decimal and hexadecimal), CMY or CMYK, HSB (Hue-Saturation-Brightness), HSV (Hue-Saturation-Value), HLS (Hue-Lightness-Saturation), or grayscale (K%). In the Color Mixer panel (Windows > Color Mixer), change the color space in the context menu (located in the upper right corner of the panel.) In the Color Palette panel (Windows > Others > Color Palette) the color space options are in the Selector tab, and you also have the choice to enter values in either byte (0-255) or percent (0-100) values.

Quickly Swap Between Two Alternate Color Palettes

If you have ever needed to show the same design with two different color palettes, the Color Palette panel’s Mixers tab offers the ability to quickly swap between two different palettes of five colors each.

Specify the colors for palette #1 in the five swatches in the first column and the colors for palette #2 in the second column. The adjacent color swatches will be swapped when you switch color palettes. To switch between the two color palettes, select the palette you want to use then click on the swap palettes button.

Fireworks will search for each corresponding color in the other set and replace it with the color in the selected set. This only works for vector objects (strokes and fills) and text objects (strokes and fills) – it will not replace colors in bitmaps.

Sharing Color Swatches with Flash, Photoshop, and Illustrator

Need to share color palettes with designers and developers using Flash, Photoshop, and Illustrator? Fireworks supports Adobe Color Table (.ACT) files for exchanging color swatches among the programs. To save a .ACT file from Fireworks, go the context menu (upper right corner) in the Swatches panel and select “Save Swatches…” to export the current set of swatches.

To import color swatches from a .ACT file, select the “Add Swatches…” option from the context menu in the Swatches panel and browse to the file. When the file is opened, the color swatches will be added to the current swatch set. If you want to see only the color swatches in the .ACT file, select the “Clear Swatches” option before you “Add Swatches…” To restore the default color swatches, clear the swatches again then select the “Color Cubes” or “Continuous Tone” option.

In the upcoming posts in this series we’ll look at more Fireworks features involving marquees, fills and strokes, styles, blend modes, file optimization, panels, and customizing your workspace.

One of the most challenging design elements to represent is text, because different browsers, different operating systems, and even different monitors will render the text differently. Most operating systems offer sub-pixel text rendering on LCD monitors to improve the legibility of text, but most graphics programs do not have text settings to simulate this appearance. They offer anti-aliasing options, which is also a method to improve the legibility of text rendered as pixels, but it is not the same as sub-pixel rendering.

If you take a screenshot of text on an LCD monitor and zoom in very close, you’ll see faint shadows or glows of blue and red, and what appears to be black text at normal magnification has elements of purple and brown when magnified.

Learn more about sub-pixel rendering at Wikipedia >

Giving text the appearance of being rendered at the sub-pixel level can be easily accomplished in Adobe Fireworks with the use of a custom style. Download the style file below and place a copy into the Styles folder. On a Windows XP computer, the Styles folder is located at:

C:\Documents and Settings\<USERNAME>\Application Data\Adobe\Fireworks CS4\Styles

On a Mac with OSX, the Styles folder is located at:

/Users/USERNAME/Library/Application Support/Adobe/Fireworks CS4/Styles

I’m not sure where this folder is located in Vista or Windows 7, so please look for the Fireworks application settings folder and for the Styles within it.

A few things to keep in mind when using this custom style:

1. These styles were created to work on black (or dark grey) text on a white background or white text on a dark background; colored text or backgrounds will not look as good.
2. Sub-pixel rendering looks best for smaller font sizes (10-14 pt),
3. Do not use this style for fonts 16 points or larger – the Crisp Anti-Alias style usually looks more accurate,
4. This custom style can make very small fonts (under 9 pt) look blurry,
5. This custom style tends to look better for san serif fonts but can be used for any font,
6. Apply this style to text with “No Anti-Alias”, because it looks bad when combined with anti-aliased settings.

To use this style, simply type your text, select the text object(s), open the Style Panel, choose “ClearType Text” from the drop-down selector, then apply the custom style. (Note: this style will not work correctly on text in a symbol or component symbol when the symbol is selected – the text object needs to be selected directly to apply this style correctly.)

UPDATE: There are four styles in this set to simulate black text on white or grey background and white text on black or grey background. Colored text or backgrounds may still not appear accurately simulated, but you can try to use the white text styles for light colors and black text styles for dark colors.

Download ClearType Custom Style for Fireworks

Export CSS and Images Part 1: Creating the page structure and placing key content elements.

Export CSS and Images Part 2: Using HTML component symbols and slices

Export CSS and Images Part 3: Inserting placeholders for dynamic content

I’ll also be presenting a session on using Fireworks for wireframing and prototyping and conducting two “Bring Your Own Laptop” labs on exporting CSS and Images from Fireworks CS4 at Adobe MAX 2009 in Los Angeles. If you’re attending, look me up.