Computer Art 101. Introductory Basics

Before you get started with computer graphics, you may want to take a good look at the basics under each and every image. I wish someone had shared these issues with me years ago when I was starting. Below is a list is what we will cover here. I suggest you read and experience the following before going on to our other segments and lessons. Here, we will cover;

What is a pixel?
Image size
Resolution
File Size
File Types
What is a Mega Pixel?

What is a pixel?

All images you see on the internet are made up of pixels. A pixel is defined as, “the smallest picture element.”

You can think of a pixel as one of many little squares in your picture.

Pixels are coded with color. Each color is represented by a number. These are called RGB values. Red, Green and Blue. To come up with 16.7 million colors, RGB values use 255 numbers to assign a value.

This would mean, no red, no green, no blue. This is the absence of color, or perfect Black.

Example

Red = 255
Green = 255
Blue = 255

Hexadecimal values are made up of a base 16 system. We are used to a base 10 system.

Base 10 means we have 0 , 1,2,3,4,5,6,7,8,9.

Nine is the highest value.

Hexadecimals use 16 numbers, but because there are no numbers higher than 9, this systems uses letters after running out of numbers.

Base 16 means the following values are used;

0,1,2,3,4,5,6,7,8,9, a,b,c,d,e,f

In this system, F is the highest value. It would be as strong and powerful as 9 in the base ten system.

Hexadecimal values are used to assign colors to web pages and images. The values are displayed using six values. A pair of values for Red, a pair of values for Green and a pair of values for Blue. The total value would look like this;

00 00 00 or FF FF FF

00 00 00

would mean, no red, no green no blue, this would be perfect Black.

FF FF FF

would mean full red, full green, and full blue, the would represent perfect white.

So Who Cares About Numbers and Color Values?

Millions of graphic designers do. They must keep their colors consistent. If you look at the background color of this web page, notice that it is green. But there are about 300,000 shades of green. Which green is the color of this web page?

This web page color value is 33 99 99. I use this one color for many of my web page background colors.

More importantly, think of your favorite cartoon characters. They must be the same color for every show. The people that draw and animate the characters all know the color values of each character to that the character can be the same color in each episode.

Image Size. How Big is the Image?

Most of the time, an image is measured in inches, or pixels. An image may be 5 inches wide by 5 inches tall. Inches are usually used for designers that are working on images for print purposes. If an image is going into a newspaper or magazine, the designer will work in inches.

If a designer is a web site designer, they will set up the image size in pixels. For example, they may make an image 400 pixels wide and 400 pixels high.

Resolution

In almost every graphics application, when you create a new file, the program ask you what resolution would you like to use. Let’s talk about resolution.

Resolution means, “How many pixels will be in each inch of the image.” There are two basic standards used to set resolution. The two basic standards are based upon where will the image be used. Will it be used in print (newspaper, magazine, poster, brochure), or will it be used in web development (web site pages).

Here is the basic rule of thumb. If you are working on a print job, set resolution at 300 dpi (dots per linier inch). This means that for every inch in the image, there are 300 little squares, of course those squares are called pixels.

The more pixels per inch, the more defined the image is.

When working on an image for a web page, the rule of thumb is 72 dpi ( dots per linier inch).

72 dpi is not as defined as 300 dpi ( in other words not as clear, not as beautiful).

The thing is, the higher the dpi, the larger the “file size” of the image. So now, lets talk about file size.

File Size, How much space on your computer will it take to save and store the image?

Think about this. If you have an image that is 5 inches by 5 inches at 300 dots per inch (dpi), then, your computer has to look at the color values (rgb or hexadecimal) and assign that color to each and every pixel in the picture. If you set dpi to 72, then, your computer has to do one third of the work

.

When I put images on my website, I try to keep the file size below 50 k (kilobytes). This lets the image load quickly on your machine when you visit my website.

If I put images on my web site that are bigger than this, then the images load more slowly and some users get sick of waiting and leave my web site because the images where loading so slowly.

File Types

File types are mathematical formulas that help the computer read the colors in the file. There are hundreds of file types. I’m only going to talk about four of them. I would say that these are the ones to pay attention to.

Tiff - Tagged Image File Format
Gif - Graphic interchange format
Jpeg - Joint Photographer’s Expert Group
Png - Portable Network Graphic

In every graphics application, when you save your file, the program ask you, “What file format would you like to save this as?”

In the land of print work, most designers will use the Tiff file format. They will create a Tiff file and save it at 300dpi. The Tiff file is a big file format. These files can be well above 120 megabytes ( that’s more than 100 diskettes of information in the image).

This will make a beautiful image, but if you put that on the internet, it is going to load real, real slow. It’s too big for the net.

In the land of web work, designers will use one of 3 file formats. The Gif, the Jpeg, or the Png. This are the only file formats you can put on a web page. Internet Explorer, Netscape and other web browsers don’t understand the math behind other file formats.

Below are the very basic differences between the three file formats.

The Gif File

You know that the eye can see 16.7 million colors. Well if you take a picture with all of those colors and you want to put it on the internet, the file size will be huge.

To lower the file size, the Gif file only uses 256 total colors. The image doesn’t look as good, but the file size is very low.

The Jpeg File

The Jpeg file uses 16.7 million colors, but to make the image small enough to get on a web page, the Jpeg file automatically throws millions of colors away to make the file size smaller. This is called , “lossy compression.”

If you have a digital camera, and you are serious about your images, then save your files in your camera as a Tiff or Raw Data File. Then if you need to put the image on the net, convert the image to a Jpeg or Gif.

The Png File

The Png file is kind of like a gif jpeg combo. You can have a png file that uses 256 colors, similar to a Gif file, or you can create a png file that uses 16.7 million colors.

The Png file is from Macro Media. If you use Fireworks, and image manipulation program from Macro Media, when you open a new file, by default, it is a png file.

Png files are usually much larger than gifs or jpegs. Personally, I don’t use them. That doesn’t mean that you shouldn’t. I just don’t use them.

For You Digital Camera Users, What is a Mega Pixel?

For those of you that use digital cameras, and that is about everyone these days, you will constantly here the term ,”mega pixel.” What the heck is a mega pixel?

Mega Pixel means one million pixels. If you have a camera that is a 3 mega pixel camera, that means that when you take a picture, your camera is bringing in 3 million pixels into your camera. If you have a 5 mega pixel camera, when you take a picture, your camera is bringing in 5 million pixels.

The more mega pixels, the better the image looks. Professional photographers have cameras that bring in 16 million pixels. These cameras cost a lot of money.

Most cameras costing 500 dollars will give you about 6 mega pixels or more.

Summary.

Above is a basic discussion of color, file size, file types and pixels. I perform presentations and teacher in-services that go in depth into each an every concept.

I wish that someone had sat me down and shared these concepts with me when I started working with computer graphics some 15 years ago.