Grow your CSS skills. Land your dream job.

Designing for Decoder Glasses, Print and Web

Published by Guest Author

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

Comments

  1. Permalink to comment#

    Very clever idea, I wonder how we could get it to work on touch screens?

  2. Permalink to comment#

    Oh man that is cool.

    I wonder if it would be possible with some added javascript to have it covering an entire site, where hovering over something would show the code making it. (it would have to be toggle-able of course)

    • Gustav Nikolaj
      Permalink to comment#

      It exists already. It’s called chrome dev-tools :-) Element Inspector – highlights the rendered elements on the page, as you hover your mouse over the elements in the dom-tree view.

    • cnwtx
      Permalink to comment#

      Maybe make it go down through the z-index of a site that has multiple levels stacked for this purpose. . .

  3. Very cool. I love the ideas and I’m glad that you were willing to share them. I think that this alternate implementation of the “Anything Zoomer” is going to be used a lot on the web. I’m excited to see what other great ideas come from this.

  4. Permalink to comment#

    This is the world’s most fun tech post ever! Fantastic idea and brilliantly explained. And I want some decoder glasses.

  5. drew
    Permalink to comment#

    Very nice. It is nice to see marketing that is fun/creative/new and still gets points across and information out. This actually enhanced the points that you wanted to hit as well. Well done. Hopefully this gets you a raise!

  6. This is VERY cool – I’m already thinking of ways to use it.

    One question: Is it really “preception”?

  7. Permalink to comment#

    Sadly, it doesn’t work well in Opera :/
    The “revealer” is not behind the mouse.

    And there is a little offset in both Chrome and Opera.

  8. Stunningly cool. Can’t wait to share this with the design community at SitePoint. Now I want to create a site just to feature the AnythingZoomer…

    Regnareb, it sems to work fine in my Opera browser.

  9. Permalink to comment#

    It’s like when someone shows you how to open a locked door with a teaspoon. Doh! I’d have never thought of that, but what a neat idea, plus, you’ve also given us some additional ones too.

    Thanks for taking the time to pen such a great post Michael.

    Now I need to think of somewhere this makes sense on our intranet :)

  10. Permalink to comment#

    Wow! I like the idea

  11. Great idea, but the effect didn’t work well on my Chrome, the revealing box is shown below the pointer.

    • Rock
      Permalink to comment#

      @Mario – Strange, it worked just fine for me in Chrome – pretty slick!

    • Yesterday it looked great, but today I’m seeing similar behavior. The effect is working as it should, but the blue box is now positioned about the height of the blue box below my mouse pointer.

  12. hmbgbw
    Permalink to comment#

    @mario, @mike: in my case the offset in chrome was caused by the ghostery plugin with activated “enable bug blocking”. It seems that the blocked pardot-script (pi.pardot.com/pi.js) causes the offset – after enabling it, everything worked fine (mousepointer in the middle of the blue box).

    @michael: By the way, shoudn’t the twitter and web-address be revealed in the decoded picture?

  13. Fantastic post! I absolutely love this idea and your execution.

  14. Marshall
    Permalink to comment#

    Can no one else see the Yellow Text without the “Decoder Glasses?”
    I sure can.

    Is this marketing Idea trying to reach out to children? Or geeks that have yet to grow up and still read cartoon comic books? If I was to receive an advertisement that required the use of “Decoder Glass” I would ignore it. I’m not keeping a pair of paper glasses on my desk. Now if you could come up with a way to use “realD 3D” in Poster design then that would interesting..

  15. Permalink to comment#

    I took your idea of copying They Live and made it into a nice little nugget of a page.

    http://poland.net23.net/music/theylive/

    Thanks for the interesting article, I’m tempted to use this technique to hide little Easter-eggs in pages.

  16. Permalink to comment#

    Cool concept, you sold me with the “They Live” reference.

    Cheers,
    Chris

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".