Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to...
-
date post
18-Dec-2015 -
Category
Documents
-
view
213 -
download
0
Transcript of Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to...
![Page 1: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/1.jpg)
Color
COM 366
Web Design & Production
![Page 2: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/2.jpg)
RGB color
• Amount of light in each channel 0 - 255
• Closer to 255, whiter color gets
• Every color has value for red, green, blue
• In computers, use hexadecimal system to store color info– 6 characters (numbers/letters), 2 for each color
![Page 3: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/3.jpg)
Web safe colors
• 216 colors that are shared by Windows and Mac systems
• Made up from 3 shades of each of primary colors– 6699FF is web safe– FAD579 is not
![Page 4: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/4.jpg)
Original photo; note the smoothness in the detail.
Original image using the web-safe color palette with no dithering applied. Note the large flat areas and loss of detail.
Original image using the web-safe color palette with dithering. Note that even though the same palette is used, the application of dithering gives a better representation of the original.
![Page 5: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/5.jpg)
• 216 made up from 6 shades of each of primary colors– 6699FF is web safe– FAD579 is not
![Page 6: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/6.jpg)
Image sources
• Scanning
• Digital cameras
• Electronic illustration– Illustrator– PhotoShop
• Want to avoid clip art, stock photos– Look too generic
![Page 7: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/7.jpg)
Anti-aliasing
• With text it creates a slight blurring at edges– So that edges of text look smooth
• Should set all text using anti-aliasing– Except small text (< 10 points)
anti-aliasedaliased
![Page 8: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/8.jpg)
Image resolution
• dpi = dots per inch (printed page)
• ppi = pixels per inch (screen)
• Default for the Web is 72 ppi (or dpi)
![Page 9: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/9.jpg)
Bitmapped files
• Pixel based images
• Also known as raster images
• Differ from vector graphics– Made up of smooth lines,
based on mathematical formulas
– No pixels
![Page 10: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/10.jpg)
gif files
• Graphic Interchange format
• Contain maximum of 8-bit color info– 256 colors
• Have to convert to indexed color from RGB
• Used for line art, graphics, etc.
![Page 11: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/11.jpg)
Interlacing
• Applied to gif files
• Image downloads in a series of passes
• Works well for large graphics, slow Internet connections
![Page 12: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/12.jpg)
Interlaced file displaying every 8th row; this is how the file first loads.
Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.
![Page 13: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/13.jpg)
jpeg files
• 24-bit color mages– Contain millions of
colors
• Compressed files• “lossy” compression scheme used
– Some detail in image is lost
• Used for photos• Extension needs to be jpg or jpeg
![Page 14: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/14.jpg)
• Progressive– Same as interlaced gifs
• Image quality– 0 - 100% or 1 - 10– Higher number the better the image quality– and larger file sizes– Usually medium, or 50%, is satisfactory
![Page 15: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/15.jpg)
Color terms
• Hue: the color an object is– Identified by the name of the color -- red,
green, blue, etc.
• Saturation (chroma)– Intensity of a color– Less saturated color means less of color is there
![Page 16: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/16.jpg)
Warm/cool colors
• Warm colors (red, yellow, orange)– Stimulating, excitement, etc.– Can be somewhat overpowering
• Cool colors (blue, violet, green)– Calming, relaxing– Tend to recede
![Page 17: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/17.jpg)
The color wheel
Yellow
Green
VioletOrange
Red
Blue
![Page 18: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/18.jpg)
Complementary Colors
• Colors opposite each other on the color wheel are known as complementary colors
• These colors are said to contrast because they don’t share any common color
![Page 19: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/19.jpg)
In Wheatfields with Ravens, Vincent van Gogh used high contrast colors to make the yellow wheat fields stand out against the dark blue sky.
![Page 20: Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d245503460f949fb0ef/html5/thumbnails/20.jpg)
Analogous colors• Analogous colors are
those colors that you'll find fairly close to one another on the color wheel.
• Always going to be harmonious
• Much less intense than complementary colors