DIprt1

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


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



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



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



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



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



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



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



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



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



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


Concepts of Digital ImagingConcepts of Digital Imaging

8/8/2019 DIprt1



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



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



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



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



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



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



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



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



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



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



Web Color PalettesWeb Color Palettes

216 Color Web

Palette

8/8/2019 DIprt1



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



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

8/8/2019 DIprt1


BreakBreak

Next Section: ScanningNext Section: Scanning

Please remember to sign in again at the frontPlease remember to sign in again at the front

deskdesk

DIprt1

Documents

Transcript of DIprt1