Preparing Images for Web or Print

Return to Main Menu


Contents:

This tutorial explains the steps on how to convert an image from your computer to a format that is more compatible with the web. This is very important to minimize loading time and to maintain the high quality of the image. All types of images can be converted, including those from your camera, scans, etc.

Finding and Opening Photoshop

The program used for preparing the images is Adobe Photoshop. If you are on a Macintosh simply click on the Photoshop icon at the bottom of the screen as shown in the image below. If it is not there, go to Applications > Photoshop.

dock image.

If you are on Windows click on the "Start" menu at the bottom left hand corner of the screen. Locate the "Adobe" folder and select "Photoshop CS-2 Start":

start menu

Return to Top

Creating the Correct Image Size

Getting the proper image size is the first step. Your current screen size is . Using this information as reference, figure out how big you want the image to appear on screen. Once you have a general idea for the image size, look at the DPI Guide to figure out what DPI you want to scan your image at. 

With the image opened in Photoshop, go to the "Image" menu and select "Image Size...".

Image size

This will open the Image Size window. Here you can set the image to whatever size you wish. Unchecking "Constrain Proportions" will allow for more freedom over image size, but at the risk of looking disproportionate.

image size window

Preparing Images for Web

When creating images for web use, keeping the file size low is very important. To achieve this, format and compression levels must be taken into consideration. The formats most commonly used for web images are GIF and JPG. These formats offer low file sizes and moderate to very high quality. GIF is commonly used for simple illustrations, while JPEG is more commonly used for photographs.
With your image open in Adobe Photoshop, go to the "File" menu and select "Save for Web".

save for web

This will open up the "Save for Web" window.

2up dialogue box

If you are working with a photo, the JPEG file format is suggested. If it is a graphic, such as a banner, logo or navigational tool, GIF format is suggested.

To use the JPEG format, select JPEG in the menu.

save for web menu

With JPEG, it is important to take note of the file size of the image to minimize loading time. If it is too high, reduce the quality.

JPEG file size

Click the "Save" button when you are finished.

To save your image in GIF format select the following options in your settings menu.

menu

Play with the Colors setting, the fewer the colors the smaller your image will be. Use the color table to remove all redundant colors; you can delete colors directly from the color table. In order to delete a color from the color table, select the color that you want to delete and then click on the trash can icon. Watch for changes in the image size of your optimized image.

Gif Color Table

When you are done click OK, and save your image.

Your image is now web ready.

Return to Top

Preparing Images for Print

When preparing images for print, the highest quality images are desired. The ideal file format choice for print is TIFF, followed closely by PNG.

With your image opened in Adobe Photoshop, go to the "File" menu and select "Save As".

Print save as

This will open the "Save As" window.

save as menu

Select what format you wish to use for your image and click "Save".

Your image is now print ready.

Return to Top

File Format & DPI Guide

Quick File Format Guide
Pros Cons
JPEG Great for putting photos on the web. More padding. Compression is irreversible.
GIF Low file size, lossless compression. Great for logos or simple art. Only works with images that have less than 256 colors. Very bad for photos.
TIFF Lossless compression. Perfect image quality. Ideal for print. Big file size.
PNG Great image quality. Can be used on web and print. Not very well supported.

DPI Guide

The DPI equation is a helpful tool in figuring out how big your image will appear on the computer.

(Width of image in inches x DPI) x (Height of image in inches x DPI) = Image size on screen.

Example:
(6 inches x 100 dpi) x (4 inches x 100 dpi) = 600 x 400 pixels

Return to Top


Return to Main Menu