游戏动画像素图制作教程 - 万水书苑-出版资源网

全文

(1)第 5 章像素图的基础训练. 内容提要本章主要学习在 Photoshop 中绘制像素图，设计并制作出符合一般审美特征的像素图形。. 本章重点 . 物体的设计. 本章难点 . 掌握像素图的简单应用设计. 学习目标 . 能够运用基本的绘制技巧，设计并制作出符合一般审美特征的像素图.

(2) 游戏动画像素图制作教程. 5.1. 像素图的图标设计. 在科学技术飞速发展的今天，印刷、摄影、设计和图像传送的作用越来越重要，这种非语言传送已产生了与语言传送相抗衡的竞争力。标志是其中一种独特的传送方式。而有关像素标志的设计主要体现在计算机的各类应用软件的标识上，如图 5-1 所示。. 图 5-1. 图标设计作品. 目前，图标设计的应用平台以 Windows XP 为最多，所以有必要了解 Windows XP 的规范，为创建图标做好准备。Windows XP 的图标有 4 种尺寸：48×48 像素、32×32 像素、24×24 像素和 16×16 像素。Windows XP 支持 32 位图标。32 位图标为 24 位图像加上 8 位 Alpha 通道，使图标边缘非常平滑，且与背景相融合。每个 Windows XP 图标应包含以下三种色彩深度，以支持不同的显示器显示设置：24 位图像加上 8 位 Alpha 通道（32 位）、8 位图像（256 色）加上 1 位透明色、4 位图像（16 色）加上 1 位透明色。 5.1.1 鲸鱼图标绘制像素图先要对软件进行设置，打开 Photoshop 软件，执行“编辑”→“首选项”→ “参考线、网格、切片和计数”对话框，将“网格”→“网格间隔”设置为 1 点；子网格设置为“1”，显示网格的快捷键为 Crtl+”。实例讲解 1：鲸鱼图标的绘制操作步骤：步骤 1：在 Photoshop 中新建一个 32×32 像素大小的文件，画出鲸鱼的大概形状，如图 5-2 所示。. 图 5-2 144. 鲸鱼轮廓线.

(3) 像素图的基础训练第 5 章. 步骤 2：给鲸鱼整体上色，如图 5-3 所示。. 图 5-3. 整体上色. 步骤 3：绘制出鲸鱼的明暗关系，如图 5-4 所示。. 图 5-4. 明暗关系绘制. 步骤 4：绘制的最终效果图，如图 5-5 所示。. 图 5-5. 鲸鱼图标最终效果 145.

(4) 游戏动画像素图制作教程. 5.1.2 水晶按钮实例讲解 2：水晶按钮的绘制操作步骤：步骤 1：画出按钮的外形，轮廓线为黑色，如图 5-6 所示。. 图 5-6. 画轮廓. 步骤 2：使用文本工具，输入文字“S”，在选项栏中设置字体为“30 点” ，设置“消除锯齿”为“无” ，如图 5-7 和图 5-8 所示。. 图 5-7. 输入文字. 图 5-8. 文字属性. 步骤 3：在文字图层右击，选择“栅格化文字”命令，这样就可以对文字进行编辑了，如图 5-9 所示。 146.

(5) 像素图的基础训练第 5 章. 图 5-9. 栅格化文字. 步骤 4：填充按钮颜色为“绿色”，如图 5-10 所示。. 图 5-10. 填充颜色. 步骤 5：将文字进行隐藏，绘画出按钮的基本明暗关系，如图 5-11 所示。. 图 5-11 基本明暗 147.

(6) 游戏动画像素图制作教程. 步骤 6：调整明暗关系，使像素均匀地融合在一起，如图 5-12 所示。. 图 5-12. 调整轮廓. 步骤 7：显示出文字图层，并填充颜色为绿色，与按钮主题的绿色是类似色，色彩关系属于弱对比，效果如图 5-13 和图 5-14 所示。. 图 5-13. 图 5-14 148. 填充. 明暗关系.

