Web Graphics Getting Started with “Eye Candy” for Webs By: Mr. Breitsprecher

Digital Images Made up of “pixels” Colored dots of light Create illusion of image All digital pictures are rectangular

Made up of “pixels”

Colored dots of light

Create illusion of image

All digital pictures are rectangular

Web Formats 2 Main formats for Web graphics GIFS JPG PNG is a new format, combines best of GIFS & JPG PNG not supported by all browsers

2 Main formats for Web graphics

GIFS

JPG

PNG is a new format, combines best of GIFS & JPG

PNG not supported by all browsers

GIFs Graphic Information Format Up to 256 colors 1 color may be “transparent” Supports animation Not good for photos Best when picture has few colors

Graphic Information Format

Up to 256 colors

1 color may be “transparent”

Supports animation

Not good for photos

Best when picture has few colors

JPGs Joint Photographic Experts Group Supports 16 million colors Good for photos Use when many colors

Joint Photographic Experts Group

Supports 16 million colors

Good for photos

Use when many colors

File Size Kilobytes of data, not size of picture Large files are better image Large files load slower Compromise between file size and quality

Kilobytes of data, not size of picture

Large files are better image

Large files load slower

Compromise between file size and quality

Resolution Number of pixels in a picture In print, more pixels mean better quality High quality print images at least 600 dots per inch (DPI) Computers cannot display more than 72

Number of pixels in a picture

In print, more pixels mean better quality

High quality print images at least 600 dots per inch (DPI)

Computers cannot display more than 72

Anti-Aliasing Pixels are rectangular Edges in pictures can appear “jagged” Edge of pixels is called “alias” Computer software can “soften” edge, create illusion of smoothness

Pixels are rectangular

Edges in pictures can appear “jagged”

Edge of pixels is called “alias”

Computer software can “soften” edge, create illusion of smoothness

Graphic Software Professionals use ADOBE PHOTOSHOP for Web graphics PAINTSHOP PRO is a similar program, low cost, easy-to-use

Professionals use ADOBE PHOTOSHOP for Web graphics

PAINTSHOP PRO is a similar program, low cost, easy-to-use

Using Graphics Identity Graphics. Tell who you are. i.e. Corporate and product logos. Structural Graphics. Overall shape and layout of page. Navigational Graphics. Provide links to other pages or sites. Contextual Graphics. Related to content on a page - used to help convey or illustrate information. Ornamental Graphics. Create eye appeal without adding to content of page.

Identity Graphics. Tell who you are. i.e. Corporate and product logos.

Structural Graphics. Overall shape and layout of page.

Navigational Graphics. Provide links to other pages or sites.

Contextual Graphics. Related to content on a page - used to help convey or illustrate information.

Ornamental Graphics. Create eye appeal without adding to content of page.