Unit 1

Web Formats

This assignment will introduce you to saving files for the Web in specific formats. Remember, all Web images need to be saved as 72dpi. There are three file formats used for Web images: jpg, gif, and png. This is an absolute standard when creating Web images. (Note that the png format may not have the full support of all browser’s yet, so we won’t be using that format in this course.) Default PhotoShop files are in psd format, and you should always keep a copy of the psd file for future edits. Think of the psd file as your working file. You should never place a psd file on the Web.

This project will introduce you to some best practices when creating Web images. Be sure to refer to the Photoshop CS5 Help PDF file, Chapter 13: Saving and Exporting Images available in doc sharing for reference.

Select an image either from the book or select a personal image you would like to use for this assignment. You need to have the image on your computer, so if you do not already have it in electronic format, you will need to scan it in. If you have a digital camera, you can take a picture to use for this project.

  1. Open the image file in PhotoShop and save as image_name.psd
  2. Set Resolution to 72dpi
  3. Set the mode to RGB (Choose Image>Mode>RGB mode.)
  4. Save for Web & Devices - a copy of the image in gif format
  5. Save for Web & Devices - a copy of the image in jpg format
  6. Compare how compression settings affect the final file quality.
  7. Summarize the following information in a one page Word document.
    • Describe what settings you specifically applied for each file format and the impact they had on the image quality.
    • Describe when it would be appropriate to use these two file formats (jpg/gif).
    • Explain the differences between lossy and losseless compression.

jpg format gif format
Rich Wertz / IT247 / Unit 1 / jpg file format Rich Wertz / IT247 / Unit 1 / gif file format

This project was easy enough. I had to get used to using Photoshop again, after using Corel Draw and Illustrator for the last few years. The hardest thing was finding out how to set dpi, but once I found it in the reading, I had the assignment done within minutes. These are variations on format of the exact same image, even though it looks like the Cathedral in the image at right is leaning a bit more than at left. It's an optical illusion. I got this shot during a lengthy shoot I did for another class about Gothic Architecture, which is represented here in the three of four Gothic buildings on the campus of the University of Pittsburgh.

Maybe I should have used a color image. Eh well.