Web Graphics Using Photoshop

LESSON #1

Getting Digital Images

• From a digital camera (Shoot JPEG)
• From a scanner (TIFF)
• From slides

Digital Cameras usually create images in the JPEG format. A good rule of thumb is to use the maximum resolution and the largest size (length by width). 1600 x 1200 pixels size at the maximum resolution is good. A larger size is better. On the other hand, you may have to reduce the size if you do not have enough memory to shoot the number of images you need. 

Scanners can scan to many formats. The most universal format, and the one I suggest is TIFF. 1600 x 1200 pixel size at 200 resolution is good for most situations. 300 resolution is better.

The easiest and most cost effective way to get digital images from a Slide is to take the slides to a photo-processing center and have them put onto a CD ROM disk. The disk will contain your images in a variety of sizes and usually in JPEG format. If you are making digital images to be printed, start with the largest image size. For the Web, a medium size is fine.

Each of these methods are basically the same. You start with a large image with lots of digital information and reduce it down to a web-ready image. The object is to make the image as small (in terms of file size) as possible and still have it look good on the Web. More on this in the next lesson.

About Image Formats

• TIFF
• JPEG
• GIF

TIFFs, usually from scanners, give you complete digital information without any compression. The downside is they make very large files and take up lots of computer memory.  For this reason, NEVER put a TIFF on the web. On the other hand, they are excellent for printers and for print publication. If you are starting with TIFFs, I recommend that you always keep a full-size TIFF version (after minor cropping and touch up).

The two primary file formats for Web graphics are GIF and JPEG. Both formats use different methods of compression and have respective strengths and weaknesses.

GIF (Graphic Interchange Format) compression is 8-bit and has a maximum of 256 colors. As a general rule, GIFs are better suited for graphics with areas of solid or flat color such as illustrations and logos. Other advantages to the GIF format is that it lets you create transparencies, interlacing, and animations.

A transparent GIF allows one color to be set as transparent, usually a background color. All Web graphics are rectangular and transparencies are a way to create the illusion of irregularly shaped images.

Interlaced GIFs display a rough version of the entire image quickly and then gradually fill in the details. This affords the viewers a sense of the image before it fully downloads.

Animated GIFs are files that contain multiple images set to display like a slide show. They work on all major browsers and require no plug-ins.

The JPEG format (Joint Photographic Experts Group) was especially designed for images of photographic quality. JPEG compression is 24-bit, which means files can contain up to 16.7 million colors. As a result, JPEGs are ideal for photographs of people, landscapes and any image with complex or subtle color gradations.

Choosing Formats

• Use GIFs for your graphics, i.e. headers, logos, anything that you create from scratch, anything that has large areas of one color.
• Use JPEGs for images that you shot with a camera, like people, landscapes, anything with lots of colors and subtle gradations.

Question: Can you use GIFs for everything?

Answers: Yes, some people do, but you sacrifice major download speed. If you are using large images, this can make a page very slow to load.