Introduction to Digital Imaging

1. Introduction to Digital Imaging Learn iT! Fall 2000

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

3. Digital Imaging Class Overview of class topics: • Basic Concepts • Web Concepts • Digital Cameras • Scanning 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: • Pixels • Resolution • File sizes • File formats- TIF, JPEG, GIF, BMP • Raster vs. vector based images Learn iT! Introduction to Digital Imaging

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

6. Desktop Publishing 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... Flat color illustrations or logos from Illustrator Photographs from scanner edited in Photoshop Page Layout Program Output to Printer or saved as a file Learn iT! Introduction to Digital Imaging

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

8. 100% 800% 400% Pixels • Most 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 color 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. • Most web graphics have a resolution of 72 pixels per inch. 72 ppi 150 ppi Learn iT! Introduction to Digital Imaging

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

11. Common File Types For Print • TIF: Tagged Image File Format : High color quality, large file • EPS: Encapsulated Postscript : Illustrations, logos. Lrg. File For General Use • BMP: Bitmap: Not great for color printing, very generic • 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. • 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. Learn iT! Introduction to Digital Imaging

12. Graphics Applications-Business Graphics • Presentation Graphics: PowerPoint • Sales, training, informational presentations on screen • Output for screen, print 35mm slides, web • Business Graphics: Visio • Flow charts, schematic drawings, network diagrams, floor plans http://www.visio.com/products Learn iT! Introduction to Digital Imaging

13. Graphics Applications- Others • 3D Drawing/ Modeling/ CAD • Animation • Multimedia Authoring • Video Editing • Media Asset Management • Font Management Utilities Learn iT! Introduction to Digital Imaging

14. Web Concepts Part 2

15. Web Pages Internet Web Server Web Server stores: ISP Web Browser on your computer interprets the HTML’s instructions on how to display the text and graphics Graphics Files HTML Files tell your web browser how to display the web page ie text font size, color, picture positioning, etc Your PC Learn iT! Introduction to Digital Imaging

16. Graphics Applications-Web Publishing • For onscreen viewing via Internet or Intranet • Created by HTML- Hypertext Markup Language • WYSWIG HTML generators: Adobe GoLive, PageMill, Macromedia Dreamweaver • Illustration: Adobe Illustrator, Macromedia Freehand, Fireworks, Corel Draw • Image editing: Adobe Photoshop, Macromedia Fireworks • Animation: Macromedia Flash, Director • Acrobat PDFs • http://www.macromedia.com/software/ • http://www.adobe.com/products/main.html Learn iT! Introduction to Digital Imaging

17. 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. Web Design Programs Macromedia Dreamweaver Notepad 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 ppi • File sizes - as small as possible • File formats- JPEG, GIF, PNG • Compression - to reduce file size • Color Depth - # of colors per pixel. JPEG vs. GIF • Web 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. • 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. Learn iT! Introduction to Digital Imaging

20. Color Depth Number of colors each pixel can be. • 1 bit black or white • 8 bit 256 colors • 16 bit 65,536 colors • 24 bit 16.7 million colors • 32 bit Millions plus extra information • The 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, screen • CMYK Color- Cyan, Magenta, Yellow and Black: used for commercial print output. • Web Safe Color - 216 colors: used for GIFs on the web • Greyscale: for print or web • 1 Bit- Black or White: smallest, simplest files. Many uses Learn iT! Introduction to Digital Imaging

22. x - File Size = Number of pixels Color depth of pixels any compression (Millions of colors,256 colors,1 bit color) (Physical dimension,Resolution) (GIF, JPEG, LZW compression) 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. 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 file • Many older computers can only display 256 colors- 8 bit color • 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. Learn iT! Introduction to Digital Imaging

24. Web Color Palettes • Used in 256 color images • Mac system palette; Windows system palette • “Web safe color” 216 colors shared by mac & windows palettes • Web safe colors do not “dither” on an 8 bit/256 color monitor • http://www.lynda.com/hex.html 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. • Looks terrible in flat color artwork • Looks OK in continuous tone photographs • Goals: reduce dither in flat color artwork by using web safe color • In photos, have dither only when necessary as when using transparent GIFs. • http://www.lynda.com/products/books/dwg/dithering.html Learn iT! Introduction to Digital Imaging

