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
Text
fsdlkujhfd buifd lifdu fbdliub vdliuh
bvliuhbvflui bgkubvhliudvb imported
from Word
liuvhliubv lvzciou bcviub dfi8y
vdlkincvlbo daio8vh vlosivh aloiuv
cxoi h fvoib8 sb;oi

Flat color
illustrations or
logos from
Illustrator
Photographs
from scanner Page Layout
or edited in Program Output to
Photoshop Printer or
saved as a file
Learn iT! Introduction to 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 Vector Based Images

• Photoshop, MS Paint, • Illustrator, Freehand,
Image Ready, Paintshop Fireworks, Corel Draw
Pro • Flat color artwork
• Continuous tone photos • Easier to edit shapes
• More lifelike

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 (Millions of (GIF, JPEG,

dimension, colors, LZW
Resolution) 256 colors, compression)
1 bit color)

Learn iT! Introduction to 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