Graphics and Web Design
|
|
|
What are Graphics and How can I use
them in my Web Sites? |
|
Instructor: Ray Merry, www.raymerry.com, Email: ray@raymerry.com |
|
Web Design Class Home
www.raymerry.com/classes/FrontPage |
What are Graphics
|
|
|
Photos, Drawings, Logos, Cartoons,
Text, Backgrounds, Themes…. |
|
Moving Graphics: Animated Stills, Videos |
Characteristics or
Properties of Graphics
|
|
|
Graphics have color |
|
Color is described by our attempts to
replace the original |
|
Our copies are incomplete |
|
Copies use less color and less dots |
Dithering
|
|
|
Replacing colors with combinations of
colors from the palette to approximate them. |
|
Dithering used in images in papers |
|
Look at image and see the combination
of black and white that look gray from a distance |
In the Past Graphics were
Analogue
|
|
|
Analogue resolution depended on
graininess of film, quality of paper and lens, etc. |
|
But Color was continuous, not discrete. |
|
Example: a ramp is continuous a
stairway is discrete |
|
Now Graphics are usually digital |
Graphic Constraints
depend on input and output medium
|
|
|
Digital cameras are limited from
300x200 pixels up to Millions of Pixels. |
|
PC Monitors are limited in resolution
(72-75 dpi (dots per inch) |
|
Printers are limited to 160-1440 DPI
for inkjet printers, higher for high quality line printers |
|
There are no dots in nature except on a
molecular level. |
Aliasing and
Anti-Aliasing
|
|
|
Aliasing is Jaggedness around edges |
|
Anti Aliasing.. Smoothing Jaggys with
color or shading |
Pixels and Resolution and
PC’s
|
|
|
Monitor, and Video Card combined with
the OS give us a maximum resolution |
|
In Win XX Right click desktop, go to
properties, settings |
|
Standard VGA: 640 x 480 Pixels |
|
Newer PC’s (XGA,…) 800 x 600 Pixels |
|
Higher and Higher 1020 x 760, 1200…… |
What does this have to do
with my Web Page?
|
|
|
If the Image is too Large User Must
Scroll |
|
Web Users Can Leave your site! |
|
Make their trip pleasant |
How can I design for
different Resolutions?
|
|
|
Design for one in the middle |
|
Design for most popular |
|
Have different designs for different
Browsers and Resolutions |
What Should I use to
start?
|
|
|
Standard based now on 800 x 600, take away edges, top, sides of
software:
Leaves about 600 x 400pixels |
|
Can vary somewhat with type of photo.
Leave a max of 600 wide |
|
Max of 400 high |
How do pixels relate to
Graphics?
|
|
|
Dots Per Inch…. Or Pixels Per Inch. |
|
Use of Graphic determines resolution |
|
Higher Resolution requires more space,
more speed, more power in Display, Printer, or Paper, as well as storage
space. |
Palettes:
|
|
|
Only certain steps of the infinite
variation of colors are available on PC’s |
|
216 colors (Netscape) 256 IE, 65,256
(16 bit) or 16,777,216 (24 Bit) |
PC Graphic Types
|
|
|
First PC Graphics Files were
proprietary |
|
Standards such as PCX and TIF emerged |
|
Both were large and possibly short on
color, but not lossy! |
|
Then compressed files arose to save
space and time. |
Image Compression
|
|
|
Image Compression saves space |
|
Image Compression saves time of
download |
|
TIF or PCX File may be 200,000 bytes,
requires 2 minutes to download |
|
Same JPG may be 30,000 bytes and
download in 1/7 th the Time! |
Common Graphic File Types
|
|
|
|
Compressed Bitmaps: Gif, JPG, PNG |
|
Non Compressed or lightly: TIF, PCX,
BMP |
|
Advanced Bitmaps With Layers |
|
Photoshop PSD |
|
Corel PhotoPaint |
|
Vector Graphics.. Mathematical, not
bitmapped |
GIF Files
|
|
|
GIF Non Lossy, |
|
Can be transparent |
|
Can be animated (multiple images in
one). |
|
Based on 256 colors, |
|
If more than 256 colors image must be
dithered before saving! |
JPG Files
|
|
|
Lossy |
|
Varying levels of compression and
resultant loss |
|
No transparency |
|
RGB based… Best for photos |
PNG Files
|
|
|
New type of graphic |
|
Not widely used |
Other types of Graphics
|
|
|
Vector Graphics |
|
Bitmapped |
|
Converting |
|
Layers, etc in proprietary files |
Graphic Rules
|
|
|
Make Graphics JPG’s for Photos |
|
Make Graphics GIFs for Black and White
or Images with few colors |
|
Keep Image Size to less than 50K for
all graphics on the whole page! |
|
If high res photos are needed show
Thumbnail, then allow user to wait |
|
Use alternate pages, click here for
FLASH, or Click here for High Speed Users… |
Hexadecimal and Color
|
|
|
Since the PC is binary we represent
everything digitally. |
|
Hexadecimal is a shorthand for binary
which is based on the number 16 |
|
Hexadecimal numbers go from 1 to 9,
then A-F (F=15) |
|
Hex is used on the PC to represent
colors |
Colors go from oo to FF
(16 steps)
|
|
|
Colors are made of Red Green and Blue,
the primary colors |
|
The hex double digit number for each is
placed in it’s respective order |
|
00, 00, 00 means 0 red, 0 green and 0
Blue or black! |
|
FF means max red, FF00FF means max red, 0 green max Blue,
etc |
|
With the Netscape Palette only values
of 00, 33, 66, 99, CC, and FF are allowed |
|
Any color is combination of these
values in the primaries |
Exercise 1
|
|
|
Find a web site with graphics, Time the
download of a page in seconds. |
|
Repeat for another site, find one that
takes longer than 15 seconds |
|
Did you like waiting? Why or why not? |
|
Right click a graphic and find out its
type and size |
Exercise 2
|
|
|
Download a graphic |
|
Place the graphic in a HTML file that
you created. |
|
Use the simple source: <img
src=“myfile.ext"> |
|
Where myfile.ext is the path and file
name plus extension of the graphic. |
Return to Front Page
Site:
|
|
|
Web Design Class Home |
|
http://www.raymerry.com/classes/FrontPage |