Introduction to Digital Imaging Learn iT! Fall 2000.

Introduction to Digital ImagingIntroduction to Digital Imaging

Learn iT!Learn iT!

Fall 2000Fall 2000

Learn iT! Introduction to Digital ImagingLearn iT! Introduction to Digital Imaging22

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.


Digital Imaging ClassDigital Imaging Class

Overview of class topics:Overview of class topics:

• Basic ConceptsBasic Concepts

• Web ConceptsWeb Concepts

• Digital CamerasDigital Cameras

• ScanningScanning


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 desktop we acquire them. We’ll discuss the major desktop publishing applications- what they do and how they fit publishing applications- what they do and how they fit together. We’ll also start learning some of the basic together. We’ll also start learning some of the basic concepts of all graphic programs including:concepts of all graphic programs including:

• PixelsPixels

• ResolutionResolution

• File sizesFile sizes

• File formats- TIF, JPEG, GIF, BMPFile formats- TIF, JPEG, GIF, BMP

• Raster vs. vector based imagesRaster vs. vector based images


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


Desktop PublishingDesktop Publishing

Page Layout Program

Photographsfrom scanner edited in Photoshop

Flat color illustrations or logos from Illustrator

Text imported from Word

Many moons ago, in a far off place lived a handsome prince with a

gloomy face, for he did not have a bride. And he cried “Alas” and he sighed “alas” for alas the prince

couldn’t find a lass who would suit his mother’s pride...

Output to Printer or saved as a file


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


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 number that determines Each pixel is described by a number that determines it’s colorit’s color

100%

400%

800%


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


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


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.


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


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

Web ConceptsWeb Concepts

Part 2Part 2


Web PagesWeb Pages

Web Browser on your computer interprets the HTML’s instructions on how to display the text and graphics

Web Server stores:

HTML Files tell your web browser how to display the web page ie text font size, color, picture positioning, etc

Graphics Files

InternetWeb Server

ISP

Your PC


Graphics Applications-Graphics Applications- Web PublishingWeb Publishing

• For onscreen viewing via Internet or IntranetFor onscreen viewing via Internet or Intranet• Created by HTML- Hypertext Markup LanguageCreated by HTML- Hypertext Markup Language• 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


Web Design ProgramsWeb Design Programs

To create web pages, you can type all To create web pages, you can type all the html yourself in Notepad, or you the html yourself in Notepad, or you can use a WYSWIG HTML editor like can use a WYSWIG HTML editor like Dreamweaver, FrontPage or GoLive to Dreamweaver, FrontPage or GoLive to layout the page and let the software layout the page and let the software write the HTML for you. You’ll still need write the HTML for you. You’ll still need to know the basics of html to to know the basics of html to understand the program and fine tune understand the program and fine tune the layout. The graphics still come from the layout. The graphics still come from Photoshop Illustrator, or Fireworks.Photoshop Illustrator, or Fireworks.

Notepad

Macromedia Dreamweaver


Web Concepts Web Concepts

Some of the same concepts seen in desktop publishing Some of the same concepts seen in desktop publishing apply to creating web graphics, but some new issues apply to creating web graphics, but some new issues arise that affect quality and download time:arise that affect quality and download time:

• Resolution- 72 ppiResolution- 72 ppi

• File sizes - as small as possibleFile sizes - as small as possible

• File formats- JPEG, GIF, PNGFile formats- JPEG, GIF, PNG

• Compression - to reduce file sizeCompression - to reduce file size

• Color Depth - # of colors per pixel. JPEG vs. GIFColor Depth - # of colors per pixel. JPEG vs. GIF

• Web color issues - “Browser safe” colors and Web color issues - “Browser safe” colors and transparencytransparency


File types & CompressionFile types & Compression

• 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. Uses LZW compression- not “lossy” but best for image Uses LZW compression- not “lossy” but best for image with lots of pixels all the same color.with lots of pixels all the same color.

• 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” compression scheme used. No transparency.“lossy” compression scheme used. 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.


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


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.

• Web Safe Color - 216 colors: used for GIFs on the webWeb Safe Color - 216 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


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 -


Web Color- Monitor Color DepthWeb Color- Monitor Color Depth

• How many colors per pixel are How many colors per pixel are displayed on the screen even displayed on the screen even if more colors may be in the if more colors may be in the filefile

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

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

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


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


Web Color PalettesWeb Color Palettes

216 Color Web Palette


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.lynda.com/products/books/dwg/http://www.lynda.com/products/books/dwg/dithering.htmldithering.html


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

• hexadecimal color palettehexadecimal color palette

33CC99Red Green Blue

BreakBreak

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

Part 3 Digital camerasPart 3 Digital cameras


