 |
Graphics Concepts
|
In this lesson, we share some basic concepts that will help you understand and use lessons in this tutorial. We suggest you skim this section and revisit it as needed.
This lesson includes information on:
Getting Digital - the preferred format for computer graphics
Size - image size vs. file size and why size matters
File Formats - the most common file formats and conversion techniques
Resolution - an important aspect that affects image quality and file size
Color - another important aspect that affects image quality and file size
Images may be analog (like your television monitor), print (like a photograph or drawing in a book), or digital (like your computer monitor). To view images on a computer, they must be in a digital format. Here are the most common ways to get digital graphics for your web page:
- Capture a graphic on a computer monitor.
- Most browsers have a simple, built-in way to save images. We'll describe how to do this in our lesson on grabbing Web images.
- For non-web images, Macintosh users can use a shareware Control Panel called Flash-It to capture anything showing on their monitor. Windows users can use Paint Shop Pro or LView Pro. Many other programs are available at the Shareware.com archive.
-
Use digital clip art. Clip art can be purchased wherever software is sold. There is also free clip art on the Interent that can be downloaded. We've included some online clip art libraries in our lesson on grabbing web images.
-
Use a digital camera. Digital cameras and camcorders are popular and are available in a wide range of prices.
-
Have your film processed digitally. Many drug stores and photo processors now offer the option of having your film digitally processed and provided for you on a floppy disk or CD-ROM.
-
Create images using a graphics program such as Photoshop. We'll walk you through some simple techniques in our Photoshop lesson.
-
Scan a print image. Scanners look a bit like copy machines and work with a computer to create digital image files. Many printers are now copiers, scanners, and printers all in one.
-
Capture a video image. Video capture cards plug into your computer and allow you to capture video frames from a camcorder or VCR. Prices range from a few hundred dollars to thousands of dollars.
It is worthwhile to emphasize the distinction between two uses of the term "size" when dealing with digital images.
- Image size refers to the actual dimensions of the image, such as 8-1/2" x 11" or 40 x 40 pixels.
- File size refers to the amount of space required in memory to place the graphic on a page, such as 100 kilobytes.
Image size, resolution, color, and file format all affect the file size.
When developing images for web pages, size must be kept to a minimum! Big images slow down web-page loading and can be annoying, especially to users with slow Internet connections. Good web developers minimize page-loading time by starting with a small file, using appropriate file formats, and specifying the height and width of the image within the HTML.
And don't forget those ALT tags!!
File formats define how the information content of an image or document is stored and manipulated in memory, as well as how it may be printed, transmitted, or viewed.
The two most common file formats that we are concerned with in the scanning process are PICT and TIFF.
- PICT is a very popular file format for Macintosh computers.
- TIFF (Tagged Image File Format) is frequently used by high-resolution digital scanners, especially for high quality photographic work, and is frequently used to transfer images to and from IBM PC clones.
The two most common file formats that we are concerned with for web page development are GIF and JPEG. There's much to learn about formats, but here's what you need to remember:
- Choose GIF for line art drawings, logos, and screen captures
- Choose JPEG for continuous tone images like photos
|
For more information about file formats, see
Graphics a la "the Web" by the Maricopa Center for Learning and Instruction.
Several graphics programs have built in features to save files as GIF or JPEG format. If your software doesn't, get GIFConverter (Macintosh) or WinGif (Windows) from shareware.com.
All electronic images (and even printed images) are comprised of dots of various sizes, called pixels (short for "picture elements"). Resolution refers to the number of pixels, dots, or points (all are the same) per inch ot the dots per inch (dpi). Therefore, a 72 dpi image has dots which are 1/72 of an inch in size. This just happens to be the resolution of most standard computer monitors. As a result, if you are scanning an image to be displayed only on a computer screen, it is not necessary to scan at a resolution any higher than the resolution of the monitor. If you intend to print your image, the standard resolution for most printers is 300 dpi. In general, the higher the resolution, the better the quality and the more space the image requires in computer memory. Thus, there is a tradeoff between quality and storage space.
Color depth refers to the number of colors that may be accurately represented within a given image. This is fundamentally limited by the number of bits dedicated to a pixel, which usually may vary between eight and 32 bits per pixel. If the color depth is 8 bits, this means there are 28 different combinations of 8 bits that are available to define the various colors, or 256 different colors. Black & white images have a color depth of one pixel, or two "colors", black & white. A 32 bits per pixel image has..., well, you do the math. Most monitors and browsers can now accommodate millions of colors.
There are numerous guides to creating and using web graphics. Here are a few:
 |
First posted 1997.
Last modified
Monday November 26, 2007
© 2010 Copyright AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. This site contains links to public sites whose content and language do not fall under the jurisdiction of AT&T. The views and opinions expressed at these sites are not those of AT&T. Please read our Disclaimer.
|
