Designing for Decoder Glasses, Print and Web

Avatar of Michael Buchmiller
Michael Buchmiller on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The following is a guest post by Michael Buchmiller, the Creative Manager at BlueHornet. Michael used a jQuery plugin I created for a pretty neat application, so I asked him if he’d be interested in sharing the technique as a blog post. This is that story.

The Idea

My company, BlueHornet, was scheduled to give a keynote presentation at the Email Evolution Conference entitled “Email Marketing Trends for 2012,” which would cover a number of the surprising results yielded from a study we had recently conducted. The theme we’d been running with for the rest of our collateral at the conference was “Focus,” and we needed to come up with a leave-behind to give attendees in the audience of the keynote. We had done an infographic a few months back that was received well, and with the new study in hand, another infographic seemed appropriate. But we still needed to tie it in to our theme. The first idea was retro decoder glasses that help bring in to focus parts of the poster. Granted, decoder glasses are usually the first idea, but finally there was a situation where it fit thematically with what we were doing.

For those who don’t know, decoder glasses are much like the old 3D glasses with paper frames and one red gel lens and one blue one. But on decoder glasses, both lenses are the same color, and wearing them enables you to see secret messages… kind of like in the Rowdy Roddy Piper movie, They Live.

With everyone on board, we were off and running. Step One… order the glasses. There were two in stock to choose from… either red or blue lenses. We’re BlueHornet, so this was an easy decision.

The Waiting is the Hardest Part

There wasn’t enough time to finish the project before the conference unless I started immediately. Unfortunately, the decoder glasses wouldn’t arrive for a few more days, and having never designed something with them before, I didn’t know exactly what colors I needed to use or what patterns would work best. So for now I’d start on the design. I thought that advertising illustrations from the 1940s and 50s seemed to be a good match for decoder glasses, so that’s the path I headed down.

I also knew that I didn’t like the patterns used in other decodable designs to hide the messages… most of them are just kind of scribbled messes. I wanted the poster to look sharp even if you weren’t wearing glasses, and for whatever pattern we used to make sense in the design. For this, I wanted to use halftone patterns, which would tie everything together nicely.

I dove in, tackling the big pieces for the poster design first… just working in black and white to box in the shapes and spaces, figuring out how much room for copy we’d have, and how the stats would fit in. I added a quick, temporary color treatment to help the rest of the team see what I was going for, and everyone was still on board.

Decoder Glasses, How Do They Work?

Tuesday morning, the glasses arrive. The excitement of finally having them in hand and the novelty of wearing them around the office quickly wore off as the realization set in… I had to figure out how to design something using them. Being a fan of decoder glasses since childhood, I had a basic understanding of how they worked. Initially anything blue in the design will be dominant and in the foreground, and anything in yellow will be hard to read. But it all changes when you put on the glasses… the yellow design elements become a really dark green when your eyes combine the yellow with the blue from the lenses. These now blackish-green elements are then darker than the blue parts, which makes them pop to the foreground and easy to pick out. Everything that was blue stays blue, or kind of gets washed out. But what shades of blue and yellow work best? What kind of blue patterns will work on top of yellow to make them easy to read with glasses, but nearly impossible to read without them? To solve this, I would need to do some tests.

Testing, Testing… 1, 2, 3.

I knew we wouldn’t be screen printing the posters, so Pantone colors were out. This would all be CMYK, and dealing with color shifts from monitor to printer could be problematic if everything hinges on getting the right shades of blue and yellow for the effect to work. Luckily, I had the luxury of knowing that the final 11” x 17” posters would be printed in-house using our Xerox Phaser 7400 color laser printer, so I could do all of the test runs on the same equipment. I put together a bunch of shades of blue in various patterns on top of text in all sorts of shades of yellow and printed it up. When you look at them with the glasses on, you quickly figure out which ones are working and which are not.

The shade of yellow that worked best on our printer for the parts of the design I wanted hidden was CMYK 0/0/100%/0. Various shades of blue were effective, but I primarily used CMYK 100%/75%/0%/0% which is a rich, royal blue… not too far off from the color of the blue in the lenses. Having a limited color palette also ties in visually with the era of both the decoder glasses and the style of illustration, so I kept it simple.

Through this process, I figured out that using the Adobe Photoshop Layer Multiply attribute… where the yellow overlapped on to the blue pattern to make a green… worked great. Without the glasses, you’d see green where the two colors intersect making it more difficult to read, but with the glasses, both the green and yellow both turned out to be the same color… a greenish black.

In combination with Layer Multiply, I developed a few approaches. One was writing a bunch of words in blue on top of the yellow design. Without the glasses, your eyes focus on the words in blue they can read and it’s very difficult to stop seeing those words and look behind them at the faint yellow message. Another technique was to use a distracting halftone pattern in blue on top of the yellow design. It took some trial and error to figure out the right amount of white to have in the pattern… too much or too little and the yellow piece was easily read without the glasses. And the last technique I found to work was actually putting the vivid yellow message on top of a de-saturated yellow background (like CMYK 0/0/50%/0). This is probably the easiest to figure out without the glasses on, but having it as an option opened up some design treatments.

