Return to Main Menu
Contents:
- Creating the Correct Image Size
- Preparing Images for Web
- Preparing Images for Print
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.
.
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":
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...".
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.
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".
This will open up the "Save for Web" window.
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.
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.
Click the "Save" button when you are finished.
To save your image in GIF format select the following options in your settings 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.
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".
This will open the "Save As" window.
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. |
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
