MELJUN CORTES Multimedia Lecture Chapter4

Chapter 4 - Graphics

MELJUN CORTESMELJUN CORTES

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


Introduction

Society is very visual

Picture really can be worth a thousand words


Introduction

Choosing an ImagePrepare list and descriptionTrack vital information in an image log

DescriptionSourceRights negotiatedAmount paid


The Graphic Designer

Create and optimize images for the WebPart of multimedia teamFreelancePortfolio


Digitizing Images

Converting them to 0s and 1s


Scanners

Page/FlatbedPage-fed

OCR Software

Slide


Scanning Hints

Set resolution to 72 ppiWork from an originalDo not increase resolution after it has been lowered


Digital Cameras

Require no filmStore images in memory (flash RAM)Connect directly to the computerRange in price, quality and features


Snapping Photographs

Take lots of photosShoot from a variety of anglesShoot people in indirect lightShoot in the morning/evening when light is filteredTry shooting objects both indoors and outdoors


Digital Video Cameras

Capture both still and moving imagesRange in price, quality, and features


Photo CD

Service bureauHigh qualityInexpensiveConvenientNear-permanent storage


Stock Photography

Commercial Image providers/Stock photography housesTips

File should be Web readyGraphic should be size and resolution appropriate to Web page


Clip Art

Available with software, on CD and WebMust be appropriate and high qualityCan look amateurishPublic domain v. copyrightRead licensing agreements carefully


Original Artwork

Draw, paint, image editing software – learning curveDon’t have to worry about copyright or licensing agreementsDigitizing or Graphics tablet – stylusSpreadsheet software – charts/graphsMapping software – vector-based


Types of Images

Line art – flat colors Continuous tone – photographsGrayscale – 256 levels of grayTwo-dimensionalThree-dimensionalHypergraphicsImage Maps


Image Quality

Many factors impact image qualitySome 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


Color Resolution

Also calledBit or pixel resolutionColor, bit, or pixel depth

Measures the number of bits of stored information per pixel or how many colors each pixel may containColor resolution chart


Color Resolution

Greater color resolutionHigher quality imageLarger file sizeDifferent color palette


Web-safe color palette

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

216 safe colorsDithering and Banding


Image Resolution

Amount of information stored for each imageMeasured in pixels per inch (ppi)Computer monitors display 72 ppiSetting Web graphics higher than 72 ppi makes them larger in file size and on screen


Optimizing Images

Crop to smallest areaApply image size for final Web pageReduce resolution to 72 ppiReduce colors to minimum without sacrificing quality


Image Compression

Compression – algorithm used to create smaller file sizesTwo types

LosslessLossy


Graphics Software

Include drawing, painting and image editing programsTool palette


Paint Programs

Bitmapped images – pixel-basedEditable pixel by pixelEnlarging may result in jaggiesMicrosoft Paint

Create and edit geometric figuresAdd color and patternsCut and pasteRotate and stretch


Draw Programs

Vector graphics – mathematical modelsResize without losing image qualitySmooth, precise, versatileGenerally require less memoryMay take longer to refresh


Draw Programs

Adobe Illustrator, Macromedia Freehand, CorelDraw

Fully editable shapesBézier curvesGradient fillsBlending/morphingGrouping

RasterizingConverting a vector-based graphic to pixelsImproves refresh rate


3D Modeling Programs

Also called rendering programsTextures applied to wire-frame modelRendering

Converting a three-dimensional image to a two-dimensional image


3D Modeling Programs

Bryce, Canoma, Carrara, Poser, LightWave, SoftImage

ModelingArranging and deformingShadingSetting lights and camerasRendering


Image Editing Programs

Manipulate digitized imagesAdobe PhotoShop

CroppingBrightness, Contrast, Color CorrectionFiltersLayersFile Format Conversion


Enhancement Programs

Plug-insAdd-on features

Programs specifically designed for working with Web graphics and animation

Macromedia FireworksAdobe Image Ready


Web Graphic File Formats

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


GIF

Developed by CompuServeSupports 256 colors (8-bits)Uses lossless compressionSupports interlacing (GIF 87a)Supports transparency (GIF 89a)

Animation

Best for solid color images/diagrams


JPEG

Supports millions of colorsUses lossy compressionProgressive jpegs support interlacingRectangular – do not support transparencyBest for photographs/continuous tone images


PNG

Supports various color depths (8-bit to 32-bit)Uses lossless compressionGenerally creates smaller files than GIFSupports variable transparencySupports interlacing – fasterCapacity for gamma correctionNot supported by all browsers w/o plug-in


MELJUN CORTES Multimedia Lecture Chapter4

Technology

Transcript of MELJUN CORTES Multimedia Lecture Chapter4