Web Page Design, Part Two:Web Page Design, Part Two:Internet Graphics for the Internet Graphics for the Artistically Challenged Artistically Challenged

Part One: Part One: Where Do Computer Where Do Computer

Graphics Come From? Graphics Come From?

When a mommy computer When a mommy computer graphic and a daddy computer graphic and a daddy computer graphic love each other very, graphic love each other very,

very much ...very much ...

““Borrowing” graphicsBorrowing” graphics

• Find a Web graphic Find a Web graphic that interests youthat interests you

• Right-click on it (or Right-click on it (or command+click on it command+click on it if you have a Mac)if you have a Mac)

• Choose “Save Picture Choose “Save Picture As ...” in IE or “Save As ...” in IE or “Save Image As...” in Image As...” in NetscapeNetscape

• Save the graphic on Save the graphic on your computeryour computer

Don’t Celebrate Yet ...Don’t Celebrate Yet ...

There is this nasty thing called There is this nasty thing called “copyright” that gets in the way“copyright” that gets in the way

Stuff you can Stuff you can legallylegally use use

• Images and graphics that came from a Images and graphics that came from a public repository or a library whose public repository or a library whose license permits their reuselicense permits their reuse

• Images and graphics you find on the Web, Images and graphics you find on the Web, provided the owner gives you permissionprovided the owner gives you permission

• Photographs you took yourself (and that Photographs you took yourself (and that doesn’tdoesn’t mean something you scanned mean something you scanned from a book)from a book)

• Graphics you made yourself that aren’t Graphics you made yourself that aren’t based on other worksbased on other works

Internet graphic softwareInternet graphic software

• Microsoft OfficeMicrosoft Office– ClipartClipart– WordArtWordArt

• Scanner SoftwareScanner Software– Adobe Adobe

PhotoDeluxePhotoDeluxe

• Professional Professional SoftwareSoftware– Paintshop ProPaintshop Pro– Adobe PhotoshopAdobe Photoshop– Macromedia Macromedia

FireworksFireworks

• ClipartClipart– SoftwareSoftware– Web sitesWeb sites

Part Two: Part Two: The Basics of Computer The Basics of Computer

GraphicsGraphics

Pixels, bitmaps, and other Pixels, bitmaps, and other bizarre stuff that no one bizarre stuff that no one

bothers to explainbothers to explain

Zoom-In on the PatchZoom-In on the Patch

PixelsPixels

• On a screen, the On a screen, the smallest part of an smallest part of an image is called a image is called a “pixel”“pixel”

• ““Picture Element”Picture Element”• Pixels are just Pixels are just

those squillions of those squillions of dots that make up dots that make up an on-screen an on-screen imageimage

BitmapsBitmaps

• A bitmap defines a A bitmap defines a display space and the display space and the color for each pixel in color for each pixel in that imagethat image

• If there are a lot of If there are a lot of colors in that image – colors in that image – in other words, if it is in other words, if it is a photograph – that a photograph – that bitmap will be bitmap will be HUGEHUGE

• So, before you put So, before you put that image online, you that image online, you have to compress ithave to compress it

Uhh … sure.Uhh … sure.

““LZW is a lossless compression LZW is a lossless compression algorithm and compression / algorithm and compression / decompression times are symmetric. decompression times are symmetric. LZW is a repeated-string LZW is a repeated-string compressor, it uses a data dictionary compressor, it uses a data dictionary … to represent linear sequences of … to represent linear sequences of data in the uncompressed input data in the uncompressed input stream.”stream.”

-- webreference.com-- webreference.com

GIFsGIFs

• ““Graphics Graphics Interchange Format”Interchange Format”

• Pronounced “jif,” not Pronounced “jif,” not “gif”“gif”

• ““Indexed”Indexed”• 256 colors (8 bit), but 256 colors (8 bit), but

you can only use 216you can only use 216• ““Dithering”Dithering”

Dithering?Dithering?

GIFsGIFs

• ““Lossless”Lossless”• Horizontal Horizontal

CompressionCompression• Works best for flat Works best for flat

color, sharp-edged color, sharp-edged art (stuff that looks art (stuff that looks like clip art)like clip art)

• The “finger test” or The “finger test” or the “crayon test” the “crayon test”

Other GIF factsOther GIF facts

• One of the colors One of the colors can be 100% can be 100% transparenttransparent

• GIFs can be GIFs can be animatedanimated

• The compression The compression algorithm has been algorithm has been patented by Unisyspatented by Unisys

JPEGsJPEGs

• Joint Photographic Joint Photographic Experts GroupExperts Group

