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

Co-authored by Todd Coats and Will Langley.

We’re honored to be part of PRWeek’s 2007 Book of Lists. They recognized capstrat.com as one of 5 agency sites that awed. PR Week writes, “Many agencies have tried to show its ‘people.’ Capstrat's ingenious panoramic view of the office succeeds where everyone else failed. Every single employee appears to have a bio, declarative proof that it's an agency that cares about all of its employees.”

Well, we believe they’re right. We do care about our employees. We also care about collaboration and innovation. I asked Will Langley, one of Capstrat’s programming ninjas to revisit our collaborative process that led to this unique approach. We decided to write our individual points of view since we approached the problem from two directions (me coming from the conceptual trying to understand the technical, Will from the technical trying to interpret the conceptual). Our mission was the same though—challenge through collaboration.

Todd starts: “Repeal the laws of physics. That’s what I want, Will!” We challenge ourselves to surprise and delight clients at every turn. Visitors to our office always talk about its openness and energy. So I had a crazy idea to create a panoramic view of our office as the stage to show our unpredictable energy and randomness. Strictly speaking, the content could be anything. Since I decided to use the office funkiness as a stage, it was easy to decide that our people and practice areas would be the stars. The challenge was how do they interact? How do we make this useable? How do we keep it interesting for repeat visitors? What is this crazy world we’re making?

I pitched the concept to Will as a place where randomness reigns. We didn’t want to give the impression people were on treadmills as they moved, though. They had to obey (some of) the laws of physics for believability. Otherwise the result would be too designy. It would just be moving pictures, no magic.

Having seen a few sites with Action Scripted parallax, I figured we could do that. When Will’s head didn’t explode I figured we could make it a panoramic illusion, too. Heck, while we’re at it let’s make it animated navigation. Will did a lot of experimenting with the black arts of scripting until we agreed the multiple layers behaved correctly. The design team experimented with backgrounds and people to present them at the right scale. That was harder than we thought. Again, to sell the illusion we wanted one foot in reality and one foot in this anything-can-happen world.

I wonder if Will thought I had a foot in Bonkerworld.

Will says: I did not think Todd was bonkers. A little eccentric? Maybe. Twitchy creative? Certainly. After much arm-waving and wild scribbling, we finally found ourselves on a common plane of understanding. Thus began a period of tense negotiation with the Flash authoring environment to bring Todd’s vision to life. Creating a believable parallax was relatively painless – but as Todd mentioned, randomness was mission critical. I’ve visited so many rich media sites and been wowed by the action—riiiight up to the point where my brain recognized the loop. Once that happens the knee-jerk response is to browse on, having seen all there is to see. By randomly shuffling our arrays of people and objects, we were able to break the “loop.” This created a more engaging experience for visitors to our site and enticed them to hang around and explore.

The panoramic backdrop of our office brilliantly highlighted all the pockets of individual funk and flare that make working at Capstrat such a rewarding experience. We share and evolve ideas and solutions with impunity around here, and the quality of our work shows it. The final panoramic is rich and seamless – you feel as though you could crawl into any corner of it and live the Capstrat experience. When we decided to follow up with a second banner for our Culture page, Todd accepted my offer to create a similar panorama. A print designer before taking up the dark arts of web development, this was thrilling! I was able to push and develop my Photoshop skills to new heights.

Our initial foray into the world of transparent video in Flash, design translation for this project uncovered other unforeseen hurdles. With all of our detailed image assets needing to be transparent, the use of the PNG-24 image format was a necessity. Running Photoshop assets through both After Effects and Flash, and meeting in the middle without color shifts, proved to be a major undertaking. Tears were shed. Hearts were broken. And ultimately, Photoshop actions were created to put us back on our way.

Use of the transparent PNG format presented us with our final major obstacle – file size. This beautiful piece of collaborative effort would be for naught if our baseline user had to wait an eternity for the experience. It’s common knowledge that, as developers, we have only a few seconds to engage our users before we risk losing them. The need to overcome our loading issues led us to rethink our loading and preloading schema. We decided to keep everything compartmentalized, remanding our preloaders to each individual asset. This allowed us to eliminate the use of a clunky and frustratingly slow global preloader. The result of this approach is a [relatively] large file efficiently removing itself from the experience, offering the user tasty morsels to distract from the heavy lifting taking place behind the curtain. The user gets to browse our office panorama almost instantly, with each piece of the parallax puzzle sliding into place seamlessly and quietly around them.

With all of our problems solved, we began the final Q/A process. We noticed right away that we had a little user-experience glitch, resulting in a slight case of “chasing the rabbit”, wherein the user finds themselves unable to keep their mouse on the clickable regions without interference. To eliminate this, we made our randomness conditional, so that each object weighed its randomly-selected starting position against all of its peers. When unacceptable overlap occurs, the position is tossed out and another selected. The process continues until an acceptable condition is reached. While the user is none-the-wiser, this little tidbit is perhaps my most triumphant of the entire project.

This project exemplifies what we’re about at Capstrat. Sure, we all come from different backgrounds and speak different languages. But, whether you say the sky is robin’s egg blue or hexadecimal 6FD3FF, we all agree that innovation is a full contact sport. Our management team understands, encourages and lives the spirit of collaboration. The result is personal and professional growth as well as development on a macro scale. Not to mention note-worthy work that we can all be proud of. Visit the PR Week posting.