Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Using Photoshop to Create Anti-aliased .GIFs from .PNGs

Last Update: 5.20.2008

Introduction

.PNGs are a web graphics format that offers very desirable functionality, but aren't completely supported in all browsers. This article will walk you though setting up a Photoshop Action to create new anti-aliased .GIF images from your .PNGs, and adding the code to your web pages to provide the new .GIFs to Internet Explorer 6. (If you have access to Fireworks, consider re-exporting the .PNG image with an alternate color palette.)


Easy .GIF Creation in Photoshop.

We will be using the Save For Web dialog box to edit the .PNGs. Additionally, we will create a reusable Action to automate this process for any future .GIFs you need to create. (This walk through uses Photoshop CS3; adjust the steps accordingly for other graphics applications.)

Start by opening up one of your beautiful .PNGs inside Photoshop.

Set Photoshop's foreground color to the background color of your web page using the Eyedropper (I) tool. The new .GIF image will be anti-aliased against the foreground color - to create the effect of smooth edges in the .GIF file format.

Screenshot of the Create New Actions button in Photoshop CS3 In the Actions palette, click the Create New Action button - shown at right. Assign a name to the new action, and then click Record. While the Action is recording, any edits to the image will be recorded, and can later be "replayed" on any image.

From the File Menu, choose Save For Web & Devices.

Screenshot of the Matte option in Save for Web dialog box in Photoshop CS3 In the Save For Web & Devices dialog, click the pull-down menu for the Matte selector, and choose Foreground Color.

Then click Save, and enter a name and location for your new image.

Screenshot of the Stop Recording button in Photoshop CS3 Last, click the Stop Recording button in the Actions Palette. (Example shown right.) You can now close the original .PNG, without saving the changes.

Now, whenever you need to make a .PNG into a .GIF, you can simply open up Photoshop, set your foreground color, and then click the Play button (in the Actions palette). To create multiple .GIFs at once, use Photoshop's Batch processing.


Coding up Your New .GIFs

Now that you've created the .GIF images, place the code below on your webpage, below any other style declarations. Be sure to upload your new .GIF, and make sure that you reference the correct path and location in place of "images/header.gif".

<!--[if lte IE 6]>
<style type="text/css">
#header { background-image: url(images/header.gif); }
</style>
<![endif]-->

These conditional comments will override the existing .PNG background image declarations with the .GIF background image declarations. Only the background-image property needs to be declared. The other background properties, such as repeat and alignment, will be retained.

Conditional comments will always be ignored by non-IE browsers, and are designed specifically for the purpose of delivering code to certain versions IE only. I believe that they are a much tidier way to deliver browser specific CSS than using hacks or browsers detection scripts. You can learn more about Conditional Comments at Quirksmode.org.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me