|
These Articles are written
by industry experts to help us understand many subjects better.
|
|
Graphics for the web - a special Internet
art
|
|
|
| Creating
Web Graphics
|
|
What you need
to know about Web graphics
We can't teach you to create web
graphics, but I will point you to some helpful tutorials
about Web design and graphics creation. But first, let's
look at some facts of Web life:
- Web
Graphic formats. In
case you didn't already know, the Web currently permits
only GIF and JPEG formats. (See Webmonkey's
discussion of GIF vs. JPEG.) And there's another
format called PNG (pronounced "ping") that
will join the roster of Web formats when and if all
browsers decide to support it.
The above-mentioned formats
are bitmapped, which is something you already knew.
But what you may not know is that it is now possible
to include vector graphics - even vector-based interactive
animations - on Web sites, thanks largely to Macromedia's
Flash. Although Web surfers must have the Shockwave/Flash
plugin to view these goodies, this innovation holds
great promise for greater flexibility in Web design.
Why? Because vector graphics load much faster than
bitmapped graphics of the same size. Soon all browsers
will probably come with the Shockwave/Flash plugin
built in, so this technology is definitely worth
looking into.
- Web Image resolution. Since the typical
PC monitor has a display resolution of 72 dpi (dots
per inch), that's what you're stuck with in designing
for the Web. While the low-res nature of such graphics
puts a damper on your soaring artistic aspirations,
it's mighty nice to work with graphics that don't
take up so much space on your hard drive.
- Web-safe colors. You may have heard of
the "Web-safe color palette," sometimes called the
browser-safe palette. Since PCs and Macs use quite
different color schemes, this palette was devised
to provide a set of colors that display the same on
both platforms. Graphics using these colors will also
load quickly because they are native browser colors--meaning
the browser will not have to take the time to mix
two or more of its native colors to create the intended
color. Let dotparagon.com explain why you're limited to the
216 colors in the the Browser Safe Color Palette,
also known as the Netscape Palette.
Note: Colors will
always appear several shades lighter on a Mac monitor,
so avoid colors that are so light they may wash
out when viewed on a Mac.
Today, most graphics programs
provide a browser-safe palette, so it's easy to
create browser-safe graphics.
- Dealing with Hexadecimal Color Codes
As you have probably learned
by now, Web browsers identify colors by hexadecimal
codes. And you'll want to keep a browser-safe color
chart handy, like the ones Lynda Weiman offers. Choose
from the chart arranged by hue or by value. In either
case, you can copy the chart to your hard drive by
right-clicking (Windows) or pressing and holding on
the graphic (Mac) and then saving the GIF file to
a spot on your hard drive where you can readily find
it while creating graphics. Since these charts display
both the RGB and hexadecimal values of each color,
it will be easy for you to find just the right color
code so you can mix and match your background and
graphic colors.
Netscape and later versions of Internet
Explorer allow you to use color names instead
of hexadecimal codes. Color names do not work
in older versions of IE or in Opera 6. You may want
to bookmark this fun site that identifies the Netscape Color
Names as well as their hexadecimal numbers.To
be on the safe side, you can use the color name
chart to locate the color you want, then use the
hexadecimal code for that color in your code.You
will need to test to be sure other browsers recognize
these names. In any event,
Spectroscope is a clever program
you can download (for free) and keep handy for choosing
colors for your Web site. The default colors are
Web-safe, but you can use this tool to choose background,
text, and link colors. Spectroscope gives you the
hex and RGB values of the colors you've created.
If you feel the 216 colors are too
limiting, you'll enjoy Colormix.
By mixing two or three browser-safe colors, it is
possible to create over 10 million browser-safe
combinations. And this clever Web site does the
mixing for you!
- Alt tags and size attributes. Be sure to
include alt tags for all graphics.
This is important for users who use text-only browsers
or instruct their browser not to display graphics.
Also include height and width attributes; this helps
the page load faster since the browser knows how much
space to allocate for the graphic. A correct image
tag looks something like this:
<IMG
SRC="images/logo.gif" HEIGHT="108" WIDTH="612" ALT="ABC
Inc. Logo">
Optimizing
graphics for fast download
However skilled you
are in creating graphics for print media, you must
shift gears drastically to embrace the concept of
how computers display color. Suzanne Stephens offers
an excellent discussion on resolving the problems
of graphic compression. She begins with a
most important statement: "The greatest annoyance
when accessing web pages is the long wait for graphic
to download and display."
Remember the old saying (that I
just invented): "Load unto
others as you would have others load unto you."
Animation
options for the Web
Animations certainly liven up Web
pages and can (in rare instances) add value to
the reader. Only you can judge whether the addition
of an animation that slows page loading will be
appreciated by your audience or resented. I suppose
it's a value judgement: Do you think your readers
want to grab some information fast and move along,
or do they want to be entertained and will wait
patiently for the page to appear? Let's take a
look at the possible animation formats you might
use:
Animated GIFs are fun, and
since you can find scads of them (good and bad)
that you can easily pluck and paste, you will
be sorely tempted to grab every one you can find
and sprinkle them generously on your Web pages.
I suggest that you do that--put lots and lots
of the cute little critters on your Web
site. Watch them cavort and careen on your screen.
Get it out of your system. Then, before you inflict
all this frivolity on other Netizens, get
real and decide what form of artwork will
actually add something to the message your Web
site needs to convey to the world.
|
|
We are located in Clearwater, Florida
and serve clients around the country.
HOME
| UTILITIES|
LINKS | V-HOSTS
| COMPUTER PROBLEMS | TUTORIALS
| ARTICLES | BOOKS
| PROFESSIONAL WEB SITE DESIGN
|