为解码眼镜、印刷和网页设计

想法

我的公司 BlueHornet 预计将在电子邮件演进大会上进行主题演讲，题目为“2012 年电子邮件营销趋势”，内容将涵盖我们最近进行的一项研究中得出的许多令人惊讶的结果。我们在大会上其他宣传资料中一直使用的主题是“聚焦”，我们需要想出一个留给主题演讲观众的备忘录。几个月前我们做了一个信息图，效果很好，有了新的研究结果，另一个信息图似乎很合适。但我们仍然需要将其与我们的主题联系起来。第一个想法是复古解码眼镜，可以帮助将海报的某些部分聚焦。当然，解码眼镜通常是第一个想法，但最终出现了一个情况，它与我们正在做的事情在主题上相吻合。

对于那些不知道的人，解码眼镜非常像带有纸质镜框、一个红色凝胶镜片和一个蓝色镜片的老式 3D 眼镜。但在解码眼镜上，两个镜片都是同一种颜色，戴上它们可以让你看到秘密信息……就像电影《他们活著》中一样，这部电影是由罗迪·派珀主演的。

在所有人都同意的情况下，我们开始行动。第一步……订购眼镜。有两种眼镜可供选择……红色镜片或蓝色镜片。我们是 BlueHornet，所以这是一个简单的决定。

等待是最难的部分

如果我不立即开始，在大会之前就没有足够的时间完成这个项目。不幸的是，解码眼镜要几天后才会到货，而且之前从未用过它们设计过东西，我不知道需要使用什么颜色，也不知道什么图案最适合。所以现在我先开始设计。我认为 1940 年代和 50 年代的广告插图似乎很适合解码眼镜，所以我朝着这个方向前进。

我还知道我不喜欢其他可解码设计中用来隐藏信息的图案……大多数图案只是一些乱七八糟的东西。即使不戴眼镜，我也希望海报看起来很清晰，而且我们用来隐藏信息的任何图案在设计中都有意义。为此，我想使用半色调图案，这将很好地将所有内容联系在一起。

我一头扎了进去，首先处理海报设计的关键部分……只用黑白来框住形状和空间，弄清楚我们有多少空间用来写文案，以及统计数据如何融入其中。我添加了一个快速、临时的颜色处理，以帮助团队的其他成员了解我的目标，每个人都仍然支持。

解码眼镜，它们是如何工作的？

星期二早上，眼镜到了。终于拿到眼镜并戴着它们在办公室里走来走去的兴奋感很快消失了，因为我意识到……我必须想出如何使用它们来设计东西。从小就喜欢解码眼镜，我对它们的工作原理有一个基本的了解。最初，设计中任何蓝色的部分都会占主导地位，处于前景，而任何黄色的部分都很难阅读。但当你戴上眼镜时，一切都会改变……黄色的设计元素与镜片中的蓝色结合在一起后，变成非常深的绿色。这些现在呈黑色绿色的元素比蓝色部分更深，这使它们突出到前景，并易于辨认。所有蓝色的部分都保持蓝色，或者变得有点褪色。但什么蓝色的色调和黄色的色调最有效？在黄色上使用什么蓝色的图案可以让它们戴上眼镜很容易阅读，但没有眼镜几乎不可能阅读？为了解决这个问题，我需要进行一些测试。

测试、测试……1、2、3。

我知道我们不会丝网印刷海报，所以潘通颜色就不在考虑范围内。所有这些都将是 CMYK，如果一切都取决于获得正确的蓝色和黄色的色调以使效果起作用，那么处理从显示器到打印机的颜色变化可能会出现问题。幸运的是，我知道最终的 11” x 17” 海报将使用我们的 Xerox Phaser 7400 彩色激光打印机在内部打印，所以我可以使用相同的设备进行所有测试。我将一堆不同色调的蓝色以各种图案放在各种色调的黄色文本上面，然后打印出来。当你戴着眼镜看它们时，你很快就能找出哪些是有效的，哪些是无效的。

在我们的打印机上，对于我想隐藏的设计部分，最有效的黄色色调是 CMYK 0/0/100%/0。各种蓝色的色调都有效，但我主要使用了 CMYK 100%/75%/0%/0%，这是一种浓郁的皇家蓝色……与镜片中蓝色的颜色相差不大。有限的颜色调色板在视觉上也与解码眼镜的时代和插图的风格相吻合，所以保持简单。

通过这个过程，我发现使用 Adobe Photoshop 图层混合属性……其中黄色重叠到蓝色图案上形成绿色……效果很好。没有眼镜，你会看到两种颜色交叉的地方是绿色，这使得它更难以阅读，但戴上眼镜，绿色和黄色都变成了相同的颜色……一种绿色黑色。

我结合使用图层混合，开发了几种方法。一种是在黄色设计上用蓝色写很多单词。没有眼镜，你的眼睛会集中在你能读懂的蓝色单词上，很难停止看这些单词，去看看它们后面的微弱的黄色信息。另一种技术是在黄色设计上使用一个蓝色的干扰半色调图案。要找出图案中白色比例的最佳数量需要一些试验和错误……太多或太少，就会很容易在没有眼镜的情况下读出黄色部分。我发现最后一种有效的技术实际上是在一个去饱和的黄色背景（例如 CMYK 0/0/50%/0）上放置鲜艳的黄色信息。这可能是没有眼镜的情况下最容易理解的，但将其作为一个选项打开了一些设计处理方法。

