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.

//AN_Xml:
• X-Ray
  //AN_Xml: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.
//AN_Xml:
• Cross Section
  //AN_Xml: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.
//AN_Xml:
• Let’s Make a Deal
  //AN_Xml:What’s inside box number 2? Just hover over it to find out.
//AN_Xml:
• Where’s Waldo?
  //AN_Xml: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.
//AN_Xml:
• Night Vision
  //AN_Xml: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.
//AN_Xml:
• Heat Vision
  //AN_Xml:You’ve seen the Predator movies, right?
//AN_Xml:

Project Details

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

Timeline

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

Designing for Decoder Glasses, Print and Web is a post from CSS-Tricks

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an <a href="/example/"></a>) element).

The <button> element, by itself, can't do that. There have …

When To Use The Button Element is a post from CSS-Tricks

<button>
//AN_Xml:  Do Something
//AN_Xml:</button>

<form action="/" method="post">
//AN_Xml:  <input type="submit" value="Submit">
//AN_Xml:</form>

<form action="/" method="post">
//AN_Xml:  <button>Submit</button>
//AN_Xml:</form>

<form action="/" method="post">
//AN_Xml:  <button type="reset">Reset</button>
//AN_Xml:</form>

<button>
//AN_Xml:  <img src="tiny_birthday_cake.png" alt="">
//AN_Xml:  Submit
//AN_Xml:</button>

<a href="#0">
//AN_Xml:  I'm kinda sick of doing this for buttons.
//AN_Xml:</a>

<button>
//AN_Xml:  Outside of a <form>, I'm just as useless.
//AN_Xml:</button>

// 1. Create the button
//AN_Xml:var button = document.createElement("button");
//AN_Xml:button.innerHTML = "Do Something";
//AN_Xml:
//AN_Xml:// 2. Append somewhere
//AN_Xml:var body = document.getElementsByTagName("body")[0];
//AN_Xml:body.appendChild(button);
//AN_Xml:
//AN_Xml:// 3. Add event handler
//AN_Xml:button.addEventListener ("click", function() {
//AN_Xml:  alert("did something");
//AN_Xml:});

<a href="#meaningful" class="button" role="button">
//AN_Xml:  I'm good
//AN_Xml:</a>