Field Notes Inside an Integrated Communications Agency

First discovered during our early forays into transparent Flash video, it's safe to say that the fading and washing out of transparent PNG images has plagued our creatives for years.

A successful transparent video project requires developers, designers and dynamic media guys to work in concert. Even more so, it requires the tools of our trade to work together seamlessly. AfterEffects, Flash and Photoshop are born of the same Adobe gene pool, which is great - but 24-bit PNGs with alpha information are an especially stubborn lot. After exhaustive searching online for an orthodox, documented solution for this color shift, I decided to simply make myself a corrective Photoshop action. 

There are a million ways to do everything in Photoshop - this is the method I used. It is by no means an end-all, be-all solution for every transparent PNG you'll ever create - skin tones are especially fickle - but it is a solid benchmark from which to tweak to your needs. Apply the action and you'll be left with adjustment layers, making it incredibly easy to tweak, without compromising you're original pixel data. I'm going to use the talented Lindsey Bennett, Capstrat Vice President and Associate Creative Director, as my reference. There are four steps to my action, each adding a different adjustment layer to your file:

1) Hue/Saturation - Under master only, set hue to -1 and saturation to +24. No change to lightness

2) Color Balance - For both Shadows and Midtones, set red +6 and blue -6. No change to green

3) Brightness/Contrast - Set brightness +9, contrast +2

4) Selective Color - This is the step with the most malleability. I've found that I can adjust only these values for most any situation. It involves only the black slider. Under the Colors drop-down, start with Red and drag the black slider to +20. Then go through and slide black to +40 for the Yellow, Green and finally Black groups. This is my benchmark; for Lindsey's particular skin tones, I adjusted these values ever so slightly.

The final image, in Photoshop and when viewed in a browser, will look blown out. Here's a before and after shot, outside of Flash. Optimized for this article, the effect is diminished, but still very apparent:

When brought into and subsequently published from Flash, your blown out image will calm down. The end product is a true-to-life approximation that will make your project pop:

Download the action. Simply drag to:

Applications Folder -> Photoshop -> Presets -> Actions