Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)


Fireworks CC

Chapter 3: Livening Up Your Artwork with Color

In This Chapter

image Defining colors for the web

image Finding and applying colors to graphics

image Creating your own colors in Fireworks

image Using gradient fills

Like most other Creative Cloud applications, Fireworks lets you define an object’s fill and stroke. You can use some unique tools for that task. You can also take advantage of some hidden features that might be new to you.

In this chapter, you find out how to apply a fill or stroke color to your artwork, and you also discover the basic steps for working with gradient fills.

Choosing Web Colors

Colors appear differently on a monitor from the way they do when you view them offscreen, but this issue isn’t as serious now as it was in the past. Years ago, you had to base your color selections on the lowest common denominator. Most viewers now have monitors that can display thousands, if not millions, of colors.

imageWhen you’re choosing a color for the web, don’t fret over the exactness of a color viewed on different monitors unless an exact color match is critical. Critical color can apply to your company logo or to fabrics on fashion clothing.

In Fireworks, you can choose colors using several panels, with each panel offering a different color model from which to apply color. Even though you’re working in RGB (Red, Green, Blue), you can still enter CMYK (Cyan, Magenta, Yellow, Key or Black) or HSB (Hue, Saturation, Brightness) values.

Finding Colors in Fireworks

Perhaps you want to create a simple shape with a fill, which seems easy, but if you’re unfamiliar with Fireworks, you may need a little direction to get this task done.

You can find most Fireworks color functions in the Colors section of the Tools panel. This section features an Eyedropper tool, for sampling color, as well as color boxes that help you easily stroke and fill both bitmap and vector graphics.

You can set additional attributes for color in the Properties panel, including textures you can apply from the Texture drop-down list.

Types of fills

Starting with the basics, you can choose a solid fill, gradient fill, or pattern fill by simply clicking on the Fill swatch at the bottom of the Tools panel, and selecting the type of fill, as you see in Figure 3-1.


Figure 3-1: You can select the type of fill.

Alignment of strokes

Strokes, or borders, are determined using the Stroke swatch at the bottom of the Tools panel. Note that, when you click on the Stroke Swatch, that you not only can select a color for your stroke, but you also can determine the alignment of the stroke, as shown in Figure 3-2. The alignment offers you an option to position your border on the inside, center, or outside of the artwork.


Figure 3-2: You can choose the position, or alignment, of your border.

Keep in mind that you can customize your stroke even more by selecting the Stroke drop-down menu in the Properties panel and selecting Stroke Options, as shown in Figure 3-3. The Stroke Options allow you to change the type of stroke, texture, and softness.


Figure 3-3: Customize your stroke even more using the Properties panel.

Applying Colors to Vector Objects

Now you can start applying color to your fills and strokes in Fireworks by creating a simple document, and then adding a vector shape to it. To create and color a vector object, follow these steps:

1. Choose FileNew to create a new blank document. Choose any size, or use the default size of 960 px x 768 px, then click OK.

2. Create a path or a shape with the vector drawing tools and leave that object selected.

3. To apply a fill color, click the Fill Color box located in the Colors section of the Tools panel and then click the color you want to apply from the pop-up Swatches panel. (See Figure 3-4.)

4. To apply a stroke color, click the Stroke Color box in the Tools panel and then select the color you want to apply from the pop-up Swatches panel.


Figure 3-4: Take advantage of the Fill Color options.

Adding Colors to Fireworks

Assigning a fill or stroke color to graphics is relatively simple. But what if the color you want to use isn’t in the default Swatches panel? In that case, you need to create a color and add it to the panel. You can accomplish this task in several ways. In the following sections, we cover using the Eyedropper tool and the Color Palette panel.

Adding a color with the Eyedropper tool

The Eyedropper tool is useful when you have a color to sample. Just select the tool, click any color (in your working document or in any other open Fireworks document), and then choose Window⇒Swatches. When the Swatches panel pops up, as shown in Figure 3-5, click an empty area, and your sample color is added.


Figure 3-5: Select a color with the Eyedropper tool and then click the Swatches panel to save the color.

