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 >

Six Psychological Reasons Consumer Culture is Unsatisfying — PsyBlog.

This research suggests that thinking of material purchases in experiential terms helps banish dissatisfaction. The implications for designing online retail experiences may be to help customers see themselves using the product and focusing more on experiences with the product than on research and comparison of features and details vs. other similar products.

25 Awesome Adobe Fireworks Resources for Web Designers

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

Frame and Layer Utilities

Luke W’s Social Engagement Checklist

The checklist is based on:

• Susan Weinschenk’s UX Lisbon presentation on Neuro Web Design.
• Stephen Anderson’s Serious Play presentation.
• IA Summit presentation on Online & Real Life Social Networks.
• Christian Crumlish’s presentation Designing the Social In.

Infographic Tutorials and Examples

What Makes Them Click is a blog by Susan Weinschenk, Ph.D. for people who want to learn how to apply psychology to understand how people think, work, and relate. The blog focuses on applying the latest research in psychology to information, interaction, and experience design.

In “The Psychologist’s View of UX Design” she writes about applying psychological theories and research to design.

As an applied psychologist myself, it is good to see research and theory being used to improve design for digital experiences. Oh, and I also got my start in psychology at Penn State!

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.

1. Ability to handle larger multipage files and better handling of large files from earlier Fireworks versions.

I spend less time waiting for Fireworks to open files created in earlier versions of Fireworks. I work with several other designers and many clients, so I open files from CS3 and CS4 often. The files open faster and render more quickly. The first time an older version file is opened takes a little longer as the file is updated and optimized, but once it has been saved from CS5 it then re-opens more quickly. Additionally, the multipage thumbnail preview will be enabled once the file has been saved from CS5.

2. FXG Export + Catalyst for enhanced prototyping.

I use Fireworks, Dreamweaver, and Flash for prototyping. The addition of Catalyst to the mix will make interactive prototyping easier, and since Fireworks exports directly to the FXG file format, I can use Fireworks to create the graphics for the prototype, export to FXG, and quickly use them in Catalyst. I can draw the pages once and use the same assets for prototyping in Dreamweaver (with Spry and jQuery) or Catalyst, and this gives me a wider range of behaviors and transitions/motions I can include in the prototype.

3. Document Templates.

Although Fireworks ships with built-in templates, I can easily create new templates customized for my project types and embed symbols and assets so that I always start from the same base to produce consistent work (and save some time.) I plan to create basic templates for ecommerce sites, mobile/iPhone apps, and even interactive Flash or Catalyst elements.

4. Compound Shapes.

I love compound shapes, but for simple reasons: I often create custom widgets for web projects (usually Flash-based) that change structure based on interactions. With the new compound shapes I can “assemble” widget wireframes from objects that can be easily “moved” around to create instances of the widget in different states. I no longer need to sub-select nodes and adjust their position; I can now just sub-select the individual components and move the parts around. Here’s a  really simple example: a tabbed widget where I need to show the state of the widget for all tabs. The selected tab and the frame are a compound path, and changing selected tabs is as simple as sub-selecting the tab object and moving it relative to the frame.

5. Enhanced CSS and Images Export.

Even though few of my prototypes leverage the CSS export, I sometimes export just a few pages or even parts of pages in order to get the page structure code (HTML and CSS) to use when assembling a prototype in Dreamweaver. I use the CSS export to generate the framework for a page, then refine and continue the code in Dreamweaver. The enhancements in Fireworks CS5 improve the quality of the code and make it easier to re-use.