Chapter 4 - Graphics

MELJUN CORTES
Chapter Objectives
Explain why graphic images are vital to multimedia
applications
List the items that should be logged in...
Chapter Objectives
Explain how color resolution and image resolution
affect image quality
Define compression and compare l...
Introduction
Society is very visual

Picture really can be worth a thousand words
Harcourt, Inc. items and derived items c...
Introduction
Choosing an Image
Prepare list and description
Track vital information in an image log
Description
Source
Rig...
The Graphic Designer
Create and optimize images for the
Web
Part of multimedia team
Freelance
Portfolio

Harcourt, Inc. it...
Digitizing Images
Converting them to 0s and 1s

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
Scanners
Page/Flatbed
Page-fed
OCR Software

Slide

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, I...
Scanning Hints
Set resolution to 72 ppi
Work from an original
Do not increase resolution after it
has been lowered

Harcou...
Digital Cameras

Require no film
Store images in memory (flash RAM)
Connect directly to the computer
Range in price, quali...
Snapping Photographs
Take lots of photos
Shoot from a variety of angles
Shoot people in indirect light
Shoot in the mornin...
Digital Video Cameras
Capture both still and moving images
Range in price, quality, and features

Harcourt, Inc. items and...
Photo CD
Service bureau
High quality
Inexpensive
Convenient
Near-permanent storage

Harcourt, Inc. items and derived items...
Stock Photography
Commercial Image providers/Stock
photography houses
Tips
File should be Web ready
Graphic should be size...
Clip Art
Available with software, on CD and
Web
Must be appropriate and high quality
Can look amateurish
Public domain v. ...
Original Artwork
Draw, paint, image editing software –
learning curve
Don’t have to worry about copyright or
licensing agr...
Types of Images
Line art – flat colors
Continuous tone – photographs
Grayscale – 256 levels of gray
Two-dimensional
Three-...
Image Quality
Many factors impact image quality
Some are dependent on equipment
No control over differences in gamma
setti...
Color Resolution
Also called
Bit or pixel resolution
Color, bit, or pixel depth

Measures the number of bits of
stored inf...
Color Resolution
Greater color resolution
Higher quality image
Larger file size
Different color palette

Harcourt, Inc. it...
Web-safe color palette
Also called
Browser-safe color palette and 6 x 6 x 6
palette

216 safe colors
Dithering and Banding...
Image Resolution
Amount of information stored for
each image
Measured in pixels per inch (ppi)
Computer monitors display 7...
Optimizing Images
Crop to smallest area
Apply image size for final Web page
Reduce resolution to 72 ppi
Reduce colors to m...
Image Compression
Compression – algorithm used to
create smaller file sizes
Two types
Lossless
Lossy

Harcourt, Inc. items...
Graphics Software
Include drawing, painting and image
editing programs
Tool palette

Harcourt, Inc. items and derived item...
Paint Programs
Bitmapped images – pixel-based
Editable pixel by pixel
Enlarging may result in jaggies
Microsoft Paint

Cre...
Draw Programs
Vector graphics – mathematical models
Resize without losing image quality
Smooth, precise, versatile
General...
Draw Programs
Adobe Illustrator, Macromedia Freehand,
CorelDraw
Fully editable shapes
Bézier curves
Gradient fills
Blendin...
3D Modeling Programs
Also called rendering programs
Textures applied to wire-frame model
Rendering
Converting a three-dime...
3D Modeling Programs
Bryce, Canoma, Carrara,
Poser, LightWave,
SoftImage

Modeling
Arranging and deforming
Shading
Setting...
Image Editing Programs
Manipulate digitized images
Adobe PhotoShop
Cropping
Brightness, Contrast, Color Correction
Filters...
Enhancement Programs
Plug-ins
Add-on features

Programs specifically designed for
working with Web graphics and
animation
...
Web Graphic File Formats
Graphics Interchange Format (GIF)
Joint Photographic Experts Group
(JPEG)
Portable Network Graphi...
GIF
Developed by CompuServe
Supports 256 colors (8-bits)
Uses lossless compression
Supports interlacing (GIF 87a)
Supports...
JPEG
Supports millions of colors
Uses lossy compression
Progressive jpegs support interlacing
Rectangular – do not support...
PNG
Supports various color depths (8-bit to 32bit)
Uses lossless compression
Generally creates smaller files than GIF
Supp...
Upcoming SlideShare
Loading in...5
×

MELJUN CORTES Multimedia Lecture Chapter4

146

Published on