imageTo remove a color from the Swatches panel, position the mouse pointer over the color you want to delete and press Ctrl+Alt (Windows) or Command Key+Option (Mac). When the scissors pointer appears, click the mouse button; the color is deleted.

Adding a color with the Color Palette panel

The color palette is a dynamic and fun way to set color. Each of its three tabs offers the opportunity to choose a stroke or fill color and a different method of selecting that color.

You can open the Color palette by choosing Window⇒Others⇒Color Palette, as shown in Figure 3-6.

The three color palette tabs are

check Selector: The Selector tab (see Figure 3-6) lets you pick a color in any of four color models: HLS (Hue, Lightness, Saturation), HSV (Hue, Saturation, Value), CMYK, and RGB. Click the large color panel and then enter color values by using the sliders or text boxes at the bottom. To adjust the tonal value, use the slider to the right of the large color panel.


Figure 3-6: The Color palette’s Selector tab gives you a choice of four color models.

check Mixers: The Mixers tab (see Figure 3-7) lets you assign multiple colors by using the color wheel. You can also create a tint build at the bottom of the window so that you can build combinations of colors. In addition, you can export the colors as a bitmap or a table using the Export buttons on the left side of the Mixer tab, which makes it easy to reference them later.


Figure 3-7: On the Mixers tab, create colors with the color wheel or the tint builder.

check Blender: The Blender tab (see Figure 3-8) lets you select two colors and then view and choose combinations of those colors.


Figure 3-8: Blend two colors using the Blender tab in the Color Palette panel.

To blend colors, enter two color values in the text boxes at the bottom of the Blender tab and then use the slider to view various combinations of the two selected colors.

Creating Gradients

You can add some dimension to a graphic by filling it with a gradient. To create a gradient in Fireworks, follow these steps:

1. Create a shape that you want to fill with a gradient.

2. With the shape selected, click and hold the Paint Bucket tool in the Colors section of the Tools panel and then select the hidden Gradient tool, as shown in Figure 3-9.


Figure 3-9: Select the Gradient tool.

3. Click the Fill Color box in the Tools panel to assign colors to the gradient.

The Fill Options window appears, as shown in Figure 3-10.


Figure 3-10: Assign the gradient colors.

4. To assign colors to the gradient, simply click the existing color stops and choose a color from the pop-up panel.

5. Click anywhere on the gradient ramp to add a stop, and edit the color.

imageIf you don’t want to create your own gradient, use the Preset drop-down list to select from existing gradients, as shown in Figure 3-11.


Figure 3-11:Pick a preset gradient from this drop-down list.

Changing the type of gradient

After you fill your artwork with a gradient, you can click on the Fill swatch at the bottom of the Tools panel and change the type of gradient from linear to radial, or any number of other choices shown in Figure 3-12. To do this, click on the Gradient drop-down menu and select the type of gradient you want to use.


Figure 3-12: Change the type of gradient using the Fill swatch.

Adding a pattern

If you like, you can even add textures or patterns to your artwork. If you want to experiment with this, follow these steps:

1. Create a new shape; any will do.

2. Select the Fill swatch, at the bottom of the tools panel, and select Pattern Fill; a default pattern fill is applied.

3. Choose an alternative pattern from the Pattern drop-down menu that is located at the top of the panel, as shown in Figure 3-13.


Figure 3-13: Select a pattern fill.

If you have a pattern tile that you want to use, scroll to the bottom of the Pattern drop-down menu and choose Other. Then you can browse to locate the graphic that you want to repeat.

imageYou can create patterns easily in Adobe Illustrator, or even drag a pattern out of the Swatches panel onto the Illustrator artboard to acquire the pattern artwork.

If you’re saving it to use in Fireworks, make sure that you reduce the size of the artwork first by selecting the Artboard tool and dragging the artwork bounds into the pattern bounding area, as shown in Figure 3-14.


Figure 3-14: Save a pattern out of Illustrator to use in Fireworks.

Remember that the Pattern fill in Fireworks works only with patterns that were saved as bitmap files in these formats: PNG, GIF, JPEG, and BMP.