1.
Save new graphics
(those you've just scanned in or downloaded from your digital camera)
as .tif files to store them in the best possible
condition for later use. Then when you prepare them for use on a
webpage, convert them to .gif files if you intend
to make the background transparent (invisible) or if they contain
text or large plain areas that would be blurred as .jpg files. Otherwise,
convert them to .jpg files, which utilize the maximum
amount of colors while condensing them for faster loading. Note
that .jpg files deteriorate every time they are opened in a graphics
program and re-saved. The deterioration especially shows up in small,
plain text and areas of flat color.
2.
When creating
shadows, first determine the color that will serve as the background
of the page where the image will be used. Take note of the RGB
numbers of this background color, then use those numbers to create
the same color for the background of the image before
adding the shadows. Otherwise, the shadow will contain a color
that does not blend in with the background of the page.
Which looks better?
3.
When making
a single-picture (not tiled) background graphic, make sure that
the image will cover the full width of even the widest screen.
The smallest screen is 640 pixels wide (although WebTV, which
uses television screens, are narrower, about 550 pixels wide)
and the largest is 1600 pixels wide. A good rule of thumb is to
make your background image 1200 pixels wide for the most commonly
used screen resolutions.
4.
Use
care when allowing text to pop up when a visitor places his mouse
over a graphic, which comes from the HTML code alt="text"
in the <image> tag. If the image fails to show up on the
webpage, this can be used to identify what's supposed to be there,
like so:
<IMG
SRC="image.gif"
BORDER="0"
WIDTH="80"
HEIGHT="90"
ALT="Click
here to go to the Table of Contents">
If you're
using website design program for inserting your graphics, it might
automatically include the file name of the image as the ALT. This
should be deleted so the viewer doesn't see distracting nonsense-to-him
pop-up text. Use the ALT tag to identify the picture or to give
the viewer instructions on how to use the image (eg., "click
here:).
5.
There are many
websites that offer free graphics for you to use on your site.
When you find an image you want, place your cursor over the picture,
right-click the mouse, and in the menu click on "Save Picture
As..." That will download the image file into your computer.
When you insert it into your webpage, the HTML tag will look something
like <img src="graphic.gif">.
Do not use the image by linking your webpage to the original
image on the other person's site. Some people make the mistae
of typing the HTML tag as a link:
<a href="http://www.othersite.com/graphic.gif">
which means that their page retrieves its graphics from the directory
of other websites, and that greatly slows the downloading of the
page.
|
EXTRA TIPS
When
shrinking the size of an image, do it in your graphics program,
not in your website design software. Always increase the "color
depth" to the highest amount (16 million colors), and resize
it. Next, sharpen the image, and this will give you a look that's
nearly as good as the original.
Avoid
increasing the size of an image through your graphics program.
You might not be able to restore sharpness to a high enough quality.
Instead, increase the size through your scanner's program when
first scanning it in.
Background
colors, text colors and image colors should not clash. Nor should
they cause eye-strain or headaches!
| Neon
backgrounds are hard to look at. |
| Text
colors should not blend into backgrounds,
but should contrast enough to stand out. |
| Red
text makes some monitors and all TV screens go bonkers. |
For
a tutorial on how to use Paint Shop Pro, see From
the Heart Graphics
|
