1. COS 125 Day 13

2. 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 –http://perleybrook.umfk.maine.edu/samples/imagesplay.htmhttp://perleybrook.umfk.maine.edu/samples/imagesplay.htm –http://perleybrook.umfk.maine.edu/samples/bk.htmhttp://perleybrook.umfk.maine.edu/samples/bk.htm

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

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

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

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

7. Size and Resolution Pixels –Monitors are 70-90 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 800X600 16 bit XGA monitors are 1024X768 24 bit or better

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

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

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

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

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

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

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

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

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

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

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

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