|
The two most dominant Web image types are GIF (Graphics
Interchange Format) and Jpeg (Joint Picture Experts Group).
You can find the above types in most any website you visit.
They both compress to a small file size and are easy to work
with.
GIF: Pronounced jiff, like the peanut butter, is very good
for logos and lettering. Highly detailed images don't look
good in the GIF format because it's limited to 256 colors;
rendering complex images - such as photos - with a grainy
look.
Jpeg: Pronounced jay-peg, does quite well with photographs
since it was originally designed for them. It is a lossy
type of compression and will reduce the file size by
dropping bits it doesn't need.
General Website Preparation Guidelines:
It's best to work with all your Web images at a much higher
resolution than 72 or 96 pixels per inch (PPI). If you are
creating original images, scan to at least 300 PPI. Though
GIF is somewhat more forgiving of lower resolution than
Jpeg, 300 PPI offers a good compromise for editing.
The reason you need to edit in high resolution is that your
image manipulation and filtering will have a more detailed
look when recompressed for the Web. The excellent detail of
professionally crafted virtual eBook covers is on account of
the high resolution image editing.
When working with logos and lettering, areas of concern are
all the border lines that meet the background color. You
should select two to four pixels (half on the lettering and
the other half on the background) and apply a generous
amount of your paint application's smoothing filter.
Once you are done with the editing, it's time to recompress
and convert the images for use on the Web! Depending on your
needs, resize the images to either 72 or 96 PPI and save
them as GIF or Jpeg. Take your time and use many of the Web
features of your paint application; experiment to see what
is the best compromise between image size and quality.
Items to consider:
High, medium or low compression.
Colors: 16, 32, 64, 128, 256
Dither/no Dither
Of course, there are more detailed works on editing
images for use on the Web; this article doesn't pretend
to be on par. Yet and still, by following the simple
guidelines above, you'll be able to produce some very
decent images for your website.
More resources:
http://www.putertutor.net/
Super tutorial site for all things graphic.
http://www.mccannas.com/pshop/menu.htm
Very well written instruction for graphics applications
http://www.websitetips.com/graphics
Excellent gateway site to all the good graphic design
tutorials and learning resources.
=============================================
by Francisco Aloy
(C)2004 FRancisco Aloy
=============================================
Agreement reminder, not part of the article:
Please include my working hyperlink in the
resource box. Remove paragraph before posting.
|