(7) 像素图的基础训练第 5 章. 步骤 8：调整水晶按钮整体效果，如图 5-15 所示。. 图 5-15. 最终效果. 5.1.3 苹果实例讲解 3：苹果的绘制操作步骤：步骤 1：随意画出苹果外形，确定基本位置，如图 5-16 所示。. 图 5-16. 苹果轮廓. 步骤 2：用深红色确定出苹果的明暗交界线位置，如图 5-17 所示。步骤 3：用暖红色画出苹果的暗部，如图 5-18 所示。步骤 4：用朱红色和橘黄色画出苹果的亮部，如图 5-19 所示。步骤 5：选择近似苹果颜色的红色，绘制出过渡色，如图 5-20 所示。 149.

(8) 游戏动画像素图制作教程. 图 5-17. 150. 明暗交界线. 图 5-18. 苹果暗部. 图 5-19. 亮部绘制.

(9) 像素图的基础训练第 5 章. 图 5-20. 绘制出过渡色. 步骤 6：调整苹果轮廓线，用合适的颜色替换原来的黑色轮廓，如图 5-21 所示。. 图 5-21. 修改苹果轮廓线. 步骤 7：进行细节部分修改，调整各颜色之间的关系，最后的效果要和谐统一，如图 5-22 所示。. 图 5-22. 苹果的最终效果 151.

(10) 游戏动画像素图制作教程. 5.2. 个性形象设计. 现代的人们都很注重个性形象的表达，尤其是年轻人。在像素图中，也出现一大批具有善于表达感性色彩的艺术家。此类设计在论坛上，以及形象塑造网站上十分常见，如图 5-23 所示的 QQ 个性头像和 QQ 秀。. 图 5-23. 个性头像与 QQ 秀. 5.2.1 卡通男孩以卡通男孩为例，做出一幅可以用于 QQ 秀、GIF 动画以及游戏制作的像素图。卡通人物整体绘制与写实类的人物相比，比例造型上会更夸张，这里采用 3 头身的比例绘制这个男孩整体形象。实例讲解 4：卡通男孩的绘制操作步骤：步骤 1：在 Photoshop 中新建一个文档，设定图片大小为 40 像素×105 像素。新建一个图层为“图层 1”，用“铅笔工具”在画布中按照人体的大体比例进行分割，这里分成 3 部分，如图 5-24 所示。步骤 2：新建一个图层，名为“图层 2”，绘制出男孩的轮廓线，表现出基本的形象特征，如图 5-25 所示。 152.

(11) 像素图的基础训练第 5 章. 图 5-24. 人物比例绘制. 图 5-25. 人物轮廓线. 步骤 3：使用“油漆桶工具”进行整体着色，如图 5-26 所示。步骤 4：使用“铅笔工具”在上一步的基础上继续绘制，画出整个人物的暗部，如图 5-27 所示。. 图 5-26. 整体上色. 图 5-27. 画出整个人物的暗部 153.

(12) 游戏动画像素图制作教程. 步骤 5：最后要绘制人物的高光部分，先画出最亮的部分，接着为高光和亮面添加过渡色，将轮廓线修改为与整体统一的颜色，如图 5-28 所示。. 图 5-28. 最终效果. 5.2.2 卡通女孩实例讲解 5：卡通女孩的绘制操作步骤：步骤 1：在 Photoshop 中新建一个文档，设定图片大小为 60 像素×140 像素。新建一个图层，名为“图层 1” ，用“铅笔工具”在画布中按照人体的大体比例进行分割，这里分成 3 部分，如图 5-29 所示。. 图 5-29 154. 人物比例绘制.

(13) 像素图的基础训练第 5 章. 步骤 2：新建一个图层为“图层 2”，可以在此比例图形的基础上，先绘制人体的一半，再通过复制拷贝得到一个完全对称的人物形象，然后将手进行稍微调整，如图 5-30 与图 5-31 所示。. 图 5-30. 人体半边轮廓. 图 5-31. 拷贝完整人物形象. 步骤 3：使用“油漆桶工具”进行整体着色，如图 5-32 所示。. 图 5-32. 整体上色 155.

(14) 游戏动画像素图制作教程. 步骤 4：使用“铅笔工具”在上一步的基础上继续绘制，画出整个人物的暗部与亮部，如图 5-33 所示。. 图 5-33. 人物添加明暗. 步骤 5：将轮廓线修改为与整体统一的颜色，如图 5-34 所示。. 图 5-34 156. 最终效果.

