Post on 09-Apr-2018
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 1/26
Introduction to Digital ImagingIntroduction to Digital Imaging
Learn iT!Learn iT!
January 2000January 2000
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 2/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 222
Digital Imaging ClassDigital Imaging Class
Overview of class topics:Overview of class topics:
Terms and ConceptsTerms and Concepts
ScannersScanners
Digital camerasDigital cameras Disks and WebDisks and Web --Photo CD, Clip Art, Stock images,Photo CD, Clip Art, Stock images,
othersothers
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 3/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 333
Goal of classes:Goal of classes:
To learn the skills to get images into your computer To learn the skills to get images into your computer
by scanner, digital camera, disks and the web, as wellby scanner, digital camera, disks and the web, as well
as develop an understanding of the concepts andas develop an understanding of the concepts and
tools needed to work with those images.tools needed to work with those images.
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 4/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 444
Part 1: Terms and ConceptsPart 1: Terms and Concepts
To acquire good quality images we¶ll examine severalTo acquire good quality images we¶ll examine several
important concepts as we go along:important concepts as we go along:
PixelsPixels
ResolutionResolution File sizesFile sizes
File formatsFile formats-- TIF, JPEG, GIF, BMP«TIF, JPEG, GIF, BMP«
CompressionCompression
Color DepthColor Depth
Color palettesColor palettes
Web color issuesWeb color issues
Raster vs. vector based imagesRaster vs. vector based images
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 5/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 555
Graphics ApplicationsGraphics Applications
We also want to learn what we can do with images onceWe also want to learn what we can do with images once
we acquire them. We¶ll discuss the major graphicswe acquire them. We¶ll discuss the major graphics
and desktop publishing applicationsand desktop publishing applications-- what they dowhat they do
and how they fit together:and how they fit together:
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 6/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 666
Graphics ApplicationsGraphics Applications
Desktop PublishingDesktop Publishing
For printed outputFor printed output
Newsletters, flyers, posters, business cardsNewsletters, flyers, posters, business cards
Page Layout programs: Adobe PageMaker, InDesign,Page Layout programs: Adobe PageMaker, InDesign,
Quark XPress, Microsoft Publisher Quark XPress, Microsoft Publisher Illustration: Adobe Illustrator, Macromedia Freehand,Illustration: Adobe Illustrator, Macromedia Freehand,
Corel DrawCorel Draw
Image editing: Adobe PhotoshopImage editing: Adobe Photoshop
Document Delivery: Adobe AcrobatDocument Delivery: Adobe Acrobat-- creates PDF filescreates PDF files
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 7/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 777
Desktop PublishingDesktop Publishing
Page Layout
Program
Photographs
from scanner
or edited in
Photoshop
Flat color
illustrations or
logos from
Illustrator
Text
imported
from Word
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
Output to
Printer or
saved as a file
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 8/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 888
Graphics ApplicationsGraphics Applications--
Web PublishingWeb Publishing
For onscreen viewing via Internet or IntranetFor onscreen viewing via Internet or Intranet
Created by HTMLCreated by HTML
WYSWIG HTML generators: Adobe GoLive, PageMill,WYSWIG HTML generators: Adobe GoLive, PageMill,Macromedia Dreamweaver Macromedia Dreamweaver
Illustration: Adobe Illustrator, Macromedia Freehand,Illustration: Adobe Illustrator, Macromedia Freehand,Fireworks, Corel DrawFireworks, Corel Draw
Image editing: Adobe Photoshop, MacromediaImage editing: Adobe Photoshop, MacromediaFireworksFireworks
Animation: Macromedia Flash, Director Animation: Macromedia Flash, Director
Acrobat PDFsAcrobat PDFs
http://www.macromedia.com/software/http://www.macromedia.com/software/
http://www.adobe.com/products/main.htmlhttp://www.adobe.com/products/main.html
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 9/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 999
Bitmap vs. Vector based imagesBitmap vs. Vector based images
Bitmapped ImagesBitmapped Images
Photoshop, MS Paint,Photoshop, MS Paint,
Image Ready, PaintshopImage Ready, Paintshop
ProPro
Continuous tone photosContinuous tone photos
More lifelikeMore lifelike
Vector Based ImagesVector Based Images
Illustrator, Freehand,Illustrator, Freehand,
Fireworks, Corel DrawFireworks, Corel Draw
Flat color artworkFlat color artwork
Easier to edit shapesEasier to edit shapes
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 10/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 101010
Graphics ApplicationsGraphics Applications--
Business GraphicsBusiness Graphics
Presentation Graphics: PowerPointPresentation Graphics: PowerPoint
± ± Sales, training, informational presentations on screenSales, training, informational presentations on screen
± ± Output for screen, print 35mm slides, webOutput for screen, print 35mm slides, web
Business Graphics: VisioBusiness Graphics: Visio
± ± Flow charts, schematic drawings, network diagrams, floor Flow charts, schematic drawings, network diagrams, floor
plansplans
http://www.visio.com/productshttp://www.visio.com/products
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 11/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 111111
Graphics ApplicationsGraphics Applications-- OthersOthers
3D Drawing/ Modeling/ CAD3D Drawing/ Modeling/ CAD
AnimationAnimation
Multimedia AuthoringMultimedia Authoring
Video EditingVideo Editing Media Asset ManagementMedia Asset Management
Font Management UtilitiesFont Management Utilities
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 12/26
Concepts of Digital ImagingConcepts of Digital Imaging
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 13/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 131313
PixelsPixels
Most digital images are a grid of pixels, aMost digital images are a grid of pixels, a
checkerboard of colored squares, where each squarecheckerboard of colored squares, where each square
is a single color is a single color
Each pixel is described by a number Each pixel is described by a number
100%
400%
800%
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 14/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 141414
ResolutionResolution
The resolution of an image tells you how small andThe resolution of an image tells you how small and
densely packed the pixels are. It tells you how manydensely packed the pixels are. It tells you how many
pixels you have per inch.pixels you have per inch.
18 ppi
36 ppi
72 ppi
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 15/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 151515
ResolutionResolution
The higher the resolution, the sharper the imagesThe higher the resolution, the sharper the images
look, to a point. Monitors only have about 72 screenlook, to a point. Monitors only have about 72 screen
pixels per inch so any resolution above 72 won¶t lookpixels per inch so any resolution above 72 won¶t look
any sharper.any sharper.
Most web graphics have a resolution of 72 pixels per Most web graphics have a resolution of 72 pixels per
inch.inch.
72 ppi 150 ppi
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 16/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 161616
Common File TypesCommon File Types
For PrintFor Print TIF: Tagged Image File Format : High color quality, large fileTIF: Tagged Image File Format : High color quality, large file
EPS: Encapsulated Postscript : Illustrations, logos. Lrg. FileEPS: Encapsulated Postscript : Illustrations, logos. Lrg. File
For General UseFor General Use
BMP: Bitmap: Not great for color printing, very genericBMP: Bitmap: Not great for color printing, very generic
WMF: Windows Meta File, used in some clip art.WMF: Windows Meta File, used in some clip art.
For Web, Onscreen UseFor Web, Onscreen Use
GIF: Graphic Interchange Format WEB: Only 256 colors.GIF: Graphic Interchange Format WEB: Only 256 colors.
Good for flat color art. Allows transparency. Small files.Good for flat color art. Allows transparency. Small files.
JPEG: Joint Photographic ExpertsGroup WEB: Millions of JPEG: Joint Photographic ExpertsGroup WEB: Millions of
colors.Good for compressing photos. Small files, butcolors.Good for compressing photos. Small files, but
³lossy.´ No transparency.³lossy.´ No transparency.
PNG: Portable NetworkGraphics WEB: 256 or Millions of PNG: Portable NetworkGraphics WEB: 256 or Millions of
colors, allows transparency. Not widely supported yet.colors, allows transparency. Not widely supported yet.
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 17/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 171717
CompressionCompression
Reduces the file size of a picture dramatically by tryingReduces the file size of a picture dramatically by trying
to eliminate or abbreviate redundant information.to eliminate or abbreviate redundant information.
JPEGJPEG ³Lossy´³Lossy´
LZWLZW Lossless. Used in GIF, some TIFsLossless. Used in GIF, some TIFs
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 18/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 181818
Color DepthColor Depth
Number of colors each pixel can be.Number of colors each pixel can be.
1 bit1 bit black or whiteblack or white
8 bit8 bit 256 colors256 colors
16 bit16 bit 65,536 colors65,536 colors 24 bit24 bit 16.7 million colors16.7 million colors
32 bit32 bit Millions plus extra informationMillions plus extra information
The more colors per pixel, the larger the file sizeThe more colors per pixel, the larger the file size
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 19/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 191919
Color ModesColor Modes
WhatWhat kindskinds of colors make up each pixelof colors make up each pixel
RGB color RGB color-- Red, Green Blue: used for web, screenRed, Green Blue: used for web, screen
CMYK Color CMYK Color-- Cyan, Magenta, Yellow and Black: usedCyan, Magenta, Yellow and Black: used
for commercial print output.for commercial print output.
Index Color Index Color -- 256 colors: used for GIFs on the web256 colors: used for GIFs on the web
Greyscale: for print or webGreyscale: for print or web
1 Bit1 Bit-- Black or White: smallest, simplest files. ManyBlack or White: smallest, simplest files. Many
usesuses
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 20/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 202020
File SizeFile Size
File size is determined by the number of pixels, the color File size is determined by the number of pixels, the color
depth of each pixel and any compression used in thedepth of each pixel and any compression used in the
file format.file format.
(Millions of colors,
256 colors,
1 bit color)
(Physicaldimension,
Resolution)
(GIF, JPEG,LZW
compression)
File Size = Number
of pixels
Color depth
of pixels
any
compression
x -
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 21/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 212121
Web Color Web Color-- Monitor Color DepthMonitor Color Depth
How many colors per pixel are displayed on the screenHow many colors per pixel are displayed on the screen
even if more colors may be in the fileeven if more colors may be in the file
Display Properties control panelDisplay Properties control panel
Changes the number of colors your screen willChanges the number of colors your screen will
displaydisplay
Many older computers can only display 256 colorsMany older computers can only display 256 colors-- 88
bit color bit color
Many people with newer computers have it set to 256Many people with newer computers have it set to 256
without knowing it!without knowing it! A million color image will lookA million color image will look dithered dithered on a monitor on a monitor
set to 256 colors.set to 256 colors.
Lynda pages exampleLynda pages example
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 22/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 222222
Web Color PalettesWeb Color Palettes
Used in 256 color imagesUsed in 256 color images
Mac system palette; Windows system paletteMac system palette; Windows system palette
³Web safe color´ 216 colors shared by mac &³Web safe color´ 216 colors shared by mac &
windows paletteswindows palettes
Web safe colors do not ³dither´ on an 8 bit/256 color Web safe colors do not ³dither´ on an 8 bit/256 color
monitor monitor
http://www.lynda.com/hex.htmlhttp://www.lynda.com/hex.html
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 23/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 232323
Web Color PalettesWeb Color Palettes
216 Color Web
Palette
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 24/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 242424
Web Color Web Color -- Dither Dither
When a program ³fakes´ a color it can¶t display byWhen a program ³fakes´ a color it can¶t display by
mixing different colors next to each other.mixing different colors next to each other.
Looks terrible in flat color artworkLooks terrible in flat color artwork
Looks OK in continuous tone photographsLooks OK in continuous tone photographs
Goals: reduce dither in flat color artwork by usingGoals: reduce dither in flat color artwork by using
web safe color web safe color
In photos, have dither only when necessary as whenIn photos, have dither only when necessary as when
using transparent GIFs.using transparent GIFs.
http://www.lynda.com/products/books/dwg/dithering.hhttp://www.lynda.com/products/books/dwg/dithering.htmltml
8/8/2019 DIprt1
http://slidepdf.com/reader/full/diprt1 25/26
Learn iT! Introduction toLearn iT! Introduction toLearn iT! Introduction to 252525
Web Color Web Color
Colors in HTML are referenced with hexadecimalColors in HTML are referenced with hexadecimal
numbersnumbers
3 pairs of numbers or letters3 pairs of numbers or letters
Web safe colors are a combination of Web safe colors are a combination of
00, 33, 66, 99, CC, FF00, 33, 66, 99, CC, FF
hexidecimal color palettehexidecimal color palette
33CC99
Red Green Blue