Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.

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, blacKFour color processReflective color- light from sun

(or bulb) hits an object & color is reflected to our eyes

Print Documents

Color - RGB

“Monitor” colorRed, Green, BlueTV, video, computer monitorsStraight from light source; not

reflective“RGB values” = intensity of colorsHexadecimal code- 6 numbers

RGBValues

Color - Netscape Composer

Color - Dreamweaver

Hexadecimal Code

Paint program: You can edit individual pixels

Draw program: You can easily resize, insert text and use layers

Bitmapped (pixel-based, paint, raster, Photoshop)

Vector (math-based, object-oriented, draw, Illustrator)

Images - File format

What we will use on our webpages

.jpg- we say jay-peg.gif

Images- JPEG

Joint Photographic Experts GroupCross platformCompressed (lossy - data removed)Maximum of 16.7 million colors Cannot be transparent, interlaced or

animatedPhotos, images with subtle color

changes, depth, lighting, etc.

Images -GIF

Graphic Interchange FormatCross platformCompressed (lossless - no data

removed)Indexed color -maximum of 256 colorsCan be transparent, interlaced and

animatedSimple 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.