Help! for Images This document contains some hints on creating and using graphics in your web pages. There are many graphics-editing programs supported by the college, including Graphic Converter, PaintShop Pro, Fireworks, and Adobe Photoshop. The CWIS staff has had the best luck with Fireworks for vector images, and Photoshop for photographs, and so the instructions below are for these two programs. Once you are familiar with these two programs, however, you can easily adapt to a variety of image-editing software.
Most photographs used on the CWIS were scanned from photographs or slides using equipment in Knapp. The slide scanner can scan either slides or negatives, and the flatbed scanners can scan anything that fits on the glass, including drawings, photographs, your hand, etc. The software that comes with the scanners allow you to manipulate the image before it scans, but it is usually more efficient to scan at default settings and play with the image later. There are detailed instructions at the Knapp workstations, but generally you open Photoshop and import the image. For the flatbed select "Twain Acquire" and on the slide scanner select "SprintScan 35". If you are expert enough to want high-resolution scans or more realistic tone in your black-and-white images, there are several good books on importing artwork into the digital world using scanners. If you have a specific questions, please ask us. For more information about scanning, see the IS-maintained directions for scanning. Contrary to popular belief, doctoring photographs is not a cheap way to erase your ex-husband out of your family photos. The process of importing a photograph into your computer can alter the image substantially, and you may need to correct for those alterations. There are usually three things you want to do to a scanned image in Photoshop: sharpen, alter the contrast, and alter the color balance. Sharpening: Under the Filter menu, choose Sharpen, and Unsharp Mask. It sounds counterintuitive, but Unsharp Mask is the best way to sharpen an image. You'll want to play around with the amount (around 25-100) and the radius (.5-2.0). Contrast/Brightness: Under the Image menu, choose Adjust and Brightness/Contrast. Most scanned images could use some more contrast, and you can adjust the brightness up or down depending on the quality of the original photo. For advanced users, play with Levels or Curves under the same Image menu. Color: Under the Image menu, choose Adjust and Variations. This allows you to correct for a color cast or change the tint of an image. Most photographic prints scan with too much yellow, and slides, depending on the type of slide, will either scan too blue or too yellow. A note to print artists: you would never want to do any of this to the photograph that's going to be on the cover of your book, since all of these adjustments decrease the original quality of the image. However, since we are working at low resolutions for the web, we aren't going to worry about it. For more information about Photoshop, follow the links to Photoshop documentation. There are vast libraries of buttons on the Internet, but it would take you hours to wade through them, and you can create your own in a few minutes. Macromedia Fireworks is a vector-mode graphics editing program. Basically this means that you can change elements in your graphics without much aggravation. The steps below detail how to create a simple navigational button using Fireworks. Create a new file (File > New) Draw
a box using the shape tool. Use the brushes and fills options menu to make the brush none and the fill solid. Choose the effect tab and give the box an inner bevel. Deselect
the box, choose a different color, and write text in your button
using the text tool. An
example of a button: For more information about Fireworks, see the IS documentation pages. The process of making your page load faster begins with design. Do the images on your pages convey enough information to justify the longer load time? The best way to decrease load time is to decrease the number of images on the page. GIF and JPEG, two web-safe file formats, use different compression schemes. The best way to decrease file size on a .gif is to reduce the amount of colors used in the graphic. When you create a file in Fireworks, use the export command to save the file as a .gif. The following is an image of the Fireworks export preview window.
The format should be GIF, and the optimized box checked. Checking the optimization box will throw out colors from your palette that aren't used in your graphic, thereby decreasing file size. Your palette is the number of colors used in the image. The Web 216 palette uses only the 216 colors which look the same on both Macs and PCs. The WebSnap Adaptive Palette will snap the colors in the graphic to the 216 web-safe colors. An Exact palette will use all the colors in your graphic, exactly as they are, without checking if they are web-safe. Dithering is a method of creating a color that the computer does not support by placing different colored pixels next to each other. A red pixel next to a yellow pixel will create an orange color in the image. Dithering is usually only necessary if you are concerned with your non-web-safe colors showing up exactly as you selected them on different kinds of computers. You may make part of your image transparent, allowing background color or images to show through it. If you have used transparency in Fireworks, the transparency pull-down menu may already be set to Alpha Channel or Index. If you would like to select a color to be the transparent color, then choose the left eyedropper tool (the one without a plus or minus) and click on an area in the graphic. The color you have selected will turn into a checkerbox pattern in the view window. The last box is for interlacing, which is similar to the progressive option for .jpg files. An interlaced file loads quickly at a low resolution and then becomes progressively clearer as the page continues to load. It makes sense to interlace large graphics if you believe the user needs to get an idea of the contents of the graphic quickly. Users are usually more patient if they know for what they are waiting. However, interlacing increases the file size slightly, so use it with discretion. For more information about Fireworks, see the IS documentation pages. If you do your photographic editing in Adobe Photoshop, you'll usually want to save your graphics in a .jpg format. In order to save a Photoshop 5.0 file as a .jpg, you must compress any layers and be in RGB color mode. Select Save As from the file menu, and choose JPEG from the pulldown menu. The compression options window for Photoshop 5.0 isn't as friendly as the one Fireworks, since you can't see the size of the file or the quality for different options. If you are concerned with the quality of your image, save at different levels (from 3 to 6) and see how the different images look on the web. An optimized image uses less colors and a progressive image loads at a low resolution and gets progressively more clear as the page loads. To make a .gif in Photoshop 5.0, select Export from the File menu, and then select GIF89a export. The export dialog box shows your transparency color (if there is transparency in your image), your color palette, and has a checkbox for interlacing. Photoshop 6.0 (on public cluster Macs) allows you to preview your image at different compressions, similar to the Fireworks export preview screen. Go to File > Save for Web. Now that I have this image, what do I do with it? The
simple answer is insert it into your document with this code: You may use graphics as navigational tools, as illustrations, as information, or as design elements. Look at some of your favorite pages and see how they use graphics. Graphic-based
design: The Center
for Work and Service
|
Scanning
Back
to the Wellesley College CWIS Handbook home page
Site
Index · Contacts · Directories Course
Catalog |
