The Swatches Panel in Adobe Fireworks comes with a standard web-safe color palette like this:

Adobe Fireworks standard Swatches Panel

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

Color Wheels

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.

Read the rest of this entry »

Adobe Fireworks has many powerful features, but some of them are not very well-known. This is the first in a series of posts that will reveal some of these features and briefly explain how to use them. Special thanks to Matt, Mikko, SiamJai, Aaron, John, Trevor, and the many users of Fireworks who have contributed to these feature lists.

Today we focus on: Color.

Read the rest of this entry »

Creating web designs involves creating static comps of what the future web page could look like, so it can be very important to make sure that the comp represents images, icons, colors, and text in exactly (or nearly exactly) the same way that browsers will render it.

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.

Read the rest of this entry »

My latest series of videos for Adobe Fireworks CS4 is now available over at Adobe TV.  Check them out!

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.