Graphics Introductory Background Concepts
We'll start with some underlying terms and ideas before we begin exploring graphics software. Every graphic will be considered a rectangular array of colored (perhaps with shades of gray only) points. This array can be displayed on a screen or printed.
Video monitor types and wiring
- Understanding computer graphics requires some knowledge of the computer
monitors (screens) and video circuit boards used to view (and create) graphics.
Monitors come in different sizes and resolutions. Their capabilities are also
affected by the video circuit (video card) that feeds the video signal to
them.
|
Most devices feeding signals to ordinary TVs use composite video. In this system a single varying voltage is sent to the TV that determines the chroma (color value) and luminance (brightness) being displayed at a particular screen point (pixel). A mathematical function is used to encode a mix of these two and the TV decodes the signal and splits it back into chroma and luminance. The process looses a bit of precision in both chroma and luminance. This type of "plug" is called an RCA plug. |
|
 |
A more sophisticated (higher quality) system is S-Video. In this system, two voltages are sent with one carrying chroma and one carrying a luminance (brightness) value. (In the example at left it is a bit hard to see the 4 pins. Each signal takes two pins (signal and ground.) Surprise -- this type of plug is called an S-Video plug. VCR's, DVD decks and TV's that support this can do higher quality video than composite video. |
|
The TV paints the screen in a series of lines across the screen. Very
high-end televisions and all computer monitors use an even more complex system called
component video. In this design, three independent voltages supply a red,
a green, and a blue signal (or , in some cases, yellow, magenta, and cyan).
This produces a much sharper and finer image. The video circuitry figures
out the voltages for us. In a computer, this circuitry is called the video
card. We think of the screen the way it is represented in the video card. The connectors for component video can either be 3 or 4 RCA jacks (like the one pictured above left) or a single plug with (usually) 15 pins, like you see on your computer. Some high-end monitors use a fully digitital input signal. These connections are usually single plug many-pinned connectors. This type of connection is termed DVI.
Pixel Count
- The screen, for us, is made up of rows and columns of pixels
(short for picture elements). Each pixel can display some number of colors.
For example, a 800x600 monitor displays 800 pixels across each of 600 horizontal
rows. Monitor images range from 640x480 to 2800x2000. Common sizes include
1024x768, and 1400x900. Multiscan monitors (and associated video cards)
can operate at several of the above choices.
Most laptops and flat panel displays have one or a small number of choices that look sharp. Other settings are possible but fuzzy.
-
Resolution
- The number of dots per inch (dpi) is called the resolution. A common
resolution is 72 dpi. Some monitors can show a higher resolution, but characters
will appear smaller than on a 72 dpi screen. Click
here for a longer discussion and examples. Printers typically have much higher resolutions ranging from 300 dpi to over 2500 dpi used in glossy magazine publishing. We will consider resoliution issues at varioous points in the course. A digital camera packs a very large number of dots per inch on its sensor. So does a film or negative scanner (often up to 4000 dpi). You need that very high resolution to enlarge aqn image from the original size of the film to, say, an 8"x10" print and still retain sharpness. In many cases, you will control the resolution of your working image with the final output device (screen or printer) determining the proper resolution.l
Color Depth
- A certain number of bits are used to code the color at each pixel.
For example, if 8 bits (1 byte) are used for each pixel, the monitor can
display 256 possible colors at any given point. If 4 bits are used, only
16 colors can simultaneously be displayed. High quality systems use 24
bit color with a choice of 16.8 million colors. Note that the computer
has to manage a very large number of bits to produce a screen. For example,
a 1600x1200 monitor with 24 bit color uses 5.76 million bytes! The particular
set of 256 (or 16) colors in use at any time form what is called a palette.
It is often possible to change the palette in software. Some software, including Photoshop, can process 48 bit graphic images. Most monitors, though, only show you the graphic in a 24 bit view.
Performance and Cost
- As with most things, better video systems cost more. Some things that
make a system better include: monitor dot pitch (down to what size can
you distinguish one dot from another (look for .28 or lower), size (ranging
from 14" diagonal to 30"), color saturation, pixel count possibilities,
and refresh rate (how often it redraws the screen). Refresh rates vary
from around 50 to 80 hz (cycles per second). The video card in the computer
plays an important role in determining capability and cost. You can buy
specialized video cards to get higher pixel counts, more color depth and
accelerated updates of the video memory (VRAM) used to represent images.
Such cards range in price from under $100 to thousands of dollars.
Graphic Color Coding Systems
Computer graphics can be classified a number of ways. The first
characteristic is how numbers are associated with colors. We'll look at other fundamental characteristics later. Here, we'll just examine numbering systems. If everything in a computer is coded as numbers, how do we deal with color?
Indexed vs RGB color systems vs CMYK systems
Indexed systems associate one number with each color in the palatte of
all colors that are available. Paint stores use indexed systems. A clerk in one store can call another and ask if they have color number 753. This is an example of coding colors by numbers in an indexed system. They can have
millions of choices in the system. If you numbered every crayon of a box of
crayons, you would be creating an index system. One example of an indexed coloring
system that is commonly used on the world wide web is called GIF (Graphics Interchange
Format). GIF format uses an index system that is limited to at most 8 bits per
color. This means there are no more than 256 colors in a GIF palatte. Click
here to go to a page with more information about GIF format. Other computer indexed systems (like Pantone) uses thousands of colors.
RGB systems use another method to associate numbers with colors. In an RGB
system, there are 3 numbers associated with each color. One number represents
the Red amount, another the Green, and a third the Blue.
(So red, green, and blue are called primry colors.). The actual color that these
form is a mix of these three primary colors. The numbers represent the saturation
level of each of the primaries. The total number of possible colors that can
be formed is the product of the number of red levels, the number of green levels,
and the number of blue levels. One example of an RGB system is JPEG. Click
here for details about JPEG. There are many other RGB systems in use besides JPEG, however. Some variations include Adobe RGB and a system called sRGB. Much color work uses a 24 bit system with 8 bits to encode the red number, 8 bits to encode the green number and 8 bits to encode the blue number. But there are also systems that use 14 bits for each of these or 16 bits for each. The more bits you use, the more different colors you can encode. But the numbers get huge. A 16 bit system can encode 2^24 = 16,777,216 colors. And a 48 bit system (Photsohop can do this) with 16 bits for each of Red, Green, and Blue, can code 2^48 = 281,474,976,710,656 colors! (That's over 281 trillion colors.)
There are other systems for associating numbers with colors. One popular one
for print materials is CMYK. It is frequently used in desk-top publishing. It
is not commonly used for screen graphics. Screen graphics are invariably Indexed
or RGB. CMYK uses 4 numbers for coding the amount of Cyan, Magenta, Yellow, and Black needed to form a color. You can use 8 bits for cyan, 8 for magenta, 8 for yellow, and 8 for black or more bits for each.
The main thing you need to know is that these are all different systems for associating numbers with colors. This stands at the heart of coding the colors we see and want to show into something the computer can deal with. Remember, we started the course with the idea that our digital age is driven by the idea of encoding everything as numbers. We now see three fundamentally different ways of doing this. One (indexed) uses a single number for each color. RGB uses 3 numbers for each color. CMYK uses 4 numbers for each color.
Origins of some of these different systems -- A Touch of color theory - CMYK vs RGB
So why are there several different color coding systems? Having some systems that just index colors and others that represent mixing primaries makes sense, but why different ways to mix primaries? In particular, why do we use both RGB and CMYK? This has to do with the origins of these systems and a little physics. The main factor, which we don't often think about, is that sometimes we look at something like a printed page or object in which case the light we see is reflected off the object to our eyes and sometimes we look at color, like on a screen, where the color is beding emitted or sent straight to our eyes rather than bouncing or reflecting. Light that reflects off a surface is having colors subtracted from it.
White light from the sun or a bulb is a full mix of red, green, and blue.
In general, CMYK is used for color coding graphics that are viewed with reflected light. For example, you view a printout with reflected light. (The light goes from, say, a bulb to the paper and reflects back to your eyes. The dyes that we think of as forming the colors actually subtract (do not reflect) certain frequencies of light and reflect others. Thus they are called subtractive systems. C is for Cyan; M is for Magenta, and Y is for Yellow. K -- I'll get to that one.
Cyan absorbs red only. It thus reflects green and blue. When these mix, they form the color we call Cyan. Magenta absorbs green and, you guessed it - Yellow absorbs blue. Thus CMYK is still all about Red, Green and Blue. But what's the K? In theory, to print a black paper, which should absorb all red, green, and blue, you should be able to mix full cyan, full magenta, and full yellow dyes on the paper. But if you do, it looks muddy gray, not black. But humans are very perceptive of the finer shades of black. Witness our ability to distinguish different "blacks" in clothes. So in printing, we usually include a cartridge with deep india black ink. This is what the K means. We mix cyan, magenta, yellow, and black to form rich printed colors. There -- and in our work we'll pretty much always use RGB. In the illustration below, white light (red, green, and blue light) hits paper with cyan dye in the upper left, magenta upper center, yellow upper center. So in the upper left, the red arrow goes down, but doesn't bounce up like the green and the blue. So whehn we look at the paper we don't have the red coming into our eye. Only the green and blue. So we see cyan. See if you can sort out the others in the first row. In the second row, each example has two dyes (magenta and yellow on the left, etc.) See if you understand what that row tells you. In each, two colors are not reflected so we jsut see a primary. Ask in Blackboard if you are confused. This diagram comes from a good site about this (RGB World).
The RGB system, on the other hand, is used with things like screens that start black and emit light in various mixes. This is called an addative system. We add part red, part green, and part blue to form any color. White is a full blast of all three. Black is formed by emitting none of them at all. So our coloor numbering sytems tell what to mix by the numbers.
Note that these systems are for associating numbers with colors. When applied
to a bit-mapped graphic, each pixel then, with a color, has one or more numbers
associated with it specifying the color.
-
-
-
-
-
-
.
