* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Web Page Design, Part Two: Internet Graphics for
Survey
Document related concepts
List of 8-bit computer hardware palettes wikipedia , lookup
Waveform graphics wikipedia , lookup
Graphics processing unit wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Computer vision wikipedia , lookup
Rendering (computer graphics) wikipedia , lookup
Molecular graphics wikipedia , lookup
Stereoscopy wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Tektronix 4010 wikipedia , lookup
Framebuffer wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Stereo display wikipedia , lookup
Indexed color wikipedia , lookup
Apple II graphics wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Image editing wikipedia , lookup
Transcript
Important Information • This presentation was created (and is used with permission) by Patrick Crispen. • “Comments which pertain to our local school setup are noted in grey text” -Ed Web Page Design, Part Two: Internet Graphics for the Artistically Challenged a presentation by Patrick Douglas Crispen Our Goals ... • Discover the basics of computer graphics. • Learn seven essential design rules. • Discover some limitations of computer graphics. • DO ALL OF THIS IN ENGLISH! Part One: Where Do Computer Graphics Come From? “Borrowing” graphics • Find a Web graphic that interests you • Right-click on it (or command+click on it if you have a Mac) • Choose “Save Picture As ...” in Explorer, or “Save Image As...” in Netscape • Save the graphic on your computer Don’t Celebrate Yet ... There is this nasty thing called “copyright” that gets in the way Stuff you can legally use • Images and graphics that came from a public repository or a library whose license permits their reuse • Images and graphics you find on the Web, provided the owner gives you permission • Photographs you took yourself (and that doesn’t mean something you scanned from a book) • Graphics you made yourself that aren’t based on other works Internet graphic software • Microsoft Office – Clipart – WordArt • Scanner Software – Adobe PhotoDeluxe • Professional Software – Paintshop Pro – Adobe Photoshop – Macromedia Fireworks • Clipart – Software – Web sites Part Two: The Basics of Computer Graphics Pixels, bitmaps, and other bizarre stuff that no one bothers to explain Zoom-In on the Patch Pixels • On a screen, the smallest part of an image is called a “pixel” • “Picture Element” • Pixels are just those squillions of dots that make up an on-screen image Bitmaps • A bitmap defines a display space and the color for each pixel in that image • If there are a lot of colors in that image – in other words, if it is a photograph – that bitmap will be HUGE • So, before you put that image online, you have to compress it Note: “for using your digital camera images keep the originals intact before saving a copy as a low-resolution file for (e.g. web pages). For scanned images, the tiff or bmp formats will retain most of the quality of the original for (e.g.) quality printed copy” - Ed GIFs • “Graphics Interchange Format” • Pronounced “jif,” not “gif” • “Indexed” • 256 colors (8 bit), but you can only use 216 • “Dithering” Dithering? GIFs • “Lossless” • Horizontal Compression • Works best for flat color, sharp-edged art (stuff that looks like clip art) • The “finger test” or the “crayon test” Other GIF facts • One of the colors can be 100% transparent • GIFs can be animated • The compression algorithm has been patented by Unisys JPEGs • Joint Photographic Experts Group • 16,777,216 colors • No transparency • “Lossy” • Variable amount of compression • Give up quality for size savings JPEGs • Full-color (or grayscale) images of real-world scenes • Doesn’t do very well on flat-color art (like clip art) • The “camera” test Danger – JPEG files • JPEG compression is always lossy • The more times you save a JPEG file, the worse it looks, even at the lowest compression • You can’t “unsmudge” a JPEG GIFs v JPEGs • GIFs – 216 Colors – Lossless – Best for flat-color art – “Finger Test” or crayon test • JPEGs – 16,777,216 colors – Lossy – Best for full-color images of realworld scenes – “Camera Test” GIF or JPEG? GIF or JPEG? GIF or JPEG? GIF or JPEG? Part Three: Seven Basic Design Rules More stuff no one ever bothers to tell you Rule #1: Size Matters! Try to keep your images small – both in actual size and file size – so that they will load quicker Rule #2: 30/30 Try to keep the total size of your pages to under 30 kilobytes so they will load in under 30 seconds Rule #3: 760 Pixels Never create images larger than 760 pixels wide Rule #4: 72 Pixels Per Inch The standard resolution for Web graphics is 72 pixels per inch Rule #5: Always Set Width and Height When you insert your image into your HTML, add Width= and Height= attributes to the img tag (“if not using the auto-layout in (e.g.) the Intranet”-Ed Rule #6: Never Stretch Width and Height Never use the Width= and Height= attributes to resize an image Rule #7: Always Add an Alt= Always use the alt= attribute in the image tag to describe your image Part Four: Let’s Make Some Graphics! A quick demo of Macromedia Fireworks Getting your own copy • Free 30 day trial at macromedia.com • Fireworks’ street price is $299 • DW/FW is $449 • BUT, Macromedia has some great educational discounts – FW is $99 – DW/FW is $149 – Volume discounts are available too Part Five: The Limitations of Computer Graphics Why an on-screen image can never look as good as the real world or even a photograph A computer only has 3 colors Red Green Blue “True Color” Only 8 bits worth of red, green, blue intensity 0 Unused (or a) 8 16 24 32 Range of Intensity Lots and lots of red photons 255 Computer Display Real world 0 0 red photons Not enough bits for photorealism Can’t match perception • Human perception adjusts to surrounding areas of light and dark • People don’t view areas as one big chunk, they scan them • But your image is one big chunk • Moral: images with wide ranges of intensity are hard Fair Use Disclaimer This presentation was created following the Fair Use Guidelines for Educational Multimedia. Certain materials are included under the Fair Use exemption of the U.S. Copyright Law. Further use of these materials and this presentation is restricted.