Training - Glossary, HW & SW for starting web and graphic work
HTML Color Lesson
This is a training document for new web developers (so if you are very technical please excuse any misgivings over lpi/dpi and such).Lesson glossary:
TWAIN
a special driver used to handle multiple scanners and digital cameras, which allows many programs such as word processors, paint, and presentation programs to take scanned images. This doesn't apply to live video.
WIA
the alternative to TWAIN for XP and other up-to-date OS's. sometimes it works better, sometimes it doesn't.
These are color systems.
RGB (Red-Green-Blue) is "additive" color and is used for light-emitting devices like computer monitors. RGB is best visualized as a cube, with red brightness as x axis, green on y axis, and blue on z axis, with the (0,0,0) point being black and (1,1,1) being white, and the color you pick is somewhere inside the cube. TV's, however, use
HLS/YUV (Luminance/Lightness, Chrominance/Tint/Hue, Saturation). For better visualization of these concepts, see these pages: pictures, text, equations, & FAQ (Frequently Asked Questions) , better pictures. HLS can be visualized as 2 cones end-to-end to look like a diamond. Looking at the side, from the center out radially to the outside ring is Saturation. Lightness is from bottom to top. Hue is the angle you pick on the ring (looking down from the top). On the image below, the top and side view are combined. The ring is the top view. The square is the side view, where left-to-right is saturation and down-to-up is lightness. If you were to drop the Chroma (Hue) and Saturation, you would have black and white TV (see the black-to-white edge which is Luminance on the Saturation-Luminance square).

CMYK (Cyan Magenta Yellow Black) is used for printing presses and other light-reflecting mediums such as house paint or ink.
Your ink jet printer probably uses subtractive colors like CMYK for output, but the printer driver converts from RGB automatically. On a color wheel, CMY is a 45-degree rotation from RGB. Red is Yellow + Magenta.
Because imperfections in CMY ink and paint accuracy, it doesn't produce a perfect black in print - it produces brown. Black is added to compensate (I think I have this correct).

RGB (Red-Green-Blue) is "additive" color and is used for light-emitting devices like computer monitors. RGB is best visualized as a cube, with red brightness as x axis, green on y axis, and blue on z axis, with the (0,0,0) point being black and (1,1,1) being white, and the color you pick is somewhere inside the cube. TV's, however, use
HLS/YUV (Luminance/Lightness, Chrominance/Tint/Hue, Saturation). For better visualization of these concepts, see these pages: pictures, text, equations, & FAQ (Frequently Asked Questions) , better pictures. HLS can be visualized as 2 cones end-to-end to look like a diamond. Looking at the side, from the center out radially to the outside ring is Saturation. Lightness is from bottom to top. Hue is the angle you pick on the ring (looking down from the top). On the image below, the top and side view are combined. The ring is the top view. The square is the side view, where left-to-right is saturation and down-to-up is lightness. If you were to drop the Chroma (Hue) and Saturation, you would have black and white TV (see the black-to-white edge which is Luminance on the Saturation-Luminance square).

CMYK (Cyan Magenta Yellow Black) is used for printing presses and other light-reflecting mediums such as house paint or ink.
Your ink jet printer probably uses subtractive colors like CMYK for output, but the printer driver converts from RGB automatically. On a color wheel, CMY is a 45-degree rotation from RGB. Red is Yellow + Magenta.
Because imperfections in CMY ink and paint accuracy, it doesn't produce a perfect black in print - it produces brown. Black is added to compensate (I think I have this correct).

4-color process
CMYK is called a 4-color process (a printing term).
If you look on the bottom flaps of a cereal box you will see how many colors they use in their process.
Newer quality color printers use a 6-color process.
Your cereal box probably contains 3 to 8. Here is an example with 5.


24/32/36/48-bit color
(aka TRUE COLOR). 8 bits (256 shades) for
Red, 8 bits for Green, and 8 bits for Blue.
HI-COLOR(16-bit color). This is the largest color-palette based scheme. Sometimes,
however, it is rather arranged as some other scheme like 5-bit red 6-bit green 5-bit blue (565) and there would be no color palette.
resolution
same as
DPI.
dpi
dots per inch. higher DPI like 600-1200 is good for
blowing up very small photographs. lower DPI like 72 is best for sending
pictures in email. LPI is used for halftone print ("screening") and is a somewhat similar concept, but uses varying sizes of diamonds of black or other colors.
GIF
(.GIF files) a lossless-compression image
file format. lossless is a great plus, but GIFs have very few colors (256
colors). most photos have 5,000-60,000 colors, so you don't usually use GIF for photos. sharp edges in a picture
(such as computer text or lines or boxes) stay sharp. Therefore GIFs are
good for graphs, lines and text, or hand-drawn color graphics. Unlike JPEG
format, you can assign 1 color in the palette of 256 to be transparent
(see-through to whatever is behind the image). When you export/save the
image to disk, pick "Compuserve GIF" as the file type, and an "options" button
will let you work with color & transparencies.
JPEG
(.JPG or .JPE
files) a lossy compression method and file format. You choose the amount
of compression, usually in the "options" button when you export/save the image
to JPEG format. Setting the compression to mid-scale should give the best
bang for the buck. JPEG has no color palette. It is plain 24-bit
color. I get best compression & image quality at 26 on Paint Shop Pro. Your image editor may vary.
PNG
Portable Network Graphics, another image file
format. Images usually come out bigger, but there are lots of
options. PNG supports both 24-bit color and 256-color palettes, but I think there is an option of supporting larger palettes for hi-color.
A palette optimizer can be run on the 24-bit color and get perfect output, but 2× the size of a JPEG. PNG also supports alpha channels.
It is the default save format for Macromedia's Fireworks.
MNG
Multiple Network Graphics, an animated PNG. Images usually come out bigger, but there are lots of
options. PNG supports both 24-bit color and 256-color palettes, but I think there is an option of supporting larger palettes for hi-color.
A palette optimizer can be run on the 24-bit color and get perfect output, but 2× the size of a JPEG. Since PNG also supports alpha channels I would think MNG does too.
Macromedia Fireworks does not support this format yet because it is not yet an industry standard.
Rules of images on the web or in email: image sizes
smaller than 20K are best. 10K is more reasonable.
Tricks of the
trade: very light pastel colors (washed out colors) are/were very popular for web
background colors. this can be achieved by using 2 layers, the image on the back layer, and a white layer in foreground, screen, opacity 75-80%.
Tip: You can use your paint program's HLS/HSV color
picker to pick the Lightness and Saturation that fits for pastel colors, then when you want different color of the same shade, just pick a different Hue on the ring.