190 likes | 336 Views
07: Color in Interactive Digital Media. How do you make color. Printer (like paint) = mix pigments Computer = mix light. Computer Color = RGB. Comprised of red, green and blue light. Varying amounts of light produce different colors.
E N D
How do you make color • Printer (like paint) = mix pigments • Computer = mix light Introduction to Interactive Media
Computer Color = RGB • Comprised of red, green and blue light. • Varying amounts of light produce different colors. • With RGB color you can not represent the entire color spectrum. Introduction to Interactive Media
Print Color = CMYK Color • CYMK • Cyan, magenta, yellow, and black. • Small dots of color combinations can reproduce many different colors. • Also called process color. Introduction to Interactive Media
Additive vs. Subtractive Color • Color images on computer monitor use additive process. • Varying amounts of Red, Green, and Blue light are added together to create the color • Color images on printed surface are formed using subtractive process. • Light is reflected from the printed surface. • Pigments that form image absorb some of the colors. • Remaining colors reach the eye to produce image. • See the difference: http://dx.aip.org/advisor/cmyk_color.html Introduction to Interactive Media
Additive vs. Subtractive Color Introduction to Interactive Media
Challenge of Designing for Print • Graphic artists convert from RGB (additive) color models to CMYK model if image is printed. • Out of gamut colors are consideration. Introduction to Interactive Media
Out of Gamut Color Introduction to Interactive Media
RGB Color Depth • How many bits do you need to describe a color? • 24-bit (3 bytes) color is most common. • Each light, R, G, B, can be one of 255 levels. • Combination yields 16 million different colors. Introduction to Interactive Media
Color depth example Introduction to Interactive Media 24 bit color = 16 million colors total 4 bit color = 16 colors total 3 bit color = 8 colors total 2 bit color = 4 colors total
RGB Color Depth • Low color resolution may cause color banding. • Quantization leads to breaks in shades of continuous tone images. • Dithering = Combining pixels of different colors to produce another color not available in the indexed palette. (Improves image quality without increasing bit depth). Introduction to Interactive Media
RGB Color Depths • 8-bit color creates images limited to 256 colors. (GIF images) • 24-bit color yields images that can contain 16.7 million color possibilities. • Default in PhotoShop = 8 bits/channel * 3 channels (RGB) = 24 bit image • 48-bit color yields images that can contain up to 281 trillion color possibilities. Introduction to Interactive Media
GIF Image format = 8 bit • A GIF image can not support more than 256 different colors. • This limitation keeps GIF files sizes small. • Color limitation makes GIF most suited for? Introduction to Interactive Media
GIF images best suited for • Cartoon-like images • Logos • Images with limited gradation of color Introduction to Interactive Media
Hexidecimal Color Codes • Each 8 bit color value can be represented as a 2 digit base 16 number. (16 x 16 = 256) • Hexidecimal number means base 16 – each digit is either 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F • Each color (comprised of 3 – 8 bit values can be described as a six digit Hex code. Introduction to Interactive Media
Web Safe Colors • Web Safe colors – recommended when 8 bit monitors were common.
Color Considerations • Warm vs. cool colors • Color wheel • Color contrast • Color meaning • Branding of client • Cultural color associations • Industry color associations • Target audience preference • Color Trends
Color Resources • More info about color. • Take color quiz