Types of Digital CamerasTypes of Digital Cameras

Image Quality Features Price Use

Basic Low640x 4803 x 5 inch prints

PHD $100-350 Snaps, Web, email

DeluxePoint andShoot

Good1 mega pixel4 x 6 prints

Some control 400-800 Manuals, education,Web

Prosumer Better2 megapixel8 x 10 prints

More control $900-2000 Newsletters,documentation

Professional Best3+ megap’s

Many $3000-50,000

Advertising, news,fashion


Types of CamerasTypes of Cameras

HP Photosmart D200

Olympus D-360 Olympus D-450 zoom Olympus D-2500 L Canon EOS D2000

Nikon Coolpix 950Kodak DC265 Kodak DCS 660

Basic Point and Shoot

Deluxe Point and Shoot (1 megapixel)

Prosumer (2-3 megapixels)

Professional (3+ megapixels)


ComparisonComparison

FilmFilm• Lot of camera for the buckLot of camera for the buck• Film costsFilm costs• Processing CostsProcessing Costs• Battery usage lowBattery usage low• Film AgesFilm Ages• Delay for processingDelay for processing• Can carry lots of filmCan carry lots of film• Fast ShootingFast Shooting

DigitalDigital• Similar camera more Similar camera more

expensiveexpensive• No film to buy, processNo film to buy, process• Higher battery usageHigher battery usage• Can be archived on cdromCan be archived on cdrom• Instant gratificationInstant gratification• Review and deleteReview and delete• Storage/ Download Storage/ Download

challengeschallenges• Slower shootingSlower shooting• Cost of PCCost of PC


Storage OptionsStorage Options

• Internal Memory Only - RAM (Basic models)Internal Memory Only - RAM (Basic models)• Floppy Disc Floppy Disc

– Big and slow, but cheap and unlimitedBig and slow, but cheap and unlimited• Removable memory cardsRemovable memory cards

– Compact Flash- Kodak, Nikon, CanonCompact Flash- Kodak, Nikon, Canon– Smart Media - Olympus, Fuji, Agfa (smaller, not as high Smart Media - Olympus, Fuji, Agfa (smaller, not as high

capacity)capacity)– Sony Memory StickSony Memory Stick– Iomega Click drives- often an intermediate storageIomega Click drives- often an intermediate storage

• Direct Cable connection (Professional Models)Direct Cable connection (Professional Models)• File formats JPEG or TIFFile formats JPEG or TIF• ResolutionResolution

– 640 x 480, 1024 x 768, 1280 X 960…640 x 480, 1024 x 768, 1280 X 960…


Downloading OptionsDownloading Options

• Camera to PC CableCamera to PC Cable

– Serial, USB common, SCSI, Firewire more expensiveSerial, USB common, SCSI, Firewire more expensive

– Serial ~ 1 minute per megabyte; USB 50x fasterSerial ~ 1 minute per megabyte; USB 50x faster

• Storage media to PC viaStorage media to PC via

– PC card adapter for laptop $20-80PC card adapter for laptop $20-80

– Floppy adapter for SmartMediaFloppy adapter for SmartMedia

– Card reader drive directly attached to PCCard reader drive directly attached to PC

– Click drive transfers from card to click disksClick drive transfers from card to click disks

• Printer, TV for direct outputPrinter, TV for direct output


Shooting TipsShooting Tips

• LimitationsLimitations– Fine details ie leavesFine details ie leaves

• LightingLighting– Avoid too high contractsAvoid too high contracts

• MovementMovement– Not as good at action photographyNot as good at action photography

• SubjectsSubjects– Large areas of color work better, recognizable objectsLarge areas of color work better, recognizable objects

• CompositionComposition– Closer; Details; Fore/Background; Rule of Thirds, SymmetryCloser; Details; Fore/Background; Rule of Thirds, Symmetry

• Use Fill FlashUse Fill Flash


Using ImagesUsing Images

• RotatingRotating

• StitchingStitching

• CroppingCropping

• RetouchingRetouching

• OrganizingOrganizing

• Output for Web, PrintOutput for Web, Print

Working with ImagesWorking with Images


Basic Image EditingBasic Image Editing

• CroppingCropping

• SelectingSelecting

• Copy/PastingCopy/Pasting

• RetouchingRetouching

• ColorizingColorizing

• FiltersFilters

• SharpeningSharpening

• Special EffectsSpecial Effects


Stitching softwareStitching software

• Has gotten much cheaper, simplerHas gotten much cheaper, simpler

• Overlap photos by ~ 50%Overlap photos by ~ 50%

• Keep your distanceKeep your distance

• Watch for exposure changesWatch for exposure changes

