All computer files have a structure that tells the computer what it
is. Text, graphics, and Web pages, are all have different file types.
When a file is created – it can be saved in the file format of the
program that created it. Most programs will also give you options to
save files in other formats.
There are 2 kinds of graphic file formats:
Bitmap or Pixel-Based. Defined by dots on the screen. These are
generated by “paint ” or “photo” programs and are sometimes called
“raster files. You can erase and edit the dots that make up the
picture. Bitmapped graphics are created with dots of color (called
pixels). These “bits” of information are “mapped” on the screen.
Vector or Math-Based. Outlined, object oriented pictures created by
“draw: or “illustrate” programs. Mathematical formulas define each
shape. Objects may be selected and clicking can change colors and
shapes. Vector graphics have smooth edges because they are formed with
equations instead of individual dots.
While programs like Flash enable vector art to be displayed on the
web, most Web graphics are bitmapped or rasterized. Graphics that are
created with a vector-drawing program are often then converted to
bitmaps. Two types of bitmaps can be used on the Web.
GIF. CompuServe developed this file format
specifically for online use. It stands for Graphic Interchange Format
(pronounced “giff"). GIFs are cross-platform – meaning they can be
viewed on any kind of computer. They are compressed, a technique for
making smaller file size (we are talking about the size of the
computer file and NOT the size of the image). The compression in GIF
files does not affect the quality of the graphic. GIF have a maximum
of 256 colors (called 8 bit) that make up a palette that Web pages can
easily handle. One color in an image can be set transparent so that
the background of a page can show through. GIFs can be animated.
Using GIFs. Simple graphics, images with large areas
of solid, flat colors, logos, text, and cartoons are best used as GIFs
because of the way they can be compressed (smaller file size). Smaller
file sizes are desirable for quicker downloads. Small photos (less
than 1.5 inches) are also better as GIFs. Use a GIF format when you
want to animate an image.
JPEG. Standing for Joint Photographic Experts Group,
this picture format is best for photographs or images with subtle
color changes, depth, lighting effects, or other gradiations of color.
JPEGS are also cross-platform and compressed. He compression of JPEGS
can affect the quality of the graphic. JPEGS can contain 16.7 million
colors (called 24-bit). JPEGS cannot have transparent colors – since
all graphic files are rectangular, JPEGs have straight edges. Borders
around JPEGs are often saved as GIFs so that the border can be
transparent.
Using JPEGs. Because the compression is less
efficient, JPEGs are best used for photos and images with subtle
shading or colors.
File Sizes of Images
When we talk about “file size” of graphics, we are talking about
the disk space that a file takes up when it is stored – not the area
of the image on a screen. The larger a file size, the longer it takes
to load on the viewer’s screen.
The smallest unit of information on a computer is a bit. It is one
circuit that is either on or off. Eight bits strung together make up a
byte. One byte of information can put a character, such as a letter,
on your monitor.
1024 bytes (remember, we are working with units of 8) are called a
kilobyte. 1024 kilobytes makes up a megabyte. Floppy disks hold 1.4
megabytes. 1024 megabytes makes up a gigabyte. Today, most computers
have hard drives from 500 megabytes to 10 or 20 gigabytes.
Small web graphics like buttons and icons are byte sized (meaning
less than one kilobyte. Most other web graphics are measured in
kilobytes.
Effective Web pages use graphics to
more effectively communicate with visitors and to guide them through
the site. Web graphics serve one of 5 functions:
Identity Graphics.
Tell who you are. i.e. Corporate and product logos.
Structural Graphics.
Overall shape and layout of page.
Navigational Graphics. Provide links to other pages or
sites.
Contextual Graphics.
Related to content on a page - used to help convey or illustrate
information.
Ornamental Graphics.
Create eye appeal without adding to content of page.
Graphics can combine these function.
For example, a navigational graphic might incorporate and identity
graphic. The key is to think about how a graphic contributes to a Web
page. Here are some things to think about:
Identity Graphics. Your organizations logo should be
carried on each page in precisely the same location and size. Viewers
click and go – make sure they identify your pages with your
organization. Creating a sense of coherence and order if important if
you want people to learn about your organization or products. Putting
the logo on every page will help viewers make the connection even if
they found you via a link from another page other than your front
page. The more viewers see your logo, the more familiar they will
become. Logos are commonly in the upper-left corner, as in business
letterhead. It is common to link this logo to the front page of your
web.
Structural and Navigational
Graphics. The graphics
that organize a page and guide readers through it are related. A Web
page’s layout carries the links and provides a setting for each page’s
content. The most effective web layouts are laid out as tables. Use
graphics to get away from that hardedge, straight line look.
Navigation Bars.
Both vertical and horizontal orientations are effective. The example
with the logo above uses both.
Buttons. Users expect graphical interfaces on
pages. Web buttons take many forms from shapes to 3D designs that
appear to be pressed down when clicked on. To help communicate their
functions, buttons are often graphics or metaphors that represent what
that button does or where it links.
Dividers. HTML provides for 4 types of dividers
specifications. Of course, Web editors like FrontPage or
DreamWeaver handle these codes for you. The W3c HTML divider
types are:
Size. The number of pixels <HR
SIZE=”3”>
Width. Expressed as the number of
pixels or as a percentage of page width <HR Width=”400”> or <HR
WIDTH=”80%%>
Shading. By default, horizontal
rulings are shaded. To remove use <HR NOSHADE>
Alignment. Set left, right, or
center <HR ALIGN=RIGHT>
Remember, the purpose of dividers is
to separate a page into sections, not to draw attention to a line.
Keep dividers simple.
cty_tobcco_free134.gif){kind=small}
