|
1回顶部 更多精彩平面及网站设计图文教程、视频教程，尽在PConline创意设计栏目。 本文由中国教程网专家祁连山原创。
大家好，好久没有写图文教程啦，今天我们学一个综合实例：瓢虫变色交互动画。今天我们换个形式，我一边写一边发，大家跟着我一起把这个东东做完。 我们今天的主题是结合使用Photoshop CS3和Flash CS3，制作出一个瓢虫动画。如果只想学PS手绘的话，大家可以只学前一部分。如果对Flash编程有兴趣的话，可以跟我着，认识一下更加有趣的Flash。多个软件结合使用，会做出更加漂亮的作品来。 本文我们可以学到的知识： 1、手绘知识之分层绘制表现质感法，我们要表现出光滑的外壳和晶莹透亮的感觉，同时为下一步的交互做好准备。 好了，多余的话就不讲了，我们开始今天的手绘之旅。 先看一下我们将要达到的效果，这是我以前的作品，今天重新绘制它，可能最终的结果会有不同。 事物都是在改进发展的，每一次练习，都是一次升华，也许你这次做得不如上次，但你会得到宝贵的实战经验。总体会是水平上升的趋势。 看下面虫虫左边有三个拉杆，把它们向下拉，会怎么样呢？
第一步，我们建立一张画纸。我们可以使用“文件”-“新建”打开新建文件对话框。当然我更支持初学者开始就使用快捷键，用鼠标在Photoshop空白的地方双击，也可以弹出新建文件对话框。或者按CTRL+N，也可以弹出新建文件对话框。
注意！单位一定要设置为像素，不要设置为厘米，否则也许你的电脑会死机了。 2回顶部 第二步，选择椭圆选框工具，注意要勾选消除锯齿选项。
本步骤要注意的几个地方：
小提示：将选区存为通道，可以在以后任何时候还原这个选区。通道和选区其实是一回事。 另外，图层中这个红色的色块，其实也保存了选区信息，我们按着Ctrl键，单击这个图层图标，和按着Ctrl键，单击刚才存储的通道，得到的结果是相同的。也就是说，在图层中，图层的外形其实也可以理解为一个选区。调用它的方法就是按Ctrl单击该图层图标。 按D键（注意在英文输入状态下），可以将前景色和背景色转换为默认的前黑后白。 如图所示选择前景到透明渐变，用线性渐变的模式。我们下一步将在一个新图层上画出明暗，以赋予它质感。
建立一个新图层，我们在这个新层上拉出渐变。注意，按着Shift 键，可以拉出垂直的渐变。
也许有人会说了，它这么暗淡，怎么看怎么难看。呵呵，其实我们现在只是做出它的暗部而已，后面还需要对它进行精细加工，只有把明暗拉开了，才会显得明的更明，暗的更暗。这也是初学者常见的问题之一。想要画出不平淡的作品，就要有对比。明暗对比只是其中一项而已。 按Ctrl+D，取消选择，单击图层面板下方的添加图层蒙版按钮，为暗影图层添加一个蒙版。用椭圆选框工具选出中间靠下方的一块范围，在蒙版上填充黑色。这样我们就将这个图层该处变成透明的啦。如图所示：
这一步的作用，是做出晶莹的质感，让这个地方看上去亮一些，我们考虑到将来要制作一个透明的外壳，所以不能采取叠加颜色的方法，那样将来做透明外壳时，就穿帮了。所以我们要把这个地方的黑色像素抹去，用的是添加蒙版的方式，在该处填黑色，即让该处成为透明。 Ctrl+D取消选择，下一步，我们将这个蒙版中的黑块高斯模糊，这样这个透明区域就会变得柔和，而不是带有很生硬的边缘啦。 如图所示，使用“滤镜”-“模糊”-“高斯模糊”，设置如图。
本步需要注意，模糊必须是在蒙版上进行，不要把图层给模糊啦。这也是初学者常犯的错误之一。 3回顶部 下面我们来制作斑点。 我们知道，瓢虫有很多种，七星瓢虫最常见。不过我们这个小瓢虫个头小，我们简化它，过多的斑点反而效果不好。在上面点三到五个斑点就足够了。 我们单击新建图层按钮，按图示双击每个图层，分别为它们起名。最下面的色块层，我们起名为“底层”，中间带蒙版的透明黑色层，起名为“暗色”，最上面新建的图层，起名为“斑点”。这样当图层变多时，这里会很直观，不会乱成一团麻，不好管理。 按Ctrl 单击底层，将最下面的红色块外形载为选择区。（可以回忆一下前面存储通道那一步，我们可以用载入通道的方法得到同样的选区） 使用黑色前景色，用较硬的画笔，按“[”或“]”键，缩小或者放大画笔笔头，在斑点层单击，建立这些斑点，如图所示：
Ctrl+D取消选择，建立一个新的图层，起名叫“头部”。我们来画虫虫的头部。
使用心形形状制作路径，如图所示。
使用直接选择工具，可以框选多个控制点进行移动，我们在框选控制点后，要用键盘上的方向键来移动，才能保证两边对称，因为用鼠标想十分精确的对位是不太容易的。 用直接选择工具，框住正中间上下两个点，向上提一提，可以看到，心形的外形就变得更平一些，再框选两端的两个控制点，用向下方向键移动，使它的外形与瓢虫头部相似。 制作完成如图所示。
提示：在我们单击控制点时，被选择的控制点会实心显示，未被选择的控制点则空心显示。框选也是如此。 4回顶部
按图示，路径选择工具框选两个路径，单击组合，即可将两个路径合二为一。
在路径面板，按Ctrl单击我们刚刚制作出来的工作路径，将它载入选区。
使用钢笔工具，在头部层和斑点层中间，建立新的图层，使用形状图层选项，前景色为白色，在圆的三个点单击，得到一个白色形状图层。
注意：这三个点的位置和比例。不要错得过远。这个白色的层，将成为瓢虫的高光，即光滑材质对光源反射的模拟。 我们使用转换点工具，拉动路径中的控制点，把这个高光范围修改为如图所示。
这一块相当于圆形物体对光源的反射。比如说，我们看到的汽车，它会反射周围的光线，车漆越好，就越像镜子那样把周围的景色反射回来，我们可以想象一下，在右上角那里有一个光源，它照在虫虫身上，光被反射出来进入我们的眼镜会是什么样子。 在图层窗口，修改该层不透明度，降低一些。 5回顶部 下面这步，我们把光源光做得更加透彻。
这就好比我们学习工笔画，用淡淡的颜色，一层一层的上色，并且还有渐变过渡，得到的效果是非常棒的，如果我们直接用很浓的颜色上色，则会出现很粗糙的笔触。使用蒙版或者橡皮作画也是如此。要学会过渡和渐进。 我们再回到暗色图层的蒙版之上，用黑色画笔，慢慢的把暗部再修饰一下，把光源反射区中的暗色再去掉一些，更加透彻。 总之，做这个工作，就是要淡色慢涂，一点点的观察调试，忌心急猛刷，一步到位。
下面俺放出最让人眼前一亮的东东，估计这个东东大家都喜欢。让大家在学习的过程中也能会心一笑。也祝大家在中国教程网论坛能学好玩好，多赚钞票。 这个图像将成为虫虫身上的贴图。有人会说了，三维动画才用贴图啊。嘿嘿，今天大家和我一齐，为平面图加贴图吧。
打开这张图像，将其拉入我们的瓢虫图中，设置如图示，改名为“映射”。
使用“滤镜”-“扭曲”-“极坐标”-“平面坐标到极坐标”，我们把这张平淡的图像做成围绕型。 之所以使用这个扭曲，是因为我们将把它放在虫虫背壳上。得让它看上去有凸起的感觉，我们如果用球面化滤镜的话，可能得到的结果并不理想。用极坐标，虽然它的扭曲结果并不是真正的凸起，但是得到的效果却是最好的，所以我们只追求骗得别人的眼睛，达到图像效果就可以。 绘画艺术是一门欺骗的艺术，学门欺骗别人的眼睛。俺在郑大学美术时，曹老师这样告诉我。在作画时，我时常注意这点，在这里，欺骗并不是一个贬意词。 无论黑猫黄猫，抓到老鼠就是好猫。扯得有点远了，我们接着做。
按Ctrl+T,我们开始对这张图像进行缩小。这样可以让它符合虫虫的身材，正所谓量体裁衣嘛。 如果在自由变换时，看不到控制点，说明图像太大，控制点超过了窗口。 这里说一个重要的小技巧：按下窗格键后，再按下Alt键，这样就会在自由变换不被取消时，切换到缩小工具。点击窗口缩小，就可以看到控制点啦。 6回顶部 如图缩小它，让中间的变形区域和虫虫身体符合。注意，不要按着Shift键。
按着Ctrl键，单击“底层”图标，把最下层的外形载入选择区，Shift+Ctrl+I反选，按DEL删除映射图层多余的像素 这样这个图层就和下层相吻合了。在图层面板，将图层混合模式由“正常”改为“滤色”。
还是老套路，降低该层的不透明度，加一个蒙版，慢慢的擦出透彻的感觉来。
OK，我们现在为头部图层加上白斑。 瓢虫的头部是有白斑的，它和黑色配在一起，甚是醒目，我们把白斑直接做在头部图层上。 选择头部图层，锁定它的透明像素，用白色画笔，如图示，在两侧画出白斑点。
注 意： 7回顶部 前面我们学会了用路径来制作高光的方法，这次我们还用刚才的方法来制作头部的高光，它和身体部分的高光形状相似，但又相互错位，从而产生立体效果。
有人说啦，我要做瓢虫的头部，可是上面已经没有空间了，怎么办呀？ 我们可以在背景层被锁定的情况下（默认情况下已经锁定），选择移动工具的自动选择选项。框选所有要移动的对象，可以看到，在图层面板中，虫虫的各个层都被选择了。向下移动它，把头部的制作位置让出来。
我们做最前面的小头部分。其实刚才我们只是在制作瓢虫的脖子部分。没办法，谁让它的脖子比头粗呢。 我们复制头部图层，自由变换如图示。小脑袋一下就出来啦。
我们是复制的头部图层，因此它也是锁定透明像素的。 下面我们用画笔点出这些白斑，注意一定要检查是否锁定了透明像素。否则可能画出界哟。
在底层上方新建层，用路径制作触须，这部分非常简单，方法不再重复。 将触须层按Ctrl+J，复制层，使用“编辑”-“变换”-“水平翻转”，将它镜象一份，移动到合适位置。
腿的制作很简单，我们用黑色，建立新的形状图层，用椭圆形状工具一边画，一边变换，拼接成为一条腿，然后用前面学的组合方法，把腿路径给组合起来。
注意：如果每次拉动都建立新的形状图层的话，检查一下配图中3号标签所示的选项。 8回顶部 组合之后的腿部还是不很理想，大家可以使用路径编辑工具进行深入刻划。 将腿图层复制并镜像，选择两个腿图层，同时拉到新建图层按钮，可以同时复制两个腿图层，进行自由变换，放在合适位置，这样复制，变换，移动，得到六条腿。
还按前面的步骤，用自动选择选项，移动工具框选所有虫虫图层，自由变换，变换到原大的25%。把虫虫缩小。 我们制作大图像的目的已经达到，到了缩小它，变成小图标的时候了。
建立新的图层，命名为中间线，用直线工具，黑色，按Shift键，画出一条黑线。 复制这个图层，Ctrl+I，反相变为白线，向右移动一个像素，把两个图层的不透明度调低一些，看着不生硬为止。
注意图中标注。要用填充像素的方式来建立直线。 现在分层的部分已经制作完了，按 Ctrl+S，保存这个文件，再使用存储为，把文件再存一个PSD分层文件，这样，我们就不怕将来修改时，没有原始文件啦。 9回顶部 下面我们需要把这些层整理一下，合并到一起。把底层及其下的腿和背景层全部隐藏，如图所示，注意，单击一个显示的图层，这样我们才可以把所有的可见层合并。按下Shift+Ctrrl+E，合并可见图层。这样，我们就将除了腿和底部红色色块以及背景层以外的虫虫图层合并成为一个单独的层。
用同样的方法，隐藏不要合并的，显示要合为一层的，合并可见图层，最后把背景层删掉。 把三个图层分别命名。如图所示：
使用“图像”-“裁切”，如图所示，我们将所有透明的部分裁掉
把剪裁过的图像另存为“导出成品.psd”，我们通过Flash，将它做成变色动画
在学习下部内容前，你最好有一点Flash基础知识，当然本教程尽可能详细说明每一个步骤，如果有基础，学习起来会很快。 接着学下篇：Photoshop CS3结合Flash CS3制作瓢虫动画 (下) |
正在阅读：Photoshop CS3结合Flash CS3制作瓢虫动画 (上)Photoshop CS3结合Flash CS3制作瓢虫动画 (上)
2007-09-07 09:55
出处：
责任编辑：chenzhenjia
