The Swatches panel and Color Mixer combine to form the Colors panel group. In the Swatches panel you can view, change, create, and edit swatch groups, as well as choose stroke and fill colors.
You can use the Color Mixer to choose a color model, mix stroke and fill colors by dragging color value sliders or entering color values, and choose stroke and fill colors directly from the color bar.
Organizing swatch groups and color models 99
Applying colors using the Swatches panel
The Swatches panel displays all the colors in the current swatch group. You can use the Swatches panel to apply stroke and fill colors to selected vector objects or text.
To apply a color to the stroke or fill of a selected object using the Swatches panel:
1 Click the icon next to the Stroke Color or Fill Color box in the Tools panel or Property inspector to make it active.
2 If the Swatches panel is not already open, choose Window > Swatches.
3 Click a swatch to apply the color to the stroke or fill of the selected object. The color appears in the active Stroke Color or Fill Color box.
Changing swatch groups
You can easily switch to another swatch group or create your own. The Swatches panel Options menu contains the following swatch groups: Color Cubes, Continuous Tone, Macintosh System, Windows System, and Grayscale. You can import custom swatches from color palette files saved as ACT or GIF files.
To choose a swatch group:
•
Choose a swatch group from the Swatches panel Options menu.Note: Choosing Color Cubes returns you to the default swatch group.
To choose a custom swatch group:
1 Choose Replace Swatches from the Swatches panel Options menu.
2 Navigate to the folder and choose a swatch file.
3 Click Open.
The color swatches in the swatch file replace the previous swatches.
Note: For information on creating a custom swatch group, see “Customizing the Swatches panel”
on page 100 and “Saving palettes” on page 240.
To add swatches from an external color palette to the current swatches:
1 Choose Add Swatches from the Swatches panel Options menu.
2 Navigate to the desired folder and choose a color palette file.
Note: Fireworks can add new swatches from palettes exported as ACT or GIF files.
3 Click OK.
Fireworks adds the new swatches at the end of the current swatches.
Customizing the Swatches panel
You can add, delete, replace, and sort color swatches or entire swatch groups using the Swatches panel.
Note: Choosing Edit > Undo does not undo swatch additions or deletions.
Swatches panel
To add a color to the Swatches panel:
1 Choose the Eyedropper tool from the Tools panel.
2 Choose the number of pixels to sample from the Sample pop-up menu in the Property inspector: 1 pixel, 3x3 Average, or 5x5 Average.
3 Click anywhere inside any open Fireworks Document window to sample a color.
4 Move the tip of the eyedropper pointer to the open space after the last swatch in the Swatches panel.
The eyedropper pointer becomes the paint bucket pointer.
5 Click to add the swatch.
Tip: When you choose Snap to Web Safe in the Options menu of the color pop-up window, any non-websafe color you pick up with the eyedropper pointer is changed to the nearest websafe color.
To replace a swatch with another color:
1 Choose the Eyedropper tool from the Tools panel.
2 Choose the number of pixels to sample from the Sample pop-up menu in the Property inspector: 1 pixel, 3x3 Average, or 5x5 Average.
3 Click anywhere inside any Fireworks Document window to sample a color.
4 Hold down Shift and place the pointer over a swatch in the Swatches panel.
The pointer becomes the paint bucket pointer.
5 Click the swatch to replace it with the new color.
To delete a swatch from the Swatches panel:
1 Hold down Control (Windows) or Command (Macintosh) and place the pointer over a swatch.
The pointer becomes the scissors pointer.
2 Click the swatch to delete it from the Swatches panel.
Organizing swatch groups and color models 101 To save a selection of sampled colors:
1 Add sampled colors to the Swatches panel.
2 Choose Save Swatches from the Swatches panel Options menu.
The Export Swatches dialog box opens.
3 Choose a filename and directory and click Save.
Clearing and sorting swatches
You can clear and sort swatches using the Swatches panel Options menu.
To clear or sort swatches:
•
Choose one of the following from the Swatches panel Options menu:Clear Swatches clears the entire Swatches panel.
Sort by Color sorts the swatches by color value.
Creating colors in the Color Mixer
In the Color Mixer, you can create colors by dragging sliders or entering values for each
component of a color model such as RGB, Hexadecimal, or CMY. The color you create is applied to the active Stroke Color or Fill Color box. The Color Mixer also has a color bar displaying the range of colors in the current color model. You can click anywhere in the color bar to apply a color. You can also click the system color picker button to choose a Windows or Macintosh system color.
Tip: Although CMY is a color model option, graphics directly exported from Fireworks are not ideal for printing. To repurpose exported Fireworks graphics for print, you can import them into FreeHand MX, which automatically performs CMYK conversion of RGB images when output to digital color separations. For more information, see FreeHand documentation.
Mixing colors in the Color Mixer
You can use the Color Mixer to view the values of the active color and edit color values to create new colors.
By default, the Color Mixer identifies RGB colors as hexadecimal, displaying hexadecimal color values for red (R), green (G), and blue (B) color components. Hexadecimal RGB values are calculated based on a range of values from 00 to FF.
You can choose alternative color models from the Color Mixer Options menu. The current color’s component values change with each new color model.
To display the Color Mixer:
•
Choose Window > Color Mixer.To apply a color from the color bar to a selected vector object:
1 Click the icon next to the Stroke Color or Fill Color box in the Color Mixer.
2 Move the pointer over the color bar.
The pointer becomes the eyedropper pointer.
3 Click to pick a color.
The color is applied to the selected object and becomes the active stroke or fill color.
To pick a color from the Color Mixer:
1 Deselect all objects before mixing a color to prevent unwanted object editing as you mix colors.
2 Click either the Stroke Color or Fill Color box to make it the destination for the new color.
3 Choose a color model from the Color Mixer Options menu.
4 Do any of the following to specify color component values:
■ Enter values in the color component text boxes.
■ Use the pop-up sliders.
■ Pick a color from the color bar.
You can add this color to the Swatches panel to reuse. For more information, see “Customizing the Swatches panel” on page 100.
To cycle the color bar through the color models:
•
Shift-click the color bar at the bottom of the Color Mixer.Note: The options in the Color Mixer do not change.
Color model Mode of color expression
RGB Values of Red, Green, and Blue, where each component has a value from 0 to 255.
0-0-0 is black and 255-255-255 is white.
Hexadecimal RGB values of Red, Green, and Blue, where each component has a hexadecimal value from 00 to FF. 00-00-00 is black and FF-FF-FF is white.
HSB Values of Hue, Saturation, and Brightness, where Hue has a value from 0 to 360 degrees, and Saturation and Brightness have a value from 0 to 100%.
CMY Values of Cyan, Magenta, and Yellow, where each component has a value from 0 to 255. 0-0-0 is white and 255-255-255 is black.
Grayscale A percentage of black. The single Black (K) component has a value from 0 to 100%, where 0 is white, 100 is black, and values in between are shades of gray.
Organizing swatch groups and color models 103
Creating colors using the system color pickers
You can create colors using the Windows System or the Macintosh System dialog boxes, instead of using the Color Mixer and Swatches panel.
To pick a color from the system color picker:
1 Click any color box.
2 Choose Windows OS or Mac OS from any color pop-up window Options menu.
The system color swatches are displayed in the pop-up window.
3 Choose a color from the system color picker.
The color becomes the new stroke or fill color.
For information on adding a color to the Swatches panel from the color picker, see “Customizing the Swatches panel” on page 100.
Viewing color values
In addition to the Color Mixer and color pop-up window, you can use the Info panel to identify color values.
To view the color value of any part of your document using the Info panel:
1 Click the Eyedropper tool in the Tools panel.
2 Choose Window > Info to display the Info panel.
3 Move the pointer over the object containing the color you want to view (Windows only).
To view the color value of the active stroke or fill color, do one of the following:
•
Choose Window > Color Mixer for RGB or other color system values.•
Click a color box to open the color pop-up window and view the hexadecimal value at the top of the window.•
Place the pointer over a color box and read the tooltip (Windows only).Note: By default, the color’s RGB values appear in the Info panel and the Color Mixer, and its hexadecimal value appears in the color pop-up window, as well as the color box tooltip in Windows. However, you can change the color model displayed in the Color Mixer or the Info panel anytime.
To display color information for another color model:
•
Choose another color model from the Info panel Options menu or the Color Mixer Options menu.Dithering with websafe colors
Sometimes you might need to use a color that is not a websafe color. For example, your company logo may use a color that is not websafe. To approximate a websafe color that doesn’t shift or dither when exported with a websafe palette, you use a web dither fill.
Note: Web dithering can increase the size of the file.
Two websafe colors create a web dither fill.
To use the web dither fill:
1 Select an object containing a non-websafe color.
2 Choose Web Dither from the Fill Options pop-up menu in the Property inspector.
3 Click the Fill Color box in the Property inspector.
The color pop-up window opens, displaying options for web dither fills. The object’s non-websafe color appears in the Source color box in the Fill Options window. The two websafe dither colors appear in the color boxes to the right. The web dither appears on the object and becomes the active fill color.
Note: Setting the edge of a web dither fill to Anti-Alias or Feather results in colors that are not websafe.
4 Click outside the pop-up window to close it.
To create the illusion of a true transparent fill in a web browser:
1 Select the object to which you want to apply a transparent fill.
2 Choose Web Dither from the Fill Options pop-up menu in the Property inspector.
3 Click the Fill Color box in the Property inspector. The color pop-up window opens, displaying options for web dither fills.
4 Click the Transparent option.
The color boxes on the right side of the pop-up window change to reflect your selection, and the object on the canvas becomes semi-opaque, or translucent.
5 Click outside the pop-up window to close it.
6 Export the object as a GIF or PNG file with Index Transparency or Alpha Channel
Transparency set. For more information on exporting files with transparency, see “Making areas transparent” on page 241.
When you view the graphic in a web browser, the web page background shows through every other pixel of the transparent web dither fill, creating the appearance of transparency.
Note: Not all browsers support PNG files.