Post on 29-Dec-2015
transcript
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