130 likes | 468 Views
Color and Images. Color. The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor. Color - CMYK. Cyan , Magenta , Yellow , blac K Four color process
E N D
Color The natural colors we see and the colors we see on computer monitors are different. • CMYK -natural • RGB -monitor
Color - CMYK • Cyan, Magenta, Yellow, blacK • Four color process • Reflective color- light from sun (or bulb) hits an object & color is reflected to our eyes • Print Documents
Color - RGB • “Monitor” color • Red, Green, Blue • TV, video, computer monitors • Straight from light source; not reflective • “RGB values” = intensity of colors • Hexadecimal code- 6 numbers
Color - Netscape Composer RGB Values
Color - Dreamweaver Hexadecimal Code
Bitmapped (pixel-based, paint, raster, Photoshop) • Vector (math-based, object-oriented, draw, Illustrator) Paint program: You can edit individual pixels Draw program: You can easily resize, insert text and use layers
Images - File format What we will use on our webpages • .jpg- we say jay-peg • .gif
Images- JPEG • Joint Photographic Experts Group • Cross platform • Compressed (lossy - data removed) • Maximum of 16.7 million colors • Cannot be transparent, interlaced or animated • Photos, images with subtle color changes, depth, lighting, etc.
Images -GIF • Graphic Interchange Format • Cross platform • Compressed (lossless - no data removed) • Indexed color -maximum of 256 colors • Can be transparent, interlaced and animated • Simple illustrations, logos, cartoons
File size vs. Picture size • File Size-how much disk space is used by the file ex. 30kb • Picture Size-the dimensions of the image ex. 150 pixels wide • Both important for speed of download • Resize and/or change resolution
Accessibility • Alternate labels -text that will show as image is downloading or in place of images
“Web-ified” Images • Goal is to get maximum image quality for minimum file size • Make sure your image is on the server otherwise your link will not work • Do NOT rename or move your image once you have placed it on your web page.