Transparent gifs in Photoshop

1. Make sure you have your image on its own layer with no background.

This is the #1 mistake people make, in older versions of Photoshop you would have saved it on a colored background

image 1

image 2

2. Now go File>Save for web

You should see this box open.

image 3

3.Make your setting gif and use the smallest amount of colors you can without affecting the appearance of the image.

The 2 things to remember here are:

  1. Make sure Transparency is selected.
  2. Set the Matte color to the closest match of the background color you will be placing the image on. If you are unsure then set the Matte to "None" (more about Matte in step 4)

Click ok and save your image.

image 4

4. Some more information on Matte.

Matte puts a thin outline around the image to get rid of what we call halos.

On the right you can see an example of a halo. Look familiar? This is the sign of an amateurish webpage. Believe me there are already enough bad webpages out there without us adding to them. :)

image 5

5. Here is the same image with Matte set to none. Notice the halo is gone, but it is still a bit jaggy around the edges.

image 6

6. Here is the same image, this time saved with a black Matte. Notice how nice and sharp it is?

Transparent gifs in Photoshop Tutorial: Final Result

Always choose a matt color if you can. This way all your transparent gif's will look nice and clean.

This Matt trick will also work with transparent PNG's.

Stay tuned for more :)


Close    To Top
  • Prev Article-Photoshop:
  • Next Article-Photoshop:
  • Now: Tutorial for Web and Software Design > Photoshop > Photoshop Basic > Photoshop Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction