ADVANCED IMAGE TECHNIQUES

In General

• Large images can overwhelm a web page!
• TO CHECK DOWNLOAD TIMES: From the EDIT menu in Claris HomePage choose Document Statistics.
• Keep image sizes under 40K, no wider than 470 pixels, viewable on a 13 inch screen
• Save images with simple colors as GIFs.
• Save images with lots of colors (like photographs) as JPGs.
• Download and use shareware for making screenshots (or use built in Mac shortcuts.)

Image Formats

• JPEG (Joint Photographic Experrts Group) retains 24 bit color (millions of colors).
  • Can compress JPEG up to 4:1 (lossy compression, some detail may be lost), compress in PhotoShop.
• GIF (Graphics Interchange Format) developed by Compuserve.
  • Limited to 8 bit color palatte (256 colors)
  • Best for simple graphics
  • 2 variations of GIF: transparent and animated

Cross-Platform Considerations

• Macintosh and Windows computers share 216 of the 256 possible colors in an "8-bit color palette"
• Dithering=the computer combines colored pixels that look similar as a group to approximate a color not in the palette: often is a poor estimate
• Use the "Netscape 216 palette" when choosing colors for your webpages (http://www.homepage.co.uk/webcolour/)
• NonDithering colors: (hex code for HTML)
  • Black: 000000

  • Yellow: FFFF99 Light Blue: CCFFFF Light Purple: CC99FF Green: 66FF66 Dark Purple: 6633FF Light Green: 66CC99 White: FFFFFF

• Generally, colors that have the same digits/characters in each color pair are safe (first two are red, second two are green, third two are blue)
• Use the Background Colors webpage to choose colors, if you want to use colors not included in the Claris HomePage color palette (http://www.infi.net/wwwimages/colorindex.html).

Image tag options

• Review "Image Options" from the Basic Webpage Writing class.

Creating and using background images

• This webpage has a subdued (ghosted) background image.
• Use the "cookie cutter command" in HyperStudio (option-command-C) to make background images for your webpages.
• The background image for this webpage was made using HyperStudio and Claris HomePage.
• If available, use Adobe Photoshop or PaintShop Pro and change the opacity of your layer to make the image look "ghosted."

Imagemaps: A webpage graphic with defined "hotspots" which, when clicked on, serve as links to other webpages.

1. Using GraphicConverter (Mac), PaintShop Pro (Win), PhotoShop (Mac/Win), or another graphics program create an image which will have "hotspots" and serve as an image map for your website. You can export an image created with Inspiration to create an attractive sitemap (Example).
2. Key: make it clear where people can click to make something happen!
3. Insert the image into your webpage that you want to make into an imagemap.

Creating an Imagemap (use this sample)
Claris Homepage	Netscape Composer	MS Frontpage 2000
Double click on it. In the pop-up window, click on the "Behavior" tab at the top: Click on the "Image map" radio button and click on "Edit." Select the rectangular or circular link tool: Click and drag on your image map to draw rectangles or circles to define "hotspots." Click on the link editor to create relative or absolute links. Close the window. You're done! Choose to preview the webpage in your browser and test the hotspot links.		From the PICTURES TOOLBAR (probably at the bottom of the screen), click on either the rectangular or circular hotspot tool: . The polygonal hotspot tool can be used to create irregularly shaped closed figures to be used as hotspots: Use the pencil (your cursur) to click and drag, creating a box or circle over the part of the image you want to make a linkable hotspot: After defining the hotspot, use the CREATE HYPERLINK dialog window to specify either an absolute link or relative link to a webpage you have already created and saved. Click OK to save the link. You're done! Choose to preview the webpage in your browser and test the hotspot links.

Animated Graphics

• 3 present methods of online animation:
  1. Shockwave (MacroMedia Director)
  2. Java by Sun Microsystems
  3. Animated GIFs (like a flip book) - most browsers can display them
• Shareware software is excellent for creating Animated GIFs
  • Macintosh: GIFBuilder (freeware): Download from www.download.com.
  • Windows: GIF Construction Kit
• To create an animated GIF with either of these programs:
  1. Create separate images of the same size that you want in the animation (For example, using GraphicConverter).
  2. In the animation software, import the images and specify image preferences (like the delay between frames). The steps for GifBuilder are:
     1. From the FILE menu, choose ADD FRAME (or press Command-K)
     2. Locate the image you want to use as the first frame of your animation, and click OPEN.
     3. Repeat these steps for all the images/frames you want to include.
     4. From the EDIT menu, choose SELECT ALL.
     5. From the OPTIONS menu, choose INTERFRAME DELAY. Either choose "AS FAST AS POSSIBLE" or specify a delay as a fraction of a second.
     6. From the OPTIONS menu, choose LOOP and click FOREVER (or a specified number of times). Click OK.
     7. From the ANIMATION menu, choose START to preview your animation.
     8. From the FILE menu, choose SAVE.
     9. Name your file (make sure the extention remains ".gif") and save it in your website folder.
  3. Insert the saved image in your webpage like any other image.

Considerations when designing for TV (from MacWorld Dec 96 p. 173)

• avoid 1 pixel lines, since they seem to flicker as the TV scans odd and even lines alternatively
• NTSC colors are those viewable on TV
• Photoshop NTSC colors filter will automatically substitute non-NTSC colors
• avoid text fonts with thin stems and serifs
• "tight text" is bad
• good fonts are Helvetica Medium or bold, and Century Schoolbook
• Smallest font size to use: 14 point
• heavily saturated colors (red/yellow) are prone to "blooming": (spreading to adjacent lines, due to RGB limits)

Other Cool Tricks

• When entering an alternate text label for an image, use the text Loading..... This works especially well for very graphics intensive pages which take longer to load. (Example)
• Use a freeware or shareware program to create photo thumbnails (small versions of each photo) linked to larger versions. A page of thumbnails is faster to load and allows visitors to more quickly browse for pictures they are interested in.
  • Photopage: freeware - Creates both thumbnails and corresponding HTML pages with the linked pictures in a table layout. (Example)
  • GalleryMaker: $30 shareware - Creates both thumbnails and corresponding HTML pages with the linked pictures in a table layout.
• Insert <lowsrc=file> in the image reference tag to display a B&W version while a color JPEG image loads
• In Frontpage, right click the toolbar at the top of the screen to turn toolbars on or off:

Targets/Anchors | Tables | Images | Multimedia | Javascript Rollover Images | Frames | PDFs | HyperStudio: | Guestbook | Uploading http://www.wtvi.com/html

   -

Home - Basic Course - Intermediate Course - Tools for the TEKS

---

Course and Website by Wesley A. Fryer of Lubbock, Texas.
Site sponsored by WesTech Vision Inc.