1. Presentation Design: Graphics

2. More About Color “Bit depth” of colors -- This 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 white 2 bits = 11, 00, 10, or 01 = 4 colors 4 bits = 16 different combinations = 24 colors 8 bits = 2 8 = 256 colors 16 bits = 2 16 = 65, 536colors 24 bits = 2 24 = 16.7 million colors

3. More About Color Monitor resolution: 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 screen squeezed on the screen 640 x 480 800 x 600 1024 x 768 If you have a large number of pixels and a lot of color information being sent to each pixel (like 16 or 24 bit) you may not have enough computer memory to handle it.

4. Two Basic Kinds of Graphics Bitmaps (or paint, or raster): graphic is based on individual dots (pixels) graphic is based on individual dots (pixels) in a picture in a picture usually require more memory usually require more memory used for photo-realistic images and complex used for photo-realistic images and complex drawings requiring fine detail drawings requiring fine detail

5. Two Basic Kinds of Graphics take less memory and are easily scalable take less memory and are easily scalable used for graphic shapes in 2D and 3D used for graphic shapes in 2D and 3D mathematically expressed in angles, mathematically expressed in angles, coordinates and distances coordinates and distances Vector Drawings (or object-oriented, or math-based):

6. Graphic File Formats GIF (Graphics Interchange Format) Extension -. GIF Extension -. GIF JPEG (Joint Photographic Experts Group) Extension -. JPG Extension -. JPG Composer supports both formats

7. Graphic File Formats GIF are compressed -- allows smaller file size are compressed -- allows smaller file size is cross-platform is cross-platform developed specifically for online use developed specifically for online use “lossless” -- no quality loss in process “lossless” -- no quality loss in process use indexed color -- 256 (8 bit) max use indexed color -- 256 (8 bit) max can have color that transparent can have color that transparent has interlacing -- can scroll up and down has interlacing -- can scroll up and down while loading while loading can create animations with right software can create animations with right software

8. Graphic File Formats JPEG are compressed -- allows smaller file size are compressed -- allows smaller file size is cross-platform is cross-platform developed specifically for photographs developed specifically for photographs “lossy” -- data removed for compression “lossy” -- data removed for compression can use up to 16.7 million colors can use up to 16.7 million colors no transparent color no transparent color not interlaced -- loads from top down not interlaced -- loads from top down

9. Graphic File Formats 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 paintings watercolors, charcoals, and other paintings with subtle gradations in color with subtle gradations in color Use JPEGs for: photographs photographs

10. Graphic File Formats Other formats: TIFF -- invented for scanning TIFF -- invented for scanning BMP -- Windows bitmap file BMP -- Windows bitmap file PICT -- Macintosh format PICT -- Macintosh format PNG (Portable Network Graphics) -- PNG (Portable Network Graphics) -- is cross-platform, compressed, & lossless is cross-platform, compressed, & lossless developed in response to GIF’s demand developed in response to GIF’s demand for royalty fees for royalty fees can go between 256 and 16.7 million colors can go between 256 and 16.7 million colors other features such as gamma information other features such as gamma information

11. Graphics-Related Terminology Dithering Occurs with bitmapped graphics, usually when Occurs with bitmapped graphics, usually when they are enlarged. The individual pixels become they are enlarged. The individual pixels become visible, creating the “jaggies.” visible, creating the “jaggies.” Occurs when there are not enough colors in Occurs 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 because This 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 eye “Anti-aliasing” = blending colors to trick the eye Aliasing

12. Obtaining Graphics 1. Make them yourself 2. Import from other web sites 4. “Scan” pix/photos into computer 3. Import from “libraries” on the web or disk or disk 5. Use digital camera to transfer pictures directly from camera disk to computer directly from camera disk to computer 6. Take photographic film to digital processor processor

13. Web Graphic Specifications JPEG 72 ppi GIF lowest quality level 72 ppi can reduce color palette to the minimum necessary to maintain image Remember: before you save, make the image the size you want on your web page the size you want on your web page

14. Converting Graphic Formats Composer accepts both JPEG and GIF. If you try to import a file in another format such as BMP, it will automatically convert to the JPEG format. Composer doesn’t allow any other conversion. Your alternative is to use other software that does allow you to convert graphic format.

15. Converting Graphic Formats Software alternatives: 1. Top-of-the-line programs such as Photoshop 2. Less expensive alternatives: Adobe Page Mill Claris Home Page GoLive CyberStudio Microsoft Front Page

16. Converting Graphic Formats Software alternatives (cont.): 3. Shareware -- www.shareware.com Mac -- Graphic Converter GIF Converter Paint Shop Pro Windows -- BMP to GIF 4. Software available at NEIU Microsoft Photo Editor Corel Photo House LView 3.1

17. Making Your Own Graphics Software alternatives: 1. Top-of-the-line programs such as Illustrator 2. Less expensive alternatives 3. Shareware -- www.shareware.com 4. Software available at NEIU Paint

18. Scanning Size to what want on your web page Size to what want on your web page Remember specs for saving but if you plan Remember specs for saving but if you plan modifying the graphic save at 100 - 150 ppi modifying the graphic save at 100 - 150 ppi Always save scanned images in the TIFF Always save scanned images in the TIFF format -- then change to GIF or JPEG format -- then change to GIF or JPEG If image is strictly black and white save as If image is strictly black and white save as Bitmap or line art Bitmap or line art If you have a choice of how many colors, don’t If you have a choice of how many colors, don’t bother with more than “thousands” unless you bother with more than “thousands” unless you want a very high quality scan of a photo want a very high quality scan of a photo