Chapter 4 - Graphics

8/2/2019 Chapter 4 - Graphics

1/36

Chapter 4 - Graphics

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


2/36

Chapter Objectives

Explain why graphic images are vital to multimedia

applications

List the items that should be logged in reference tographic images

Describe the role and responsibilities of the graphic

designer

Describe the different technologies that can be usedto capture and acquire digital images

Define the different types of images



3/36

Chapter Objectives

Explain how color resolution and image resolution

affect image quality

Define compression and compare lossy and losslesscompression

Explain the difference between bitmapped and

vector-based graphics

Describe several features of paint, draw, 3D, andimage editing programs

List and describe the different Web graphic file

formats



4/36

Introduction

Society is very visual

Picture really can be worth a thousand words



5/36

Introduction

Choosing an Image

Prepare list and description

Track vital information in an image logDescription

Source

Rights negotiated

Amount paid



6/36

The Graphic Designer

Create and optimize images for theWeb

Part of multimedia team

Freelance

Portfolio



7/36

Digitizing Images

Converting them to 0s and 1s



8/36

Scanners

Page/Flatbed

Page-fedOCR Software

Slide



9/36

Scanning Hints

Set resolution to 72 ppi

Work from an original

Do not increase resolution after ithas been lowered



10/36

Digital Cameras

Require no film

Store images in memory (flash RAM)Connect directly to the computer

Range in price, quality and features



11/36

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 filteredTry shooting objects both indoorsand outdoors



12/36

Digital Video Cameras

Capture both still and moving images

Range in price, quality, and features



13/36

Photo CD

Service bureau

High quality

Inexpensive

Convenient

Near-permanent storage



14/36

Stock Photography

Commercial Image providers/Stockphotography houses

TipsFile should be Web ready

Graphic should be size and resolution

appropriate to Web page



15/36

Clip Art

Available with software, on CD andWeb

Must be appropriate and high quality

Can look amateurish

Public domain v. copyrightRead licensing agreements carefully



16/36

Original Artwork

Draw, paint, image editing software learning curve

Dont have to worry about copyright orlicensing agreements

Digitizing or Graphics tablet stylus

Spreadsheet software charts/graphs

Mapping software vector-based



17/36

Types of Images

Line art flat colors

Continuous tone photographs

Grayscale 256 levels of gray

Two-dimensional

Three-dimensionalHypergraphics

Image Maps



18/36

Image Quality

Many factors impact image quality

Some are dependent on equipmentNo control over differences in gammasettings, dot pitch, and display settingssuch as monitor resolution and color

Web designers constantly weigh imagequality v. file size/download time



19/36

Color Resolution

Also calledBit or pixel resolution

Color, bit, or pixel depth

Measures the number of bits ofstored information per pixel or how

many colors each pixel may containColor resolution chart



20/36

Color Resolution

Greater color resolutionHigher quality image

Larger file size

Different color palette



21/36

Web-safe color palette

Also calledBrowser-safe color palette and 6 x 6 x 6

palette216 safe colors

Dithering and Banding



22/36

Image Resolution

Amount of information stored foreach image

Measured in pixels per inch (ppi)

Computer monitors display 72 ppi

Setting Web graphics higher than 72ppi makes them larger in file size andon screen



23/36

Optimizing Images

Crop to smallest area

Apply image size for final Web page

Reduce resolution to 72 ppi

Reduce colors to minimum withoutsacrificing quality



24/36

Image Compression

Compression algorithm used tocreate smaller file sizes

Two typesLossless

Lossy



25/36

Graphics Software

Include drawing, painting and imageediting programs

Tool palette



26/36

Paint Programs

Bitmapped images pixel-basedEditable pixel by pixel

Enlarging may result in jaggiesMicrosoft Paint

Create and edit geometric figures

Add color and patternsCut and pasteRotate and stretch



27/36

Draw Programs

Vector graphics mathematical models

Resize without losing image quality

Smooth, precise, versatile

Generally require less memory

May take longer to refresh



28/36

Draw Programs

Adobe Illustrator, Macromedia Freehand,CorelDraw

Fully editable shapesBzier curvesGradient fillsBlending/morphing

GroupingRasterizingConverting a vector-based graphic to pixelsImproves refresh rate



29/36

3D Modeling Programs

Also called rendering programs

Textures applied to wire-frame model

RenderingConverting a three-dimensional image toa two-dimensional image



30/36

3D Modeling Programs

Bryce, Canoma, Carrara,Poser, LightWave,

SoftImageModelingArranging and deformingShading

Setting lights and camerasRendering



31/36

Image Editing Programs

Manipulate digitized images

Adobe PhotoShopCropping

Brightness, Contrast, Color Correction

Filters

LayersFile Format Conversion



32/36

Enhancement Programs

Plug-insAdd-on features

Programs specifically designed forworking with Web graphics andanimation

Macromedia FireworksAdobe Image Ready



33/36

Web Graphic File Formats

Graphics Interchange Format (GIF)

Joint Photographic Experts Group(JPEG)Portable Network Graphics (PNG)



34/36

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



35/36

JPEG

Supports millions of colors

Uses lossy compression

Progressive jpegs support interlacing

Rectangular do not supporttransparency

Best for photographs/continuous toneimages



36/36

PNG

Supports various color depths (8-bit to 32-bit)

Uses lossless compressionGenerally creates smaller files than GIF

Supports variable transparency

Supports interlacing fasterCapacity for gamma correction

Not supported by all browsers w/o plug-in

Harcourt Inc items and derived items copyright 2002 by Harcourt Inc

Chapter 4 - Graphics

Documents

Transcript of Chapter 4 - Graphics