Introduction to Digital Imaging Learn iT! Fall 2000

Learn iT! Introduction to Digital Imaging 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.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 Digital Imaging 3 Digital Imaging Class Overview of class topics: Basic ConceptsBasic Concepts Web ConceptsWeb Concepts Digital CamerasDigital Cameras ScanningScanning

Learn iT! Introduction to Digital Imaging 4 Graphics Applications We also want to learn what we can do with images once we acquire them. We’ll discuss the major desktop publishing applications- what they do and how they fit together. We’ll also start learning some of the basic 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

Learn iT! Introduction to Digital Imaging 5 Graphics Applications Desktop Publishing For printed output Newsletters, flyers, posters, business cardsNewsletters, flyers, posters, business cards Page Layout programs: Adobe PageMaker, InDesign, Quark XPress, Microsoft PublisherPage Layout programs: Adobe PageMaker, InDesign, Quark XPress, Microsoft Publisher Illustration: Adobe Illustrator, Macromedia Freehand, Corel DrawIllustration: Adobe Illustrator, Macromedia Freehand, Corel Draw Image editing: Adobe PhotoshopImage editing: Adobe Photoshop Document Delivery: Adobe Acrobat- creates PDF filesDocument Delivery: Adobe Acrobat- creates PDF files

Learn iT! Introduction to Digital Imaging 6 Desktop Publishing Page Layout Program Photographs from 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

Learn iT! Introduction to Digital Imaging 7 Bitmap vs. Vector based images Bitmapped Images Photoshop, MS Paint, Image Ready, Paintshop ProPhotoshop, MS Paint, Image Ready, Paintshop Pro Continuous tone photosContinuous tone photos More lifelikeMore lifelike Vector Based Images Illustrator, Freehand, Fireworks, Corel Draw Flat color artwork Easier to edit shapes

Learn iT! Introduction to Digital Imaging 8 Pixels Most digital images are a grid of pixels, a checkerboard of colored squares, where each square is a single colorMost 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 that determines it’s colorEach pixel is described by a number that determines it’s color 100% 400% 800%

Learn iT! Introduction to Digital Imaging 9 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.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.Most web graphics have a resolution of 72 pixels per inch. 72 ppi 150 ppi

Learn iT! Introduction to Digital Imaging 10 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.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. 18 ppi36 ppi 72 ppi

Learn iT! Introduction to Digital Imaging 11 Common File Types For 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 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 Use GIF: Graphic Interchange Format WEB: Only 256 colors. Good for flat color art. Allows transparency. Small files.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.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.PNG: Portable Network Graphics WEB: 256 or Millions of colors, allows transparency. Not widely supported yet.

Learn iT! Introduction to Digital Imaging 12 Graphics Applications- Business Graphics Presentation Graphics: PowerPointPresentation Graphics: PowerPoint –Sales, training, informational presentations on screen –Output for screen, print 35mm slides, web Business Graphics: VisioBusiness Graphics: Visio –Flow charts, schematic drawings, network diagrams, floor plans

Learn iT! Introduction to Digital Imaging 13 Graphics 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 Concepts Part 2

Learn iT! Introduction to Digital Imaging 15 Web 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 Internet Web Server ISP Your PC

Learn iT! Introduction to Digital Imaging 16 Graphics Applications- Web 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, Macromedia DreamweaverWYSWIG HTML generators: Adobe GoLive, PageMill, Macromedia Dreamweaver Illustration: Adobe Illustrator, Macromedia Freehand, Fireworks, Corel DrawIllustration: Adobe Illustrator, Macromedia Freehand, Fireworks, Corel Draw Image editing: Adobe Photoshop, Macromedia FireworksImage editing: Adobe Photoshop, Macromedia Fireworks Animation: Macromedia Flash, DirectorAnimation: Macromedia Flash, Director Acrobat PDFsAcrobat PDFs

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

Learn iT! Introduction to Digital Imaging 18 Web Concepts Some of the same concepts seen in desktop publishing apply to creating web graphics, but some new issues 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 transparencyWeb color issues - “Browser safe” colors and transparency

Learn iT! Introduction to Digital Imaging 19 File types & Compression GIF: Graphic Interchange Format WEB: Only 256 colors. Good for flat color art. Allows transparency. Small files. Uses LZW compression- not “lossy” but best for image with lots of pixels all the same color.GIF: Graphic Interchange Format WEB: Only 256 colors. Good for flat color art. Allows transparency. Small files. Uses LZW compression- not “lossy” but best for image with lots of pixels all the same color. JPEG: Joint Photographic Experts Group WEB: Millions of colors. Good for compressing photos. Small files, but “lossy” compression scheme used. No transparency.JPEG: Joint Photographic Experts Group WEB: Millions of colors. Good for compressing photos. Small files, but “lossy” compression scheme used. No transparency. PNG: Portable Network Graphics WEB: 256 or Millions of colors, allows transparency. Not widely supported yet.PNG: Portable Network Graphics WEB: 256 or Millions of colors, allows transparency. Not widely supported yet.

