动态GIF店标制作图文详解

今天淘宝学堂网地瓜和大家分享动态GIF店标制作图文，用图文并茂的方式分享给大家，让大家都能自己动手做出自己的店标来！以下是动态GIF店标制作图文详解：

动态GIF店标制作工具PS（PhotoShop CS以上版本，简单易用），按照国际惯例先让大家看看完整效果图：

以下是动态GIF店标制作图文详解的全过程了：

1、打开PS，将你选择好的图片素材分别在PS中打开。如图：(尺寸大小调整为120*120。为什么？接着看就明白了)

2、新建一张图片，点PS顶部任务工具栏的【文件】——>【新建】（或者按Ctrl+N）这里我们主要针对淘宝来制作店标，而淘宝的店标可用尺寸为120*120，所以我们需要讲图片尺寸大小设置为120*120,单位选择（像素），如下图：

其它默认即可。点好后如下图：

现在PS中将有我们要使用的4张图片，3张是我们选择的图片素材，还有一张就是我们刚才新建的用来制作店标的空白图片。我们继续往下做。

3、分别将三张图片素材复制到空白图片文件里来。（部份没有用过PS的朋友可能不知道怎么操作，这里简单说明一下，高手们可以直接跳过此段）

选中一张图片素材文件，激活当前图片，全选（按Ctrl+A 键），然后复制（按Ctrl+C键）。

再点回空白图片，粘贴过来（按Ctrl+V键）,这样即可将第一张图片素材复制到空白图片上了，如下图：

那么我们将用同样的方法，把其余的2张图片素材也复制到空白图片上去，然后关闭那三张图片素材的窗口。现在不需要关他是如何如下图：

在PS窗口中的右下方的【图层信息】中可以看见如上图所示的界面（如没有看到请按F7键调出图层信息）

4、到此，我们的准备工作已经完成，下面将进入真正的动态GIF淘宝店标的制作了

点PS工具栏上的转入到imageready按钮进入到imageready中进行GIF的制作。按钮位置如下图（或者直接按Ctrl+Shift+M也可进入）即工具栏下面最下一个按钮。

进入imageready后界面如下所示：

5、将【动画】窗口显示出来，如果你的ImageReady中已经有【动画】窗口本步骤可以跳过，如下图：

6、点下图中动画窗口中的“复制当前帧”（右边第二的功能按钮），连点两下（因有三张素材，固三帧即可）

连点两次后得到如下图所示界面。

此时对应于右下方的【图层】信息如下：

7、选中动画窗口中的第一帧，再在【图层】中关闭图层2，图层3(点上图中眼睛处即可)，图解如下。

8、同样操作，在动画窗口中选中第二帧，在图层中关闭图层1，图层3，得到如下信息。

同理选中动画窗口中第三帧，关闭1、2图层，得如下：

此时，动画制作基本完成。可点动画窗口中的“播放”按钮看看效果了。

如果发现动画闪动得太快，是因为时间间隔太小，所以我们还需要调整动画帧的间隔时间，再动画窗口中，每一帧的下面有个时间，0秒，我们点下那个向下的小箭头，选择需要的时间，我这里统一设置为0.5秒，你也可以根据自己的喜好设置成其他的间隔时间

9、再点播放按钮看看效果，是不是很不错啊，现在完成设计了，对于新手保存可能又是一个问题了。 下面说说如何保存动态GIF图片。

10、保存设计的图片

直接点存储是存为PSD文件格式，是为了方便下次改动时用的，在网页上是看不到的，所以必须选“将优化结果存储为”弹出对话框后，选择存储的路径，后面还有一对话框，选中每次后，点“好”然后再在你刚存储的地方去找你制作的GIF图片，最后效果图：

PS：最开始的那张完整效果图中还有2个文字图片，其实就是在我们制作的这个动画的基础上增加了2个自己设计的文字图层，然后做到动画里面，同时也要增加2帧动画哦！制作方法基本相同。