1. Images for the Web planning, acquiring, processing

2. My Laws of Image Usage Images ALWAYS convey information (think about what messages your image conveys) If you can use a picture instead of words, do. (but add the words as alt-text). Make sure you have the right to use the image(s) Don’t make the image files larger than necessary (thumbnail/printing)

3. Planning Audience? What information do I want to convey? What information can be conveyed visually? What style (also informative) do I want to use. (Law 5: Be consistent)

4. Getting Images 1 Take pictures (with a camera or digital camera) Get from sites that explicitly give the right to use –http://office.microsoft.com/clipart (actually cool pics)http://office.microsoft.com/clipart Logomakers Ask permission to use images you like Make a collage of free images Buy a commercial image or set of images –Eyewire, Artville

5. Getting Images 2 Get post-copyright images (100 yr guideline) Capture image (permission need still applies) – PSP, SnagIt, Print Screen Explore your organization’s intellectual property Create an image with a drawing program Round Robin - How do you get images?

6. Processing Images

7. Image Qualities Transparency Compression Scalability Color Depth

8. File Formats Vector - paths - commercial design work.wmf/.ai (illustrator) /.cd (corel) - not really Web Raster - pixels - Web images.jpg (most colors in compression, but not transparent).gif (allows transparency, but fewer colors).tif - used often for no compression - some browsers.bmp (large file size, microsoft paint).png (more colors than gif, w/ transparency option)

9. File Sizes Why Care? –Loading speed –Space Limitations Desirable File Sizes –50-300k for display images ( arbitrary but possible ) –more for printing (but consider an extra step) Decreasing size –smaller image or different compression

10. Image sizes/resolutions 640x480 base size = 307,200 pixels ppi = display / dpi = printer pixels/ppi=inches 72 ppi for web Declaring image size in HTML Scaling using image programs/Scaling using Word

11. How to work with images...

12. Special Images Animations - many different programs Panoramas (Photovista) - steerable Image maps - FrontPage - What do you use? Look for an image, maybe of a panorama, maybe with the top and bottom blacked out to show that it could go all the way around my walls (sample image plan)

13. Programs Paint (.bmp only - severely limited) Paint Shop Pro - $84, demo available, nice capture Whatever came with your scanner or camera Microsoft Word - Great for scaling, clipart Adobe Photoshop - $127 (Image Lab?) Gimp - Free but very complicated Others?