Creating Effective Graphics

The graphics used on your page should support and preferably enhance the content or intent of your HTML document. There are a number of things that you should consider when creating graphics, ranging from technical limitations to aesthetic considerations. The technical limitations are swiftly dissolving but nevertheless they are still present and should be considered. The aesthetics involved in the use and design of graphics is not changing rapidly and the principles discussed here will most likely apply to the use of graphics in numerous applications.

Aesthetics and Graphics

There are a number of tricks that artists use when designing graphics for use in multimedia documents. If you want to create effective graphics, it is important to recognize that the computer does not create art for you - good art requires artistic talent and sufficient practice. This does not mean, however, there is no hope of creating good graphics if you are not an artist.

A Critical Eye

An important skill necessary to create effective graphics is a critical eye. If you can look at your work and recognize its shortcomings, then you will be able to improve your work. If you believe that your work is always "just fine", then there is little hope to create better graphics. Most artists are con-stantly searching and working towards improving their art. In order to develop the skill necessary to have a critical eye, it is often important to get feedback from other people. After years of critiquing student work, I find that other people interpret the work differently than I do, and often times people will point out something that I hadnít even noticed in the work. Once brought to my attention, I look at the work differently.

When seeking advice from other people on the effectiveness of your work, you must be willing to accept constructive criticism without being defensive. Think about what the person has to say and then, in the privacy of your own mind, either reject the idea or alter the image to address the problem. If you reject the suggestion, then be able to rationalize why it was not a good sug-gestion. "Because I wanted it that way" is not a good reason. It is important to find people that are willing to be honest and helpful in their criticism. The comment "I like it" does not help you improve your work. Have the person talk about both the strengths and weaknesses of the image in relationship to its effectiveness on the WWW page.

Technical Art Skills

A willingness to improve your skills and having a critical eye will only get you so far and then you will realize that technical art skills are absolutely essential to create effective graphics. There are formulas and tricks that you can learn to develop some of these art skills. Although we see a lot of image manipulation on the Web, in many cases it is still important to be able to draw. The hand/eye coordination and visual translation necessary to convert an ob-ject from 3d (sight) to 2d (the computer) takes training and years of experience. The best advice I can give you is to carry a sketch book and draw whenever you get the chance. After a while it will come naturally and you will be able to express yourself freely. Manipulating images creatively also takes skill. It is important to consider color, compositional design, contrast, value, symbolism, and many other factors when manipulating images. It may seem easy to take two images and composite them together in Photoshop and create a graphic for your WWW page, but be aware that an image created independent of the design considerations of the page may appear to be arbitrary and detract from the content of the page.


Sharing Graphic Qualities (Devising a Formula)

The graphics on your HTML pages work in relationship to the other elements on the page. They should never operate independent of the text or other graphics when combined on a page. Therefore it is important to develop graphics formulas and consistently apply them to the development of your graphics. For example, you can share graphic qualities between your images by giving each small picture a 3 pixel wide border and making each image 1" x 1" in size. When a formula has been established and applied to the graphics on a page, people may not even notice it, but if the graphics are all different sizes and some have borders and some do not, people will notice and it will detract from the effectiveness of your site.


Formulas (Shadows)

When you use shadows in a graphic, it often gives the illusion of depth. When used behind text it helps the text visually jump out of the page and confront the viewer. When used with graphics it also brings the object or image closer to the viewer. Shadows are not useful or necessary in all cases so use themsparingly and creatively. If you use them, it is important to realize that shadows indicate an unseen light source. If your objects have a shadow that is 4 pixels down and 5 pixels to the right of the graphic, then the viewer, whether consciously or unconsciously, will assume that the light source is located in the opposite direction. A common mistake is to create an image with the shadows on one side of the object and then, on the same page or in the same image, create another object with shadows on the opposite side of the object. This mistake creates visual confusion as we attempt to mentally determine where the light source is located.



Formulas (Sizes)

When working with graphics that exist in pairs or in a series, it is very important to agree on a uniform size that all graphics will adhere to. This is easy if the graphics are created with the same proportions, but when you have a series of images where some are horizontal in format and others are vertical, it can be quite challenging to create visual unity. If possible, combine the vertical images together and size them consistently, and then do the same for the horizontal images. If you must combine the horizontal and vertical images together in the same section of the page, then resizing them so that one dimension is the same will help create unity. Since we are typically working with uniform line spacing, resizing the images to the same vertical dimen-sions will help maintain the structure of the row.


