Transcript Digital Imaging Class

Introduction to Digital Imaging
Learn iT!
January 2000
Digital Imaging Class
Overview of class topics:
• Terms and Concepts
• Scanners
• Digital cameras
• Disks and Web -Photo CD, Clip Art, Stock images,
others
Learn iT! Introduction to
2
Goal of classes:
• To learn the skills to get images into your computer
by scanner, digital camera, disks and the web, as well
as develop an understanding of the concepts and
tools needed to work with those images.
Learn iT! Introduction to
3
Part 1: Terms and Concepts
To acquire good quality images we’ll examine several
important concepts as we go along:
• Pixels
• Resolution
• File sizes
• File formats- TIF, JPEG, GIF, BMP…
• Compression
• Color Depth
• Color palettes
• Web color issues
• Raster vs. vector based images
Learn iT! Introduction to
4
Graphics Applications
We also want to learn what we can do with images once
we acquire them. We’ll discuss the major graphics
and desktop publishing applications- what they do
and how they fit together:
Learn iT! Introduction to
5
Graphics Applications
Desktop Publishing
For printed output
• Newsletters, flyers, posters, business cards
• Page Layout programs: Adobe PageMaker, InDesign,
Quark XPress, Microsoft Publisher
• Illustration: Adobe Illustrator, Macromedia Freehand,
Corel Draw
• Image editing: Adobe Photoshop
• Document Delivery: Adobe Acrobat- creates PDF files
Learn iT! Introduction to
6
Desktop Publishing
Kjufd kulgkbg lkgiu gfilj lkgi ligfjli
lijblf.ibj fgloib lbijf lobif blkiblciob x
fsdlkujhfd buifd lifdu fbdliub vdliuh
bvliuhbvflui bgkubvhliudvb
liuvhliubv lvzciou bcviub dfi8y
vdlkincvlbo daio8vh vlosivh aloiuv
cxoi h fvoib8 sb;oi
Photographs
from scanner
or edited in
Photoshop
Text
imported
from Word
Flat color
illustrations or
logos from
Illustrator
Page Layout
Program
Learn iT! Introduction to
Output to
Printer or
saved as a file
7
Graphics Applications-
Web Publishing
• For onscreen viewing via Internet or Intranet
• Created by HTML
• WYSWIG HTML generators: Adobe GoLive, PageMill,
Macromedia Dreamweaver
• Illustration: Adobe Illustrator, Macromedia Freehand,
Fireworks, Corel Draw
• Image editing: Adobe Photoshop, Macromedia
Fireworks
• Animation: Macromedia Flash, Director
• Acrobat PDFs
• http://www.macromedia.com/software/
• http://www.adobe.com/products/main.html
Learn iT! Introduction to
8
Bitmap vs. Vector based images
Bitmapped Images
• Photoshop, MS Paint,
Image Ready, Paintshop
Pro
• Continuous tone photos
• More lifelike
Vector Based Images
• Illustrator, Freehand,
Fireworks, Corel Draw
• Flat color artwork
• Easier to edit shapes
Learn iT! Introduction to
9
Graphics Applications-
Business Graphics
• Presentation Graphics: PowerPoint
– Sales, training, informational presentations on screen
– Output for screen, print 35mm slides, web
• Business Graphics: Visio
– Flow charts, schematic drawings, network diagrams, floor
plans
http://www.visio.com/products
Learn iT! Introduction to
10
Graphics Applications- Others
•
•
•
•
•
•
3D Drawing/ Modeling/ CAD
Animation
Multimedia Authoring
Video Editing
Media Asset Management
Font Management Utilities
Learn iT! Introduction to
11
Concepts of Digital Imaging
Pixels
• Most digital images are a grid of pixels, a
checkerboard of colored squares, where each square
is a single color
• Each pixel is described by a number
100%
800%
400%
Learn iT! Introduction to
13
Resolution
• The resolution of an image tells you how small and
densely packed the pixels are. It tells you how many
pixels you have per inch.
36 ppi
18 ppi
72 ppi
Learn iT! Introduction to
14
Resolution
• The higher the resolution, the sharper the images
look, to a point. Monitors only have about 72 screen
pixels per inch so any resolution above 72 won’t look
any sharper.
• Most web graphics have a resolution of 72 pixels per
inch.
72 ppi
150 ppi
Learn iT! Introduction to
15
Common File Types
For Print
• TIF: Tagged Image File Format : High color quality, large file
• EPS: Encapsulated Postscript : Illustrations, logos. Lrg. File
For General Use
• BMP: Bitmap: Not great for color printing, very generic
• WMF: Windows Meta File, used in some clip art.
For Web, Onscreen Use
• GIF: Graphic Interchange Format WEB: Only 256 colors.
Good for flat color art. Allows transparency. Small files.
• JPEG: Joint Photographic Experts Group WEB: Millions of
colors. Good for compressing photos. Small files, but
“lossy.” No transparency.
• PNG: Portable Network Graphics WEB: 256 or Millions of
colors, allows transparency. Not widely supported yet.
Learn iT! Introduction to
16
Compression
Reduces the file size of a picture dramatically by trying
to eliminate or abbreviate redundant information.
• JPEG
“Lossy”
• LZW
Lossless. Used in GIF, some TIFs
Learn iT! Introduction to
17
Color Depth
Number of colors each pixel can be.
• 1 bit
black or white
• 8 bit
256 colors
• 16 bit
65,536 colors
• 24 bit
16.7 million colors
• 32 bit
Millions plus extra information
• The more colors per pixel, the larger the file size
Learn iT! Introduction to
18
Color Modes
What kinds of colors make up each pixel
• RGB color- Red, Green Blue: used for web, screen
• CMYK Color- Cyan, Magenta, Yellow and Black: used
for commercial print output.
• Index Color - 256 colors: used for GIFs on the web
• Greyscale: for print or web
• 1 Bit- Black or White: smallest, simplest files. Many
uses
Learn iT! Introduction to
19
File Size
File size is determined by the number of pixels, the color
depth of each pixel and any compression used in the
file format.
File Size = Number x Color depth - any
of pixels
of pixels
compression
(Physical
dimension,
Resolution)
(Millions of
colors,
256 colors,
1 bit color)
Learn iT! Introduction to
(GIF, JPEG,
LZW
compression)
20
Web Color- Monitor Color Depth
How many colors per pixel are displayed on the screen
even if more colors may be in the file
• Display Properties control panel
• Changes the number of colors your screen will
display
• Many older computers can only display 256 colors- 8
bit color
• Many people with newer computers have it set to 256
without knowing it!
• A million color image will look dithered on a monitor
set to 256 colors.
Lynda pages example
Learn iT! Introduction to
21
Web Color Palettes
• Used in 256 color images
• Mac system palette; Windows system palette
• “Web safe color” 216 colors shared by mac &
windows palettes
• Web safe colors do not “dither” on an 8 bit/256 color
monitor
• http://www.lynda.com/hex.html
Learn iT! Introduction to
22
Web Color Palettes
216 Color Web
Palette
Learn iT! Introduction to
23
Web Color - Dither
• When a program “fakes” a color it can’t display by
mixing different colors next to each other.
• Looks terrible in flat color artwork
• Looks OK in continuous tone photographs
• Goals: reduce dither in flat color artwork by using
web safe color
• In photos, have dither only when necessary as when
using transparent GIFs.
• http://www.lynda.com/products/books/dwg/dithering.h
tml
Learn iT! Introduction to
24
Web Color
• Colors in HTML are referenced with hexadecimal
numbers
• 3 pairs of numbers or letters
• Web safe colors are a combination of
00, 33, 66, 99, CC, FF
• hexidecimal color palette
33CC99
Red
Green
Blue
Learn iT! Introduction to
25
Break
Next Section: Scanning
Please remember to sign in again at the front
desk