Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Applying Colors and Textures

You've now created the five paths you'll need for the logo. But all are just dark gray circlesnot 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.

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

Tip

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.

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 more than 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), the swatch's hexadecimal color value is displayed at the top of the Color pop-up. The hexadecimal color number 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 x 256 x 256 is more than 16.7 millionthe 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 to 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 to 9, each digit instead ranges from 0 to F, where A represents 10, B represents 11, and so on through F, which represents 15. Because 16 x 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 is a deep green.

[View full size image]

Note

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 slash near the top of the Color pop-up.

The edges are now subtly softer than before.

Why use anti-aliasing? Let's say you have a green circle against a white background. The two regions are defined by the edge, which 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 generally do not look very good on computer screensthey tend to look chunky.

One solution is to use anti-aliased edges (Fireworks' default setting), which creates a subtle transition between the regions inside and outside the shape. In this example, Fireworks blends the green and white edges 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 figure shows the difference between the three edge types, from left to right: Hard, Anti-Alias, and Feathered.

Textures are a great feature of Fireworks' vector graphics. Typically, vector graphics are characterized by smooth, solid regions of color. This characteristic is great for clean logos (think of the Olympic rings or the Pepsi logo), but vector graphics can also look unnatural. Fireworks' 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 you should take a moment to experiment with some of the other types of textures. Among our favorites are Grass, Chiffon, Oilslick, Parchment, Swirls, and Metal.

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 completely obscured. With an opacity setting of 0, the object is fully transparentyou can't see it at all. Settings in between make