- Working with Color
- Web-Safe (Browser-Safe) Colors
- Sampling Color
- Working with the Color Table
- Textures
- A Look at Pattern Fills
- Blending Modes
- Applying and Editing Strokes
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with the Color Table
In the lower portion of the Optimize panel, you can find the Color Table (see Figure 5.4). The Color Table panel gives you information about the status of colors in your document. When you view it in the Preview, 2-Up or 4-Up tabs of the Document window and the image or selected slice is optimized in one of the several 8-bit formats.
The Color Table contains your document's swatches. These swatches can contain different attributes, marked as follows:
A square in the lower-left corner of a swatch indicates that this color has been altered by the Edit Color button or menu command found under the Options pop-up menu. The edited color will only be included in the palette of the exported index color image, while the Fireworks source PNG will remain unchanged.
A square in the lower-right corner of a swatch indicates that the color is locked.
A locked color in the Color Table remains in the current image's or slice's palette, no matter what changes you make to the image. Locking a color allows users to force images or slices that use this locked color to maintain the same exact color across many images. This is important when using an adaptive palette, where the same color in a sliced image can be dithered to a color that is close, but not exactly, the same across slices in the image. This can be caused by changes in the elements in the slice that affect other colors within that slice.
A checkerboard square across the swatch indicates that the color is transparent.
The diamond configuration in the middle of the swatch indicates that the color is a web-safe color.
Swatches with more than one indicator mean that the color has multiple attributes.
)
Figure
5.4 The lower portion of the Optimize panel is expanded to reveal the Color
Table. Color-attribute indicators give feedback about colors within the document.
Custom Swatch Groups
To create a custom swatch group using the Color Table, follow these steps:
-
Open the Optimize panel if it is not already opened.
-
Create a new file (at 500 x 500 pixels at 72 ppi). Set the canvas to anything you want.
-
In your file, draw a series of different-colored rectangles on the canvas (see Figure 5.5).
-
Expand or tear out the Options panel. Notice the Color Table in the lower half of the panel.
-
Add a new shape with a new color to the canvas.
-
Click the Rebuild button (see Figure 5.6).
-
Select the Options pop-up menu.
-
Choose Save Palette. The Save As dialog box appears (see Figure 5.8), which allows you to name and save your palette as an .act (Color Table) file.
-
Click Save and save your palette in the appropriate folder (see Figure 5.9). I save my palettes with the projects to which they correspond. Some people like to save their palettes inside the Fireworks program folder.
)
Figure
5.5 Rectangles that have been drawn on the canvas.
)
Figure
5.6 The opened Optimize panel with the Color Table.
Notice that the colors in the table update to match the colors on the canvas. The number of colors replaces the Rebuild button (see Figure 5.7).
)
Figure
5.7 The number of colors replaces the Rebuild button.
)
Figure
5.8 The Save Palette option from the Options pop-up menu.
)
Figure
5.9 Saving a Color Table (.act) file in the Save As dialog box.
Load Palette
To use the newly created palette with a new document, follow these steps:
-
Create a new document.
-
Click the Options pop-up arrow from the Optimize panel and choose Load Palette (see Figure 5.10).
-
Navigate to the .act file that you saved and select it (see Figure 5.11). (You can also use a GIF image.)
-
Double-click it or click Open to load it.
-
The Color Table of your new empty document now contains the swatches from the palette you saved and loaded (see Figure 5.12). To use this palette as your swatches for use in the document, open the Swatches panel, click the Swatches Panel options pop-up arrow, and choose Current Export Palette. Now, all the Color box pop-up windows have only the colors that are in the Color Table. You're all set to control the colors used in the image.
){kind=small}
Figure
5.10 The Load Palette option from the Options pop-up menu.
)
Figure
5.11 The Open dialog box, loading a Color Table (.act) file.
When you open an existing document that already contains many colors, the Color Table panel initially appears empty.
)
Figure
5.12 The Color Table of an existing document with empty swatches on the
Optimize panel.
You can activate the Color Table in the Optimize panel in two ways:
-
Click the Preview tab in the Document window (see Figure 5.13). The Color Table builds based on the default setting of GIF Web Snap 128, which places 128 colors in the Color Table. When you click the Original tab, you see that the Color Table stays loaded with this file's swatches.
-
As previously mentioned, you can also use the Rebuild button at the bottom of the Optimize panel.
)
Figure
5.13 You can activate the Color Table by clicking the Preview tab.
NOTE
Refer to Figure 5.6. It shows the opened Optimize panel with Color Table displayed and the Rebuild button circled.
Identifying and Sampling Specific Color Values
Times can arise when you need to know the value of a specific color. By using the Info panel, you can view a color's RGB, hexadecimal, HSB, or CMY values (see Figure 5.14).
)
Figure
5.14 The Info panel Option pop-up menu displays the color mode choices.
Use the Info panel Option pop-up menu to set the color mode that you want to display.
Another neat feature about sampling colors is this: Using the Eyedropper tool, you can view the color value of any visible object in any open application in the Color box pop-up window. Another way to do this is to use the Color box pop-up window, or you can use the Color Mixer. If you move the pointer or the eyedropper cursor around your screen, you can examine the color value of objects within your document (see Figure 5.15).
)
Figure
5.15 The Info panel displays a specific color value.
Within Fireworks, you can view the color value of a selected vector object's stroke and fill colors in the Property Inspector, the Color Mixer, or the Color box.
Let the truth be told: It is the Property Inspector, which is new in Fireworks MX, that is the main command and control center for creating and applying fill and stroke.
By using the Property Inspector, you can infinitely experiment with and apply fills and strokes to your vector objects. Here's the drill:
-
Select the Pointer tool or the Subselection tool from the Tools panel. You want to click the objects that are within groups by using the Subselection tool.
-
Click a vector object within your canvas.
-
Look at the Property Inspector. It shows you the fill and stroke properties of the selected object.
In Figure 5.16, I selected a star that contains a fill of green, with an anti-aliased edge and a 13-point black stroke set to soft, edge 50, and a texture grain of 30 percent. Currently, no effects are applied to the star.
)
Figure
5.16 The Property Inspector displays the fill and stroke attributes for
the selected vector star.
Setting the Fill Color
To set the fill color for any of the basic shape tools using the Property Inspector, follow these steps:
-
Click the Color box in the Property Inspector. The Color Cube pops up.
-
You can choose one of the following:
-
Choose a color from it.
-
Choose no color.
-
Move the cursor over an object on the canvas. The cursor displays the eyedropper. Position the cursor on top of the object that contains the color you want to use and click.
-
Click the color wheel to choose the system color picker.
It's good to know that you can change the value system that's displayed in the Color Mixer or in the Property Inspector. The default for the Info panel is Hexadecimal. Although the Info panel displays the letters R, G, B, and Alpha, the default color space is actually Hexadecimal. Additionally, the Color Mixer's default is Hexadecimal.
NOTE
You can also choose the fill settings to use with the Paintbucket tool when filling pixel selections. All the features described in this section are also applicable to the Paintbucket tool's fill options.
Modifying Fills
Of course, after you set the fill of an object, you're going to want to change it, right?
You can control the edges of your fills, specifying hard, anti-alias, and feathered edge options, along with feather distance. You can also set a texture, specifying it's percentage in amount. (A texture works like a grayscale mask.) The Amount field enables you to specify the brightness of the mask, which, in turn, determines the amount of texture applied to the object's fill.
Five basic categories of fills exist (see Figure 5.17). Each category is covered in detail in the following sections.
)
Figure
5.17 The five main fill categories.
Changing the Fill Category
Within web dither, pattern, and gradient, you can specify a number of variances:
-
Select an object to fill by using the Pointer tool from the Tools panel.
-
Click the Fill Category pop-up menu in the Property Inspector (see Figure 5.18).
-
Select one of the five options.
Obviously, selecting None sets the fill color to no color.
)
Figure
5.18 The Fill Category pop-up menu in the Property Inspector.
Web Dither
Times might arise when you want to use a color that's not in the 216 web-safe color palette, but you still want the color to look its best and to avoid ugly dithering. This situation calls for the use of web dithering.
Web dither mixes two web-safe palette colors and combines them to simulate a color that's not in the palette. Note that creating a web dither can impact your file size. You can use a web-safe color, a non-web-safe color, and you can also use transparency to create an image that appears translucent to a background color or image when it's placed on a web page—more about this later.
To use web dither, follow these steps:
-
Select an object containing a non-web-safe color by clicking it with the Pointer tool.
-
Select the Web Dither option from the Fill panel's Fill Category pop-up box. The object's current fill displays in the color well to the right of the fill type (see Figure 5.19).
Notice the four checkerboard Color boxes beneath the sampled color.
)
Figure
5.19 The Web Dither Options pop-up box.
These two web-safe colors dither together to simulate the original non-web-safe color. The web dither appears on the object and becomes that object's fill color.