Adobe Education

Adobe Web Tech Table of Contents:

• Lessons revised for CS2

• Lessons revised for CS

• Original lessons

Unit 5: Introduction to Graphics

Lesson 5.5: Illustrator Image and Color Basics

Working with Color in Illustrator

You might have noticed some similarities between the Illustrator Color Palette and the Photoshop Color Palette: They share some common features such as color fields and a color spectrum. They share the same warning icons. However, from there, they begin to show their individuality: The Illustrator Color Palette has Stroke and Fill Color boxes as compared to Photoshop's Foreground and Background Color squares. Illustrator has a None color option to the left of the color spectrum. Either the Stroke or Fill color can be set to None.

Figure 5.5-4: Illustrator Color Palette

Selecting a color in Illustrator is very similar to choosing a color in Photoshop:

1. The Color Picker -- The Color Picker is accessed by double-clicking the Stroke or Fill boxes in either the Toolbox or the Color Palette. The New Color and Old Color boxes in Illustrator work the same way they did in Photoshop.

   Demonstration or Practice Activity

   1. Create a new Illustrator document:
      1. Use the standard Letter preset size (this document will be used for several of the activities below).
      2. Set the Units of measurement to pixels.
   2. Double-click the Stroke Color square in the Toolbox to open the Color Picker, and then:
      1. Notice the locations for entering RGB and hexadecimal color values.
      2. Notice the New Color and Old Color boxes.
      3. Click on the Color Spectrum to select a hue.
      4. Click on different colors within the large color square to see color variations within the selected hue. Notice any warnings regarding the printable gamut and Web safe colors as you switch from color to color.
      5. Close the Color Picker.
   3. Double-click the Fill Color square on the Color Palette, and then:
      1. Notice this brings up the same Color Picker Window.
      2. Place a check in the Only Web Colors checkbox.
      3. How does the information in the Color Picker change?
      4. Close the Color Picker.
   
   

   Demonstration or Practice Activity

   1. Select the Ellipse Tool from the Toolbox.
   2. Using the document from the previous activity, click the Ellipse Tool in the Document Window and drag at a diagonal to the desired size. Notice the Stroke and Fill colors of the ellipse.
   3. Double-click the Fill Color square on the Color Palette to display the Color Picker.
   4. Choose a new fill color for the ellipse by clicking the large color box, by selecting a hue from the color spectrum, or by entering values directly into the RGB or hexadecimal fields.
   5. Notice the New Color and Old Color boxes as you click on various color options.
   6. Click the OK button to accept the new fill color.
   7. What happened to the ellipse?
   
   

2. The Color Slider -- The Color Slider is part of the Color Palette (see Figure 5.5-5). To select a color using the color sliders, make sure either the Color Palette's Fill Color box or Stroke Color box is selected. Then, slide the sliders for each of the RGB colors until the desired color appears in the selected color box. Known RGB values can be directly entered into their respective color fields to the right of the sliders. The color change will take effect immediately.

   

   Figure 5.5-5: Illustrator Color Palette

   Demonstration or Practice Activity

   1. Create a star using the Star Tool.
   2. Click the Stroke Color square in the Color Palette.
   3. Adjust the RGB sliders until the desired color appears in the Stroke color square. You may need to adjust the stroke weight in the Stroke Palette in order to see the stroke color.
   4. Make sure the star is still selected, and select the Fill color square in the Color Palette.
   5. Adjust the RGB sliders until the desired color appears in the Fill color square.
   6. How is selecting a new color using the Color Palette sliders different in Illustrator versus Photoshop?
   
   

3. The Color Spectrum -- The Color Spectrum is also located in the Color Palette. To select a color using the color spectrum, simply click on the desired color within the spectrum. Its RGB values will appear in the RGB color fields and the RGB sliders will automatically adjust.

   Demonstration or Practice Activity

   1. Select the ellipse from above and change its fill color by selecting a new color from the Color Spectrum.
   2. Now change its stroke color by selecting a new color from the Color Spectrum.
   
   

4. The Swatches Palette -- To select a color using the Swatches Palette, select either the Fill or Stroke Color square, then select the desired swatch from the Swatch Palette. The object's existing stroke or fill color will automatically be replaced by the swatch color.

   

   Figure 5.5-6: Illustrator Swatches Palette

   Demonstration or Practice Activity

   1. Select the ellipse from above.
   2. Select the Toolbox's Fill Color square.
   3. Select the Swatches Palette.
   4. Select the desired swatch from the Swatches Palette.
   5. Now choose a pattern from the Swatches Palette and drag it to the ellipse.
   6. Set the ellipse's stroke weight to 5.
   7. Select the Toolbox's Stroke Color square.
   8. Drag a new color for the stroke from the Swatches Palette to the ellipse.
   
   

Go to page: | Lesson Home | 01 | 02 | Printable Version of Lesson |

Course Home

Copyright © 2002-2005 Adobe Systems Incorporated. All rights reserved.