Document Sample
images Powered By Docstoc
					Images for the Web

planning, acquiring, processing
                 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
• 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)
                Getting Images 1
• Take pictures (with a camera or digital camera)
• Get from sites that explicitly give the right to use
   – (actually cool pics)
• Logomakers
• Ask permission to use images you like
• Make a collage of free images
• Buy a commercial image or set of images
   – Eyewire, Artville
             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?
Processing Images
                Image Qualities
• Transparency
• Compression
• Scalability
• Color Depth
                  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
      • .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)
                     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
         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
How to work with images...
                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)
• 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?