color theory and digital graphics

8/8/2019 Color Theory and Digital Graphics

http://slidepdf.com/reader/full/color-theory-and-digital-graphics 1/27



Color is the name weassign to wavelengths oflight detectable by thehuman eye; 380 ² 720

nanometers Shorter wavelengths are

perceived as Blue/Violet

Longer wavelengths areperceived as Orange /Red

Each Color we seecorresponds to a specificwavelength of light

http://www.windows.ucar.edu



Rod Cells

Rods detect intensityof light

They do not detectcolors

Slow response tostimuli

~20 times more rodsthan cones in retina

Cone Cells

Detect combinationsof light

Three types designateL, M, S for long,medium, and shortwavelengths of light



Black is the absence ofvisible light

Black is approximated

in the subtractive colormodel (CMY) bycombining all colors

In printing, this createsa muddy brown, so a

separate black ink isused resulting in theindustrial color modelCMYK

White is the aggregateof all wavelengths inthe visible light

spectrum.

http://www.arachnoid.com/raytracing/



Primary Colors can beused to approximate alarge number of colors

in the naturalspectrum

Primary Colors varybased on the method

of reproduction

Additive Color Model

Red

Green

Blue

Subtractive ColorModel

Cyan

Magenta

Yellow



RYB are the traditionalartistic primary colorsdefined in theeighteenth century,prior to the evolution of

Color Science In the late 19th century

measurement andreproductiontechniques revealedthat the more subtle

hues of CMY werebetter suited forrepresenting andreproducing reflectedcolors

RGB The human eye detects

colors with cells sensitive tothe RGB wavelengths

CMY The broadest reflective

spectrum can be achievedby using translucent inks ofCyan, Magenta, and Yellow

CMY are the secondarycolors of the RGB ColorModel

RGB are the secondarycolors of the CMY ColorModel



Color Model An abstract mathematical

system of defining colors RGB, CMY

Color Space

A system for defining exactlywhat color a color definitionshould be

Pantone Matching System andICC Profiles

These terms are often usedinterchangeably, but this isstrictly incorrect

Gamut The range and values of colors

that a Color Model canrepresent

Out-of-Gamut Warning You may receive this error

when you define a color that inmodel that does not translateto a color in another model

The most common source ofthis error is defining RGBcolors in an image that will beprinted on a CMYK device.

Many printer drivers includecolor space conversion thatprevent this error fromoccurring by automaticallyselecting the most appropriatecolor in the target color model



RGB and CMY arecolor models used todefine colors

CIE 1976 (L*,a*,b*) ormore commonlyCIELAB

CIELAB is a colorspace that models thehuman perception ofcolor

It is the most accurate

color space, but toocomplex for everydayuse



The white triangles belowrepresent colors you candefine in a Photoshoppicture, but will not printon your printer (CMY)

RGB and CMY canreproduce only a portionof the colors in the visiblelight spectrum



Raster Graphics

Vector Graphics

Dimensions

Resolution



A static method for renderingimages that defines a grid on arendering area, and thenspecifies a fill-value for eachblock on the grid

Raster Graphics are not scalable;

they lose integrity if you makethem bigger than their originalsize.

Large High Resolution RasterGraphics increase exponentiallyin size

Raster Graphics are also

technically ¶bitmaps· becausethey are a map of bits, but thisshould not be confused with theMicrosoft Image format Bitmap(.bmp)

All web graphics, digital cameraimages, and scanned images are

Raster Graphics.



A dynamic method forrendering images thatdefines shapes as curves,lines and fills usingmathematical expressions

Vector Graphics areinfinitely scalable They do not increase in file

size They do not lose visual

integrity Web Pages usually do not

have Vector Graphics, butWikipedia uses a lot of VML,a vector graphics languagefor the web



Raster Files

PSD, JPG, PNG, TIFF,GIF, BMP

Programs that createraster files

Adobe Photoshop

Microsoft Paint

Corel PhotoPaint JASC Paint Shop Pro