The key to it all was finding the right balance between being hard to read without the glasses, but still easy to read with the glasses. If it was still hard to read even with the glasses on, that might be great in a situation where secrecy is the top priority, but for our purposes, I didn’t want anyone to be frustrated.

Sometimes the hidden design would be quite legible on my screen, but not at all when I printed it, so you can’t trust your monitor… you really need to print it out and see how it looks with the glasses.

One thing I didn’t anticipate was that knowing the hidden content beforehand helped me decipher it, or at least helped convince me I could read it, when it was by all other account unreadable to the naked eye. To combat this, I leaned on objective co-workers to chime in and let me know what they could or couldn’t read.

Finishing Up the Poster(s)

Now that I knew which colors and treatments worked best, I applied them to the in progress design. It took some trial and error to get everything just right, but it went relatively smoothly. Since we were printing these ourselves and had more statistics than room on the poster, we opted to make a few of the sections variable, so in the end, there were actually three possible iterations. We printed them, boxed them up, and shipped them to the conference. Just as I thought I was done, I was asked a very troubling question…

So now can we put this on our website?

Translation from Print to Web

The coolest part about this poster was interacting with it using the decoder glasses, and without them, it doesn’t really make sense. I knew that to do the design any justice, a web version would have to have some level of participation from the viewer. I spend a lot of time on the web, but hadn’t seen anything exactly like what I was trying to do. I’m sure it’s possible in Flash, but I’m not a big fan of it, and I wanted the end result to work on iPads and Blackberrys. It’s pretty much safe to assume that visitors to our website won’t have their own blue decoder glasses. So that’s out.

Eventually I came up with a concept… a foreground image that was the normal poster, a background image that was the “decoded” version of the poster, and some effect that reveals the background image as you move your mouse around. Dividing the poster in to pieces and having those pieces as image rollovers seemed clunky. And then I thought about an “Image Zoom” treatment I’ve seen on ecommerce sites, which lets you see a product you are looking to purchase in detail by hovering over it. This brought me to CSS-Tricks.com and the “AnythingZoomer.”

The concept behind the Anything Zoomer was the same as mine… two images on top of each other, where the image in the back gets revealed as you hover over it. But instead of using the script as designed, with the small image in front and the large one in back, I’d make both images the same size, but use the “decoded” version in place of the large image in the back.

To actually make the “decoded” version of my design, I just added a layer above the rest of my artwork in Photoshop and filled it with blue (#0100df), and then added the Layer Multiply effect. From there, I tweaked the levels of the original design a bit to make it easier to read when being decoded.

The Code

I’d love to say that my mastery of CSS shined from here on, but the AnythingZoomer worked pretty much right out of the box for my purposes. I changed the default sizes to work with my images, designed the rest of the page around it, but it was pretty straight forward. There was really only one thing I needed to tweak. In the original script, between the small and zoomed in large image, there is a bit of an offset. So when I used my two images that were both the same size, they didn’t line up. Being a bit out of alignment looks great when using the script for its intended use, but for my purposes, I counteracted most of the offset by putting some additional CSS on the “large” class… margin-top:50px; margin-left:50px;

Finished Webpage

Other Applications

So now you are thinking, “Great, if I ever need to make a web version of something to replicate decoder glasses, now I can.” And that’s true. But you are missing the point. This exact same technique and set of code provided by AnythingZoomer could be used in a multitude of ways that have nothing to do with zooming. I hope to use them all at some point, and at first wasn’t sure I should offer them up. But eventually I decided that the internet will be a better place with this sort of thing popping up everywhere.

  • X-Ray
    Foreground image looks normal, and the background image is an X-Ray’d version of the same image. A cartoony treatment like the board game Operation would be sweet. The print version could use a glow-in-the-dark spot color. I’m definitely doing this one.
  • Cross Section
    Similar to the X-Ray, but instead of bones, you’d see the cut-away of what’s inside the foreground image. You’d have the exterior of a car or house, and hovering over it reveals what’s inside.
  • Let’s Make a Deal
    What’s inside box number 2? Just hover over it to find out.
  • Where’s Waldo?
    Foreground image where you are supposed to have to locate a person or object among the masses or clutter. If Waldo isn’t your thing, picture those games in Highlights magazine. The background image could have everything grayed out except for what you are looking for… like an interactive answer key.
  • Night Vision
    Foreground image would be mostly dark, and hard to make out, but the background image is green-tinted like you’d see wearing night vision goggles.
  • Heat Vision
    You’ve seen the Predator movies, right?

Project Details

Initial Print Run: 500 posters
Cost: Decoder glasses ~ $0.30/each; Poster printing was done in-house.

Timeline

Idea: February 9th, 2012
Printed finished posters: February 17th
Web-version launched: February 21st