Intermediate Web Publishing: Images

<IMG SRC="http://www.uoregon.edu/images/Frohnmayer56x74.gif"
ALT="Photo of the UO Pres" ALIGN="right"
WIDTH=28 HEIGHT=37 BORDER=5 HSPACE=10
VSPACE=10> The University of Oregon President

	Paint Shop Pro	Graphic Converter	Fireworks
Change contrast/brightness	Colors > Adjust > Brightness/Contrast	Picture > Brightness/Contrast	Modify > Background Image or Modify > Image Object, Xtras > PhotoOptics > CSI Levels
Crop	Select area then Image > Crop	Select area, Edit > Trim Selection	Use crop tool, draw box, double-click in box
Resize	Image > Resize	Picture > Size > Scale	Use scale tool or scale on export
Make background transparent	Get the index number for the color you want transparent by checking in the palette. Choose File > Save As. Choose Gif, version 89a. Click the Options button. Set transparency value to your index number (eg. 0 for black).	Use the wand tool in the lower right corner of the toolbar to click the color you want to be transparent.	In Export Preview, use eyedropper to choose color you want to be transparent.

Format

• Use gif for line drawings or pictures with large areas of flat color and jpg for pictures with lots of gradations of color.
• Interlace large images.
• Turn off anti-aliasing to eliminate dots around your outline.

Color palette

• Use colors from the Netscape 216 for a more consistent appearance across platforms.

Bandwidth

• Avoid using images you don’t need.
• Try to keep the Web page and all graphics files less than 45KB.
• Keep images small and have them link to larger versions of the image:
  <A HREF=“bigpic.jpg”><IMG SRC=“smpic.jpg”></A>
  
• Use funky versions of other graphical elements such as hr:
  <HR WIDTH=25 SIZE=25 ALIGN=left NOSHADE>
  
• Screen resolutions range between 72-85 dpi. If you save your image at 300 dpi, it will appear 3+ times too big on your screen and your file will be much larger than you need. Save your files for Web publishing at 72 dpi. (If you are creating print publications too, save different versions of your images at 300-600 dpi depending on your printer.)
  
• Experiment with the bit depth of your images and use the lowest one you can that still has acceptable quality.
  

Copyright

• Use your own original creations or images clearly marked "in the public domain" or ask for permission first from the author to be safe from being sued.

• <http://darkwing.uoregon.edu/~jqj/inter-pub/images/>. web pages for this workshop
• <http://darkwing.uoregon.edu/~lincicum/resource.html>. Resources for New Web Authors [A selective list of WWW resources for new Web authors , especially participants in UO Library Introduction to Web Publishing and Intermediate Web Publishing workshops]
• Web Development Resources <http://cc.uoregon.edu/webdev.html>. Useful references for more advanced web authors.
• "Web Builders and Multimedia Resources" from the University of Iowa Library. <http://www3.arcade.uiowa.edu/proj/webbuilder/>
• <http://www.webreference.com/dev/graphics/>. Optimizing Web Graphics [nice discussion of web-specific graphics manipulation techniques]. Includes GIF Wizard, an automatic optimizer.
• <http://www.wpdfd.com/editorial/wpd0299.htm#comment>. "Small GIF and JPEG files - by design, not just optimisation ", from Web Page Design for Designers <http://www.wpdfd.com/wpdhome.htm>.
• <http://www.lynda.com/dwg/links.html>. Lynda Weinman, author of many Web graphics books. Good links to web info.
• <http://libweb.uoregon.edu/images/>, UO image library collection

Among the recent books that cover Web images and HTML graphic design are:

• Creating great web graphics, 2nd Ed, by Laurie McCanna (MIS Press, 1997, ISBN 1558285504) [graphics, especially for PC users]
• Designing for the web: Getting started in a new medium, by Jennifer Niederst with Edie Freedman (O'Reilly, 1996, ISBN: 1-56592-165-8) [general and graphic design]
• Designing large-scale web sites : A visual design methodology, by Darrell Sano (Wiley, 1996, ISBN 1562057154) [intermediate to advanced]
• Coloring Web Graphics, by Lynda Weinman, Bruce Heavin (New Riders, 1996, ISBN: 1562056697)
• Creating Killer Web Sites: Second Edition, by David Siegel. (Hayden Books, 1997, ISBN: 1568304331 ). [advanced tricks, often idiosyncratic]
• Designing web graphics: 2, by Lynda Weinman. (New Riders, 1997, ISBN 1562055321). [practical graphics, both Mac and PC]
• Deconstructing Web graphics, by Lynda Weinman. (New Riders, 1996, ISBN 1562056417). [graphic design and evaluation]

Exercise 1

Visit the web page <http://darkwing.uoregon.edu/~jqj/inter-pub/images/images-ex1.html>:

1. Using Netscape, copy the image on this page to your PC by using the Netscape "Save this Image as..." command (click and hold the [right] mouse button on the image you want).
2. Using Claris Home Page, create a new page, type some text, save it, and insert the image you just saved.
3. Make changes to the tag attributes for the image and save the result:
   Add an ALT label. Change the alignment. Add a border. Change the size or spacing.
4. View the file in Netscape.

Exercise 2

1. Examine a clipart collection. For example, <http://libweb.uoregon.edu/images/>, <http://www.yahoo.com/Computers_and_Internet/Graphics/Clip_Art/>, <http://disney.ctr.columbia.edu/WebSEEk/>, or <http://www.ecn.bgu.edu/users/gas52r0/Jay/home.html>
2. Select an image and copy it to your PC.
3. Open the image using PaintShop Pro. (PC) or GraphicConverter (Mac).
4. Edit the image as appropriate. Scale it to create a thumbnail. Make the background transparent.
5. Save your image as a GIF file. Call your base image TEST.GIF and the thumbnail THUMB.GIF.
6. Using Claris Home Page, insert the thumbnail on the page your edited in Exercise 1, and make it a link to the full image.
7. Use Netscape 's Open File command to view your image.