curriculum.naf.orgcurriculum.naf.org/packaged/assets/downloads/shared/gr… · web viewwhen you...

NAF Graphic Design

Lesson 10Fundamentals of Color

Teacher Resources

Resource Description

Teacher Resource 10.1 Images: ComplementaryColors.psd, Triads.psd, SplitComplementTriads.psd, AnalogousColors.psd, ColorPalette.jpg (separate ZIP file)

Teacher Resource 10.2 Example: Words and Color

Teacher Resource 10.3 Presentation and Notes: CMYK, RGB, and Grayscale Color Systems (includes separate PowerPoint file)

Teacher Resource 10.4 Assessment Criteria: Color Palette

Teacher Resource 10.5 Key Vocabulary: Fundamentals of Color

Teacher Resource 10.6 Bibliography: Fundamentals of Color

Copyright © 2011–2015 NAF. All rights reserved.

NAF Graphic DesignLesson 10 Fundamentals of Color

Teacher Resource 10.2

Example: Words and Color



Show students this example of associating the meaning of a word with colors.

.




Presentation Notes: CMYK, RGB, and Grayscale Color Systems

Before you show this presentation, use the text accompanying each slide to develop presentation notes. Writing the notes yourself enables you to approach the subject matter in a way that is comfortable to you and engaging for your students. Make this presentation as interactive as possible by stopping frequently to ask questions and encourage class discussion.

This presentation explains the important differences between these color systems, and when it is appropriate to use each type of color.



Color is difficult to control when you are creating an original work, and even more so when a work is reproduced in print or viewed on a computer screen. Knowing the correct color system to use for a particular piece is important. Which color system is right depends on whether the final piece will be printed or viewed on a computer screen.

Each of these color systems is a color mode in Photoshop. When you create an image in Photoshop, you need to use the color mode that is most suited for your image.



Just about everything you ever see printed on a poster, a brochure, a book, a magazine, or a cereal box is printed using the CMYK color mode. Graphic designers specify CMYK colors for all projects that will be printed by a printing press onto something physical, such as paper.

When you prepare a print job for a printer, you will most likely always specify the colors in CMYK. Although only four colors are used, the viewer perceives full color that is created by dot patterns of cyan, magenta, yellow, and black. When you have a print job, it is important to confer with the printer to make sure you get the exact colors you want.

When you select a color using the Photoshop Color Picker, the Color Picker gives you the CMYK values for the color.



In the world around us, when the spectrum of visible light hits an object, the object absorbs most of the spectrum, and what it doesn’t absorb reflects back to our eyes as color. However, on a computer monitor or TV screen, the color of the light is not reflected; the visible light goes directly into our eyes. RGB is composed of these beams of colored light.

Each RGB color contains a value from 0 to 255 of red, green, and blue. So, for example, the value for red is R = 255 G = 0 B = 0

And for an orange red, some green is added to the red, so the value is R = 255 G = 51 B = 0

To get a peachy color, both green and blue are added to the red, and the value is R = 255 G = 153 B = 102

Since RGB colors are composed of beams of colored light, black is the total absence of color. The RGB value for black is R = 0 G = 0 B = 0

White is a combination of all colors, so the RGB value is R = 255 G = 255 B = 255

Each RGB color has a hexadecimal value that is used to specify the color in HTML code. The lowest hex value is for black (00000) and the highest hex value is for white (FFFFFF).

When you select a color using the Photoshop Color Picker, the Color Picker displays the RGB values for the color.



You can convert an image to grayscale in Photoshop by selecting the Image menu and then choosing Mode > Grayscale.

Grayscale imaging is sometimes called “black and white,” but technically grayscale is different from black and white. True black and white is also known as halftone, and the only possible shades are pure black and pure white. In a halftone image, the image is a grid of black dots on a white background (or vice versa), and the size of the individual dots determines the shade of gray. Photographs in newspapers are typically printed using the halftone technique.

You can convert an image to black and white in Photoshop by selecting the Image menu and then choosing Adjustments > Black & White.

Photo credit: Ansel Adams, Manzanar volleyball. This map image is included under fair-use guidelines of Title 17, US Code. Copyrights belong to respective owners.



As you work in graphic design, you will get more practice with the different color modes. Remembering these basic rules is key to making good decisions about color.




Assessment Criteria: Color PaletteStudent Name:______________________________________________________________

Date:_______________________________________________________________________

Using the following criteria, assess whether the student met each one.

Met Partially Met

Didn’t Meet

The creative brief shows that skilled and thoughtful planning work was put into the color palette. □ □ □The color palette is clearly appropriate for the products or services offered and for the target audience. □ □ □The six colors below the main color and the accent color are all tints or shades of the main color or the accent color.

□ □ □

