
2.9 实例精讲——绘制风景画
练习目标
本节利用各种绘图工具绘制一幅矢量风景画,通过对操作步骤的详细讲解,使读者熟练掌握Animate CC 2018工具箱中各种常用工具的使用方法。
设计思路
首先制作一幅渐变的背景图,使用“钢笔工具”绘制云朵并填充,然后使用“线条工具”绘制建筑的大体轮廓,再使用“选择工具”对轮廓进行精确地调整。最后使用“矩形工具”和“钢笔工具”绘制风叶和草地,最终效果如图2-165所示。

图2-165 风景画效果图
操作步骤
2.9.1 制作背景

2-10 制作背景
(1)新建一个Animate CC 2018文档。选择“矩形工具”,设置笔触颜色无,在舞台上绘制一个矩形。选中矩形,打开“信息”面板,修改矩形尺寸与舞台大小相同,且与舞台左上角对齐,如图2-166所示。
(2)选中矩形的填充区域,打开“颜色”面板,设置颜色类型为“线性渐变”,3个颜色游标从左至右分别为#2F94EC、#D7EEFD和#2F94EC,如图2-167(a)所示,填充效果如图2-167(b)所示。
(3)使用“渐变变形工具”单击矩形的填充区域,调整矩形的填充渐变方向,效果如图2-168所示。

图2-166 修改矩形大小和位置

图2-167 “颜色”面板中的设置

图2-168 调整后的渐变效果
2.9.2 绘制云朵

2-11 绘制云朵
(1)在图层面板左下角单击“新建图层”按钮,新建一个图层。使用“钢笔工具”绘制出如图2-169所示的云朵图形,然后打开“颜色”面板,设置颜色类型为“线性渐变”,第一个游标为#2F94EC,Alpah值为20%,第二个游标为#D7EEFD,如图2-170所示。

图2-169 绘制出的云朵图形

图2-170 “颜色”面板中的设置
(2)使用“颜料桶工具”填充云朵图形,并使用“渐变变形工具”调整它们的渐变效果,效果如图2-171所示。使用“选择工具”选中云朵的轮廓线,按Delete键删除,效果如图2-172所示。

图2-171 调整后的渐变效果

图2-172 删除轮廓线后的效果
2.9.3 绘制建筑物

2-12 绘制建筑物
(1)新建一个图层,使用“线条工具”绘制如图2-173所示的图形,然后使用“选择工具”选中多余的线条,按Delete键将它们删除,效果如图2-174所示。

图2-173 绘制出的图形

图2-174 删除多余线段后的效果
(2)将鼠标指针移动到轮廓线上,指针的形状显示为时,按下鼠标左键拖动调整线条的圆滑度;将鼠标指针移动到线条的交叉点上,鼠标指针形状变为
时,按下鼠标左键拖动可以移动线条的位置,调整后的效果如图2-175所示。然后选择“颜料桶工具”,设置填充色为深蓝色(#232C8E),在图形最上端的区域单击填充颜色,效果如图2-176所示。

图2-175 图形调整后的效果

图2-176 填充颜色后的效果
(3)打开“颜色”面板,设置从暗青色(#0F79A5)到青色(#72E7F3)再到暗青色(#0F79A5)的线性渐变效果,如图2-177所示。使用“颜料桶工具”填充中间区域,并适当调整渐变的方向。然后再为其他的空白区域填充深蓝色(#232C8E),效果如图2-178所示。

图2-177 设置渐变颜色

图2-178 填充颜色后的效果
(4)在“颜色”面板中设置从深蓝色(#232C8E)到亮蓝色(#345AB1)再到深蓝色(#232C8E)的线性渐变效果,如图2-179所示。完成后使用“颜料桶工具”填充建筑物最下方的区域,并适当调整渐变的方向。然后使用“选择工具”选中图形的轮廓线并删除,效果如图2-180所示。

图2-179 设置渐变颜色

图2-180 填充颜色并删除轮廓线
2.9.4 绘制风叶

2-13 绘制风叶
(1)新建一个图层。选择“矩形工具”,笔触颜色为深灰色(#333333),大小为1,绘制一个矩形。选中矩形的填充区域,在“颜色”面板中设置从暗青色(#0F79A5)到青色(#72E7F3)再到暗青色(#0F79A5)的线性渐变效果,如图2-181所示。
(2)使用“渐变变形工具”单击矩形,调整矩形的填充方向和范围,效果如图2-182所示。

图2-181 设置渐变颜色

图2-182 填充效果
(3)使用“矩形工具”绘制一个如图2-183所示的矩形,笔触颜色为深灰色(#333333),无填充色。
(4)使用“线条工具”在矩形中绘制网格,效果如图2-184所示。然后将绘制好的图形进行复制,并拖放到如图2-185所示的位置。
(5)选中该图层中的所有内容,使用“任意变形工具”适当调整图形的大小,并将其进行适当的旋转,效果如图2-186所示。然后将该图形进行复制并将其进行适当的旋转,效果如图2-187所示。
(6)选择“椭圆工具”,设置笔触颜色无,按住Shift键在舞台上绘制一个正圆,并填充黑白径向渐变,然后拖放到两个风叶的交叉处,如图2-188所示。

图2-183 绘制出的矩形

图2-184 绘制网格

图2-185 复制图形

图2-186 旋转图形后的效果

图2-187 图形调整后的效果

图2-188 绘制圆形
2.9.5 绘制草地

2-14 绘制草地
(1)新建一个图层。使用“钢笔工具”绘制出草地轮廓,如图2-189所示。

图2-189 草地轮廓
(2)打开“颜色”面板,设置从#0B381C到#129149的线性渐变,如图2-190(a)所示。然后使用“渐变变形工具”调整渐变方向,如图2-190(b)所示。

图2-190 填充草地
(3)使用“选择工具”选中草地的轮廓线,按Delete键删除。然后单击编辑栏上的“剪切掉舞台范围以外的内容”按钮,最终效果如图2-165所示。