(15) 像素图的基础训练第 5 章. 5.3. 卡通动物设计. 青蛙实例讲解 6：青蛙的绘制操作步骤：步骤 1：在 Photoshop 中新建一个 64 像素×60 像素的文档，并新建一个图层，名为“图层 1”，绘制青蛙的轮廓，如图 5-35 所示。步骤 2：填充基本颜色，如图 5-36 所示。. 图 5-35. 青蛙轮廓. 图 5-36. 基本上色. 步骤 3：绘制出青蛙的明暗关系，如图 5-37 所示。. 图 5-37. 明暗关系图片 157.

(16) 游戏动画像素图制作教程. 步骤 4：在制作的过程中丰富青蛙色彩层次，如图 5-38 所示。. 图 5-38. 青蛙色彩层次. 步骤 5：调整一下各颜色之间的过渡和明暗、投影关系，最终效果如图 5-39 所示。. 图 5-39. 5.4. 最终效果. 建筑设计. 建筑物是像素艺术经常表现的题材。在设计一个建筑物形象的时候，除了要按照规范去控制像素点的排列外，还要注意体现建筑物的时代特征和人文精神。有些时候为了增加场景的趣味性和情节性，可以适当点缀一些人物和车辆，以打破建筑物呆板的感觉，如图 5-40 至图 5-43 所示。 158.

(17) 像素图的基础训练第 5 章. 图 5-40. 建筑设计 1. 图 5-41. 图 5-42. 建筑设计 3. 图 5-43. 建筑设计 4. 建筑设计 2. 159.

(18) 游戏动画像素图制作教程. 5.4.1 小楼实例讲解 7：小楼的制作操作步骤：步骤 1：新建一文档，文档大小 78 像素×71 像素左右，并新建一个图层，名为“图层 1”，考虑绘制建筑物的角度，一般来说 22.6°双点线构成的角度是首选。使用双点线构筑出建筑物最为原始的几何形体，如图 5-44 所示。. 图 5-44. 几何形体. 步骤 2：在几何形体上继续绘制屋顶，为了表现出屋顶的倾斜面，这里使用了 45°线。同时还要注意的是屋顶是扣在房身上的，其面积应该大于房身，如图 5-45 所示。. 图 5-45 160. 屋顶绘制.

(19) 像素图的基础训练第 5 章. 步骤 3：进一步刻画房屋的造型。划分楼层以及房子的门窗，如图 5-46 所示。. 图 5-46. 门窗绘制. 步骤 4：在造型完成后的基础上简单地为房子上一层颜色，绘制出黄墙红顶的效果来。注意区分明暗面，光线由右前方射出，如图 5-47 所示。. 图 5-47. 基本上色. 步骤 5：再继续对每层楼的窗户以及大门绘制出玻璃的蓝色来，如图 5-48 所示。步骤 6：淡化屋顶墙面原本划分区域的黑色线，当黑色线变成淡淡的勾勒线时，此时房子的效果应该已经出来了，如图 5-49 所示。步骤 7：最后对细节进行修改，增强光线，更加突出立体感，最终效果如图 5-50 所示。 161.

(20) 游戏动画像素图制作教程. 图 5-48. 162. 窗户及大门上色. 图 5-49. 线框修改. 图 5-50. 最终效果.

(21) 像素图的基础训练第 5 章. 5.4.2 古代建筑下面来介绍古代建筑的制作过程，如图 5-51 所示，是古代建筑的图片素材。. 图 5-51. 古代建筑物. 实例讲解 8：古代建筑制作制作步骤：步骤 1：将原图的高度与宽度缩小为 128 像素×193 像素，分辨率为 72，从而适合像素图的表现，如图 5-52 所示。. 图 5-52. 缩小图像 163.

(22) 游戏动画像素图制作教程. 步骤 2：复制图层，执行“图像”→“调整”→“去色”命令，如图 5-53 所示。. 图 5-53. 去色. 步骤 3：执行“图像”→“调整”→“亮度/对比度”命令，如图 5-54 所示。. 图 5-54 164. 调整对比度.

