Jim Frankenfield - Papers [Technical] [Administrative] [Avalanche] [Web]

[Papers]

Web Graphics

A Merging of Art and Technology

Jim Frankenfield
snowman@csac.org

Preface: This article was originally written in July 1996 for "Connections", which was a publication of PEAK. Some things have changed since then, some have not. Keep this in mind.

The internet, along with easy access to graphic design tools such as Adobe PhotoShop, has brought about a revolution in graphic design. It is no longer the sole domain of professional artists and designers. Many of us who have no formal background in design can now scan our own photos, touch them up, and/or alter them dramatically. We can modify clip-art, and combine it with photography. The resulting blend of art and technology presents some new challenges and considerations which are often not immediately obvious.

This is not a how-to article. I hope to address a few of the issues which arise from creating graphics for, and viewing them on, the world-wide-web. I have discovered much of what I hope to share through developing and managing the Cyberspace Snow and Avalanche Center (http://www.csac.org), my personal pages (http://www.snowman-jim.org/), and through doing computer based graphic design on the computer for printed output in brochures and posters.

The biggest change from traditional design is that not all viewers will see the same thing. There are a number of reasons for this, and there is very little that can be done about it when creating graphics or web pages except to make your graphics, colors, and layout as tolerant of 'tweaking' as possible.

Color, for example, can vary widely between different monitors. Very few people color calibrate their monitors, and those that attempt to do so find it to be as much an art as a science. Lightness also varies widely, due in part to differences in monitor resolution. A photo which looks good on a high resolution monitor will sometimes be much too dark on other monitors. A good strategy is stick with basic colors and avoid subtle shades which look poor when changed even slightly.

This difference in appearance on the viewers end also applies to layouts, since different browsers interpret the html code for web pages somewhat differently. When doing web page design, both graphics and layout, it is important to keep this in mind and allow for some tolerance. What you see is not necessarily what your net audience will all see!

With photographs the nature of the original photo is an important factor. Photos which are balanced in color content scan better and can often be used with little or no touch-up. Photos with not enough color balance, such as a snowshoer on an overcast day, are much harder to work with. After scanning, a great deal of time may be required trying to improve the look. (While advances in computers allow us all to become graphic artists there are still some challenges where professional assistance is worthwhile.)

One technical limitation on your artistic efforts is resolution, or how many dots per inch your graphic can be made up of. Standard monitor resolution is 72 dpi, which is what a web version of any graphic should be saved as. For comparison, quality printed output is 300 - 600 dpi. Graphics which have too much resolution will be displayed at a larger size on the net to compensate. Keep in mind that adding resolution is very difficult. If you have a graphic which you may want to use in some other form the best approach is to create it at a high resolution and a size suitable for your non-computer use (banners, T-shirts, printed material ...) and then to save a low resolution copy for use on the web. Don't lose the original higher resolution copy - remember it's hard to add resolution later!

File size is another technical factor. This can easily get large for graphics, particularly photographs. The file size of your graphics is a major factor in how long it takes your page to get from the web server to the computer which it is viewed on. If this takes too long people will not wait for your web page or graphic to load. In PhotoShop it is possible to specify a smaller number of colors when converting it to 'indexed color' (which you need to do to save it in a .gif format). Experimenting with a smaller number of colors can lead to an adequate tradeoff in graphic quality vs. file size. There are numerous other ways to approach the file size problem - this could be a future article of its own!

These are just a few of the challenges posed by the same technology which allows us all to communicate graphically. By choosing the best possible starting material, considering the technical limitations, spending lots of time experimenting in your graphics software, and staying on top of advances on the web you can incorporate quality graphics into your web work.

Jim Frankenfield.

[Papers]