Images

The image page section is to continue the process of preparing images for the web. It is necessary to begin thinking about the design and integration of images into the web and web page itself.

Requirements:

1. Create a page that links to the image pages (B, C, D and E).

   The page should have links and descriptions for the pages that are being linked to.



2. Background Pages - Examine possibilities in:
   1. Pattern as the page's background with text (750 x 550 for opening a new browser window in the "bg-pages.html" page)
   2. Texture as the page's background with text (750 x 550 for for opening a new browser window in the "bg-pages.html" page)
   3. Single image as the page's background (750X550 for opening a new browser window in the "bg-pages.html" page)
      • Option-1: Full size abstract background image (800 x 600 or bigger)
      • Option-2: Full size objective background image (800 x 600 or bigger)
        1. Pattern Tile (A vector style graphic/gif to repeat the value)
        2. Texture Tile (A vector style graphic/gif or raster style graphic/jpg to repeat the value)
        3. Image (800 X 600 or bigger) to avoid the pixel repeating, unless a small dimension image has a "seamless edge")


3. GIF Page - Working from a single graphic (suited for the gif format) show four instances of the graphic. All four graphics should be the same dimension size. Find the large size (dimension) and best quality at possible smallest file KB size.
   1. Show the gif image at the best quality for the web: Perceptive or Adaptive/ No Dither / Color 256
   2. Show the gif image at good modifications: Adaptive or Grayscale / Diffusion / Color 32 / Dither 60%.
   3. Show the gif image at medium quality: Restrictive (Web) / Pattern / Color 64
   4. Show the gif image at an acceptable quality with a smallest size: Custom / Color auto / No Dither.
      • Label all instances.


4. JPEG Page - works from "save for web" to find out best quality on a smallest size.
   1. JPG_ low quality_10%
   2. JPG_medium quality_30%
   3. JPG_high quality_75%
   4. JPG_maximum quality_100%
   5. Find the best quality not exceeding 200k.
      • Optimize and insert the scan into the bottom row
      • Optimize and rollover scan image with digital photo in the bottom row.
      • Label all instances.


5. SVG Page
   1. Create a small map (320X240) in Illustrator
   2. Save the vector based map as a svg (Scalable Vector Graphics) format in Illustrator
   3. Create a new "svg.html" page, and use <embed> tage to embed the svg element:
      <embed src="map.svg"></embed>
   4. Click the SVG page text link for reference.
6. Rollover Page - Create four rollovers (maximum size 200 x 200) and display in this page.
   1. From Photoshop_jpg image rollover
   2. From Illustrator_icon, symbol, or pattern based gif graphics rollover.
   3. Graphic text rollover between grayscale and color.
   4. Dreaweaver text rollover (rollover link).
      • Label all instances.