最近流行一种双击才能播放的GIF动画。例如下面这两张:
在网页上展示不能达到最佳效果。导入QQ表情后,可以达到让人惊讶的效果。因为用户最先看到的,是带有文字的静态画面。QQ用户双击图片后,GIF动画播放。
这种技巧可以把动画隐藏在一张静态的“封面”后面,用户不双击,就无法知道后边的GIF动画是什么内容:可能是美女脱掉衣服,也可能是吓人的女鬼,还可能是凤姐。
众所周知,GIF动画就是按顺序播放一组图片,原理跟播放电影是一样的。通过FireWork,我们可以控制gif重复播放的次数。
上面这些动画的原理,是把gif动画重复播放的次数设置为1,也就是不循环。
另外有两个小技巧需要注意的:
1、State不能停顿。这样是为了在QQ聊天窗口直接显示“封面”。
2、在动画后面,设置一些重复的State,伪造静态效果。这个需要控制一定的数量,例如100个。这样是为了让用户误以为动画结束了,关闭动画。其实用户如果不关闭,最后动画会停留在最后一个State,也就是“封面图片”上。这样的用户体验可能就差一些了。(转自懒惰之计)
Photoshop做法可参考糖豆的文章
最近QQ聊天群里经常会看到一些“双击有惊喜”的图片,一张美女的图片双击后一秒变凤姐真是让人大跌眼镜。同时,糖豆也发现很多搞推销的制作了一些“双击有惊喜”的图片,感觉这种推销方法真是成功啊,达到率100%有木有。
本人经过一番研究也明白了“双击有惊喜”图片的制作方法,在这里教给大家。简单说一下大体制作思路:
1. “双击有惊喜”聊天表情本质上是一张GIF图片,设置只播放一次。
2.GIF图片的“双击有惊喜”显示为封面,需设置为GIF最后一帧。
3.双击后显示的图片实际不是静止的一张图,而是尽可能多的重复帧数。
注意到以上三点,现在就可以着手制作了:
Photoshop制作QQ聊天图片“双击有惊喜”
1.准备两张同样大小的图片,一张为“双击”封面,另一张为双击后显示图片。本人准备的是两张360px*360px的图片(360px正好能填满QQ聊天窗口)如下图:
2.分别在图层中双击两张图片解锁,如下图:
3.图片解锁后,把其中一张图片用Ps的移动工具,移动到另一张图片的上层,并且完全覆盖。
4.点击窗口-动画,调出photoshop动画工具。如下图:
5.确保双图层(已被覆盖的图层)文件被激活(鼠标点击后显示到动画窗口),点击动画窗口的复制所有帧按钮,如图:
6.确保鼠标激活动画窗口的第二帧,在图层中修改上方图层透明度为0%,以显示出下方图形。如图:
7.鼠标激活动画窗口第一帧,点击复制所有帧按钮,同第五步,复制帧数在100次以上,并将动作窗口左下角的“永远”改为“一次”。小技巧:鼠标点击100次以上着实脑残,大家可利用ps的动作功能,重复此动作即可。具体可参考:photoshop如何批量处理图片?详解ps动作工作 。效果如下:
8.制作完毕,点击文件-存储为web和设备所用格式,在弹出的页面中选择GIF格式,保存即制作完毕。
如图,动画窗口最后一帧图片为封面,前面100帧为双击后显示的效果。以上教程和方法均为本人原创并测试真实有用,请大家仔细参照教程制作。