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

Chapter 6 2 Multimedia for the Web Examine the Sources of Digital Images Identify Image Types Understand Image Quality Explore Graphics Software Discuss Web Graphic File Formats Chapter Concepts

Chapter 6 3 Multimedia for the Web 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

Chapter 6 4 Multimedia for the Web Scanned Images Still Images (digital camera) Video Images Photo CD Examine the Sources of Digital Images

Chapter 6 5 Multimedia for the Web Stock Photography Clip Art Original Artwork Copyright Laws Examine the Sources of Digital Images

Chapter 6 6 Multimedia for the Web 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

Chapter 6 7 Multimedia for the Web 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

Chapter 6 8 Multimedia for the Web 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 Photo CD

Chapter 6 9 Multimedia for the Web Stock Photography

Chapter 6 10 Multimedia for the Web 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

Chapter 6 11 Multimedia for the Web 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

Chapter 6 12 Multimedia for the Web 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

Chapter 6 13 Multimedia for the Web 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

Chapter 6 14 Multimedia for the Web 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

Chapter 6 15 Multimedia for the Web Identify Image Types

Chapter 6 16 Multimedia for the Web Hypergraphics: Clickable graphics Image maps: Graphics that contain more than one link Identify Image Types

Chapter 6 17 Multimedia for the Web Color Resolution Image Resolution Image Compression Understanding Image Quality

Chapter 6 18 Multimedia for the Web 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

Chapter 6 19 Multimedia for the Web 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

Chapter 6 20 Multimedia for the Web 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

Chapter 6 21 Multimedia for the Web Paint Programs Drawing Programs 3-D Modeling Programs Image Editing Programs Enhancement Programs Explore Graphics Software

Chapter 6 22 Multimedia for the Web 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

Chapter 6 23 Multimedia for the Web Paint Programs

Chapter 6 24 Multimedia for the Web 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

Chapter 6 25 Multimedia for the Web 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

Chapter 6 26 Multimedia for the Web 3-D Modeling Programs 3-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

Chapter 6 27 Multimedia for the Web 3-D Modeling Programs Textures 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

Chapter 6 28 Multimedia for the Web Image Editing Programs Manipulate 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

Chapter 6 29 Multimedia for the Web 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

Chapter 6 30 Multimedia for the Web 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

Chapter 6 31 Multimedia for the Web GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Discuss Web Graphics File Formats

Chapter 6 32 Multimedia for the Web Supports up to 256 colors GIFs that include interlacing appear blurry and sharpen as they are downloaded GIF (Graphics Interchange Format)

Chapter 6 33 Multimedia for the Web 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)

Chapter 6 34 Multimedia for the Web 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 Network Graphics)

Chapter 6 35 Multimedia for the Web Summary Examine Sources of Digital Images Scanned Images Still Images Photo CD Clip Art Original Artwork

Chapter 6 36 Multimedia for the Web Summary Copyright Laws Identify Image Types Understanding Image Quality Color Resolution Image Resolution Image Compression

Chapter 6 37 Multimedia for the Web Summary Explore Graphics Software Paint Programs Drawing Programs 3-D Modeling Programs Image Editing Programs Enhancement Programs

Chapter 6 38 Multimedia for the Web Summary Discuss Web Graphics File Formats GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)