Field Notes Inside an Integrated Communications Agency

I have a confession. I am a mac-junkie. There, I said it. No need to leave it in the comments, I've put it out there on front street. 

But also, I have become a penny-pincher over the last couple years. As I am constantly bombarded by news of layoffs, foreclosures, recessions and mounting debt I have found myself spending less and paying off any debt that I can. Finally after 18 months of thriftiness (other than my mortgage and car loan) you wont find any debt on me! 

Unfortunately, these two personality attributes don't play well together (mac addict and thriftster).  

Today might be the day that I resign myself to fall off the thrifty wagon. I have spent the last hour of my life viewing of the engadget liveblog live from the Apple 'latest creation' event. What is this event about? Ha. I scoff at your lack of foresight! 

Today Steve Jobs unveiled the almighty iPad! It is essentially an iPod touch with a 10" screen (Wi-fi and 3G are built in). All the apps created for the iPod touch will work on it, and more. I won't go into all of the details, as you can view them here with pictures.

What I do have to say about today's unavailing is that the New York Times app looks phenomenal! It actually looks like a newspaper, not some computerized sterile web-safe version of the newspaper. Call me nostalgic but I am AMPED UP for this! Even better than the aesthetics of a New York Times app that actually looks like the New York Times of my childhood (back when print copies were laying around the house), this new app features videos embedded in the articles. Right there on the "page" where there are photos related to the articles, you will also find related videos. Just hit play. That is awesome.  

There are many plusses to this device: 10 hours of continuous playback on one charge, a month of charge on standby, a $15/month data plan, iWork apps, email, photos, music and movies... oh my! This device could kill the portable DVD player and B&W Amazon Kindle markets.  

So what falls short? This device is made for the everyday consumer, not the designer or illustrator. The iPad is much like the iPod touch in that you cannot install third party software, only Apple tested and approved apps. This is not an open OS. There isn't much customization. This means my dream of Apple releasing a touchscreen, pressure sensitive tablet that will allow me to draw onscreen into Flash, Illustrator and Photoshop just got crushed. Oh, and there's no multitasking. Wow, really? Apparently, there are still no two apps running at the same time. Bummer. 

Oh well, there's always the $1,700 modbook. (Modbook is a custom laptop/tablet running Mac OSX off of a Macbook with Wacom tablet technology built into the monitor. This would allow me work onscreen in Flash, Illustrator and Photoshop). I was really trying to avoid dropping close to 2k on that....

http://www.axiotron.com/index.php?id=modbook

Fun with gradients: Use an image to create your next effect

Next time you feel your mouse moseying on over to the gradient tool in your Photoshop toolbox for a fill, stop right there!  Rather than creating a gradient from your available style options and color selections, why not give this a try?

Pull a rich, colorful photo off the Web or grab one you've already got hanging around on your computer.  Make a four pixel selection anywhere in the image.  Take that four pixel selection and stretch it.  Now, what have you got?  An organic, unique gradient with plenty of color values to work from!  Throw a colored layer underneath that gradient and start to play with the layer blending modes. Let me know what you think; happy gradient-ing!

1) There are things you can do in Photoshop that you can't do for Web. (So be mindful)

2) There are things you can do for Web that you can't do in Photoshop. (Be really mindful of that one)

3) It'll look different in the browser. It'll look different in my browser than in your browser. The client will be using a different browser altogether.

4) Design for fingers on mice as well as eyeballs. You know how when you're cooking, aroma is just as important as taste? Same thing.

5) Users want useful.

6) Google's home page is an example of extraordinary Web design.

7) People looking at a magazine ad are passive. People watching a TV show are passive. People using your Web page are active.

8) Watch out for Flash, it can sometimes turn engaged users into passive observers.

9) Be unconventional! Just remember conventions sometimes take shape for good reasons.

10) The user came to this page to do something. Help them.

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

The tool you choose to use should depend solely on the screw you're trying to turn. Same goes for designing Web projects. When beginning the design phase of Web project X, final deliverables should be taken into account when deciding which application to use. Every designer I work with is equally proficient in both Illustrator and Photoshop; while I'm sure every creative has their favorite, both are tools that can be wielded with awe-inspiring deftness. Will the final project hit the Web as XHTML or rich media? Or some amalgamation of both? Making this determination prior to design kick-off can save HOURS of design translation, giving your project a much better chance of coming in on time and under budget.

The formula is absurdly simple:

Flash / rich media = vector = Illustrator
XHTML = bitmap = Photoshop

I submit the responsibility to pose the question is shared. I will try my best to remember to ask - but as long as SOMEONE asks, that's all that matters.

I am pretty sure life before PhotoShop was amazing. Imagine seeing a picture and knowing without a shadow of a doubt the picture was accurate and true. The irony of this is when photography was first invented people did not 'believe' in it. Now people accept retouched images as truth without even thinking about it.

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.