Home
About Digital Media
Portfolio
Resources
Fun Stuff
CDWS
UCF
Area 51
Idea Gallery Tips & Tricks Photo Resources Recruitment Area Design Resources

Tutorials: Saving and Optimizing GIFs with a Transparency

This tutorial will show you how to save images that are optimized for the web for faster downloads on slower modems.

  • Open your file in Photoshop (version 5.5 or above).
  • On the top menu bar, go to Image and choose Image Size from the drop down menu.
  • You will see an Image Size window like the one shown below.
  • Make sure Constrain Proportions is checked in the bottom left corner.
  • Make sure your resolution is set to 72 dpi.

  • Change the Pixel Dimensions as desired.
  • You only need to change one dimension (height or width), the other will adjust automatically.
  • Remember that greater pixel dimensions equal sharper image but larger file size.
  • Click OK.

  • Go to File on the menu bar and choose Save for Web.
  • Choose GIF in the upper left drop-down menu under Settings.You may determine the number of colors that appear within the image.

  • Check the box next to Transparency.

  • Choose a Matte color to smooth the edges of the image. The default choices include white and black. You may choose another color with the color picker.
  • Pick a matte color that matches the background your GIF will be displayed on.

  • You may determine the number of colors that appear within the image.
  • More complicated images (like photos) may require a greater number of colors while black and white images will need fewer.
  • The goal is to keep the File Size under 50k. The file size is displayed in the lower left hand corner as seen in this image.

  • Click on Save and name your file.

This page was last updated on April 24, 2005.
Pages maintained by Course Development & Web Services,
IT&R, University of Central Florida, © Copyright 2005.
Site Map