Raster vs Vector Graphic Formats Download illustrator and

Raster vs Vector Graphic Formats Download illustrator and Photoshop Assets and save in JMA 501/Images Unzip to the same folder

Raster Graphics �Use numerical values to represent pixel colors �Values refer to a color lookup table (CLUT) �Cannot be resized by very much

Simple Raster example �Assume two possible colors � 1 = yellow � 0 = purple CLUT: � 001100 = what string of pixel colors? �aka indexed color

Raster file formats

Raster Example 2 � We want to store 64 pixels � Each pixel is one of two colors, yellow and purple � Here is what we want to store (Instead of a table, bits would be consecutive). . Assume CLUT from previous example What string of values would actually be stored?

Gif formats �Gif is 8 bit format �So clut has at most 256 colors �Each pixel stores one of 256 values (2^8) �If more than 256 colors needed: �Use most often used 256 colors �Dithering �Using existing colors to simulate additional colors

Dithering

CLUTs in more detail…assume 8 -bit color, gif

CLUTs: Quality � 24 bit (8 bits R, G, B) versus 8 bit �Surprisingly good quality �Most often used 256 colors + dithering

Photoshop CLUTs �Open powwow 2010. jpg �(jpg uses CLUTs) �Change size to 640 pixels wide �Image>Image size

CLUT… �Choose File>Save for Web �Select gif �Show clut �Select a pixel �Color picker, choose a color �All pixels of original pixel change to new value

CLUT for Powwow �Choose first option

CLUT �Choose a warm CLUT

What did we do �Modified the color lookup up table a pixel maps to �Same pixel value, (eg 300) just points to a different CLUT. . Blue becomes purple: CLUT 1 300 Blue CLUT 2 300 Purple

Vector files � � � Based on math Anchors and paths Example: Draw a line using Postscript: Postscript, a printer language…yes printers have languages Here is sample code: %! newpath 200 moveto 300 200 lineto stroke showpage It says: � Draw a new line staring at x=200, y=200 � Draw to location 300, 200 � Add a stroke

Vector… �Really just need (x 1, y 1) and (x 2, y 2) values to draw a line �To change line, just modify the x, y values Common v ctor formats: �. ai adobe illustrator �eps encapsulated post script �fla, swf Flash �Fonts �Except for flash, vector file formats not usable on Web

Compression Why do we need it �Assume we have a digital camera that creates an image size of 4, 000 x 3, 000 -pixels…a 4: 3 aspect ratio) �Total Pixels: 4, 000 x 3, 000 = 12, 000 pixels (12 million) � Assume 24 bit/pixel: 8 pixels each for R, G, B. . . 24 bits as the color depth aka sample size �Therefore, file size in bits: 12, 000 pixels x 24 bits/pixel = 288, 000 bits �File size in bytes: 288, 000 bits /8 bits/byte= 36, 000 bytes (36 MB/picture)…

Compression Methods �RLE �Reduce bit depth �RLE? �Bit depth �In File> save>for web there is an option to change the number of colors

Compression �Lossy vs Lossless �Jpg files are lossy ( Some information is lost) �Tiff can be either

Jpeg files �Lossy �Open ducky. tif �What is its size? (Image>Image Size)

Losssy: jpg �File>Save> as jpg �Options:

Jpg… �Slider �Watch file size, quality

Save for web �Jpeg or �gif

Save as gif �File �> Save for Web

Some thoughts �Try gif with no dither, better/worse? �Why might gif versions be so good? �Which of the four do you think is “best”, why? �Reduce the number of colors to 128 �Quality?

Jaggies �Rasters work with pixels �Lines and curves will have jaggies �Zoom in on Ducky

antialiasing �Smooth out jaggies

Color Modes �RGB �CMYK �When use each? �Which has larger gamut? �Switch powwow to cmyk �Double-click the fill tool and choose a color �See if any out of gamut warnings