Vector Files

AI, EPS, CDR, WMF,FH, VML

Programs that createvector files

Adobe Illustrator

Macromedia

FreeHand CorelDRAW



PSD and EPS arecomposite file formatsthat support both

raster and vectorimage data

They are proprietaryto Adobe and are

used primarily byprint and graphicsprofessionals

PSD and EPS are notused for web graphics



JPEG

GIF

PNG

BMP

TIFF

Joint PhotographicExperts Group

Graphic Interchange

Format PortableNetwork

Graphics

Microsoft Bitmap

Tagged Image FileFormat



Color Support 4-bit

255 Colors

Resolution Support 72 DPI

Advantages Supports transparent

pixels Disadvantages

Low Resolution,Limited Colors

Do Use on web pages for

accent graphics andlogos

DoNot Use for photographs

Documentation



Color Support 24-bit 16 million colors

Resolution Support unlimited

Advantages Lossless compression

(LZW) Most portable professional

format

High color and resolutionfidelity

Disadvantages Not supported by web

browsers

Do Use for all base file formats

(Scans, captures, etc) beforeconverting for otherpurposes, such as web

pages Use for all documentation

Use for all professionalreproduction

DoNot Use for web pages



Color Support

24-bit

16 million colors


Advantages

Highly Portable

Disadvantages

No compression

Do

Admire Microsoft·seffort

DoNot Use for anything,

ever.



Color Support 48-bit 16 million colors 65,536 levels per pixel Indexed Color


Advantages Lossless compression Highly Portable Supports Transparency (GIF-

like)

Supports alpha channel forgradient transparency

Disadvantages Does not support CMYK Color

Model

Do Use for web pages

Prefer PNG to other formats

DoNot Use for professional color and

printing Browser Support

All Browsers support PNGfiles

IE 7.0 and Firefox supportPNG alpha-channeltransparency

IE versions prior to 7.0 Do not support PNG alpha-channel transparency There is an IE-JavaScript

workaround

Do support PNG Transparency(GIF-like)



http://instructor.marklapointe.com/Examples/GraphicFormats



PNG files are yourbest all-around option

JPG files have the best

compression GIF files are good for

graphic accents andanimations



Dimension The physical size of the

image (or screen)measured in inches orpixels

Resolution The number of pixels per

inch (density), such as 72,96, or 300

A Windows display setfor 800x600 is the screen

dimension, not resolution

Windows Displays 99.99% of all PC·s have a

display resolution of 96DPI, regardless of monitorsize or pixel dimensions

PC·s that have ¶LargeFonts· selected in DisplayProperties have aresolution of 120 dpi, or acustom setting.

Mac Displays Newer Macs have a

screen resolution of 96 dpi Older Macs have a screen

resolution of 72 DPI This contribution to the

perception that Macs were¶faster·



The Myth of 72 DPI WebImages Page 116 of the textbook,

W eb Designer·s Reference,

states that all webgraphics should be 72DPI, but does not qualifythe statement

Designing web images at72 DPI is an un-evolved

tradition that started on72-DPI Macs, andpropagated by WindowsPhotoshop whose defaultimage resolution is 72 DPI

Why Web Images shouldbe 96 DPI 99.99% of all PC·s and

most modern Macs have a

screen resolution of 96DPI

All Browsers resampleimages to 96 DPI

Images rendered at 72DPI can have unexpected

results in web layouts The above arguments

suggest web imagesshould be 96 DPI, not thetraditional 72 DPI.

http://instructor.marklapointe.com/Examples/ImageResolution/



UXGA

1600 x 120

4:5 Aspect R

4:



Screen to PaperConversion

Divide Screen

Dimension byResolution (DPI) toconvert to inches

640 x 480 / 96

6.67µ x 5µ

800 x 600 / 96

8.34µ x 6.25µ

1024 x 768 / 96

10.67µ x 8µ

1280 x 1024 / 96

13.34µ x 10.67µ



End of Presentation

color theory and digital graphics

Documents