color theory and digital graphics
Post on 10-Apr-2018
217 Views
Preview:
TRANSCRIPT
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 1/27
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 2/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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 3/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 4/27
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/
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 5/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 6/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 7/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 8/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 9/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 10/27
Raster Graphics
Vector Graphics
Dimensions
Resolution
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 11/27
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.
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 12/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 13/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 14/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 15/27
JPEG
GIF
PNG
BMP
TIFF
Joint PhotographicExperts Group
Graphic Interchange
Format PortableNetwork
Graphics
Microsoft Bitmap
Tagged Image FileFormat
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 16/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 17/27
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 18/27
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
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 19/27
Color Support
24-bit
16 million colors
Resolution Support unlimited
Advantages
Highly Portable
Disadvantages
No compression
Do
Admire Microsoft·seffort
DoNot Use for anything,
ever.
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 20/27
Color Support 48-bit 16 million colors 65,536 levels per pixel Indexed Color
Resolution Support unlimited
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)
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 21/27
http://instructor.marklapointe.com/Examples/GraphicFormats
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 22/27
PNG files are yourbest all-around option
JPG files have the best
compression GIF files are good for
graphic accents andanimations
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 23/27
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·
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 24/27
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/
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 25/27
UXGA
1600 x 120
4:5 Aspect R
4:
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 26/27
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µ
8/8/2019 Color Theory and Digital Graphics
http://slidepdf.com/reader/full/color-theory-and-digital-graphics 27/27
End of Presentation
top related