Basic Elements of an Image

In order to understand a 2D image properly, you must learn about the basic elements that make it up.

Pixel

To begin with, we will look at the most fundamental of fundamentals—the most basic element of an image—which is the pixel, or a picture element. A pixel is a colored dot on the screen. A computer image is made up of these pixels arranged in rows and columns. See Figure 3.5 for an illustration of a pixel. No matter how big and fancy a computer image is or what has been done to it, it is all just a bunch of pixels.

Figure 3.5 A pixel is the smallest unit of a computer image—simply colored dots.

Once an image is in a computer, the maximum detail is set and cannot be increased. The image can be enlarged, and the number of pixels can be increased by a mathematical process called interpolation, which is illustrated in Figures 3.6 and 3.7, but this does not increase the detail. It simply adds extra pixels to smooth the transition between the original pixels.

Figure 3.6 Here is an area of the fish image before enlarging.

Figure 3.7 Here is the same area enlarged with pixels interpolated.

Resolution

Resolution is the number of pixels displayed (width x height) in an image. A typical computer monitor displays 75 to 90 dpi (dots per inch, the number of pixels per inch in an image). A printed image usually needs to be 300 dpi or more if it is to look good in print. Often a computer-based person requesting an image from a person used to working in print is surprised when the one-inch icon he requested is HUGE, but the image attributes still read one inch by one inch. The reason for the enormous size is that the print person saved the file at a higher dpi. Some of the most common screen resolutions are 320 x 200, 640 x 480, 800 x 600, 1,024 x 768, 1,152 x 864, and 1,280 x 1024. For example, an 800 x 600 resolution means that your screen will be 800 pixels wide (horizontal) and 600 pixels high (vertical). (See the examples in Figures 3.8, 3.9, and 3.10.)

Figure 3.8 Here is the Windows Desktop at 640 x 480 dots per inch.

Figure 3.9 Here is the Windows Desktop at 800 x 600 dots per inch.

Figure 3.10 Here is the Windows Desktop at 1024 x 768 dots per inch.

Aspect Ratio

Another important component of resolution is aspect ratio, or the ratio of the pixel’s width to the pixel’s height. Not all images are square. In 640 x 480, 800 x 600, and 1,024 x 768 mode, the aspect ratio is 1:1 or 1, meaning the pixels are perfectly square.

In 320 x 200 mode, the aspect ratio is 1.21:1 or .82, meaning the pixels are higher than they are wide. If you create an image in 320 x 200 mode and display it in 640 x 480 mode, it will appear slightly squashed, since the pixels are about 20% shorter. See Figures 3.11 and 3.12 and notice the distortion in the image.

Figure 3.11 Here is an image created at 320 x 200 dots per inch.

Figure 3.12 Here is the same image displayed in 640 x 480 mode.

Colors

When working with most interactive content, you need to understand how color works in the computer. You will need precise control over your colors in certain situations in order to achieve certain effects and accomplish some jobs. In games and Web sites, you often have to set precise color information to achieve certain effects. Often other computer artists will give you the number of a color to use in an image. An RGB value is the mixture of red, green, and blue to make other colors—like in art class when you mixed red and yellow paint to make orange.

So 255,0,0 means you have all red and no green or blue. Black would be 0,0,0, and white would be 256,256,256. In Figures 3.13 through 3.17, you can see the RGB values of the color, and (even though the images are in 0,0,0 and 256,256,256—excuse me, black and white) you can see the position of the marker in the color palette.

Figure 3.13 This is the RGB color palette for black.

Figure 3.14 This is the RGB color palette for white.

Figure 3.15 This is the RGB color palette for red.

Figure 3.16 This is the RGB color palette for yellow.

Figure 3.17 This is the RGB color palette for orange.

Note

You will also hear color referred to as CMYK. CMYK is a mode used by traditional printing processes and stands for Cyan, Magenta, Yellow, and Black. You will almost certainly never use CMYK color in game and computer content creation and will always deal in RGB or indexed color.

Number of Colors

On the CD A computer video card can display a certain number of colors at a time—16, 256, thousands, or even millions (see Figures 3.18, 3.19, 3.20, and 3.21, and see the Color Gallery in the Figures folder on the CD-ROM for the color versions of the images). The number of colors is called color depth, which describes how many colors can be displayed on your screen at once. Color depth is described in terms of bits and refers to the amount of memory used to represent a single pixel. The most common values are 8-bit, 16-bit, 24-bit, and 32-bit color. More bits correspond to a wider range of colors that can be displayed.

Figure 3.18 This is an image in 16 colors.

Figure 3.19 This is an image in 256 colors.

Figure 3.20 This is an image in thousands of colors.

Figure 3.21 This is an image in millions of colors.

True color (24-bit color) is capable of displaying 16.8 million colors for each pixel on the screen at the same time. The human eye cannot distinguish the difference between that many colors. High color displays only 32,000 or 64,000 colors, but it is still a very impressive range of colors, enough colors for most work. The most limited in colors is 256 color. It stores its color information in a palette. Each palette can be set to any of thousands or millions of different color values, but the screen can’t show more than 256 different colors at once. Some games still use it because, like resolution, more colors means more data pumped to the screen. So if you can get away with only 256 colors, you can render (or draw) the game pictures to the screen faster. More recently, games are starting to use thousands of colors as the hardware permits.

Note

The word render is used in games, especially real-time 3D games, as the computer and software literally renders or builds an image instantly, based on where you are in the 3D world. Hence the term interactive. In a movie, you watch each frame as it was created by the moviemaker. The frame is unchangeable. In a 3D game, you control how each frame looks by where you choose to go in the world and what you do. Each frame of your gaming experience is made for you on-the-fly, or as your experience is happening.

256-Color Palettes Explained

Hopefully, you will never need to know this, but here it goes. Each pixel can have a numerical value from 0 to 255 (a total of 256!). The screen knows only where to get the color from, but it does not know the color. Figure 3.22 shows the 256-color palette.

Figure 3.22 A 256-color palette. You can see only shades of gray here, but those squares are 256 different colors.

So follow me here. Say you have a picture, and you open the color palette to have a look. If you note that a certain color is assigned to the number 3 place on the color palette and then decide to reassign another color to the number 3 position, your image will now display that new color where the original color used to be.

Even if you have that original color in the palette, it will not be displayed where the number 3 position is being displayed. What this means is that a computer can’t distinguish color; it sees numbers. You will have to be aware of this for later tutorials. In Figures 3.23 and 3.24, you can see how the changing of one color affects the image.

Figure 3.23 This is a 256-color image.

Figure 3.24 This is the same image after changing the palette colors. The computer sees the number, not the color.

Now that we understand the basics of images, we can move onto the basics of manipulating images.