• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 1. Preparing Graphics > Applying Colors and Textures

Applying Colors and Textures

You have now created the five paths you'll need for the logo. But all are just dark gray circles—not the most interesting logos, especially given the site's intended vibrancy. Earlier in the lesson we mentioned that when working with vector graphics, a common workflow is to create, structure, scale, and position paths, and then worry about making them look good. In this task, you get to make the graphics look good.

Select all of the circles by choosing Edit > Select All (or Ctrl+A/Command+A).

We'll apply the same visual effects to all five circles at once, rather than applying them one at a time.


You can select multiple objects using the Pointer tool as well. To do so, hold down the Shift key, and click all the objects you want to add to the selection. To remove an object from the selection, with the Shift key still held down, click the object again.

Change the color of the fill by clicking the Fill Color box in the Property inspector. In the Color pop-up, select the shade of green whose hexadecimal value is #669900.

When you click the Fill or Stroke Color box in Fireworks, the Color pop-up appears. By default, the pop-up displays 216 colors in the so-called Web Safe palette. The significance of this palette is discussed more in Lesson 3. Be aware, though, that you can mix colors from a palette of over 16.7 million colors. To access this palette, click the Sys Color Picker button, or use Fireworks' Color Mixer panel.

As you roll over a color swatch with the cursor (which turns into an eyedropper cursor), the swatch's hexadecimal color value is displayed at the top of the Color pop-up. The term hexadecimal color is simply a way of encoding color values succinctly. Computer monitors display colors by mixing one of 256 shades of red, one of 256 shades of green, and one of 256 shades of blue. (256 × 256 × 256 is over 16.7 million—the same figure mentioned in the preceding paragraph.) The system is simple: The first two digits represent the red color channel (that is, which of the 256 shades of red is used). Rather than using a base-10 system, which would require 1-3 digits for each value (0 is one digit, while 255 is three digits), the hexadecimal system uses a base-16 system. So instead of each digit ranging from 0-9, each digit instead ranges from 0-F, where A represents 10, B represents 11, and so on through F, which represents 15. Because 16 × 16 equals 256, two digits in this system are capable of representing 256 different variations of color.

To translate, then, the value #669900 means that the red value (66) represents 102 (in a scale from 0 to 255); the green value (99) represents 153; and the blue value (00) represents 0. The resulting color, as you can see, is a deep green.


The stroke should be set to transparent by default. If it is not, use the Stroke Color box in the Property inspector to set the stroke to transparent. Just click the swatch with the red sash located near the top of the Color pop-up.

Use the Property inspector to change the Edge from Anti-Alias (the default) to Feather. In the Feather Amount field, which defaults to 10, change the number to 3.

The edges are now subtly softer than before.

By default, Fireworks anti-aliases edges. For example, when you have a green circle against a white background, the two regions are defined by the edge. The edge, of course, coincides with the underlying vector path. A hard edge has no transition between the two regions; that is, a green pixel marks the end of the circle, and beside it, a white pixel defines the beginning of the region outside of the circle. Unfortunately, hard edges often do not look very good on computer screens—edges tend to look chunky. One solution is to use anti-aliased edges, in which Fireworks creates a subtle transition between the regions inside and outside the shape. To do so, along the edges, Fireworks blends (in this case) green and white to create a small transition area of pale green pixels. Feathering creates a much larger transition—you specify how large a transition using the Feather Amount field. The following screenshot shows the difference between the three edge types, from left to right: Hard, Anti-Alias, and Feathered.

Use the Property inspector to change the Amount of Texture slider from the default 0 to 50.

Textures are a great feature of Fireworks vector graphics. Typically, vector graphics are characterized by smooth, solid regions of color. The characteristic is great for clean logos (think of the Olympic rings, or the Pepsi logo), but vector graphics can also look unnatural. Firework's textured fills give designers the power to create graphics that have a more natural appearance. In this step, you're going to stick with the default Grain texture, but take a moment to experiment with some of the other types of textures. Among our favorites are Grass, Chiffon, Oilslick, Parchment, Swirls, and Metal.

On the right side of the Property inspector, lower the opacity from 100 (the default) down to 50.

The opacity setting enables you to specify whether an object should have any transparency applied to it. The default setting is 100, which means fully opaque. At the default setting of 100, any objects behind the selected object are fully obscured. With an opacity setting of 0, the object is fully transparent—you can't see it at all.

Settings in between make the object translucent. You are lowering the opacity in this step to 50 percent, so that the circles are more subtle, as befits a background graphic.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint