Preparing a Digital Image for Use on the Internet/WWW

  1. Download picture from camera and remember where you save it. A good place is right on the desktop. [see tutorial on saving and creating a student folder on your desktop.] In many cases, the camera software will automatically give the picture a filename incorporating the date or similar common element and save it as a .jpg. [see Graphic File Types for explanation of different graphic files.]
  2. Open PhotoShop.
  3. File > Open = Choose picture you want to prepare. [Don't use a picture you have downloaded from the web. It has already been optimized using steps similar to this exercise.]
  4. File > SAVE AS = Change file name: "Save as" a name that makes sense to you.
  5. Change SAVE AS file type to a loss-less file format (tif or bmp). [You've just read about that in file formats and compression.]
  6. Crop image to what you will use (CROP tool on the floating tool window).
  7. Go to IMAGE > IMAGE SIZE = Change resolution to 72 ppi (dpi) the Internet always shows your graphics on a 72 ppi monitor or on the lower resolution TV monitor so added ppi/dpi is wasted.
  8. Adjust the pixel dimensions to the size you will be using it on the Web (refer to pixels or inches).
    Be sure to have the CONSTRAIN PROPORTIONS & RESAMPLE IMAGE boxes checked. For this exercise, change the height to be 150 pixels. The width will change to keep the image from distorting. Each of your images will be slightly different in size due to your cropping and the original image camera resolution. 
    The general rule of thumb has been to use no more than 50K worth of graphics per Internet page (total for all graphics on that page). This is based on the average user who is looking at the Internet at 28 Baud due to modem OR telephone line transfer rate in some older neighborhoods.
  9. Click OK.
  10. IMAGE > ADJUST > AUTO LEVELS.
    PhotoShop's Automatic adjustment of the image does a good job of balancing the curves and levels of the image. This is an oversimplification but works well for newbies. With increased skills in PhotoShop, you will be able to make minute changes in the graphic curves and levels including reducing the number of whites or blacks on either end of the spectrum.
  11. Manipulate image to remove unwanted features (that lamp in the background, a glaring light bulb, extra people, your x-brother-in-law, remove red-eye, move people/objects around, composite more than one graphic/picture, use Photoshop Filters, etc.)
  12. When image is in it's final form, you are ready to save.
  13. File > SAVE = to update and keep your alterations in the loss-less tif/bmp file format.
  14. Save it again using File > SAVE AS = Change file type to a lossy but much smaller file format of .jpg (.jpeg). Save as .jpg only after all manipulation is finished. If you need to further change the image, return to the loss-less file format image that you saved to keep the image from deteriorating.
  15. Your image is ready to insert into an Internet page.