1 / 26

Introduction to Digital Imaging

Introduction to Digital Imaging. Learn iT! January 2000. Digital Imaging Class. Overview of class topics: Terms and Concepts Scanners Digital cameras Disks and Web -Photo CD, Clip Art, Stock images, others. Goal of classes:.

adamdaniel
Download Presentation

Introduction to Digital Imaging

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Digital Imaging Learn iT! January 2000

  2. Digital Imaging Class Overview of class topics: • Terms and Concepts • Scanners • Digital cameras • Disks and Web -Photo CD, Clip Art, Stock images, others Learn iT! Introduction to Digital Imaging

  3. 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

  4. Part 1: Terms and Concepts To acquire good quality images we’ll examine several important concepts as we go along: • Pixels • Resolution • File sizes • File formats- TIF, JPEG, GIF, BMP… • Compression • Color Depth • Color palettes • Web color issues • Raster vs. vector based images Learn iT! Introduction to Digital Imaging

  5. Graphics Applications We also want to learn what we can do with images once we acquire them. We’ll discuss the major graphics and desktop publishing applications- what they do and how they fit together: Learn iT! Introduction to Digital Imaging

  6. 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

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

  8. Graphics Applications-Web Publishing • For onscreen viewing via Internet or Intranet • Created by HTML • 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

  9. 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

  10. 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

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

  12. Concepts of Digital Imaging

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

  14. 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

  15. 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

  16. 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

  17. Compression Reduces the file size of a picture dramatically by trying to eliminate or abbreviate redundant information. • JPEG “Lossy” • LZW Lossless. Used in GIF, some TIFs Learn iT! Introduction to Digital Imaging

  18. 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

  19. 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. • Index Color - 256 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

  20. 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

  21. Web Color- Monitor Color Depth How many colors per pixel are displayed on the screen even if more colors may be in the file • Display Properties control panel • Changes the number of colors your screen will display • Many older computers can only display 256 colors- 8 bit color • Many people with newer computers have it set to 256 without knowing it! • A million color image will look dithered on a monitor set to 256 colors. Lynda pages example Learn iT! Introduction to Digital Imaging

  22. 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

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

  24. 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

  25. 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 • hexidecimal color palette 33CC99 Learn iT! Introduction to Digital Imaging

  26. Break Next Section: Scanning Please remember to sign in again at the front desk

More Related