Create Your Own Backgrounds— For the Artistically Challenged Ellen Finkelstein.
Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.
-
Upload
alaina-fletcher -
Category
Documents
-
view
215 -
download
0
Transcript of Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.
![Page 1: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/1.jpg)
Web Page Design, Part Two:Web Page Design, Part Two:Internet Graphics for the Internet Graphics for the Artistically Challenged Artistically Challenged
![Page 2: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/2.jpg)
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 ...
![Page 3: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/3.jpg)
““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
![Page 4: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/4.jpg)
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
![Page 5: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/5.jpg)
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
![Page 6: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/6.jpg)
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
![Page 7: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/7.jpg)
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
![Page 8: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/8.jpg)
![Page 9: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/9.jpg)
Zoom-In on the PatchZoom-In on the Patch
![Page 10: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/10.jpg)
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
![Page 11: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/11.jpg)
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
![Page 12: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/12.jpg)
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
![Page 13: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/13.jpg)
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”
![Page 14: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/14.jpg)
Dithering?Dithering?
![Page 15: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/15.jpg)
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”
![Page 16: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/16.jpg)
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
![Page 17: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/17.jpg)
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
![Page 18: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/18.jpg)
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
![Page 19: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/19.jpg)
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
![Page 20: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/20.jpg)
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”
![Page 21: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/21.jpg)
GIF or JPEG?GIF or JPEG?
![Page 22: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/22.jpg)
GIF or JPEG?GIF or JPEG?
![Page 23: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/23.jpg)
GIF or JPEG?GIF or JPEG?
![Page 24: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/24.jpg)
GIF or JPEG?GIF or JPEG?
![Page 25: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/25.jpg)
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
![Page 26: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/26.jpg)
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
![Page 27: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/27.jpg)
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
![Page 28: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/28.jpg)
Rule #3:Rule #3:760 Pixels760 Pixels
Never create images larger than Never create images larger than 760 pixels wide760 pixels wide
![Page 29: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/29.jpg)
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
![Page 30: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/30.jpg)
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
![Page 31: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/31.jpg)
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
![Page 32: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/32.jpg)
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
![Page 33: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/33.jpg)
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
![Page 34: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/34.jpg)
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
![Page 35: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/35.jpg)
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
![Page 36: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/36.jpg)
A computer only has 3 colorsA computer only has 3 colors
Red
Green
Blue
![Page 37: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/37.jpg)
““True Color”True Color”
0 8 16 24 32
Unused (or )
Only 8 bits worth of red, green, blue intensity
![Page 38: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/38.jpg)
Range of IntensityRange of Intensity
0 red photons
Lots and lotsof red photons
0
255
Real worldComputerDisplay
![Page 39: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/39.jpg)
Not enough bits for photorealismNot enough bits for photorealism
![Page 40: Web Page Design, Part Two: Internet Graphics for the Artistically Challenged.](https://reader030.fdocuments.net/reader030/viewer/2022032708/56649e7f5503460f94b82fb8/html5/thumbnails/40.jpg)
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