(23) 像素图的基础训练第 5 章. 步骤 4：用“魔术棒工具”选出“古代建筑”的一半外围轮廓，如图 5-55 所示。. 图 5-55. 选出一半轮廓. 步骤 5：删除所选区域，查看外围轮廓是否和谐，如图 5-56 所示。. 图 5-56. 删除选区. 步骤 6：新建图层，并用“编辑”→“描边”命令在轮廓线上描边，如图 5-57 所示。 165.

(24) 游戏动画像素图制作教程. 图 5-57. 描边. 步骤 7：整理轮廓线，如图 5-58 所示。. 图 5-58. 整理轮廓. 步骤 8：复制并水平翻转，完成“古代建筑”的另外一半轮廓线，如图 5-59 所示。 166.

(25) 像素图的基础训练第 5 章. 图 5-59. 整体轮廓线. 步骤 9：给“古代建筑”填充基本颜色，如图 5-60 所示。. 图 5-60. 基本上色. 步骤 10：绘制“古代建筑”的暗部与亮部，使它具有立体感，如图 5-61 所示。 167.

(26) 游戏动画像素图制作教程. 图 5-61. 绘制亮部与暗部. 步骤 11：调整细节，将轮廓线更改为与建筑物相近的颜色，如图 5-62 所示。. 图 5-62. 古代建筑最终效果. 步骤 12：在建筑的文件基础上，新建一个图层，将该图层放在建筑层的下方，选定基本 168.

(27) 像素图的基础训练第 5 章. 颜色为蓝色，进行填充，如图 5-63 所示。. 图 5-63. 绘制蓝天. 步骤 13：运用过渡渐变的方法绘制出蓝天。渐变的时候由上到下的渐变顺序是由深到浅，由于远处蓝天的颜色比较淡，这样处理的好处是空间感比较强，如图 5-64 所示。. 图 5-64. 天空渐变 169.

(28) 游戏动画像素图制作教程. 步骤 14：草地绘制与拼接，新建一个 16 像素×16 像素的文件，用绿色填充基本色，使用“铅笔工具”并调和蓝灰色绘制出暗部色彩，随机点出过渡色，点出亮部颜色，最后用黄色添加亮部，效果如图 5-65 所示。. 图 5-65. 草地绘制. 步骤 15：将草地定义为图案，执行“编辑”→“定义图案”，然后在“古代建筑”文件上新建一个图层，注意图层的位置在建筑下方，天空上方，使用“矩形选框工具”选定草地位置，使用“油漆桶工具”，选择定义图案，进行填充，如图 5-66 所示。. 图 5-66 170. 草地添加.

(29) 像素图的基础训练第 5 章. 步骤 16：新建一个图层，使用铅笔为草地中间绘制一条路，如图 5-67 所示。. 图 5-67. 绘制道路. 步骤 17：使用“草地绘制”方法，定义路的纹理图案，纹理如图 5-68 所示，使用“套索工具”将路进行框选，填充。效果如图 5-69 所示。. 图 5-68. 路的纹理. 171.

(30) 游戏动画像素图制作教程. 图 5-69. 最终效果. 本章小结本章主要讲解了像素图的基本应用范围，像素图广泛应用于有关计算机图形的多个领域，因此每个领域所要求的像素图的技术规范会有区别。尽管如此，只要把握好像素图的基本绘制方法，遵循审美规律，就能在任何领域体现艺术魅力。. 习题 5 选择题（单选题/多选题）： 1．下列关于卡通风格人物形象的绘制叙述正确的是（）。 A．绘制卡通人物不用考虑比例关系 B．卡通风格的人物比例和写实风格人物比例可以一样 C．卡通人物较简单，没有细节可言 D．卡通人物的色彩对比越强烈，越具有现代感 2．存储游戏图片时背景层应该（）。 A．隐藏 B．删除 C．复制 D．填充黑色 3．下面颜色中最接近紫色的是哪一个（）。 A．R=130 G=100 B=255 172.

(31) 像素图的基础训练第 5 章. B．R=255 C．R=0 D．R=255. G=0 G=0 G=255. B=0 B=0 B=0. 课后作业：【作业 1】在 Photoshop 中，绘制像素图卡通男孩。【作业 2】在 Photoshop 中，绘制像素图卡通女孩。【作业 3】在 Photoshop 中，绘制像素图卡通青蛙。【作业 4】在 Photoshop 中，绘制像素图古代建筑。. 173.

(32)