introduction to digital imaging learn it! january 2000

Introduction to Digital ImagingIntroduction to Digital Imaging

Learn iT!Learn iT!

January 2000January 2000

Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging

22

Digital Imaging ClassDigital Imaging Class

Overview of class topics:Overview of class topics:

• Terms and ConceptsTerms and Concepts

• ScannersScanners

• Digital camerasDigital cameras

• Disks and Web -Photo CD, Clip Art, Stock images, Disks and Web -Photo CD, Clip Art, Stock images, othersothers


33

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 well by scanner, digital camera, disks and the web, as well as develop an understanding of the concepts and as develop an understanding of the concepts and tools needed to work with those images.tools needed to work with those images.


44

Part 1: Terms and Concepts Part 1: Terms and Concepts

To acquire good quality images we’ll examine several To 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 formats- TIF, JPEG, GIF, BMP…File formats- 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


55

Graphics ApplicationsGraphics Applications

We also want to learn what we can do with images once We also want to learn what we can do with images once we acquire them. We’ll discuss the major graphics we acquire them. We’ll discuss the major graphics and desktop publishing applications- what they do and desktop publishing applications- what they do and how they fit together:and how they fit together:


66

Graphics ApplicationsGraphics Applications

Desktop Publishing Desktop 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 PublisherQuark 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 Acrobat- creates PDF filesDocument Delivery: Adobe Acrobat- creates PDF files


77

Desktop PublishingDesktop Publishing

Page Layout Program

Photographsfrom 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


88

Graphics Applications-Graphics 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 DreamweaverMacromedia Dreamweaver• Illustration: Adobe Illustrator, Macromedia Freehand, Illustration: Adobe Illustrator, Macromedia Freehand,

Fireworks, Corel DrawFireworks, Corel Draw• Image editing: Adobe Photoshop, Macromedia Image editing: Adobe Photoshop, Macromedia

FireworksFireworks• Animation: Macromedia Flash, DirectorAnimation: 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


99

Bitmap vs. Vector based imagesBitmap vs. Vector based images

Bitmapped ImagesBitmapped Images• Photoshop, MS Paint, Photoshop, MS Paint,

Image Ready, Paintshop Image Ready, Paintshop ProPro

• Continuous tone photosContinuous tone photos• More lifelikeMore lifelike

Vector Based ImagesVector Based Images• Illustrator, Freehand, Illustrator, Freehand,

Fireworks, Corel Draw Fireworks, Corel Draw • Flat color artworkFlat color artwork• Easier to edit shapesEasier to edit shapes


1010

Graphics Applications-Graphics 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.http://www.visiovisio.com/products.com/products


1111

Graphics Applications- OthersGraphics Applications- Others

• 3D Drawing/ Modeling/ CAD3D Drawing/ Modeling/ CAD

• AnimationAnimation

• Multimedia AuthoringMultimedia Authoring

• Video EditingVideo Editing

• Media Asset ManagementMedia Asset Management

• Font Management UtilitiesFont Management Utilities

Concepts of Digital ImagingConcepts of Digital Imaging


1313

PixelsPixels

• Most digital images are a grid of pixels, a Most digital images are a grid of pixels, a checkerboard of colored squares, where each square checkerboard of colored squares, where each square is a single coloris a single color

• Each pixel is described by a numberEach pixel is described by a number

100%

400%

800%


1414

ResolutionResolution

• The resolution of an image tells you how small and The resolution of an image tells you how small and densely packed the pixels are. It tells you how many densely 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


1515

ResolutionResolution

• The higher the resolution, the sharper the images The higher the resolution, the sharper the images look, to a point. Monitors only have about 72 screen look, to a point. Monitors only have about 72 screen pixels per inch so any resolution above 72 won’t look pixels 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


1616

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 Experts Group WEB: Millions of JPEG: Joint Photographic Experts Group WEB: Millions of

colors. Good for compressing photos. Small files, but colors. Good for compressing photos. Small files, but “lossy.” No transparency.“lossy.” No transparency.

• PNG: Portable Network Graphics WEB: 256 or Millions of PNG: Portable Network Graphics WEB: 256 or Millions of colors, allows transparency. Not widely supported yet.colors, allows transparency. Not widely supported yet.


1717

CompressionCompression

Reduces the file size of a picture dramatically by trying Reduces 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


1818

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


1919

Color ModesColor Modes

What What kindskinds of colors make up each pixel of colors make up each pixel

• RGB color- Red, Green Blue: used for web, screenRGB color- Red, Green Blue: used for web, screen

• CMYK Color- Cyan, Magenta, Yellow and Black: used CMYK Color- Cyan, Magenta, Yellow and Black: used for commercial print output.for commercial print output.

• Index Color - 256 colors: used for GIFs on the webIndex Color - 256 colors: used for GIFs on the web

• Greyscale: for print or webGreyscale: for print or web

• 1 Bit- Black or White: smallest, simplest files. Many 1 Bit- Black or White: smallest, simplest files. Many usesuses


2020

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 the depth of each pixel and any compression used in the file format.file format.

(Millions of colors,256 colors,1 bit color)

(Physical dimension,Resolution)

(GIF, JPEG, LZW compression)

File Size = Number of pixels

Color depth of pixels

any compression

x -


2121

Web Color- Monitor Color DepthWeb Color- Monitor Color Depth

How many colors per pixel are displayed on the screen How 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 will Changes the number of colors your screen will displaydisplay

• Many older computers can only display 256 colors- 8 Many older computers can only display 256 colors- 8 bit colorbit color

• Many people with newer computers have it set to 256 Many people with newer computers have it set to 256 without knowing it!without knowing it!

• A million color image will look A million color image will look dithereddithered on a monitor on a monitor set to 256 colors.set to 256 colors.

Lynda pages exampleLynda pages example


2222

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 monitormonitor

• http://www.lynda.com/hex.htmlhttp://www.lynda.com/hex.html


2323

Web Color PalettesWeb Color Palettes

216 Color Web Palette


2424

Web Color - DitherWeb Color - Dither

• When a program “fakes” a color it can’t display by When 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 using web Goals: reduce dither in flat color artwork by using web safe colorsafe color

• In photos, have dither only when necessary as when In photos, have dither only when necessary as when using transparent GIFs. using transparent GIFs.

• http://www.http://www.lyndalynda.com/products/books/.com/products/books/dwgdwg/dithering.html/dithering.html


2525

Web ColorWeb Color

• Colors in HTML are referenced with hexadecimal Colors 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

• hexidecimalhexidecimal color palette color palette

33CC99Red Green Blue

BreakBreak

Next Section: ScanningNext Section: Scanning

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

introduction to digital imaging learn it! january 2000

Documents

adobe illustrator

images slide

adobe golive

adobe pagemaker

adobe acrobat

adobe photoshopimage

stock images

file slide