Transcript Web Page Design, Part Two: Internet Graphics for the

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.