Presentation Presentation Design:Design:
GraphicsGraphics
More About ColorMore About Color
““Bit depth” of colors -- Bit depth” of colors -- This is based on the smallest unit of informationThis is based on the smallest unit of information that a computer understands -- a “bit” -- bits of that a computer understands -- a “bit” -- bits of information are sent to every pixel.information are sent to every pixel.
1 bit = 1 or 0 = black and white1 bit = 1 or 0 = black and white
2 bits = 11, 00, 10, or 01 = 4 colors2 bits = 11, 00, 10, or 01 = 4 colors
4 bits = 16 different combinations = 24 colors4 bits = 16 different combinations = 24 colors
8 bits = 2 8 bits = 2 88 = 256 colors = 256 colors
16 bits = 2 16 bits = 2 1616 = 65, 536colors = 65, 536colors
24 bits = 2 24 bits = 2 2424 = 16.7 million colors = 16.7 million colors
More About ColorMore About Color
Monitor resolution: Monitor resolution:
This is measured in pixels per inch (ppi). As This is measured in pixels per inch (ppi). As the number goes up more pixels are getting the number goes up more pixels are getting squeezed on the screensqueezed on the screen
640 x 480640 x 480 800 x 600800 x 600 1024 x 7681024 x 768
If you have a large number of pixels If you have a large number of pixels andand a lot a lotof color information being sent to each pixel of color information being sent to each pixel (like 16 or 24 bit) you may not have enough (like 16 or 24 bit) you may not have enough computer memory to handle it.computer memory to handle it.
Two Basic Kinds of GraphicsTwo Basic Kinds of Graphics
Bitmaps (or paint, or raster): Bitmaps (or paint, or raster):
• graphic is based on individual dots (pixels) graphic is based on individual dots (pixels) in a picturein a picture
• usually require more memoryusually require more memory
• used for photo-realistic images and complexused for photo-realistic images and complex drawings requiring fine detaildrawings requiring fine detail
Two Basic Kinds of GraphicsTwo Basic Kinds of Graphics
• take less memory and are easily scalabletake less memory and are easily scalable
• used for graphic shapes in 2D and 3Dused for graphic shapes in 2D and 3D
• mathematically expressed in angles, mathematically expressed in angles, coordinates and distancescoordinates and distances
Vector Drawings (or object-oriented, or Vector Drawings (or object-oriented, or math-based): math-based):
Graphic File FormatsGraphic File Formats
GIF (Graphics Interchange Format)GIF (Graphics Interchange Format) Extension - . GIFExtension - . GIF
JPEG (Joint Photographic Experts Group)JPEG (Joint Photographic Experts Group) Extension - . JPGExtension - . JPG
Composer supports both formatsComposer supports both formats
Graphic File FormatsGraphic File Formats
GIFGIF
• are compressed -- allows smaller file sizeare compressed -- allows smaller file size
• is cross-platformis cross-platform
• developed specifically for online usedeveloped specifically for online use
• “ “lossless” -- no quality loss in processlossless” -- no quality loss in process
• use indexed color -- 256 (8 bit) maxuse indexed color -- 256 (8 bit) max
• can have color that transparentcan have color that transparent
• has interlacing -- can scroll up and downhas interlacing -- can scroll up and down while loadingwhile loading
• can create animations with right softwarecan create animations with right software
Graphic File FormatsGraphic File Formats
JPEGJPEG
• are compressed -- allows smaller file sizeare compressed -- allows smaller file size
• is cross-platformis cross-platform
• developed specifically for photographsdeveloped specifically for photographs
• “ “lossy” -- data removed for compressionlossy” -- data removed for compression
• can use up to 16.7 million colorscan use up to 16.7 million colors
• no transparent colorno transparent color
• not interlaced -- loads from top downnot interlaced -- loads from top down
Graphic File FormatsGraphic File Formats
Use GIFs for:Use GIFs for:
large areas of solid color (simple illustrations,large areas of solid color (simple illustrations, logos, text as graphics, cartoons)logos, text as graphics, cartoons)
watercolors, charcoals, and other paintingswatercolors, charcoals, and other paintings with subtle gradations in colorwith subtle gradations in color
Use JPEGs for:Use JPEGs for:
photographsphotographs
Graphic File FormatsGraphic File Formats
Other formats:Other formats:
TIFF -- invented for scanningTIFF -- invented for scanning
BMP -- Windows bitmap fileBMP -- Windows bitmap file
PICT -- Macintosh formatPICT -- Macintosh format
PNG (Portable Network Graphics) --PNG (Portable Network Graphics) --
• is cross-platform, compressed, & losslessis cross-platform, compressed, & lossless
• developed in response to GIF’s demanddeveloped in response to GIF’s demand for royalty feesfor royalty fees
• can go between 256 and 16.7 million colorscan go between 256 and 16.7 million colors
• other features such as gamma informationother features such as gamma information
Graphics-Related TerminologyGraphics-Related TerminologyDitheringDithering
Occurs with bitmapped graphics, usually whenOccurs with bitmapped graphics, usually when they are enlarged. The individual pixels becomethey are enlarged. The individual pixels become visible, creating the “jaggies.”visible, creating the “jaggies.”
Occurs when there are not enough colors inOccurs when there are not enough colors in the available color palette to blend effectively --the available color palette to blend effectively -- can result in “spotty”can result in “spotty”
This does not occur with vector graphics becauseThis does not occur with vector graphics because they are not defined by the individual pixels they are not defined by the individual pixels
“ “Anti-aliasing” = blending colors to trick the eyeAnti-aliasing” = blending colors to trick the eye
AliasingAliasing
Obtaining GraphicsObtaining Graphics
1. Make them yourself 1. Make them yourself
2. Import from other web sites2. Import from other web sites
4. “Scan” pix/photos into computer4. “Scan” pix/photos into computer
3. Import from “libraries” on the web 3. Import from “libraries” on the web or diskor disk
5. Use digital camera to transfer pictures5. Use digital camera to transfer pictures directly from camera disk to computerdirectly from camera disk to computer
6. Take photographic film to digital 6. Take photographic film to digital processorprocessor
Web Graphic SpecificationsWeb Graphic Specifications
JPEG JPEG 72 ppi72 ppi
GIFGIF
lowest quality levellowest quality level
72 ppi72 ppi
can reduce color palette to the minimumcan reduce color palette to the minimumnecessary to maintain imagenecessary to maintain image
Remember: before you save, make the imageRemember: before you save, make the image the size you want on your web pagethe size you want on your web page
Converting Graphic FormatsConverting Graphic Formats
Composer accepts both JPEG and GIF. If Composer accepts both JPEG and GIF. If you try to import a file in another format you try to import a file in another format such as BMP, it will automatically convert to such as BMP, it will automatically convert to the JPEG format. the JPEG format.
Composer doesn’t allow any other conversion.Composer doesn’t allow any other conversion.
Your alternative is to use other software that Your alternative is to use other software that does allow you to convert graphic format.does allow you to convert graphic format.
Converting Graphic FormatsConverting Graphic Formats
Software alternatives:Software alternatives:
1. Top-of-the-line programs such as Photoshop1. Top-of-the-line programs such as Photoshop
2. Less expensive alternatives:2. Less expensive alternatives:
Adobe Page Mill Adobe Page Mill
Claris Home Page Claris Home Page
GoLive CyberStudio GoLive CyberStudio
Microsoft Front Page Microsoft Front Page
Converting Graphic FormatsConverting Graphic Formats
Software alternatives (cont.):Software alternatives (cont.):
3. Shareware -- www.shareware.com3. Shareware -- www.shareware.comMac -- Graphic Converter Mac -- Graphic Converter
GIF Converter GIF Converter
Paint Shop Pro Paint Shop Pro Windows -- BMP to GIF Windows -- BMP to GIF
4. Software available at NEIU4. Software available at NEIU
Microsoft Photo Editor Microsoft Photo Editor Corel Photo House Corel Photo House
LView 3.1 LView 3.1
Making Your Own GraphicsMaking Your Own Graphics
Software alternatives:Software alternatives:
1. Top-of-the-line programs such as Illustrator1. Top-of-the-line programs such as Illustrator
2. Less expensive alternatives2. Less expensive alternatives
3. Shareware -- www.shareware.com3. Shareware -- www.shareware.com
4. Software available at NEIU4. Software available at NEIU
Paint Paint
ScanningScanning
• Size to what want on your web page Size to what want on your web page
• Remember specs for saving Remember specs for saving butbut if you plan if you plan modifying the graphic save at modifying the graphic save at 100 - 150 ppi100 - 150 ppi
• Always save scanned images in the TIFF Always save scanned images in the TIFF format -- then change to GIF or JPEGformat -- then change to GIF or JPEG
• If image is strictly black and white save asIf image is strictly black and white save as Bitmap or line artBitmap or line art
• If you have a choice of how many colors, don’tIf you have a choice of how many colors, don’t bother with more than “thousands” unless youbother with more than “thousands” unless you want a very high quality scan of a photowant a very high quality scan of a photo