|
|
|
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 |
|
|
|
|
Photos, Drawings, Logos, Cartoons, Text,
Backgrounds, Themes…. |
|
Moving Graphics: Animated Stills, Videos |
|
|
|
|
Graphics have color |
|
Color is described by our attempts to replace
the original |
|
Our copies are incomplete |
|
Copies use less color and less dots |
|
|
|
|
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 |
|
|
|
|
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 |
|
|
|
|
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 is Jaggedness around edges |
|
Anti Aliasing.. Smoothing Jaggys with color or
shading |
|
|
|
|
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…… |
|
|
|
|
If the Image is too Large User Must Scroll |
|
Web Users Can Leave your site! |
|
Make their trip pleasant |
|
|
|
|
Design for one in the middle |
|
Design for most popular |
|
Have different designs for different Browsers
and Resolutions |
|
|
|
|
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 |
|
|
|
|
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. |
|
|
|
|
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) |
|
|
|
|
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 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! |
|
|
|
|
|
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 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! |
|
|
|
|
Lossy |
|
Varying levels of compression and resultant loss |
|
No transparency |
|
RGB based… Best for photos |
|
|
|
|
New type of graphic |
|
Not widely used |
|
|
|
|
Vector Graphics |
|
Bitmapped |
|
Converting |
|
Layers, etc in proprietary files |
|
|
|
|
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… |
|
|
|
|
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 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 |
|
|
|
|
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 |
|
|
|
|
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. |
|
|
|
|
Web Design Class Home |
|
http://www.raymerry.com/classes/FrontPage |
|
Notes