MELJUN CORTES Multimedia Lecture Chapter4

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
146
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MELJUN CORTES Multimedia Lecture Chapter4

  1. 1. Chapter 4 - Graphics MELJUN CORTES
  2. 2. 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.
  3. 3. 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 Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  4. 4. Introduction Society is very visual Picture really can be worth a thousand words Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  5. 5. Introduction Choosing an Image Prepare list and description Track vital information in an image log Description Source Rights negotiated Amount paid Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  6. 6. The Graphic Designer Create and optimize images for the Web Part of multimedia team Freelance Portfolio Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  7. 7. Digitizing Images Converting them to 0s and 1s Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  8. 8. Scanners Page/Flatbed Page-fed OCR Software Slide Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  9. 9. Scanning Hints Set resolution to 72 ppi Work from an original Do not increase resolution after it has been lowered Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  10. 10. Digital Cameras Require no film Store images in memory (flash RAM) Connect directly to the computer Range in price, quality and features Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  11. 11. 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 filtered Try shooting objects both indoors and outdoors Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  12. 12. Digital Video Cameras Capture both still and moving images Range in price, quality, and features Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  13. 13. Photo CD Service bureau High quality Inexpensive Convenient Near-permanent storage Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  14. 14. Stock Photography Commercial Image providers/Stock photography houses Tips File should be Web ready Graphic should be size and resolution appropriate to Web page Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  15. 15. Clip Art Available with software, on CD and Web Must be appropriate and high quality Can look amateurish Public domain v. copyright Read licensing agreements carefully Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  16. 16. Original Artwork Draw, paint, image editing software – learning curve Don’t have to worry about copyright or licensing agreements Digitizing or Graphics tablet – stylus Spreadsheet software – charts/graphs Mapping software – vector-based Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  17. 17. Types of Images Line art – flat colors Continuous tone – photographs Grayscale – 256 levels of gray Two-dimensional Three-dimensional Hypergraphics Image Maps Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  18. 18. Image Quality Many factors impact image quality Some 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 Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  19. 19. Color Resolution Also called Bit or pixel resolution Color, bit, or pixel depth Measures the number of bits of stored information per pixel or how many colors each pixel may contain Color resolution chart Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  20. 20. Color Resolution Greater color resolution Higher quality image Larger file size Different color palette Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  21. 21. Web-safe color palette Also called Browser-safe color palette and 6 x 6 x 6 palette 216 safe colors Dithering and Banding Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  22. 22. Image Resolution Amount of information stored for each image Measured in pixels per inch (ppi) Computer monitors display 72 ppi Setting Web graphics higher than 72 ppi makes them larger in file size and on screen Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  23. 23. Optimizing Images Crop to smallest area Apply image size for final Web page Reduce resolution to 72 ppi Reduce colors to minimum without sacrificing quality Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  24. 24. Image Compression Compression – algorithm used to create smaller file sizes Two types Lossless Lossy Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  25. 25. Graphics Software Include drawing, painting and image editing programs Tool palette Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  26. 26. Paint Programs Bitmapped images – pixel-based Editable pixel by pixel Enlarging may result in jaggies Microsoft Paint Create and edit geometric figures Add color and patterns Cut and paste Rotate and stretch Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  27. 27. Draw Programs Vector graphics – mathematical models Resize without losing image quality Smooth, precise, versatile Generally require less memory May take longer to refresh Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  28. 28. Draw Programs Adobe Illustrator, Macromedia Freehand, CorelDraw Fully editable shapes Bézier curves Gradient fills Blending/morphing Grouping Rasterizing Converting a vector-based graphic to pixels Improves refresh rate Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  29. 29. 3D Modeling Programs Also called rendering programs Textures applied to wire-frame model Rendering Converting a three-dimensional image to a two-dimensional image Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  30. 30. 3D Modeling Programs Bryce, Canoma, Carrara, Poser, LightWave, SoftImage Modeling Arranging and deforming Shading Setting lights and cameras Rendering Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  31. 31. Image Editing Programs Manipulate digitized images Adobe PhotoShop Cropping Brightness, Contrast, Color Correction Filters Layers File Format Conversion Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  32. 32. Enhancement Programs Plug-ins Add-on features Programs specifically designed for working with Web graphics and animation Macromedia Fireworks Adobe Image Ready Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  33. 33. Web Graphic File Formats Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  34. 34. 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 Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  35. 35. JPEG Supports millions of colors Uses lossy compression Progressive jpegs support interlacing Rectangular – do not support transparency Best for photographs/continuous tone images Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  36. 36. PNG Supports various color depths (8-bit to 32bit) Uses lossless compression Generally creates smaller files than GIF Supports variable transparency Supports interlacing – faster Capacity for gamma correction Not supported by all browsers w/o plug-in Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×