• 16,777,216 colors16,777,216 colors• No transparencyNo transparency• ““Lossy”Lossy”• Variable amount of Variable amount of

compressioncompression• Give up quality for Give up quality for

size savingssize savings

JPEGsJPEGs

• Full-color (or gray-Full-color (or gray-scale) images of scale) images of real-world scenesreal-world scenes

• Doesn’t do very Doesn’t do very well on flat-color well on flat-color art (like clip art)art (like clip art)

• The “camera” testThe “camera” test

Danger – JPEG filesDanger – JPEG files

• JPEG compression JPEG compression is is alwaysalways lossy lossy

• The more times The more times you save a JPEG you save a JPEG file, the worse it file, the worse it looks, even at the looks, even at the lowest lowest compressioncompression

• You can’t “un-You can’t “un-smudge” a JPEGsmudge” a JPEG

GIFs v JPEGsGIFs v JPEGs

• GIFsGIFs– 216 Colors216 Colors– LosslessLossless– Best for flat-color Best for flat-color

artart– ““Finger Test” or Finger Test” or

crayon testcrayon test

• JPEGsJPEGs– 16,777,216 colors16,777,216 colors– LossyLossy– Best for full-color Best for full-color

images of real-images of real-world scenesworld scenes

– ““Camera Test”Camera Test”

GIF or JPEG?GIF or JPEG?

GIF or JPEG?GIF or JPEG?

GIF or JPEG?GIF or JPEG?

GIF or JPEG?GIF or JPEG?

Part Three: Part Three: Seven Basic Design Rules Seven Basic Design Rules

More stuff no one ever bothers More stuff no one ever bothers to tell youto tell you

Rule #1:Rule #1:Size Matters!Size Matters!

Try to keep your images small – Try to keep your images small – both in actual size and file size both in actual size and file size – so that they will load quicker– so that they will load quicker

Rule #2:Rule #2:30/3030/30

Try to keep the total size of Try to keep the total size of your pages to under 30 your pages to under 30

kilobytes so they will load in kilobytes so they will load in under 30 secondsunder 30 seconds

Rule #3:Rule #3:760 Pixels760 Pixels

Never create images larger than Never create images larger than 760 pixels wide760 pixels wide

Rule #4:Rule #4:72 Pixels Per Inch72 Pixels Per Inch

The standard resolution for The standard resolution for Web graphics is 72 pixels per Web graphics is 72 pixels per

inchinch

Rule #5:Rule #5:Always Set Width and HeightAlways Set Width and Height

When you insert your image When you insert your image into your HTML, add Width= into your HTML, add Width= and Height= attributes to the and Height= attributes to the

img tagimg tag

Rule #6:Rule #6:Never Stretch Width and HeightNever Stretch Width and Height

Never use the Width= and Never use the Width= and Height= attributes to resize an Height= attributes to resize an

imageimage

Rule #7:Rule #7:Always Add an Alt=Always Add an Alt=

Always use the alt= attribute in Always use the alt= attribute in the image tag to describe your the image tag to describe your

imageimage

Part Four: Part Four: Let’s Make Some Graphics! Let’s Make Some Graphics!

A quick demo of Macromedia A quick demo of Macromedia FireworksFireworks

Getting your own copyGetting your own copy

• Free 30 day trial at Free 30 day trial at macromedia.commacromedia.com

• Fireworks’ street price Fireworks’ street price is $299is $299

• DW/FW is $449DW/FW is $449• BUT, Macromedia has BUT, Macromedia has

some great some great educational discountseducational discounts– FW is $99FW is $99– DW/FW is $149DW/FW is $149– Volume discounts are Volume discounts are

available tooavailable too

Part Five: Part Five: The Limitations of The Limitations of

Computer Graphics Computer Graphics

Why an on-screen image can Why an on-screen image can never look as good as the real never look as good as the real

world or even a photographworld or even a photograph

A computer only has 3 colorsA computer only has 3 colors

Red

Green

Blue

““True Color”True Color”

0 8 16 24 32

Unused (or )

Only 8 bits worth of red, green, blue intensity

Range of IntensityRange of Intensity

0 red photons

Lots and lotsof red photons

0

255

Real worldComputerDisplay

Not enough bits for photorealismNot enough bits for photorealism

Can’t match perceptionCan’t match perception

• Human perception adjusts to Human perception adjusts to surrounding areas of light and darksurrounding areas of light and dark

• People don’t view areas as one big People don’t view areas as one big chunk, they scan themchunk, they scan them

• But your image is one big chunkBut your image is one big chunk

• Moral: images with wide ranges of Moral: images with wide ranges of intensity are hardintensity are hard