Topics in Desktop Graphics - (CPTR240) - Lectures  

Arranged and adapted by: David Siguelnitzky -

Expanding the Web-safe palette with Web Dither fill

Suppose your client's company logo has a special corporate color, and you need to use the logo on their web site. But no Web-safe color exists to match the company's "Corporate Yellow." Sound familiar?

Fortunately, you can simulate a wide range of colors by using Fireworks' Web Dither fill. The Web Dither fill creates a fine pattern of two alternating Web-safe colors. The result is an illusion of a new color—in this case, the special Corporate Yellow. In this lesson, you'll learn how to simulate a Web-safe version of your company's color.

On this lecture:

• Before and after example

• Create a swatch file for reference

• Select and fill the company logo

• Switch from solid to Web Dither fill

Before and after example

The triangles in the two logos below illustrate the use of Web Dither fill to more closely approximate a non-Web-safe color on the Web.

Before: Web-safe color, but too orange

After: Web-safe dither pattern yields a perfect approximation-not too orange, not too green.

Create a swatch file for reference

In Fireworks, create a color swatch with RGB numbers to save a file that contains your exact company color.

1. Choose File > New to open the New Document dialog box. Specify 80 x 80 pixels in size and click OK.

2. Choose the Rectangle tool, point to the top left of the canvas, hold down the Shift key, and drag to draw a square.

3. Open the Color Mixer, and choose RGB from the Options pop-up menu.

4. With the square selected, enter 255, 186, and 0 for the R, G, and B values, respectively, and press Enter.

5. Choose File > Save, name the file Logo_color.png, and save the PNG file for reference.

Select and fill the company logo

Before you can apply a web dither pattern to the logo, you must first fill it with the solid company color.

Download the sample files logo.png & logo_color.png   (36k)

1. To work with the lesson file, open Logo.png.

The triangle is filled with plain white. Let's change the fill color to the company color swatch found in the Logo_color.png file.

2. Choose File > Import.

3. Navigate to the file Logo_color.png, and click Open.

While the logo is selected, sample the desired color with the Eyedropper tool.

4. Place the import cursor over the logo, and click to place the color swatch.

5. Select the logo's triangle.

6. Choose the Eyedropper tool.

7. Click on the imported color swatch to sample it. The triangle is filled with the correct, though non-Web-safe, company color.

8. Choose the Pointer tool, and then select and delete the imported swatch.

 

Switch from solid to Web Dither fill

Choosing a Web Dither fill creates a Web-safe dithered version of the company color.

1. Select the triangle again.

2. Open the Fill panel. The fill is set to a Solid fill. The solid color is correct, but it is not Web-safe.

3. From the Fill category pop-up, choose Web Dither.

Automatically, your company's color is recreated as a fine, dithered pattern of two Web-safe colors.

The two Web-safe colors that, when dithered together, approximate your sampled company color.

Note: If an object is selected and assigned a Web Dither fill, you can use the Eyedropper tool to sample any color in the document. Your selected object is then filled with a Web-safe pattern dither of the sampled color.

Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html