• Cylindrical vs. Perspective optionsCylindrical vs. Perspective options


Downloading from the WebDownloading from the Web

• Right clickingRight clicking

• Copy and pasteCopy and paste

• Clip art sitesClip art sites

• Emailing photosEmailing photos

• Photo portal sitesPhoto portal sites


Stock agenciesStock agencies

• Most are online nowMost are online now

• Royalty free vs. paid artRoyalty free vs. paid art

– unlimited vs. one time useunlimited vs. one time use

• http://www.corbis.com/http://www.corbis.com/

• http://www.tonystone.com/http://www.tonystone.com/

• http://www.eyewire.com/http://www.eyewire.com/


Dover booksDover books

• Public domain- royalty freePublic domain- royalty free

• Scan and useScan and use

• Scan as greyscale or black and whiteScan as greyscale or black and white

• Adobe Streamline useful for turning bitmapped scans Adobe Streamline useful for turning bitmapped scans into editable vector art in Illustratorinto editable vector art in Illustrator


Film to disk processingFilm to disk processing

• Many film processing services will save your photos Many film processing services will save your photos to a diskto a disk

• Usually in JPEG formatUsually in JPEG format

• Many processing services can get your photos up on Many processing services can get your photos up on the web. the web.

• http://kodak.photonet.com is one of the many new http://kodak.photonet.com is one of the many new photo portal sitesphoto portal sites


Kodak Photo CDsKodak Photo CDs

• High quality scans in variety of resolutionsHigh quality scans in variety of resolutions

• Good for slidesGood for slides

• More expensiveMore expensive

• Two Quality LevelsTwo Quality Levels

• Master: includes 5 different Resolutions of each 35 Master: includes 5 different Resolutions of each 35 mm slide.mm slide.

• Turnaround time: 2 days, cost: $10 for the disc, plus Turnaround time: 2 days, cost: $10 for the disc, plus $2 per scan$2 per scan

• Pro: includes an additional hi-resolution scan Pro: includes an additional hi-resolution scan Turnaround time: 2 days, cost: $18 per disc, plus $20 Turnaround time: 2 days, cost: $18 per disc, plus $20 per scan; less if longer waitper scan; less if longer wait

Part 4 - ScanningPart 4 - Scanning


Shopping for ScannersShopping for Scanners

• Optical, not Interpolated Resolution 300- 1200dpiOptical, not Interpolated Resolution 300- 1200dpi

• Color Depth 24-36 bitsColor Depth 24-36 bits

• Image Sensor CMOS vs. CCDImage Sensor CMOS vs. CCD

• Scanning SoftwareScanning Software

• Connection - Serial, Parallel, USB, SCSI ($ - $$$)Connection - Serial, Parallel, USB, SCSI ($ - $$$)

• Optical Density Optical Density – commercial 2.8- 3.0commercial 2.8- 3.0

– professional 3.0- 3.4professional 3.0- 3.4

• Color Management -$$$Color Management -$$$– Profiles, CalibrationProfiles, Calibration

• Transparency Adapters, Document feedersTransparency Adapters, Document feeders


Types of scannersTypes of scanners

• Flatbed, Slide, Drum, handheld, documentFlatbed, Slide, Drum, handheld, document

• Price rangesPrice ranges

• What you getWhat you get

• Using Flatbed scannerUsing Flatbed scanner

• Placing photosPlacing photos


Scanner softwareScanner software

• ResolutionResolution

• Color depthColor depth

• ScalingScaling

• Color correctionColor correction

• SharpeningSharpening


ScanningScanning

• PhotosPhotos

• Line ArtLine Art

• Screened ArtScreened Art

• ObjectsObjects

• Text/OCRText/OCR


Basic elementsBasic elements

• LensLens– Viewfinder / SLR; Optical / Digital ZoomViewfinder / SLR; Optical / Digital Zoom

• Image sensorImage sensor– CMOS/ CCDCMOS/ CCD

• Storage mediumStorage medium– RAM, Floppy, Compact Flash, Smart MediaRAM, Floppy, Compact Flash, Smart Media

• Camera featuresCamera features– Exposure/ Focus Lock, LCD, Burst shooting/recovery timeExposure/ Focus Lock, LCD, Burst shooting/recovery time

• Connection to PCConnection to PC– Serial, Parrallel, USB, SCSISerial, Parrallel, USB, SCSI

• Downloading optionsDownloading options– To PC, Printer, VideoTo PC, Printer, Video

• BatteriesBatteries– Nickel Metal Hydride rechargablesNickel Metal Hydride rechargables

Introduction to Digital Imaging Learn iT! Fall 2000.

Documents

Transcript of Introduction to Digital Imaging Learn iT! Fall 2000.