Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.

Multimedia for the Web: Creating Digital Excitement

Multimedia Element -- Graphics

2Multimedia for the Web Chapter 6

Examine the Sources of Digital Images

Identify Image Types

Understand Image Quality

Explore Graphics Software

Discuss Web Graphic File Formats

Chapter Concepts


A single table, chart, graphic or photograph can illustrate what might take many pages of narrative text to communicate

A compelling image on a Web page is as important to the overall appeal of a Web site as the right image is in print

Introduction


Scanned Images

Still Images (digital camera)

Video Images

Photo CD

Examine the Sourcesof Digital Images


Stock Photography

Clip Art

Original Artwork

Copyright Laws

Examine the Sourcesof Digital Images


Scanners digitize already developed images, including photographs and drawings

Slide scanners are also available for converting a slide or a negative to a digital image

Scanned Images


Digital cameras capture images in a digital format

Digital video cameras can also be used to capture frames of video or still images

Still Images and Video Images


Enables photos taken with a film camera to be viewed in a digital format

Stock Photography: Photographs available on CD or on Web sites, like www.iStockphoto.com

Photo CD


Stock Photography


Clip Art is a collection of drawings or illustrations, generally organized by category

Public Domain refers to clip art images available free of charge

Clip Art


Artwork that is created using an original drawing created by hand or one of many graphics programs

Advantages include not having to worry about licensing agreements or copyright laws

Original Artwork


Designed to protect intellectual property rights and provide potential monetary rewards for inventiveness and hard work

The 1976 Federal Copyright Act

Digital Millennium Copyright Act of 1998

Copyright Laws



Line art: Term used to describe drawings that contain flat colors without tonal variations

Continuous-tone Images: Graphics that have tonal variations, such as color photographs


Grayscale images: Continuous-tone image consisting of black, white, and gray data only

Images can also be classified as two-dimensional (2-D) or, by adding depth to them, they become three-dimensional (3-D)





Hypergraphics: Clickable graphics

Image maps: Graphics that contain more than one link



Color Resolution Image ResolutionImage Compression

Understanding Image Quality


A monitor displays an array of pixels referred to as a bitmap

Color resolution measures the number of bits of stored information per pixel

Color resolution ranges from 1-bit color (2 colors) to 32-bit color(16.7+ million colors)

Color Resolution


Refers to the amount of information stored for each image

Measured in pixels per inch (PPI)

Web graphics can be set to 72 PPI because most computer monitors cannot display more than 72 PPI

Image Resolution


Compression: Algorithm used to create smaller file sizes

Lossless compression: None of data actually lost during compression

Lossy compression: Some data is lost during compression

Image Compression


Paint Programs

Drawing Programs

3-D Modeling Programs

Image Editing Programs

Enhancement Programs

Explore Graphics Software


Paint programs create bitmapped images

Paint programs allow you to edit images at the pixel level

Enlarging an image too much may result in staircasing, or jaggies

Paint Programs


Paint Programs


Most paint programs create geometric shapes, edit mistakes, add colors and textures, select a desired portion of your image

Additional features vary by program

Paint Programs


Vector graphics: Created and re-created from mathematical models

Common drawing programs used today are Adobe Illustrator and Macromedia FreeHand

Adobe Illustrator contains different tools used to create a variety of fully editable shapes

Drawing Programs


3-D Modeling Programs3-D modeling programs (also called rendering programs) used to create and manipulate 3-D images

Geometric forms or wireframe models serve as basic building blocks


3-D Modeling ProgramsTextures are applied or mapped to models to give them shadows and provide special effects

Objects and lighting can be placed and manipulated to create realistic 3-D scenes


Image Editing ProgramsManipulate digitized images using a variety of features that combine painting, editing, and other image composition tools

Allow images to be cropped, color corrected, the brightness and contrast adjusted


Have layers which allow multiple images to be placed into the same document

Ability to convert files from one format to another



Specifically for working with Web graphics and Web animation

Optimizing: Process of making the image file sizes as small as possible for quick download via the Web

Macromedia Fireworks and Adobe ImageReady are examples



GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

Discuss Web Graphics File Formats


Supports up to 256 colors

GIFs that include interlacing appear blurry and sharpen as they are downloaded



Supports millions of colors (24-bit)

Uses a sophisticated mathematical model to produce a sliding scale of graphic compression that enables you to choose the degree of compression you wish to apply to the image



One of the most flexible formats on the Web

PNG file format supports variable transparency that allows you to store up to 256 different levels of partial transparency

PNG (Portable NetworkGraphics)


SummaryExamine Sources of Digital Images

Scanned Images

Still Images

Photo CD

Clip Art

Original Artwork


SummaryCopyright Laws


Understanding Image Quality

Color Resolution

Image Resolution

Image Compression


SummaryExplore Graphics Software

Paint Programs

Drawing Programs

3-D Modeling Programs




SummaryDiscuss Web Graphics File Formats



PNG (Portable Network Graphics)

Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.

Documents

web scanned images

video images slide

web grayscale images

graphics slide

web artwork

web scanners

web stock photography

image quality slide