27. Red Green Blue Web Color • Colors in HTML are referenced with hexadecimal numbers • 3 pairs of numbers or letters • Web safe colors are a combination of 00, 33, 66, 99, CC, FF • hexadecimal color palette 33CC99 Learn iT! Introduction to Digital Imaging

28. Break Please remember to sign in again at the front desk

29. Part 3 Digital cameras

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

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

32. Film Lot of camera for the buck Film costs Processing Costs Battery usage low Film Ages Delay for processing Can carry lots of film Fast 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 Comparison Learn iT! Introduction to Digital Imaging

33. Storage Options • Internal Memory Only - RAM (Basic models) • Floppy Disc • Big and slow, but cheap and unlimited • Removable 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) • File formats JPEG or TIF • Resolution • 640 x 480, 1024 x 768, 1280 X 960… Learn iT! Introduction to Digital Imaging

34. Downloading Options • Camera to PC Cable • Serial, USB common, SCSI, Firewire more expensive • Serial ~ 1 minute per megabyte; USB 50x faster • Storage 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 output Learn iT! Introduction to Digital Imaging

35. Shooting Tips • Limitations • Fine details ie leaves • Lighting • Avoid too high contracts • Movement • Not as good at action photography • Subjects • Large areas of color work better, recognizable objects • Composition • Closer; Details; Fore/Background; Rule of Thirds, Symmetry • Use Fill Flash Learn iT! Introduction to Digital Imaging

36. Using Images • Rotating • Stitching • Cropping • Retouching • Organizing • Output for Web, Print Learn iT! Introduction to Digital Imaging

37. Working with Images

38. Basic Image Editing • Cropping • Selecting • Copy/Pasting • Retouching • Colorizing • Filters • Sharpening • Special Effects Learn iT! Introduction to Digital Imaging

39. Stitching software • Has gotten much cheaper, simpler • Overlap photos by ~ 50% • Keep your distance • Watch for exposure changes • Cylindrical vs. Perspective options Learn iT! Introduction to Digital Imaging

40. Downloading from the Web • Right clicking • Copy and paste • Clip art sites • Emailing photos • Photo portal sites Learn iT! Introduction to Digital Imaging

41. Stock agencies • Most are online now • Royalty free vs. paid art • unlimited vs. one time use • http://www.corbis.com/ • http://www.tonystone.com/ • http://www.eyewire.com/ Learn iT! Introduction to Digital Imaging

42. Dover books • Public domain- royalty free • Scan and use • Scan as greyscale or black and white • Adobe 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 disk • Usually in JPEG format • Many processing services can get your photos up on the web. • http://kodak.photonet.com is one of the many new photo portal sites Learn iT! Introduction to Digital Imaging

44. Kodak Photo CDs • High quality scans in variety of resolutions • Good for slides • More expensive • Two Quality Levels • Master: includes 5 different Resolutions of each 35 mm slide. • Turnaround 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 wait Learn iT! Introduction to Digital Imaging

45. Part 4 - Scanning

46. Shopping for Scanners • Optical, not Interpolated Resolution 300- 1200dpi • Color Depth 24-36 bits • Image Sensor CMOS vs. CCD • Scanning Software • Connection - Serial, Parallel, USB, SCSI ($ - $$$) • Optical Density • commercial 2.8- 3.0 • professional 3.0- 3.4 • Color Management -$$$ • Profiles, Calibration • Transparency Adapters, Document feeders Learn iT! Introduction to Digital Imaging

47. Types of scanners • Flatbed, Slide, Drum, handheld, document • Price ranges • What you get • Using Flatbed scanner • Placing photos Learn iT! Introduction to Digital Imaging

48. Scanner software • Resolution • Color depth • Scaling • Color correction • Sharpening Learn iT! Introduction to Digital Imaging

49. Scanning • Photos • Line Art • Screened Art • Objects • Text/OCR Learn iT! Introduction to Digital Imaging

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