multimedia for the web: creating digital excitement multimedia element -- graphics

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

Post on 19-Dec-2015

221 views

Category:

Documents


1 download

TRANSCRIPT

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

3Multimedia for the Web Chapter 6

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

4Multimedia for the Web Chapter 6

Scanned Images

Still Images (digital camera)

Video Images

Photo CD

Examine the Sourcesof Digital Images

5Multimedia for the Web Chapter 6

Stock Photography

Clip Art

Original Artwork

Copyright Laws

Examine the Sourcesof Digital Images

6Multimedia for the Web Chapter 6

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

7Multimedia for the Web Chapter 6

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

8Multimedia for the Web Chapter 6

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

9Multimedia for the Web Chapter 6

Stock Photography

10Multimedia for the Web Chapter 6

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

11Multimedia for the Web Chapter 6

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

12Multimedia for the Web Chapter 6

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

13Multimedia for the Web Chapter 6

Identify Image Types

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

14Multimedia for the Web Chapter 6

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)

Identify Image Types

15Multimedia for the Web Chapter 6

Identify Image Types

16Multimedia for the Web Chapter 6

Hypergraphics: Clickable graphics

Image maps: Graphics that contain more than one link

Identify Image Types

17Multimedia for the Web Chapter 6

Color Resolution Image ResolutionImage Compression

Understanding Image Quality

18Multimedia for the Web Chapter 6

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

19Multimedia for the Web Chapter 6

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

20Multimedia for the Web Chapter 6

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

21Multimedia for the Web Chapter 6

Paint Programs

Drawing Programs

3-D Modeling Programs

Image Editing Programs

Enhancement Programs

Explore Graphics Software

22Multimedia for the Web Chapter 6

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

23Multimedia for the Web Chapter 6

Paint Programs

24Multimedia for the Web Chapter 6

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

25Multimedia for the Web Chapter 6

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

26Multimedia for the Web Chapter 6

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

27Multimedia for the Web Chapter 6

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

28Multimedia for the Web Chapter 6

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

29Multimedia for the Web Chapter 6

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

Ability to convert files from one format to another

Image Editing Programs

30Multimedia for the Web Chapter 6

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

Enhancement Programs

31Multimedia for the Web Chapter 6

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

Discuss Web Graphics File Formats

32Multimedia for the Web Chapter 6

Supports up to 256 colors

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

GIF (Graphics Interchange Format)

33Multimedia for the Web Chapter 6

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

JPEG (Joint Photographic Experts Group)

34Multimedia for the Web Chapter 6

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)

35Multimedia for the Web Chapter 6

SummaryExamine Sources of Digital Images

Scanned Images

Still Images

Photo CD

Clip Art

Original Artwork

36Multimedia for the Web Chapter 6

SummaryCopyright Laws

Identify Image Types

Understanding Image Quality

Color Resolution

Image Resolution

Image Compression

37Multimedia for the Web Chapter 6

SummaryExplore Graphics Software

Paint Programs

Drawing Programs

3-D Modeling Programs

Image Editing Programs

Enhancement Programs

38Multimedia for the Web Chapter 6

SummaryDiscuss Web Graphics File Formats

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)