Chapter 4 - Graphics

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Chapter Objectives
Explain why graphic images are vital to multimedia applications List the items that should be logged in reference to graphic images Describe the role and responsibilities of the graphic designer Describe the different technologies that can be used to capture and acquire digital images Define the different types of images

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Chapter Objectives
Explain how color resolution and image resolution affect image quality Define compression and compare lossy and lossless compression Explain the difference between bitmapped and vector-based graphics Describe several features of paint, draw, 3D, and image editing programs List and describe the different Web graphic file formats
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Introduction
Society is very visual

Picture really can be worth a thousand words

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Introduction
Choosing an Image Prepare list and description Track vital information in an image log
Description Source Rights negotiated Amount paid
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

The Graphic Designer

Create and optimize images for the Web Part of multimedia team Freelance Portfolio

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Digitizing Images
Converting them to 0s and 1s

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Scanners
Page/Flatbed Page-fed
OCR Software

Slide

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Scanning Hints
Set resolution to 72 ppi Work from an original Do not increase resolution after it has been lowered

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Digital Cameras

Require no film Store images in memory (flash RAM) Connect directly to the computer Range in price, quality and features
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Snapping Photographs
Take lots of photos Shoot from a variety of angles Shoot people in indirect light Shoot in the morning/evening when light is filtered Try shooting objects both indoors and outdoors
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Digital Video Cameras

Capture both still and moving images Range in price, quality, and features

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Photo CD
Service bureau High quality Inexpensive Convenient Near-permanent storage

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Stock Photography
Commercial Image providers/Stock photography houses Tips
File should be Web ready Graphic should be size and resolution appropriate to Web page

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Clip Art
Available with software, on CD and Web Must be appropriate and high quality Can look amateurish Public domain v. copyright Read licensing agreements carefully

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Original Artwork
Draw, paint, image editing software learning curve Dont have to worry about copyright or licensing agreements Digitizing or Graphics tablet stylus Spreadsheet software charts/graphs Mapping software vector-based
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Types of Images
Line art flat colors Continuous tone photographs Grayscale 256 levels of gray Two-dimensional Three-dimensional Hypergraphics Image Maps
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Image Quality
Many factors impact image quality Some are dependent on equipment
No control over differences in gamma settings, dot pitch, and display settings such as monitor resolution and color

Web designers constantly weigh image quality v. file size/download time

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Color Resolution
Also called
Bit or pixel resolution Color, bit, or pixel depth

Measures the number of bits of stored information per pixel or how many colors each pixel may contain Color resolution chart
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Color Resolution
Greater color resolution
Higher quality image Larger file size Different color palette

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Web-safe color palette

Also called
Browser-safe color palette and 6 x 6 x 6 palette

216 safe colors Dithering and Banding

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Image Resolution
Amount of information stored for each image Measured in pixels per inch (ppi) Computer monitors display 72 ppi Setting Web graphics higher than 72 ppi makes them larger in file size and on screen
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Optimizing Images
Crop to smallest area Apply image size for final Web page Reduce resolution to 72 ppi Reduce colors to minimum without sacrificing quality

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Image Compression
Compression algorithm used to create smaller file sizes Two types
Lossless Lossy

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Graphics Software
Include drawing, painting and image editing programs Tool palette

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Paint Programs
Bitmapped images pixel-based Editable pixel by pixel Enlarging may result in jaggies Microsoft Paint

Create and edit geometric figures Add color and patterns Cut and paste Rotate and stretch
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Draw Programs
Vector graphics mathematical models Resize without losing image quality Smooth, precise, versatile Generally require less memory May take longer to refresh

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Draw Programs
Adobe Illustrator, Macromedia Freehand, CorelDraw
Fully editable shapes Bzier curves Gradient fills Blending/morphing Grouping

Rasterizing

Converting a vector-based graphic to pixels Improves refresh rate

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

3D Modeling Programs
Also called rendering programs Textures applied to wire-frame model Rendering
Converting a three-dimensional image to a two-dimensional image

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

3D Modeling Programs
Bryce, Canoma, Carrara, Poser, LightWave, SoftImage

Modeling Arranging and deforming Shading Setting lights and cameras Rendering

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Image Editing Programs

Manipulate digitized images Adobe PhotoShop
Cropping Brightness, Contrast, Color Correction Filters Layers File Format Conversion
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Enhancement Programs
Plug-ins
Add-on features

Programs specifically designed for working with Web graphics and animation
Macromedia Fireworks Adobe Image Ready
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Web Graphic File Formats

Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG)

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

GIF
Developed by CompuServe Supports 256 colors (8-bits) Uses lossless compression Supports interlacing (GIF 87a) Supports transparency (GIF 89a)
Animation

Best for solid color images/diagrams

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

JPEG
Supports millions of colors Uses lossy compression Progressive jpegs support interlacing Rectangular do not support transparency Best for photographs/continuous tone images
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

PNG
Supports various color depths (8-bit to 32bit) Uses lossless compression Generally creates smaller files than GIF Supports variable transparency Supports interlacing faster Capacity for gamma correction Not supported by all browsers w/o plug-in
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.