Learn iT! Introduction to Digital Imaging 20 Color Depth Number of colors each pixel can be. 1 bitblack or white1 bitblack or white 8 bit256 colors8 bit256 colors 16 bit65,536 colors16 bit65,536 colors 24 bit16.7 million colors24 bit16.7 million colors 32 bitMillions plus extra information32 bitMillions plus extra information The more colors per pixel, the larger the file sizeThe more colors per pixel, the larger the file size

Learn iT! Introduction to Digital Imaging 21 Color Modes What kinds 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 for commercial print output.CMYK Color- Cyan, Magenta, Yellow and Black: used for commercial print output. Web Safe Color colors: used for GIFs on the webWeb Safe Color 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 uses1 Bit- Black or White: smallest, simplest files. Many uses

Learn iT! Introduction to Digital Imaging 22 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. (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 -

Learn iT! Introduction to Digital Imaging 23 Web Color- Monitor Color Depth How many colors per pixel are displayed on the screen even if more colors may be in the fileHow many colors per pixel are displayed on the screen even if more colors may be in the file Many older computers can only display 256 colors- 8 bit colorMany older computers can only display 256 colors- 8 bit color Many people with newer computers have color depth set to 256 without knowing it!Many people with newer computers have color depth set to 256 without knowing it! A million color image will look dithered on a monitor set to 256 colors.A million color image will look dithered on a monitor set to 256 colors.

Learn iT! Introduction to Digital Imaging 24 Web 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 & windows palettes“Web safe color” 216 colors shared by mac & windows palettes Web safe colors do not “dither” on an 8 bit/256 color monitorWeb safe colors do not “dither” on an 8 bit/256 color monitor

Learn iT! Introduction to Digital Imaging 25 Web Color Palettes 216 Color Web Palette

Learn iT! Introduction to Digital Imaging 26 Web Color - Dither When a program “fakes” a color it can’t display by mixing different colors next to each other.When a program “fakes” a color it can’t display by 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 safe colorGoals: reduce dither in flat color artwork by using web safe color In photos, have dither only when necessary as when using transparent GIFs.In photos, have dither only when necessary as when using transparent GIFs. tmlhttp:// tmlhttp:// tmlhttp:// tml

Learn iT! Introduction to Digital Imaging 27 Web Color Colors in HTML are referenced with hexadecimal numbersColors in HTML are referenced with hexadecimal numbers 3 pairs of numbers or letters3 pairs of numbers or letters Web safe colors are a combination of 00, 33, 66, 99, CC, FFWeb safe colors are a combination of 00, 33, 66, 99, CC, FF hexadecimal color palettehexadecimal color palettehexadecimal color palettehexadecimal color palette 33CC99 RedGreenBlue

Break Please remember to sign in again at the front desk

Part 3 Digital cameras

Learn iT! Introduction to Digital Imaging 30 Types of Digital Cameras

Learn iT! Introduction to Digital Imaging 31 Types of Cameras HP Photosmart D200 Olympus D-360Olympus D-450 zoomOlympus D-2500 LCanon EOS D2000 Nikon Coolpix 950Kodak DC265Kodak DCS 660 Basic Point and Shoot Deluxe Point and Shoot (1 megapixel) Prosumer (2-3 megapixels) Professional (3+ megapixels)

Learn iT! Introduction to Digital Imaging 32 Comparison Film 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 Digital Similar camera more expensive No film to buy, process Higher battery usage Can be archived on cdrom Instant gratification Review and delete Storage/ Download challenges Slower shooting Cost of PC

Learn iT! Introduction to Digital Imaging 33 Storage Options Internal Memory Only - RAM (Basic models)Internal Memory Only - RAM (Basic models) Floppy DiscFloppy Disc –Big and slow, but cheap and unlimited Removable memory cardsRemovable memory cards –Compact Flash- Kodak, Nikon, Canon –Smart Media - Olympus, Fuji, Agfa (smaller, not as high capacity) –Sony Memory Stick –Iomega 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…

Learn iT! Introduction to Digital Imaging 34 Downloading Options Camera to PC CableCamera to PC Cable –Serial, USB common, SCSI, Firewire more expensive –Serial ~ 1 minute per megabyte; USB 50x faster Storage media to PC viaStorage media to PC via –PC card adapter for laptop $20-80 –Floppy adapter for SmartMedia –Card reader drive directly attached to PC –Click drive transfers from card to click disks Printer, TV for direct outputPrinter, TV for direct output

Learn iT! Introduction to Digital Imaging 35 Shooting Tips LimitationsLimitations –Fine details ie leaves LightingLighting –Avoid too high contracts MovementMovement –Not as good at action photography SubjectsSubjects –Large areas of color work better, recognizable objects CompositionComposition –Closer; Details; Fore/Background; Rule of Thirds, Symmetry Use Fill FlashUse Fill Flash

Learn iT! Introduction to Digital Imaging 36 Using Images RotatingRotating StitchingStitching CroppingCropping RetouchingRetouching OrganizingOrganizing Output for Web, PrintOutput for Web, Print

Working with Images

Learn iT! Introduction to Digital Imaging 38 Basic Image Editing CroppingCropping SelectingSelecting Copy/PastingCopy/Pasting RetouchingRetouching ColorizingColorizing FiltersFilters SharpeningSharpening Special EffectsSpecial Effects

Learn iT! Introduction to Digital Imaging 39 Stitching 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

Learn iT! Introduction to Digital Imaging 40 Downloading from the Web Right clickingRight clicking Copy and pasteCopy and paste Clip art sitesClip art sites ing photos ing photos Photo portal sitesPhoto portal sites

Learn iT! Introduction to Digital Imaging 41 Stock agencies Most are online nowMost are online now Royalty free vs. paid artRoyalty free vs. paid art –unlimited vs. one time use

Learn iT! Introduction to Digital Imaging 42 Dover 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 into editable vector art in IllustratorAdobe Streamline useful for turning bitmapped scans into editable vector art in Illustrator

Learn iT! Introduction to Digital Imaging 43 Film to disk processing Many film processing services will save your photos to a diskMany film processing services will save your photos to a disk Usually in JPEG formatUsually in JPEG format Many processing services can get your photos up on the web.Many processing services can get your photos up on the web. is one of the many new photo portal siteshttp://kodak.photonet.com is one of the many new photo portal siteshttp://kodak.photonet.com

Learn iT! Introduction to Digital Imaging 44 Kodak 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 mm slide.Master: includes 5 different Resolutions of each 35 mm slide. Turnaround time: 2 days, cost: $10 for the disc, plus $2 per scanTurnaround time: 2 days, cost: $10 for the disc, plus $2 per scan Pro: includes an additional hi-resolution scan Turnaround time: 2 days, cost: $18 per disc, plus $20 per scan; less if longer waitPro: includes an additional hi-resolution scan Turnaround time: 2 days, cost: $18 per disc, plus $20 per scan; less if longer wait

Part 4 - Scanning

Learn iT! Introduction to Digital Imaging 46 Shopping for Scanners Optical, not Interpolated Resolution dpiOptical, not Interpolated Resolution dpi Color Depth bitsColor Depth bits Image Sensor CMOS vs. CCDImage Sensor CMOS vs. CCD Scanning SoftwareScanning Software Connection - Serial, Parallel, USB, SCSI ($ - $$$)Connection - Serial, Parallel, USB, SCSI ($ - $$$) Optical DensityOptical Density –commercial –professional Color Management -$$$Color Management -$$$ –Profiles, Calibration Transparency Adapters, Document feedersTransparency Adapters, Document feeders

Learn iT! Introduction to Digital Imaging 47 Types of scanners Flatbed, Slide, Drum, handheld, documentFlatbed, Slide, Drum, handheld, document Price rangesPrice rangesPrice rangesPrice ranges What you getWhat you get Using Flatbed scannerUsing Flatbed scanner Placing photosPlacing photos

Learn iT! Introduction to Digital Imaging 48 Scanner software ResolutionResolution Color depthColor depth ScalingScaling Color correctionColor correction SharpeningSharpening

Learn iT! Introduction to Digital Imaging 49 Scanning PhotosPhotos Line ArtLine Art Screened ArtScreened Art ObjectsObjects Text/OCRText/OCR

Learn iT! Introduction to Digital Imaging 50 Basic elements LensLens –Viewfinder / SLR; Optical / Digital Zoom Image sensorImage sensor –CMOS/ CCD Storage mediumStorage medium –RAM, Floppy, Compact Flash, Smart Media Camera featuresCamera features –Exposure/ Focus Lock, LCD, Burst shooting/recovery time Connection to PCConnection to PC –Serial, Parrallel, USB, SCSI Downloading optionsDownloading options –To PC, Printer, Video BatteriesBatteries –Nickel Metal Hydride rechargables