Docstoc

graphics - PowerPoint

Document Sample
graphics - PowerPoint Powered By Docstoc
					INFSCI 1052

GRAPHICS/IMAGES
                            INFSCI 1052

 Source: Learning Web Design by Jennifer Niederst
  Robbins
 Creating Images:
    Scanning
      Be aware of copyright holders even if you change the image
      Easier to maintain quality if resizing to a smaller size
      Black and white are scanned using 8 bit gray scale
        Using black and white allows no adjustments to midtone colors
    Digital Cameras
        Web is relatively low resolution environment so high end equipment
         is not necessary
    Electronic drawing
      Adobe Illustrator
      Adobe Photoshop
                              INFSCI 1052

 Stock Photography
   Pictures

   Illustrations

   Buttons

   Logos

   Rights-Managed
        Need a license to use
          May be able to get exclusive use for an image

          Can be pricey

    Royalty free
        Pay a one time fee
                          INFSCI 1052

 Web Sites with Images
   IStockPhoto
      Royalty free
      Submitted by users
      Inexpensive – as low as a dollar
    Getty Images
      Largest collection of images
        Professional
        Royalty free and Licensed
        Inexpensive to very expensive
      Jupiter Images
        Rights managed and royalty free
                          INFSCI 1052

 JuicyStock.com
   Pics of people and places around the world
   Inexpensive

 Veer
   Rights managed and royalty free
     Edgy
     Illustrations, fonts and stock video

 Clip Art
   Royalty free illustrations, animations and buttons
   Usually get clip art with graphics packages like PowerPoint
   Can be amateurish – sometimes pay membership fee –
    sometimes free
                          INFSCI 1052

 Sites for Clip Art
   Clipart.com
        Membership fee – good quality
    Original Free Clip Art
        Free
    #1 Free Clip Art
        Free
                         INFSCI 1052

 Graphics Formats
   There are hundreds of formats
   Three choices for the web
     GIF
       Best for images with flat colors and hard edges
       Good for animation and transparency
     JPEG
       Best for photographs
       Best for images with color blends
     PNG
       Good substitute for GIF
       Good for transparency
 GIF
    Graphics Interchange Format
    Small size and cross platform compatible
    Uses compression scheme that is good for:
      Logos
      Lineart
      Graphics containing text, icons
    Doesn’t work as well when saving photgraphs or textured images
    8 bit – 256 colors
      Uses indexed color – color table
      Can edit color table in Photoshop
    Many images start off as RGB and then are transferred to GIF and
     256 color scheme so some color information gets lost
                                INFSCI 1052

 GIF
   Compression
         Lossless
         No image information is lost (except color)
         Uses Lempel – Ziv – Welch compression scheme LZW
            Looks for repetition in image – that’s why images with large areas of a
             single color do well
         All parts of a GIF image can become transparent so the background shows
          through
     Interlacing
         Multiple passes to show the image – gives hint of the image on first pass
     Animation
         Multiple frames of an image and settings for speed etc all stored in one GIF
          file
            Gifmation – www.boxtopsoft.com
     Tutorial for creating GIF animation
         http://www.learningwebdesign.com/pdf/animated_gifs.pdf
                             INFSCI 1052

 JPEG
    Joint Photographic Experts Group – a standards body that created it
    Good for gradients and blended colors – not so good for large flat
     color areas and sharp edges
    Don’t use a limited color palette like GIFS
        24bit images that can represent millions of colors
    Compression
      Lossy – some of the image information is discarded
      Can choose the amount of compression – file size versus image quality
      Process is not reversible – don’t continuously resave a JPEG image
      Photoshop allows you to make copies of the original
    Display time
      JPEGS display in multiple passes increasing the resolution with each
       pass – similar to GIF interlacing – can specify the number of passes
      Takes longer – not much – to decompress a JPEG than a GIF
                           INFSCI 1052

 PNG
    Portable Network Graphic
    Designed to replace GIF (Web) and TIFF ( storage of images)
    8 bit indexed or 24 bit RGB or 16 bit grayscale or 48 bit color
    Lossless
    On/off transparency or levels of transparency
    Progressive display
    Embedded text
    Transparency
      Biggest feature
      Can contain multiple levels of transparency – alpha channel
    Use PINGS
      May have smaller file size than GIF depending upon graphics software
      Larger file size than JPEG though
                        INFSCI 1052

 Questions to ask for choice of format
 Large Flat color areas?
    GIF or 8bit PNG
 Graduated color?
    JPEG
 Flat and graduated color?
    GIF or 8 bit PNG
 Transparency?
    GIF or PNG
 Multiple levels of transparency
    PNG
 Animation
    GIF
                                 INFSCI 1052

 Size and Resolution
   Bitmapped (Raster)
       All GIF JPEG and PNG
       Made up of many pixels
       Different from vector graphics
         Smooth lines and filled areas
         Based on mathematical formulas
       Resolution
         Pixels per inch – for the web there is no consistency between monitors
         On paper 300 to 600
         Onscreen, typically 72
         Higher resolution monitors make images look smaller
            • The pixels are smaller
           Digital camera can take a picture 1600 px by 1200 px which is way too big
            for the web
                                    INFSCI 1052

 Resize images
   Use graphics image package like Photoshop. Also, many online services for free
    or image manipulation software for free
 Optimize images for download
   Dial up – one second per kilobyte
   Many corporations have limits on file sizes
         Limit dimensions of the image
           Crop out unneeded space or color swatches
           Take advantage of caching
              • If image is used repeatedly
             Choose right compression for the type of image
             Use professional package such as Adobe Photoshop
              • Reduce the number of colors with graphics software
              • GIFS can contain 256 but do you need all the colors
              • When you save in graphics package there are choices for bit depth and number of colors.
                Often 5 bit color looks just as good on the web
             Limit the amount of dithering ( colors from palettes are mixed to create a new
              color) in GIFS
              • Need dithering in color blending or gradients
                       INFSCI 1052

 GIF Optimization
   Design for flat colors
   Save GIF with fewest colors needed
   Adjust dithering
   Apply a lossy filter

 JPEG
   Use high compression levels – different quality levels
   Use weighted optimization – some areas of an image canbe
    compressed more than others
   Slightly blur the image
   Avoid flat colors and sharp lines
                         INFSCI 1052

 PNG
   Avoid PNG-24

   With PNG-8
     Reduce number of colors
     Reduce dithering
     Design with flat colors
     Reduce interlacing
     Photoshop – Optimize to file size

				
DOCUMENT INFO