如需转载请点此查看转载须知。

之前我们给大家推送过一期《一大波品牌电商Gif海报素材来袭！设计师们请收下》。所以本期就给大家讲一下，如何来制作Gif海报。

01 | SALE!

粉色和绿色的相互切换，给人以视觉冲击

海报制作分析

首先我们分析一下这个海报，它主要有两个配色，粉色和浅绿色。在背景变化的时候，海报上的字和线框的颜色也随之发生了变化。

另外，英文字体结合了背景的实体叶子，也让海报整体生机许多。图中的芭蕉叶是作为装饰性的最常用到的叶子，英文搜索是 banana leaf。

下面我们就来看看制作过程吧。

画布大小 / 900*900px

分辨率 / 72px

粉色值 / #edc1b6

首先创建一个画布，并创建一个背景图层，选取色值 #edc1b6，然后使用油漆桶填充。

接着，我们将芭蕉叶素材拖入到画板上。可以先将芭蕉叶图层转化为“智能对象”（右击图层选择设置），这样我们无论怎样缩放它，都不会影响它原本的画质。

然后将叶子进行水平旋转（选择芭蕉叶图层，然后CMD+T，再右击调出设置），拖到右下角，这样就有了对称的两个芭蕉叶。

字体 / Arial Black

大小 / 94px

颜色 / #d7a28a

再新建一个图层，创建一个白色矩形的底，输入宣传字体后，字体颜色选择比背景较深一点的颜色，并绘制一个矩形线框，配色与字体同样。

现在，我们就准备好了一个基本的静态海报了。

背景值 / #d4ecdc

字体色值 / #60a977

接着，隐藏掉粉色相关的图层，再用同样的方法再绘制浅绿色的底和字体。

下面我们需要制作Gif动画了。选中顶部菜单 - 窗口 - 时间轴，调出时间轴设置，并点击创建逐帧动画。

点开时间轴里第一帧下面的三角箭头，来设置时间。这里我们选择 0.5。这代表这张图片将显示的时间为 0.5s。

选择垃圾桶前面的图标，我们将得到了复制的第一桢，然后再在第二帧上进行修改。

注意是在第二帧被选中的情况下，我们在右侧的图层里，隐藏粉色相关的图层，显示浅绿色相关的图层。这样两帧海报就准备好了。

记得检查一下，下面的播放模式我们要选择“永远”，这样两桢海报才可以循环播放。

这样，一个简单又好看的海报就做完了！

02 | WHAT'S NEW

利用图层的交叠，做出霓虹灯变幻的效果

海报制作分析

这款海报里的元素都非常简单，但是效果也很好，利用字体图层的交叠，做出了一种霓虹灯变幻的感觉，Easy & Strong。

字体一 / Reklame Script Medium

字体二 / Formata Outline

首先我们先输入好字体，what's 是用了一款接近于手写的字体，NEW 则是用了一种镂空的框线字体。

在框线字体里，用圆形工具绘制出延着框线的小点点作为装饰。

接着，我们复制一下这个框线的NEW字体，并把它转为图片图层，这样我们就可以用魔法棒选中中间镂空的地方了。

然后，我们再新建一个空白的图层，命名为Shadow，然后选取图中的颜色 #51fad3，填充。

删除刚才的字体框线图层，这下就只留下了Shadow的图层。

这时我们再调出时间轴的设置，第一帧里，我们先把Shadow色彩图层隐藏。

然后到第二桢，再让它显示出来。但是我们移动一下Shadow图层，让它与字体图层错位开来。

不要忘记检查每桢是不是设置的0.5s，以及是否为循环播放。

好了，第二个海报就这样做好了！

03 | NEW COLLECTION

利用阴影，增加海报的立体感

海报制作分析

这款海报的设计其实也非常简单，主要是利用了阴影造成了视觉差，让海报变得更具立体感。

我们就来看看它的制作过程吧。

画布大小 / 900*900px

背景色 / #fde2ff

线框色 / #4157ff

我们先创建一个画布，选择 #fde2ff 进行填充。用矩形工具绘制如图形状，线框颜色设为 #4157ff，里面的填充色选为白色。

字体 / ITC Avant Garde Gothic

字体颜色 / #4157ff

输入宣传字体，并选择和线框一样的蓝色。

在线框的空白处加入一些小元素，如图所示。

我们复制一下框线的图层，将原本填充的白色也选为蓝色。

还是打开时间轴工具，第一桢我们隐藏阴影的图层，第二桢我们显示它，并且将整个图层的位置稍微向上右移一些。

最后，动感立体的效果就出来了！

西瓜设计研究所

互联网创业 | UI设计 | 开发资源 | 教程

未经允许请勿转载，烦请私信作者获取授权

© uirush.net