| Randy M. Brooks, Ph.D. Millikin University My ACI Faculty Development Workshops |
ACI Faculty Development Workshop
|
In this workshop, we explore the basics of preparing graphics for the web. We will learn how to acquire graphics from the web and how to create new graphics by scanning, or by using graphics programs.
This workshop includes a demonstration of manipulating graphics in Photoshop, in order to adjust the appearance of the graphic, resize it to the final web page size, and to save it in a format which is web compatible. We will learn about the two main formats for graphics on the web: JPEG for photographs and GIF for high contrast graphics. We will also learn how to minimize the size of graphic files, so that your graphics will load quickly and appear as high quality as possible on most computer screens.
The workshop includes a demonstration of how the GIF color palettes work and how to replace colors in the palette or to create transparent sections of a graphic. It will also include a demonstration of how animated GIFs are created, and how to create an imagemap or "webmap" graphic in Pagemill.
This workshop also includes two examples of using Javascript for simple graphic switching animation.
Getting graphics from the web.
Graphics from clip art collections.
Scanning graphics.
Creating graphics in graphics programs.
Adjusting appearance of the graphic.
Filters.
Modes of graphics.
Resizing graphics (physical size and resolution size).
Dithering text graphics (antialiasing).
JPEG format is better for maintaining low contrast shades such as in photographs, because the format includes all original colors then reduces memory through compression methods.
GIF format is better for high contrast graphics with only a few colors, because it uses the color palette built into the computer system. Since most older Wintel machines have poor quality color monitor support, a "web safe" palette usually contains no more than the 216 colors of these older systems.
|
|
|
The goal is to minimize download time with the maximum graphic quality. Small file sizes will load quicker than large files. In graphics, the goal is for any web graphic to be no more than about 30k maximum. Anything larger than that will take too long to load, especially on 28.8 baud modems.
Changing the physical size of the graphic does have some impact on file size, so a majority of web graphics are fairly small--two to four inches square. If the graphic must be larger than that, it may need to be on its own page, so that is the only element the user is waiting for.
The real file size savings come by setting the resolution of the graphic to 72dpi which is the maximum that most computer screens display on the web. However, you do not want to change the resolution to 72dpi until you have completed all other manipulations of the graphic, because once it is reduced to 72dpi, you will lose the ability to enlarge or continue significant alterations without drastically losing quality.
Consider these examples of file size differences.
The final memory savings is derived through the saving process. In Photoshop when you save a graphic in the JPEG format, you will be given the option to select the amount of compression (with corresponding quality loss). In general if the graphic is small, you can use the middle setting. If the graphic is larger, you may have to choose a low setting such as 3 in order to get the file size small enough to load quickly.
In order to save a graphic as a JPEG in Photoshop, you must be working in the RGB mode. In order to save a graphic as a GIF, you must be working in the INDEXED COLOR mode. After resizing and setting the resolution to 72dpi, go the color table and remove any colors that are not needed in the graphic. The fewer colors used, the less memory required to download a GIF. You may also want to select certain colors for transparency when exporting the graphic using the EXPORT GIF89a format selection in Photoshop.
The color palette is a collection of 256 colors that may be included in the GIF file. As stated before, "web safe" color palettes include only 216 colors since that was the limitation of most Wintel computers until a few years ago. When in the INDEXED COLOR mode, you can examine the COLOR TABLE which shows which colors are currently being used by the graphic. By selecting the "WEB PALETTE" only 216 colors will be used.
Consider these sample graphics and their color tables.
Web editors may include the capability to make one or two colors transparent, so that background graphics or colors will show through on the screen. This is desirable so that the graphic borders or graphic backgrounds do not show (which makes the web page appear to be well-designed with a smooth integration of text and graphics). For example, note how the two graphics below appear on this page. The one on the left has an obvious graphic border, whereas the one on the right has been modified as a transparent graphic.
In Pagemill, to make one color transparent (this only works with GIF graphics), click on the graphic to select it. Then choose FILE OPEN SELECTION from the menubar. The transparency tool is an icon of a magic wand. Select it, then click on the color you want to make transparent. It will disappear, then when you save the graphic it will replace the existing non-transparent GIF with your new transparent GIF.
In Photoshop you can choose multiple colors as transparent, after choosing the EXPORT GIF89 format under the FILE command in the menubar. You will also have the option of choosing to "interlace" the GIF graphic which means that it will load in small parts before the complete graphic loads on the screen. This is desirable for only a few graphics on a web site, especially ones that are large and may take longer to load.
Animated GIFs are simple animations which quickly cycle several versions of the same graphic (with slight alterations to simulate the animation process). These are prepared in special animation graphics software such as GIFBUILDER or GIMP, then compressed and save as GIF files.
Consider this illustration of the versions of GIFs that are combined in the above animated GIF.
Animated GIFs may serve an important function beyond entertainment value. Consider this location helper directing people to the church on a map.
Several collections of animated GIFS are available on the web, or you can create your own.
Image maps are graphics with hyperlinks designated onto various parts of the graphic. Here is an example of a webmap built within a stained glass window to represent various parts of a church web site.
Here is another example of a web map, with the coordinates for the map embedding within the HTML script.
In Pagemill, you create an image map by following these steps:
- Click on the graphic that you want to turn into an image map.
- Open the SHOW INSPECTOR under the WINDOW menu, and choose "Map" as the BEHAVIOR of the graphic.
- Under the FILE menu select "OPEN SELECTION" to get to the image map tools (which look like a circle tool, a rectangle tool and a free form selection tool).
- Choose the tool you want to use, then drag it across the part of the graphic where you want to add a clickable hot link.
- Then type the hyperlink address location (an anchor or URL) into the "Link To:" data entry box.
- Repeat this process for each hot link you wish to add.
- Save the graphic, then close the OPEN SELECTION box.
- Then save the web page (an image map file will be added to the folder in which the page resides).
You can make a client-side map by double clicking on a graphic, then selecting hotspots.
Web designers often use some Javascript in the HTML code to switch graphics based on user interaction. Here are two examples of a Javascript code used to highlight a graphic navigation button, and the same Javascript code used for slight animation of the graphic when the user points at it.
I also have a graphic animation script within a table, to show how you can activate the Javascript anywhere within the same HTML page.
I have kept the page as simple as possible so that you can focus on the Javascript and HTML code. Please use the "BACK" browser button to return to this page.
