Advertise About Tech Consultations Write for Us Contact

Creating GIF images without white borders problem in Photoshop

By Rafiq Elmansy (admin)   |   August 12, 2008   |   Posted in Photoshop   |   View Comments  
→ Photoshop 3D for Animators: The complete guide to learn 3D and animation in Photoshop CS5. Pre-order this book now and receive a %22 discount here

GIF images are a good choice in low size and transparency support for most web designers. But the big problem that most designers face is the white border that shows up around your transparent GIF image while saving them from Photoshop or other software.

Adobe Photoshop CS3 GIF

Figure01, notice the edges in GIF format transparent images and PNG-24 format

Actually, this white border happens when GIF images does not calculate the transparency very well as this format compress the colors to the limit or may be distorting the colors if you try to decrease the size a little bit more using the GIF setting.

In this quick tutorial, we will show how to avoid these white borders with using the Matting feature in Photoshop. Actually, the matting feature allows you to only replace this white border with your background color so it looks better and the image consists well with the background.

As we see in figure01, the floral motive on the left is in GIF format, and it shows not clean edges with white background while the one on the right (PNG-24 format) has a better edges.

The following steps shows how to save your object in GIF format without this undesired edges using the Matte option in the Save for Web & Devices in Adobe Photoshop CS3:

1- Open the transparent image you want to save as GIF in Photoshop CS3.

2- From File menu choose Save for Web & Devices.

3- From the left panel of the dialog box, choose the GIF format from the drop-down menu.

4- Make sure that the Transparency check box is checked.

5- The Matte drop down-menu gives you ability to choose the color that GIF will treat the edges with. For example, you can choose the Foreground to select the foreground color, Background to choose the background color and you can choose a custom color from the Other option (figure02).

Adobe Photoshop CS3 GIF

Figure02, Matte options in Adobe Photoshop CS3

6- Choose the color that is the same color that you will use your GIF image with. For example, if you are using HTML color code, you can add the same color the will be shown behind the image.

Some people just go to use PNG instead of GIF, but in some cases like banners, some CMS systems, it is required to have GIF images for transparent images.

Tags: , , ,


About Rafiq Elmansy (admin)

Rafiq Elmansy is a graphic designer and runs his own design studio Pixel Consultations. He is also an Adobe Community Professional, Certified Expert and Adobe user group manager. He is a Friend of Icograda (the International Council of Graphic Design Associations). You can read his writings on Adobe site, Adobe Edge magazine, communitymx.com and his own blog www.graphicmania.net. He can also be followed on Twitter @rafiqelmansy

Enter your email to receive updates:

View Comments to “Creating GIF images without white borders problem in Photoshop”

  • Wow!! This is a really nice blog mate. Do you accept donations?

  • But what You should to do, when background have a gradient?

    ex.: Your lime flower on black-white gradient? :) Sometimes You can use only PNG, right?

  • I mainly like to use PNG instead of GIF. But in non-tranceprancy images and backgrounds I prefer using JPG.

  • Really nice tutorial, i also mainly work with PNG instead of GIF, however occasionally i may use GIF. Anyway this tutorial is very good tutorial, and you have a nice site as well.

  • Love your post, thanks for the information! I’m a shop keeper so I have to sneak in internet time at work. I dont really ever add comments but got on this page by clicking a wrong link. Keep posting more like this!, I favorited your site! 8)

  • animation in ps cs4 are in gif i often have this problem in animation or in transparancy , i found a way to make better , i just resize to 150 pixels then i can work more easy the picture for gif animated transparancy ! but i go check what i can do with your tutorial ! me like you i use png only for transparancy and jpeg for the rest

  • Thanks alot, actually we always face troubles when working with GIF because its extreme color compression, so I always prefer to work with PNG. But keep in mind that some old browsers before IE6 do not view the PNG properly.

  • Thanks. very helpful article ! Great story !

Post comment

blog comments powered by Disqus

Subscribe without commenting

Follow on Twitter Subscribe: RSS | Email


 


 

 

Enter your email to receive email alerts of new posts and fresh free resources .

Pages

 

 


Resources News

  • Create a Vibrant and Eye-Catching Drink Compositio…August 18, 2010

    In this Photoshop tutorial, you’ll learn how to create a Sobe fruit drink advertisement using some simple water stock images and a lot of easy to use techniques that will yield high quality resul…

  • 25 FREE HIGH QUALITY VECTOR FILESAugust 18, 2010

    We would like to proudly introduce you to Vectorious.net. Vectorious is a great resource for finding royalty free stock vector images. Currently they offer over 12055 vector image files available f…

  • Logo Design: 80+ Beautiful ExamplesAugust 18, 2010

    It has been almost four months since my last post on logo design. Since then I have assembled an amazing collection of fresh new creative logos for you to be inspired by. I am confident that these …

  • Poster Art – Reminiscence Down the History LaneAugust 18, 2010

    Poster art is one of the most well-defined forms of art that has a rich historical background that involves a number of famous artists throughout the world. Ranging from advertising campaigning to …

  • The Complete Beginner’s Guide to User Script…August 18, 2010

    A user script is code written in a programming language that allows you to control a piece of software.

 

Useful Links

 
 


Graphic Mania on Facebook