最新消息:蔓草札记的微信公众号开通了,赶紧在微信通讯录公众号中搜索“蔓草札记”关注下吧 :)

如何制作“选中就变”的神奇图片

图像处理 xhhjin 936浏览 1评论

注:这个东西是几年之前写的了,它的原理利用了 IE 浏览器的特有机制,随着这两年其它浏览器的份额扩张,以及 IE 自身的升级,不能保证所有人都能看到同样的效果了,所以这类图片也已经式微。本贴就算给大家看个原理吧。

网上常见一种神奇图片,表面看上去感觉发虚,不是很清晰,选中后就变成了另一幅图片。其实这种图片没有多么神奇,只不过利用了 IE 浏览器的一个特性,使用 PHOTOSHOP 能够轻易制作出这种效果。以下教程手把手教你制作“神奇图片”。
要研究这种图片的做法先得搞明白这种图片为什么会有这种效果。首先我们分析一下进行“选中”这一操作时 WINDOWS 作了什么。如果选中的是文字,很简单,将选中部分反色就好了(白底黑字变成黑底白字)。如果是图片,简单的反色会让图像变得很难看,WINDOWS 采用的方法是在图片上笼罩一层深蓝色。

如果用 PS 做的话我们可能想到的做法是在原图像上加一图层,用深色填充再调低透明度。不过这样的操作计算量较大,要知道自从 WINDOWS 进入图形界面以来,选中一直是一个常用操作,那会的电脑性能很差,一选就卡怎么行,所以微软采用的是另一种办法。

计算机中图像最小单位是像素,所有的图片都是一个个微小的像素组成。一般显示图片时就是逐行逐列将像素排列起来。浏览器在处理选中图片时,使用的方法是将图片中所有奇数行奇数列和偶数行偶数列的像素(如第 1 行第 1、3、5……列,第 2 行第 2、4、6……列)用同一个深色的像素替换,这样这张图片上就有一半的像素被替换了,所以选中的图像看上去笼罩了一层深色,而且感觉变粗糙了,就是因为损失了一半的像素。

如何制作“选中就变”的神奇图片 01

话说到这里,恐怕有不少人都明白是怎么回事了。我们只要做出一张图,让它全部的像素都分布在奇数行奇数列和偶数行偶数列,这样它被选中后岂不是所有的像素都被替换,看上去凭空消失了?而如果我们添加另一个图层,它的所有像素都相反的分布在奇数行偶数列和偶数行奇数列,被选中以后就只剩下这个图了,即达到了隐藏的目的。

原理说明白了,用 PS 实现这个效果就不难了,做法可以多种多样。自己有想法的朋友可以自己去试试了。要是还不会就往下看。
我下边举个例子制作一张这种隐藏图片,方法尽量简单,不涉及复杂的操作。首先我们要挑选两张素材图,在未选中时就显示出来的称为 A,隐藏着的称为 B。挑选图片时要求两张图的长和宽要完全一样(事先调整好),而且做出的结果实际上是两张图同时显露出一半的像素,之所以能隐藏是利用了人的错觉。所以就要求 A 要足够清晰,色彩鲜艳,对比强烈,能够吸引人的注意,而 B 要色彩暗淡,最好图像主体部分的位置和 A 的主体重合,这样混合起来后才能让人只注意到 A 而看不到隐藏的 B。

1. 开始制作,这里我的素材已经准备好了,A 是我和辉光球的一张照片,B 呢是上帝他老人家的画像。

如何制作“选中就变”的神奇图片 02

2. 创建一个新文件,选择尺寸为 2*2 像素,背景内容为透明。

如何制作“选中就变”的神奇图片 03

3. 按 CTRL+“+”将图像放大,用铅笔工具将左上角像素和右下角像素染色。

如何制作“选中就变”的神奇图片 04

4.“编辑”菜单下选择“定义图案”,随便起个名字就行。将本图像定义为图案。

如何制作“选中就变”的神奇图片 05

5. 打开图像 A,新建一个图层。

如何制作“选中就变”的神奇图片 06

6. 在新图层中使用油漆桶工具,填充方式选择为“图案”,右边列表里选择刚才新定义的图案。

如何制作“选中就变”的神奇图片 07

7. 按住 CTRL,单击新图层的缩略图(注意是点缩略图而不是点图层的名字),选中所有有像素的部分。

如何制作“选中就变”的神奇图片 08

8. 切换到背景图层,用 CTRL+C 复制图像(做那个图案其实就是要方便做出选区)

如何制作“选中就变”的神奇图片 09

9. 打开图像 B,用 CTRL+V 粘贴图像。

如何制作“选中就变”的神奇图片 10

10. 到这里图像基本完成了,如果 B 图像太明显,可以双击背景图层转化为普通图层,然后降低不透明度(为了防止最终图像发虚,我在底层又添加了一个纯黑色的图层)

如何制作“选中就变”的神奇图片 11

11. 保存最终结果,效果对比:

如何制作“选中就变”的神奇图片 12

注:本例中我已经将两张素材的图像位置调整合适了才做的,实际上制作时通常 B 图的位置不是很合适,比如没有被图 A 完全遮挡而过于明显,此时应当在第 9 步后自行移动调整,使 B 能够比较好的隐藏而不被发现。
成果:

如何制作“选中就变”的神奇图片 13

——————————昏. 割. 线.————————————

刚实验了一下,当初写这个的时候还在用 XP+IE6,效果完美。

现在使用 Google 浏览器是不可以的,因为 Chrome 的选中效果就是罩一层蓝色,没有像素损失。而 IE8 的效果也不完美。截图放大发现,图片选中不再是固定的填充“奇数行奇数列 + 偶数行偶数列”了,随着页面滚动,填充的像素在奇偶之间变换。按照上边的教程来说,就是一会遮住 A 图,一会遮住 B 图。这倒给我个灵感,不用刻意隐藏某幅图了,干脆把两张图混合起来,随着滚动会来回变,也很有意思

比如这个,测试一下,用 IE8,Ctrl+A 全选后,上下拉动,是否有快感……

如何制作“选中就变”的神奇图片 14


欢迎转载,转载请注明出处:蔓草札记 » 如何制作“选中就变”的神奇图片

♥ 喜欢 0 赞赏
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 博主很牛x
    Sleep Innovation5年前 (2011-12-03)回复