动态图片可以起到强化的作用,用户一眼就能看到,比如按钮,或者多幅画面切换,不仅美观,还起到了一定的强调作用,其实动态图片实现的基本原理是多张静态图片按时间顺序交替显示形成的。下面我把我工作经验分享给大家,希望给您带来帮助!下面以咨询按钮为例
工具/原料
photoshop设计软件 电脑
静态图准备
1
这里我就不在讲整体画面的设计步骤,只讲需要做成动态的部分,以免误导了大家的思路。首先将设计好的画面用PS打开。
2
用圆角矩形工具做一个精美按钮,注意一定是要在新的图层上,如下图。
3
将该按钮复制,如下图:用鼠标托住图层到创建新图层,这样就复制了一个完全一样的新按钮(图层1副本),如下图:
4
将该新按钮调节不同的颜色,如下图:
5
新建图层写上文字,点击咨询。如下图:
6
1、将背景层和点击咨询图层分别各复制一个2、然后分别将文字、按钮、背景合并一个图层,文字副本、按钮副本和背景副本合并为一个图层。如下图:
制作动画
1
打开窗口 — 时间轴面板 — 在时间轴面板上创建新图层,有几个图层创建几个图层,这里是两个,所以我们创建两个,如下图:
2
点击小三角,设置切换时间,这里我们设置成2秒。如下图:
3
在时间轴面板上选中图层1,然后选中图层面板中的背景,隐藏图层点击咨询,如下图:
4
然后,选择时间轴面板上图层2和图层面板中的点击咨询层,如图:
5
点击三角进行预览,注意,次数为永远!这样预览就可以看到一幅完整的动态图了,如图:
6
然后按住 ctrl+alt +shift +s 保存,格式选择GIF,这样这幅简单的动态图就完成了。