Formulas (Alignment)

A page with a number of images that have been sized consistently can still look chaotic and haphazard if the graphics are not aligned creatively. If you have created a grid for your page, then aligning the graphics to the grid will impose a structure upon them. Whether or not you are working with grids, it is important to make conscious decisions as to how the graphics will be arranged. Donít let the technical aspects of working in HTML deter you from aligning your graphics in a manner in which the overall design is enhanced.



Often times artists create graphics that simulate other media. It has become so common to see shadows behind graphics that we rarely stop to think that there is no way that this computer image could cast a shadow in the real world. As artists, it is common to fabricate and borrow the visual qualities of one medium and transpose it upon another. In some cases, the intent is to create the illusion of three dimensionality on a 2D surface. There are a number of tricks that can be used to give the appearance of three dimensionality:

Linear perspective/Foreshortening (converging lines - vanishing point)
Overlapping of shapes (shape on top appears closer)
Atmospheric perspective (less saturated color and detail in the distance)
Size relationship (large objects appear closer)
Modeling/Shading/Gradients (adding virtual 3d form to objects)
Shadows/Directional lighting (emphasize the distance of object to surface)
Placement in the picture plane (higher in picture is further away)
Heavy lines (appear to come forward)
Colors (bright/warm colors come forward -cool/dark colors recede)

There is often a sense of surprise or novelty when we first view certain types of simulation. For instance, it is not uncommon to see wooden planks used as WWW borders and it is rare to find stamped metal type used as a logo on the computer. When you create graphics that simulate other media there is the potential of arousing the curiosity of the viewer and enticing them to explore your site.

Filters and Simulation

Although creative simulation can enhance the visual appeal of your site, it is important to recognize that some forms of simulation have been overused to the point of becoming cliché. For instance, the page curl, when first introduced, was used extensively whether or not it had any meaning or relation-ship to the graphics it was applied to. The same thing happened to the Lon-don font (simulation of medieval illuminated manuscripts). People were using London in futuristic writings, technical specs, and other inappropriate places. When a filter is introduced that easily creates simulated graphics, beware. These types of simulations are more prone to misuse and overuse, which counteracts the original intent of using such a graphic. When using filters, use them sparingly and selectively. Try to avoid the default settings, and use filters in various combinations to create graphics that cannot be cat-egorized as a direct result of a filter. People that are new to the computer will be dazzled by filter use but artists that have worked with graphics will discredit your efforts and stereotype your work as just another use of the "lens flare" filter, etc.

Defying the frame

Another trick used by artists is to break out of the rectilinear frame that most images are bound to. By default, images are saved as rectangular in shape. Although rectangular forms can add a sense of structure to your page, it is often visually stimulating to see an image break out of a typical structure and create a new organic frame. This type of defiance often gives a dynamic feeling to the document. When designing your inline GIFs, you can save the files with one color specified as the transparent mask. This color will not appear when you view the image with your browser. Early versions of certain browsers did not recognize transparent GIFs but it is now uncommon to find a new browser that does not support them.


Animating Graphics

The introduction of the WWW to the Internet was equivalent to the introduc-tion of the television to the radio world. We view images and access visual information from around the world easily, but can you imagine what it would have been like if all the images on television were still images. Television would resemble a slide show or a magazine. Early versions of WWW browsers allowed us access to time-based media but only through an external viewer, therefore segregating the content of the video or animation from the content of the page. Programmers devised clever ways of "pushing" images from the server to simulate animation but bandwidth issues prevented many people from enjoying the fruits of their labor. Today we have animated GIFs and Shockwave files along with server pushes and other tricks to animate graph-ics in the browser window.

Animation can enhance or detract from the creative effectiveness of your site, so careful consideration should be given to when and why you use it. There are a number of cases where animation is used for the novelty of having something move on your screen. There are other times when animation can add information, create a mood, or support the content of your site. Be aware that in most cases, an animation will either slow download time or keep the con-nection open while the animation is occurring. Think about how the animation works in relationship to the other elements on the page. Does it add to the experience or information? Consider the motion to be as important as the use of color and compositional arrangement of the elements. In my years of teaching computer animation, it seems that most students will settle for choppy motion even when it detracts from the story being told. If you are going to include animation, then make it worth the effort of downloading it and be sure that the motion is as smooth as possible.

Previous page : Creative use of Color in Page Design

Next page : Color in Graphics

Back to main page of Chapter 1