The sentences describing the color choices give a convincing rationale for the choices. □ □ □The final product shows careful, accurate work in both text and graphics. □ □ □

Additional Comments:

_____________________________________________________________________________

_____________________________________________________________________________

_____________________________________________________________________________

_____________________________________________________________________________




Key Vocabulary: Fundamentals of Color

Term Definition

analogous colors A set of two or three colors that are next to each other on the color wheel.

CMYK Color system based on the colors cyan (C), magenta (M), yellow (Y), and black (K). This is the color system used in four-color printing.

color wheel A color wheel arranges colors around the edges of a circle. A standard color wheel has 12 distinct hues, which are classified as primary colors, secondary colors, and tertiary colors.

complementary colors Colors situated across from each other on the color wheel. The complement of red, for example, is green. There is an inherent unity in complementary colors because any color has as its complement the sum of the other two primary colors. For example, red’s complement, green, is made by combining blue and yellow, which are the two other primary colors on a standard color wheel.

cool colors Colors that have some blue and/or green in them. Cool colors recede into the background.

duotone A reproduction of an image in which one color (traditionally black) is superimposed over another color. The most common use of duotone is to give a photo an “old” effect by using a sepia tone.

grayscale A series of achromatic tones having varying proportions of white and black, to give a full range of grays.

hue A color in its purest form, with no black, gray, or white added. For example, scarlet, crimson, and pink all have a red hue.

monochromatic scheme A combination of one hue with any number of its corresponding tints and shades.

primary colors The defining colors of the wheel. For a standard color wheel, the primary colors are blue, yellow, and red.

RGB Color system based on the colors red (R), green (G), and blue (B) and used for additive color mixing. Televisions and computer monitors use RGB to reproduce color.



Term Definition

secondary colors The three colors that are equidistant from the primary colors on the color wheel. These colors are created by combining equal amounts of two primary colors.

shade A hue with black added to it to create a darker color.

split complement triad A set of three colors that includes one color on the color wheel and the colors on each side of its complement.

tertiary colors The colors between each primary and secondary color on a color wheel. These colors are created by combining equal amounts of the primary and secondary color on either side of them.

tint A hue with white added to it to create a lighter color.

tone The particular quality of brightness, deepness, or hue of any color.

triad A set of three colors equidistant from each other on the color wheel.

value The relative lightness or darkness of a color. Different colors can have the same value.

warm colors Colors that have some red or yellow in them. Warm colors come to the front.




Bibliography: Fundamentals of ColorThe following sources were used in the preparation of this lesson and may be useful for your reference or as classroom resources. We check and update the URLs annually to ensure that they continue to be useful.

PrintGraham, Lisa. Basics of Design Layout & Typography for Beginners, 2nd ed. Clifton Park, NY: Delmar Cengage Learning, 2005.

Hembree, Ryan. The Complete Graphic Designer. Beverly, MA: Rockport Publishers, 2008.

Landa, Robin. Graphic Design Solutions, 3rd ed. Clifton Park, NY: Thomson Delmar Learning, 2006.

Williams, Robin. The Non-Designer’s Design Book, 3rd ed. Berkeley, CA: Peachpit Press, 2008.

OnlineAdobe Color CC, https://color.adobe.com/create/color-wheel (accessed June 29, 2015).

AIGA: The Professional Association for Design, http://www.aiga.org/ (accessed June 29, 2015).

Bear, Jacci Howard. “Color Symbolism: What Different Colors Mean to Us.” About.com, http://desktoppub.about.com/cs/color/a/symbolism.htm (accessed June 29, 2015).

“Downloadable Color Wheels.” Tiger Color, http://www.tigercolor.com/color-lab/color-wheel/color-wheels.htm (accessed June 29, 2015).

“How to Create Duo/Tri/Quadtone Images.” DPChallenge, http://www.dpchallenge.com/tutorial.php?TUTORIAL_ID=23 (accessed June 29, 2015).

“The Science of Light: Stellar Spectra.” Teachers’ Lab, The Annenberg/CPB Projects, http://www.learner.org/teacherslab/science/light/color/spectra/index.html (accessed June 29, 2015).


http://www.learner.org/teacherslab/science/light/color/spectra/index.html

http://www.dpchallenge.com/tutorial.php?TUTORIAL_ID=23

http://www.dpchallenge.com/tutorial.php?TUTORIAL_ID=23

http://www.tigercolor.com/color-lab/color-wheel/color-wheels.htm

http://www.tigercolor.com/color-lab/color-wheel/color-wheels.htm

http://desktoppub.about.com/cs/color/a/symbolism.htm

http://www.aiga.org/

https://color.adobe.com/create/color-wheel

curriculum.naf.orgcurriculum.naf.org/packaged/assets/downloads/shared/gr… · web viewwhen you...

Documents