Date post: | 27-Dec-2015 |
Category: |
Documents |
Upload: | delilah-jefferson |
View: | 216 times |
Download: | 2 times |
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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.
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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:
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal 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%
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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.
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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 -
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
2323
Web Color PalettesWeb Color Palettes
216 Color Web Palette
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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
Learn iT! Introduction to DigitLearn iT! Introduction to Digital Imagingal Imaging
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