COS 125 Day 13

Agenda Assignment 3 Due Assignment 4 Posted –Due March 24 Left to do –6 Assignments (9 total) About one per week –3 Quizzes –Capstone projects Exam #3 will March 24 –Castro Chaps 1-6 Today we will look at creating and using images Examples – –

Factors to Consider for Web Image Format Color Size/resolution Speed Transparency Animation

Formats 3 Possibilities –GIF Version 87a –Older Version 89a –Transparency and animations Interlaced or non-interlaced –JPEG Compressed (variable) –PNG Optimized or non-optimized palette Interlaced or non-interlaced

Color Depth –24 bit 16,777,216 possible colors “true color” Photo quality –16 bit 65,536 colors –8 bit 256 colors

Browser Colors Most Browser cheat! –Lock palette to 256 specifics colors Because of difference in O/S only 216 colors are Web Safe colors.htmlhttp:// colors.html –Non web safe colors may be dithered or shifted

Size and Resolution Pixels –Monitors are pixels per inch –Printers are >200 ppi –800 X 600 image 10X7.5 inches on monitor 4X3 inches (or less) on printer –The more pixels on a printer means greater detail –The more pixels on a monitor means larger size Standard SVGA monitors are 800X bit XGA monitors are 1024X bit or better

Speed How fast can the picture be displayed? Factors –Size of graphic file Size of graphic Color depth Compression –Interlacing Sneak peek

How to make graphic load faster Use the right image format –For Photo realistic use jpeg Lossy compression Use Gaussian blur and re-compress – < 256 colors (logos, text, cartoons) Gif using LZW compression PNG Only covert images to web format after all editing is done

Transparency Only for GIF and PNG –“remove” one color from image –Remove Background to make image non- rectangular –Remove color in image to create special effects

Animations Animated Gifs Flash Both work with frames –Like cartoons –Series of images with slight changes between each image

Where to get images Buy or download Scan existing images –Blake library Digital camera –Blake library Create using image editing program Goggle image search

Paint Shop Pro File >New Set image size Set depth Set background –transparent

Paint Shop Pro Resizing Images Image >> resize Don’t make larger! –Lose detail –If image is twice as big File is 4 times larger 4 time slower Better to use image resizing in XHTML

Creating Transparent GIFS Save image as GIF Colors>> Set palette transparency Set dialog as shown Select color Save

Paint Shop Pro Reduce Color Depth –Colors>>decrease color depth –Make image file smaller Show images Progressively –Save as –options

Playing with photos Compressing Images –Image>>blur>>Gaussian blur –Save as jpeg –Select options –Set compression as desired

Creating animated Gifs Create frames –Slight change between each image –Save as series of images Image1.gif, image2.gif etc –File>>run animation shop –File>>animation wizard –Add images in order

Gee Whiz Tip of the Day Creating “Tile”able images for backgrounds –Images must blend on top edge to bottom edge –Images must blend left edge to right Gradient effects –Use long narrow stripes Textures –Create squares (100x100) –Cut into four (50X50) –Swap corners –Blend middle