Maintained by ic@ucsc.edu |
Preparing Images for Web or PrintContents:
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 PhotoshopThe 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:
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": Creating the Correct Image SizeGetting 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. For help with scanning, please check out our on-line scanning tutorials for Mac or Windows.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 disproportioned.
Preparing Images for WebWhen 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 commonally 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. You image is now web ready. Preparing Images for PrintWhen preparing images for print, the highest quality images are disired. 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. File Format & DPI GuideQuick File Format 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 inchs x DPI) = Image size on screen.
Example:
|