presentation design: graphics. more about color “bit depth” of colors -- this is based on the...

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


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


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


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


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.


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


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

presentation design: graphics. more about color “bit depth” of colors -- this is based on the...

Documents