IT 8360 Introduction to Web Graphics

1
IT 8360 Introduction to Web Graphics
2
Web graphics can be

• Photos
• Illustrations
• Animations
• Buttons
• Image maps
• Type (headings, WordArt)
• Backgrounds (patterns, textures)

3
Web graphic characteristics

• Dimensions
• Print media inches
• Web media pixels
• Resolution
• Number of pixels a screen can display within a
  given area
• Color
• Browser-Safe 216 colors
• File format
• .JPEG, .GIF
• File size
• Measured in kb, MB

4
Web graphic file formats

• GIF advantages
• Most widely supported graphics format on Web
• Best for simple illustrations, line drawings,
  diagrams, flat colors.
• JPEG advantages
• Supports full color images
• Best for photos, complex illustrations, rich
  colors.
• With either format, always optimize your graphic
  for best resolution and file size.

5
Resolution file size for web graphics

• resolution quality
• resolution quality file size
• Large file size slow download time
• Remember this rule
• Print media high resolution (about 300 dpi)
• Web media low resolution (about 72 dpi)

6
Macromedia Fireworks
Fireworks MX is both a bitmap editor and a vector
drawing program. Fireworks MX has separate
editing modes for either image type. When you
select a tool, Fireworks knows what editing mode
to enter. What is a bitmap image? Most Web
graphics are bitmap images. Bitmaps record
information pixel by pixel and color by
color. What is a vector image? Vector images use
mathematical formulas to define the image. Vector
images are easier to create and easier to
edit. More on vector and bitmap images
7
Macromedia Fireworks

• When you open a new document, the New Document
  dialog box will appear.
• You can specify the size of your canvas in this
  box, plus the background color and resolution of
  the image.
• The canvas size can be set in pixels, inches, or
  centimeters.
• The default image resolution is 72 pixels per
  inch, the default for Web graphics.
• Your background can be white, transparent, or
  some custom color chosen by you.

8
Macromedia Fireworks
The Fireworks user interface is similar to other
Web authoring products. There is a Document
window called the canvas. The interface has a
title bar and menu bar across the top of the
screen. There is a Tools panel on the left side
of the canvas. The Property inspector is at the
bottom of the screen. The right side of the
window has floating panels that can be turned on
or off and used when needed. If you hold your
pointer over certain elements tooltips appear
that explain what they are.
9
References

• Lynch, P.J., Horton, S.
• Web Style Guide 2nd Ed.
• http//webstyleguide.com/graphics