Photoshop loading gif 动画

免费

源文件下载
34077KB

在网页上经常看到网页加载过程中有动画加载过程，在页面加载完毕之前用一个Loading动画来显示，这个在很多程序中也能见到这种效果，在本文实例中将展现Photoshop制作loading动画过程和原理，loading动画的规律是连续性的，动画的开始和结尾都是能够衔接的，这样就能时间无限连续循环，下面就以简单示例来演示，如图。

制作过程

在Photoshop中新建，在新建面板中预设下拉选Web,大小选640×480，其它预设参数默认即可，点击确认即建立新的绘图面板。接着将背景填充为灰色（背景设为黑色然后Ctrl+Delete快捷键填充），将标尺显示Ctrl+R键。

下面建立辅助线，用圆形框选工具画定圆形选区（Shift+alt+鼠标左键，椭圆选框绘制正圆），新建图层，填充暗黑色，填充完然后再新建一个图层填充蓝色。下面是具体过程。

接着复制前面填充的两个层圆，复制两次，水平对齐间隔两个像素。下图为操作演示。

图形元素绘制完，接着进入动画编辑和动画设计，点击“ 窗口(W) ”菜单里面的“ 动画 ”，动画面板打开，在视图中隐藏辅助线Ctrl+H，然后在动画面板中建立主要关键帧，通过图层通道设计动画过渡，在本示范操作过程中开始美帧间隔时间为1秒，然后又修改为0.5秒，可以根据自己需要来调整每帧时间，建议不小于0.5帧，主要关键帧的时间间隙太小动画效果将无法看清楚，同时最大不要大于1.5，时间间隔太长，效果就变得缓慢。

最后输出动画，将辅线继续显示(Ctrl+H)调整画面尺寸然后裁切图片尺寸，在“ 文件(F) ”菜单中找到“存储为Web和设备所有格式” 输出gif格式动画图片。