关键是要找到一个平衡点，即在没有眼镜的情况下难以阅读，但在戴上眼镜的情况下仍然容易阅读。如果即使戴上眼镜也仍然难以阅读，在保密是重中之重的情况下，这可能很好，但对于我们的目的来说，我不希望任何人感到沮丧。

有时隐藏的设计在我的屏幕上很清晰，但当我打印出来时就一点也看不清了，所以你不能相信你的显示器……你真的需要把它打印出来，看看戴着眼镜是什么样子。

我之前没有想到的一件事是，事先知道隐藏的内容有助于我破译它，或者至少说服我自己可以读懂它，而实际上从其他方面来看它是肉眼无法识别的。为了克服这个问题，我依靠客观的同事发表意见，让我知道他们能读到什么或读不到什么。

完成海报

现在我知道了哪些颜色和处理方法最有效，我将它们应用到了正在进行的设计中。要使所有内容都完美无缺需要一些试验和错误，但进展相对顺利。由于我们是自己印刷这些海报，而且统计数据比海报上的空间更多，我们选择让其中一些部分可变，因此最终实际上有三种可能的版本。我们打印了它们，装箱，然后运往大会。就在我认为我已经完成了的时候，我被问了一个非常令人困扰的问题……

那么现在我们可以将它放在我们的网站上吗？

从印刷到网页的转换

这幅海报最酷的部分是使用解码眼镜与它互动，而没有它，它就没有意义。我知道，为了让这个设计体现它的价值，网页版本必须让观众参与到一定程度。我经常上网，但我从未见过任何完全像我试图做的事情。我相信在 Flash 中是可以实现的，但我不是它的忠实粉丝，我想要最终结果在 iPad 和黑莓手机上都能运行。可以肯定地说，访问我们网站的访客不会有自己的蓝色解码眼镜。所以就这样吧。

最终我想到一个概念……一张前台图片作为正常的海报，一张后台图片作为海报的“解码”版本，以及一些当你移动鼠标时揭示后台图片的效果。将海报分成几块并将其作为图像悬停似乎很笨拙。然后我想到了我在电子商务网站上看到的“图片缩放”处理，它可以让你在将鼠标悬停在产品上时详细查看要购买的产品。这让我来到了 CSS-Tricks.com 和 “AnythingZoomer.”

Anything Zoomer 背后的概念与我的相同……两张图片叠加在一起，后台图片在你将鼠标悬停在其上时被揭示。但是，我并没有按照设计使用脚本，将小图片放在前面，大图片放在后面，而是将两张图片都设置为相同大小，但在后面使用“解码”版本代替大图片。

为了实际制作我的设计的“解码”版本，我只是在 Photoshop 中的其余作品之上添加了一层，并用蓝色 (#0100df) 填充它，然后添加了图层混合效果。从那里，我对原始设计的色阶进行了微调，以便在解码时更容易阅读。

代码

我很想说从这里开始我的 CSS 功力大放异彩，但 AnythingZoomer 几乎可以直接满足我的需求。我更改了默认大小以适应我的图片，并围绕它设计了页面其余部分，但它非常简单。实际上，我只需要调整一件事情。在原始脚本中，在小图片和大图片之间，存在一点偏移。因此，当我使用两个相同大小的图片时，它们没有对齐。当使用脚本达到预期用途时，稍微不对齐看起来很棒，但对于我的目的，我通过在“large”类中添加一些额外的 CSS 来抵消大部分偏移…… margin-top:50px; margin-left:50px;

完成的网页

其他应用

现在你可能会想，“太棒了，如果我需要创建一个东西的网页版本来复制解码眼镜，我现在可以做到了。” 这的确没错。但你误解了重点。AnythingZoomer 提供的这种确切技术和代码集可以以多种方式使用，而与缩放无关。我希望在某个时候使用它们，起初我不确定是否应该提供它们。但最终我决定，有了这种东西在互联网上随处可见，互联网将会变得更加美好。

• X 射线
  前台图片看起来很正常，后台图片是同一图片的 X 射线版本。像操作类棋盘游戏那样的卡通处理会很不错。印刷版可以使用夜光点色。我一定要做这个。
• 横截面
  与 X 射线类似，但不是骨头，你会看到前台图片内部的剖面。你会看到汽车或房子的外部，将鼠标悬停在其上会显示内部。
• 让我们做个交易
  盒子编号 2 里是什么？只需将鼠标悬停在其上即可找到答案。
• 沃利在哪里？
  前台图片，你应该在人群或杂物中找到一个人或物体。如果沃利不是你的菜，想象一下 Highlights 杂志中的那些游戏。后台图片可以将除你正在寻找的东西之外的所有东西都变成灰色……就像一个交互式的答案钥匙。
• 夜视
  前台图片大部分是黑暗的，很难看清楚，但后台图片是绿色的，就像戴着夜视镜一样。
• 热成像
  你看过《铁血战士》电影吧？

项目详情

初始印刷量：500 张海报
成本：解码眼镜约 0.30 美元/个；海报印刷在内部完成。

时间轴

想法：2012 年 2 月 9 日
印刷完成海报：2 月 17 日
网页版上线：2 月 21 日