Graphics Techniques for Web Page Images
|
Transparency, anti-aliasing, image-maps, GIF animation,
applying text to images, and other general advice.
|
Don't Overdo It !
Graphics can be very easily overdone.
On the other hand, a site with nothing but text is unappealing to most
of us.
Our own philosophy about this is that there's a sensible middle ground
where you construct your page first without any graphics, and when you
have done that well (e.g. it has useful content and
validates adequately)
then add some pretty pictures to spice it up.
Some images look better if their background color matches the browser
window, making the image appear to float in the window.
You can't do this by setting the background color of the image,
since you can't control how people will configure their browsers.
You can control this by using GIF89a images, which have the ability to
mark a single color in the colormap as transparent,
forcing the browser to use its background color for those pixels in the
image.
Anti-Aliasing
Take care about 'anti-aliasing' features,
if the icon has a transparent background.
Anti-aliasing is a technique used in graphics construction to minimise
the 'jaggies' that you can see on lines that are not perpendicular or
horizontal. The best way to see jaggies is on circles.
The technique works by inserting pixels of a color intermediate between
the object and it's background to 'blur' the edge, and so once done,
the object is best viewed against that color background,
and less so against others.
In particular, icons designed for use on a black (white) background may
look bad against a white (black) background.
This icon (courtesy of
ProWebSite) was aliased against a light gray background.
Against a black background, you still get the jaggies.
Animated GIFs help to bring static pages to life.
A couple of points to note: again, don't overdo it.
Some people may find the animation distracting and even annoying.
Animation is popular for banner ads and, when sensibly done they can
be eye-catching and help to increase the click-thru' rate.
But if the animation is too strong or 'loud' you may alienate the
viewer. We once got a couple of complaints within minutes of an
advertiser's ad appearing on our site (via an agency link - we didn't
see it in advance) because it was black and white, and the animation
switched the colors to simulate an explosion. It was extremely annoying.
Elaborate animations may take up a lot of download time.
I once had Dan Austin's wonderful
Golden Earth
animation on our home page - but at 88kbytes it upset too many people..
If you have a 'cool' GIF animation, better to place it elsewhere
and let people know where to find it if they want.
Imagemaps have been one of the major innovations in web interactivity.
I first saw them in the dawn of web time, when there was no
commercialism on the Internet, and most web pages still had more text
than graphics. Now of course, most sites are commercial, and they
want to grab their audiences' attention quickly.. tons of text doesn't
do that.
|
Often imagemaps are used so that sites and their
designers can show off some 'cool' graphics - and I don't give a damn.
Frankly I find many of them stupid and irritating, especially if they
haven't bothered to supply any alternatives.
Navigating such sites is a pain - having waited a considerable time for
the image to download, the first hurdle to overcome is often figuring
out what they mean. Do you have to pass an I.Q. test to enter this
site? And then, when you think you know where to click ('here'?) you
have to wait yet again for the next imagemap. I know, I really should
buy a T1 and a faster computer.
|
Applying Text to Images
- Use a slim sans-serif font.
- Avoid dithering if possible.
- Apply the text last, if possible,.
- Don't resize or resample after adding text.
- Make sure that the anti-alias option is checked when you add your text.
- If your image has many colors try saving as a JPG and compare it to
the same image saved as a GIF.
Further Resources
|
