打印

[教学] [原创]关于网页中选择后会变换的图片探讨

这是本人的一点心得,希望和大家分享,主要是提供思路,如果有说得不准确或错误的地方还请大虾们指点
如果觉得还不错就支持一下

      这几天发现网上继那幅神奇的图片选择后会由士兵变美女之后,又出了其他一些选择后会有其他变化的图片,之前对此并不是很感冒,不过在经典论坛中看了cfljg“来点好玩的——还原图片”(http://bbs.blueidea.com/viewthre ... p;extra=&page=2)一贴中将底片般的图片复原,之后又在看漫画的时候看到有人的贴图可以实现灰度图片选择后变彩色……

因此我也想要试试看这些图片是如何实现的?是基于什么原理?是否可以将他们复原?

首先先看看几个图片:

1 这个是N年前的神奇图片:


2 这个是cfljg贴中的底片式的神奇图片:


3 这个是火影忍者论坛中发现的灰白变彩色的图片:


暂时就发现这三类比较有代表性的

你们也可以想一下是如何实现,看看我们的想法是否有类似的地方

下面进入正题

先从第一个图片说起

这是选择前后的对比图:

如果你选择以上图片的话会发现左边的变成右边的样子,而右边的图像消失了,再看看看下面这个对比图


是不是即使你选择了以上图片也不会改变右边的图像了。



为什么?

他们的区别仅仅是因为中间的间距差一个像素而已

第一幅 的间距
第二幅 的间距
这就是我们要首先了解的,我们在网页中选择图片的时候到底发生了什么事情

经过我多次的试验发现一个规律(不知道是否正确),

那就是在网页中选择图片时图片上都会出现间隔一个像素的蓝色像素存在而且都是从第一行第一个像素开始

放大后如图:

每个蓝色块为一个像素

为了证实我的猜想的正确性所以我做了个尝试,做了一个黑色的类似的像素间隔图层覆盖在神奇图片的上方,效果如下:

如果你选择这个图片会发现其效果和“神奇图片”的效果一个样

我还做了其他很多尝试结果都是一样的,这里只是列出一个,起码都证明我的猜想还是正确的

所以我们的这个会变样的神奇图片只不过在原图片图层下放多个其他图片的图层,然后加个蒙版而已

当然为了更自然的隐蔽底下的图层还要做些处理(具体的要看图片的具体情况了,这里就不讲这些了)

现在也应该明白之前两个对比图间距差一个像素出现的差别了吧!

[ 本帖最后由 clz8206 于 2007-5-15 06:48 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
逛了一下,喝了点水继续发
现在来讲讲经典论坛上那底片般的神奇图片,有了上节的介绍,我们可以给图片加个白色的间隔像素图层遮盖下看看会出现什么情况,如下图:

图2.1

如果是遮住图2.1显示的部分又会怎么样呢?如图:

图2.2

看起来和原图有点类似,但并不一样

看到这里是否觉得以上两个图有什么联系呢?看到黑的变白了,白的变黑了,所以我大胆的猜想了下是被反相了

将上图反相下如图:


看起来图2.3是不是和图2.1很像,其实他们的像素位置可是不同的,而且是刚好相反的,将他们连个合在一起的话就变成下面这样了:

基本上cfljg“来点好玩的——还原图片”这个贴上的这些图片都可以这样复原,当然还有其它方法,不过原理差不多,就各自发挥吧

敲字真累!

[ 本帖最后由 clz8206 于 2007-5-14 23:01 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
现在讲最后的一幅黑白变彩色的例子

其实原理都一样的,我们先来用上面的方法分别遮罩原图:

图3.1

图3.2
从以上两幅图来看都看不出他们是灰度图片,那为什么合在一起看起来就像灰度图片了呢?

搞懂这个还多亏了上次看了一个调色教程中用到了“模糊-平均”

将原图平均后:

图3.3

可以看到一片灰色,哈哈!

之所以想到这个是之前了解过眼睛会对看到的颜色进行类似的平均处理,所以猜想临近的两个像素被眼睛平均后像灰度了

那图3.1和3.2之间是什么关系呢?

首先我想到是灰度图象是如何表现的,我的理解就是用不同亮度白光(其实并不准确的)

那白色光是不同色光组成的,色环上有互补色一说,就是说两个互补色之间此消彼涨

所以就想到互补色混在一起是否会出现灰度呢,特别在意图层上填充了一个颜色和他的互补色,各占一半,如图:

图3.4

把图3.4平均:

图3.5

也变成了灰色

试了其它很多都是一样的结果

有了验证就可以大胆对原图进行变换了

把图3.2用色相调整,将他的色相变成他的互补色,也就是将色相调到180,如图

结果如图:

图3.6

感觉和3.1色相一致了,看起来也是很像,将3.1和3.6合在一起就变成了这样了:


图3.7

完成收工!!

这里主要提供我的思路,也提供一种学习方法吧!

至于如何制作开始的那些效果图,应该也会了吧,把步骤反过来就行了,哈哈!!

[ 本帖最后由 clz8206 于 2007-5-14 22:58 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
伤心,没人看T_T

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

看不太懂~~~

TOP

引用:
原帖由 kiki51935959 于 2007-5-14 23:26 发表
看不太懂~~~
看来我要检讨一下我的表达能力了

TOP

你这个是不是应用的填充命令,然后又将他的图层模式改为了柔光呀!!
从而得到这种效果呀!!
我曾经做过一个将电视的隔行效果转换为逐行的图片,好像也是应用的这个原理!!
不知道我分析的对不对!!

TOP

引用:
原帖由 shumin2006 于 2007-5-15 07:58 发表
你这个是不是应用的填充命令,然后又将他的图层模式改为了柔光呀!!
从而得到这种效果呀!!
我曾经做过一个将电视的隔行效果转换为逐行的图片,好像也是应用的这个原理!!
不知道我分析的对不对!!
不用柔光,填充后直接载入选区给图层添加蒙版

TOP

比较支持,顶下

TOP

很有些意思!我试验了一下,看看。

[ 本帖最后由 zehee 于 2007-5-15 10:39 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

支持楼主
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

回复 #8 clz8206 的帖子

哦,知道了谢谢

TOP

今天停电,刚刚才有电郁闷死了
11楼说的是第二种情况用的,也就是他那个帖子里用的方法,不过我还想出了另外的方法,为方便说明作了个图:

效果图


[ 本帖最后由 clz8206 于 2007-5-15 23:01 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

黑白照片变彩色的做法也和上面的类似,方法如下:

效果图 :


[ 本帖最后由 clz8206 于 2007-5-15 22:56 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

强,学习了,

TOP

还是不明白

TOP

回复 #16 jjy521 的帖子

参照13、14楼的做法作下效果,再返回去教程思考下,应该没问题的

TOP

无聊中做个骷髅变MM
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

try g

TOP

你提到的"像素位置" 这个我们怎么直观的判断啊 ?
还有你提到的"原图平均"这个也不懂  能不能说一下啊?

TOP

回复 #20 bonsens 的帖子

对像素的位置只能通过放大来观察
“原图平均”是针对此前提到的用“模糊--平均”这个命令
忙碌中,请稍候……

TOP

太强了 太强了 楼主太强了
这是怎么发现的?
バラは散るために。

TOP

晕,,,,太深奥了,看不懂!!
...兰花香自苦寒来...

TOP

回复 #22 cerbrus 的帖子

慢慢分析图片摸索出来的
忙碌中,请稍候……

TOP

这种图片以前玩过。我觉得第一个想出来的人很强。。。

TOP

有一点不对。网页上拉中图片后。上面的像素是黑白间隔不是蓝白间隔

TOP

回复 #26 dandan320 的帖子

你用一个纯白色的图选择后,截图,然后在PS中放到最大你就知道是什么颜色了
忙碌中,请稍候……

TOP

没什么技术含量!

纯粹是浪费时间!

用液晶显示器看,一点效果没有!
域名xybeta.com,dataobao.com,vfile.cn出售

TOP

LS的,是FF下失效。。

TOP

引用:
原帖由 clz8206 于 2007-6-8 23:35 发表
你用一个纯白色的图选择后,截图,然后在PS中放到最大你就知道是什么颜色了
哎。黑白相间啊。你再多试试。我做过实验。

TOP