purpose of 'Using Graphics'.... is
to raise a few issues regarding the use of graphics on our web sites and
to set the stage for six other topics which provide more detail.
It's difficult to picture a
web site that doesn't utilize graphics. While words convey the
meaning of our site, they are by themselves tiresome, and when strung
endlessly together, can make our visitors weary and inattentive.
Consider our visits to the
supermarket. Do we buy products based on their lists of ingredients and
nutritional content? Not at first really, if you think about it. The
package catches our attention because of its graphics: the pretty
background, colorful and artistic lettering, and of course a mouth
watering picture of what's inside. Only when the package is in our hands
and at eye level, do we have the opportunity to learn whether this
product is actually good for us.
Web sites are not all that
different! If we make a good first impression when someone lands on our
site, there's certainly a better chance they'll stay a while, at least
long enough to 'read our list of ingredients' and see if our site is 'good
for them'. Graphics make this happen.
I also have a theory that
people don't like to read. If they did, books would outsell movies and
theater, and catalogues would be more effective than billboards and TV
commercials, and Reader's Digest and People Magazine would be out of
business. So, if you agree with me at all, our job as web designers is to
distract the reader in subtle and not so subtle ways so that they don't
have a sense that they're reading, but rather viewing. If we're
successful, our web site will be a multi-media presentation. Its 'word'
messages will be much less boring and will better get through to the viewer.
My site is
thoroughly laced with this type of "eye-candy". You've come here
for information on how to build web sites, but darned if I want you to
doze off while you're reading it. You'll go away and never come back, no
matter what my message is.
OK, I hope I've almost
justified my countless buttons, silly and not so silly animations,
page banners, and pictures, clip art galore, and pictorial examples
of 'most everything except milking a cow. My hope, if I'm doing it right,
is that you will go away carrying my messages with you, and not feeling
all that weary for the effort.
The graphic elements
available to us are page backgrounds, fonts, banners and buttons, bullets
for indented lists, clip art and photo images, and animations. The
production and delivery vehicles for these graphics include a good image
editor, graphics rendering software, clip art and photo libraries, font
it all together effectively.
Getting past the
"eye candy", we also need more serious, real-world images,
supplied by scanners and digital cameras. We still need to have images of
the client's offices, pictures of their staff, and images portraying their
products and services.
If you scan over to the
navigation list on your left, the next six topics will focus upon this
mission. Those exercises are intended to show by words and examples how
graphics can contribute to our success. There are also suggestions on how
we can create some of our graphics, even if we're 'artistically
challenged', as I am.
$1,000,000 question I'm sometimes asked is "where can I
buy collections of graphics? This is truly a tough question because many
of the 'clip art collections' for sale are pure garbage. You've seen them
yourself, haven't you? A collection of 250,000 pieces of clip art will
likely have at least 10,000 variations of things that look like this:
Make sure you can get your
money back if you're not satisfied !! (Easier said than done.) I wish I
could name names and at least tell you what NOT to buy. I bought around 8
collections and only liked two. I got my money back on a couple and ate
the rest. Here are a few constructive
make your own. That may sound difficult but I show you in the next 6
topics that it IS possible. You may astound yourself with
what you can do.
Go to a computer store
like CompUSA or Best Buy and look at the graphic collections. Study
the ones which show you a lot of samples on the box, find something
you might like and doesn't cost too much, cross your fingers, and
try it. I bought a collection from Nova Development called 'WEB
Animation Explosion'. I liked a couple dozen and have used some on
this site. They're obviously not for everyone but I keep them around
to draw upon when I think it's appropriate. Do you remember these?
If you see a
particular graphic on the internet that "you've just got to
have", write to the webmaster or site owner and try to obtain
permission to use it. Many people will give you their approval.
You can visit these
web sites which might have something for you: "All Free Original Clip Art", "Art
Today" and "ArtByCheryl".
All Free Original ClipArt
has a variety of graphics, plus links to other similar sites. This
is time consuming, but you may find things you like. Be careful though
because everything isn't necessarily free; check out licensing
restrictions where they apply.
Today has a very large collection with some freebies. They make
their money by offering you an annual membership for $30, entitling you to
download as much as you want in a year.
is an unusual type of art. Cheryl draws the artwork herself and scans the
images. There's a price attached but it's reasonable and you get a chance
to see the artwork first. That's where I obtained this graphic used on my
Deluxe Version 11: I've been a fan of PrintShop for many
years. This particular version excels in its diversity of clipart
and photo images. They claim 185,000 pieces. Included is a selection
of web graphics which includes many animations and backgrounds.
Their clip art and photos can be exported. I copy them to the
clipboard and bring them into PaintShop Pro where I may diddle with
them (resample, crop, etc.) make them transparent if desired,
and save them as JPG or GIF. What's really nice about PrintShop is
that they offer a search feature by keywords and show you all the
'hits' using thumbnails. When you make a selection, you'll have to
insert 1 of 5 image CDs. In my view this package is an absolute
bargain! And the search feature is terrific; no catalogues to look
through or libraries to browse. Many PrintShop items are on this
site. Here are a few. Do you remember?
I'll present a few guideline
in the use of graphics and then you'll be free to explore other topics of
In choosing between GIF
and JPG formats, a couple decisions are made for you. If you
want transparency, it's GIF. If you need more than 256 colors, it's
JPG. If it's line art, or simple clip art, it's probably GIF. If
it's a photograph, it's probably JPG, although you may want to try
both formats and use the smaller one, assuming equal quality. When I
created a screen captured graphic for the Publishing
Your Web [Maintenance] topic, it surprisingly was 74K as
a GIF and over 120K as a JPG and to my eye they looked the same. If
you want, have a look.
When using a fairly
sizable image, try not to make the user wait for it all to download
before you show it to them. An interlaced GIF and a progressive JPG
are downloaded in phases and become progressively clearer as they
continue to load. There's some immediate gratification which makes
the user more patient. This is mentioned in the Image Editing topic, but you may miss
When you must use
large graphics, the ones that affect download time noticeably, you
have a couple more choices to minimize annoying the reader: use the
HTML ALT="name of your graphic"
specification, and also supply a HEIGHT
and WIDTH specification.
The HEIGHT and WIDTH parameters enable the browser to
lay out the page in advance, making for a faster download. Also, the
empty block representing the graphic will bear a name provided by ALT= so that the user will know ahead
of time what it is. If it's a link, s/he can take it without waiting
for the graphic to fill in. A second benefit of ALT= is providing a description of the
graphic after it's loaded. I frequently forget to do this, as do
many. Mouse over some of the graphics on this page and see what they
Be careful mixing
images with text; they don't go well together. Images can be placed
in the text using top, bottom, left,
and right (and other)
specifications. If you have only one medium sized graphic, place it
in the paragraph as left or right, whichever suits you. On this
page, the cereal graphic is positioned 'right' and the candy graphic
If you have multiple graphics, use a table to 'bind' them together
and provide proper separation, one from the other. The PrintShop
sample graphics above are bound by a table.
If you want to blend a graphic like this , as I have, try to make it
almost the height of the text in the line and it won't look too out
of place. Adding a second to the same paragraph of text will also be OK. These
graphics are aligned 'top' and 'bottom', respectively, in this
paragraph. Notice that 'bottom' didn't work out very well and caused
line spacing. You need to experiment.
thumbnails as links to large graphics. This gives the user a chance
to see a little of the picture before opting to suffer
the download time for a picture that's not of interest. A good
example of this is my topic Web Theme
Samples. The price of downloading 67 5K thumbnails is
paid back quickly to a user who wants to see a half dozen or so