数字插画设计项目教程-Illustrator 第2版 课件 第六单元 游戏插画设计

项目1——“游戏原画”角色设定第六单元游戏插画设计项目描述

原画设定不是即兴的绘画，它包含了角色设定和场景设定两部分。原画设定是根据策划要求将文字表达的内容形成画面，画面风格要与整体的游戏或动漫风格保持一致。无论是在游戏、漫画或商业动画中，原画设定都是最重要的环节之一。原画设定要求设计师不仅有很好的绘画造型能力，更需要设计师有丰富的想象力。此次接到的这个任务对于设计师同样充满挑战。项目描述

为了保证此次项目的完成，设计师做了以下准备工作。1、对项目内容进行分析处理

首先，设计师与游戏策划初步沟通，了解角色设定的要求，根据设计项目进行相关内容了解。

与游戏策划确定角色设定要求：1）角色的基本信息2）角色定位3）角色风格4）角色设定的制作规格项目描述

为了保证此次项目的完成，设计师做了以下准备工作。

2、前期资料收集（1）向客户获取制作所需的相关材料，包括文字剧本、参考素材、制作要求等。（2）通过网络和市场调研进行相关优秀作品收集及对比。项目描述

3、角色设定分析剧本描写：阡陌熏是一位西周时期的少年英雄，十四、五岁的年纪长着一头银发，五官如刀刻般俊美，一双像朝露一样清澈的眼睛，英挺的鼻梁，小而薄的嘴唇。将门之后的他年纪虽小，却智勇双全，临阵决敌已有大将之风。随身佩戴一个金光圈，腰系红色玲珑金丝带，手中一杆火焰枪更凸显其飒爽英姿。项目描述

（1）首先，对角色进行充分理解，提取人物信息。例如：十四、五岁的少年，银色的头发等。（2）其次，角色设计的小稿绘制。经过分析角色特征信息，需要对这些信息进行整理和归纳，其中例如“玲珑金丝带”等元素的引用需要与策划进行及时沟通，绘制完成效果如图所示。（3）最后，完成角色设计。设计完成后需要确定角色各部分的比例关系，并且把这些放在同一比例下进行对照和比较。任务分析Illustrator在绘制插图时与其它图像绘图软件不同，突出表现在图像轮廓更清晰干净，颜色明快强烈，插图效果风格特征明显。通过“置入”功能绘制完成的手稿，能准确完成插图的设计制作，“实时上色”功能则是便利的上色手段。综合各项工具的使用使整个绘制过程更加高效。

任务1——角色造型绘制任务实施

步骤-1新建文件。打开illustrator软件，“新建”文档设置文件名称为“游戏角色”，尺寸大小为A4，颜色模式为RGB，分辨率为300像素。

步骤-2置入画稿。在菜单栏中“文件”下单击“置入”，在“置入面板”中将绘制的手稿置入到视图文件编辑区中，如图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施

步骤-3描摹画稿图形。在使用“钢笔工具”描摹时，设置路径填充颜色为无，描边颜色可以选择与肤色接近的棕色（R=198、G=156、B=109），设置描边大小为0.25px。如图所示。任务1——角色造型绘制任务实施

步骤-4肤色色板。为了方便对角色进行填色，在控制面板区的“色板”中单击右下角“色板库”菜单中选择“肤色”，会弹出“肤色”色板。任务1——角色造型绘制任务实施1、头部外形绘制在绘制时要考虑到图层的遮挡关系。例如头的顶部被头发遮挡，在绘制时的重点就要考虑头发的外形，被遮挡部分可以适当简单处理。

任务1——角色造型绘制任务实施1、头部外形绘制

步骤-1绘制角色头部轮廓。使用“钢笔工具”对角色头部进行描摹，并通过“转化描点工具”和“直接选择工具”调节描点的曲线变化，如下图所示。步骤-2绘制角色头部并填色。继续绘制角色的耳朵和脖子，并调整各部分重叠关系。在工具栏中使用“实时上色工具”，在选择的任意一处单击，就可以将选择的对象组成同一个实时上色编组，如下图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施1、头部外形绘制

步骤-3绘制角色的眼睛。在“图层”面板将头部轮廓隐藏，继续使用“钢笔工具”和“椭圆工具”对角色的五官进行描摹。在描摹图稿时，除了描摹位置的准确，也要注意角色的结构关系，眼睛通常处于头部的中间位置，并且对角色形象的塑造十分重要，所以要“重点着墨”，如图所示。任务1——角色造型绘制任务实施1、头部外形绘制

步骤-4绘制角色的鼻子。绘制鼻子的画法有很多，不同的光影也会影响鼻子的外形。这里用三角形概括出鼻子的轮廓，再通过添加细节完成绘制，如下图所示。步骤-5绘制角色的嘴巴。嘴部是一个复杂的图形，在绘制时一定要概括表现外部轮廓，最后可通过添加高光的方法为嘴增加厚度，如下图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制绘制角色眼睛任务实施1、头部外形绘制步骤-6细化面部效果。首先将绘制五官时隐藏的头部轮廓取消隐藏，使用“椭圆工具”，填充为渐变颜色，在“渐变控制”面板设置渐变类型为径向，渐变左端滑块颜色为R=233、G=85、B=19，不透明度为40%，右端滑块颜色为白，不透明度为0%。设置完成后，调整位置，并调整图层排列置于眼睛的底层，如图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施1、头部外形绘制

步骤-7继续为头部增加细节。首先在眼睛上方绘制白色反光，使用“缩放工具”放大头部以便于细节绘制更准确；其次，填充为渐变颜色，在“渐变控制”面板设置渐变类型为径向，渐变左端滑块颜色为R=243、G=201、B=182，不透明度为70%，右端滑块颜色为白，不透明度为0%；接下来耳朵也可以通过绘制高光的方法增加厚度，细化最终效果，如图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施（2）头发绘制

头发的绘制看似十分复杂，但是把它分解成几个部分进行绘制就会把复杂的图形简单化。同时为了增加头发的立体感，可以将头发的几个部分使用颜色和明暗进行区分。任务1——角色造型绘制任务实施（2）头发绘制步骤-1绘制第一个层次的头发。使用“钢笔工具”绘制角色头发，我们将最前面三缕头发作为第一个层次进行绘制。在同一个层次中将最前面的一缕头发的颜色明度提高，设置填充颜色为R=200、G=200、B=200，描边为无；设置另外两缕头发的填充颜色为R=180、G=180、B=180，描边为无，如图所示。任务1——角色造型绘制任务实施（2）头发绘制

步骤-2绘制头发细节。第一个层次的头发处在最前面位置的，在绘制时要加强细节的刻画。首先使用“钢笔工具”绘制出头发的高光，接着使用“渐变工具”分别对高光颜色进行填充，在“渐变控制”面板设置渐变类型为线性，渐变左端滑块颜色为白，不透明度为50%，右端滑块颜色为黑，不透明度为0%，并调节每个高光的渐变位置。绘制完成后将第一个层次执行“编组”命令，如图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施

步骤-3绘制第二个层次的头发。继续使用“钢笔工具”绘制第二个层次，这层对前一层起衬托作用，在绘制时填充颜色应暗于前一层。同时位于两边的头发，处在相对于头部反光的位置，设置填充颜色为R=180、G=180、B=180。第二个层次的细节刻画应适当减少，高光的颜色也要暗于前一层，如下图所示。

步骤-4绘制第三个层次的头发。主要作用是突出前面的的两个层，因此不需要太多的细节刻画，设置填充颜色为R=136、G=136、B=136，最终效果如下图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施2、身体轮廓绘制

步骤-1绘制角色身体轮廓。在对角色身体轮廓进行绘制时，使用“钢笔工具”对身体的各个部分分别进行描摹，这样既便于描摹又便于后期调整修改，在控制面板区的“色板”菜单中单击“肤色”，设置填充颜色为R=190、G=158、B=133，如图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制任务实施

钢笔工具”对衣服的各部分分别绘制，再调整图形的排列叠加层次完成衣服的制作，如图所示。任务1——角色造型绘制1211绘制角色衣服任务实施步骤-3角色裤子的绘制。首先使用“钢笔工具”对裤子的外形进行描摹，填充颜色为R=158、G=158、B=159，并通过“直接选择工具”调节裤子上的锚点；其次绘制裤子细节，使用“钢笔工具”对裤角的各色块分别绘制并进行叠加，效果如图所示。任务1——角色造型绘制任务实施

步骤-4鞋子的绘制。用“钢笔工具”对设计稿中鞋子的外形进行描摹，填充颜色为R=23、G=28、B=97，再使用“直接选择工具”调节鞋子上的锚点。接着继续使用“钢笔工具”对鞋底进行描摹，填充颜色为R=64、G=33、B=15，最后调整排列置于鞋子的底层并调整至适当位置，效果如图所示。任务1——角色造型绘制必备知识1、置入2、实时上色工具任务1——角色造型绘制任务拓展1、使用Illustrator软件画出下图所示游戏原画中常见人物配饰。要求尺寸宽度为200毫米、高度为200毫米，颜色模式为RGB，如图所示。任务1——角色造型绘制任务拓展2、使用Illustrator软件画出石狮轮廓并为石狮上色。要求尺寸宽度为200毫米、高度为200毫米，颜色模式为RGB，如图所示。任务1——角色造型绘制任务拓展3、

请结合所给的人物描写，设计游戏中的另一位主角花落溪的形象，要求角色的基本信息与剧本表述要一致，画面风格与阡陌熏有所互补，文件大小为A4，分辨率为300像素，颜色模式为RGB。任务1——角色造型绘制剧本：花落溪是阡陌熏的孪生妹妹，花落溪天真无邪、温柔婉约、待人温和体贴、细腻，独居在风景秀丽的幽空山庄，喜爱吹奏竹笛，容貌秀丽之极，当真如明珠生晕，美玉莹光，眉目间隐然有一股书卷的清气。任务分析

角色细节的绘制能具体的表现出人物性格、故事情节和社会环境等内容。成功的细节能增加角色的艺术感染力，能突显出人物性格的内心世界，让整个角色有血有肉的活起来。Illustrator软件中“网格工具”的使用能赋予角色更加逼真的颜色变化，在设计制作过程中对于角色细节刻画能起到事半功倍的作用。任务2——角色细节绘制任务实施

根据原画设计稿提供的角色信息，首先对角色的皮肤效果进行绘制，接着对角色细节的绘制，其中包括肚兜和鞋子两部分；最后完成角色随身配饰的绘制，包括护腕、腰带和汗巾的绘制。任务2——角色细节绘制任务实施1、角色皮肤细节绘制

步骤-1角色身体细腻效果绘制。首先将填充颜色设置为R=216、G=165、B=147，再利用工具栏的“网格工具”在胳膊的位置中要作明暗交界处理的位置单击，接下来可以设置网格点并填入所选颜色，最后在胳膊的高光和反光处单击添加网格点，效果如图所示。

步骤-2单击添加的网格点还可以通过拖拽方向控制杆调整网格线的弧度和位置，使填色更加自然，效果如图所示。任务2——角色细节绘制任务实施任务2——角色细节绘制反光明暗交界线高光任务实施1、角色皮肤细节绘制

步骤-1角色身体细腻效果绘制。首先将填充颜色设置为R=216、G=165、B=147，再利用工具栏的“网格工具”在胳膊的位置中要作明暗交界处理的位置单击，接下来可以设置网格点并填入所选颜色，最后在胳膊的高光和反光处单击添加网格点，效果如图所示。

步骤-2单击添加的网格点还可以通过拖拽方向控制杆调整网格线的弧度和位置，使填色更加自然，效果如图所示。任务2——角色细节绘制任务实施任务2——角色细节绘制任务实施2、角色服装细节绘制

步骤-1肚兜的绘制。使用“钢笔工具”对角色肚兜的中心和边缘分别进行描摹，并通过“转化描点工具”和“直接选择工具”调节描点，设置中心填充颜色为R=104、G=0、B=19，边缘填充颜色为R=232、G=128、B=53，效果如图所示。

步骤-2表现肚兜的立体感。首先将填充颜色设置为R=150、G=22、B=43，再利用工具栏的“网格工具”在肚兜中心明暗交界处单击，并调整网格点位置，完成肚兜的制作，效果如图所示。任务2——角色细节绘制任务实施任务2——角色细节绘制任务实施

步骤-3为绘制鞋子添加图案。使用工具栏中“螺旋线工具”，设置填充颜色为R=46、G=49、B=146，描边颜色为R=27、G=20、B=100；接着使用“删除描点工具”将螺旋线中心多余的点删除，如图所示。任务2——角色细节绘制任务实施

步骤-4调整对称复制图案。由于左右两边鞋子的图案是对称的，首先使用“选择工具”选中绘制好的图案，接着在工具栏中双击“镜像工具”会弹出“镜像”对话框，设置轴为垂直并单击“复制”按钮。将复制好的图案移动至适当位置并调整角度及大小，如图所示。任务2——角色细节绘制任务实施步骤-5绘制鞋子细节。使用“钢笔工具”对鞋子表面绘制两个条形图案，设置填充颜色为R=3、G=110、B=183，并对绘制完成的鞋子进行“编组”操作。如图所示。任务2——角色细节绘制任务实施3、角色随身配饰绘制步骤-1汗巾的绘制。首先使用“钢笔工具”对原画稿进行描摹，设置填充颜色为R=200、G=201、B=202，描边为无；其次选中绘制好的图形执行“复制”命令；接着按下“Ctrl+Shift+C”粘贴回原处，并点击鼠标右键执行“变换”下的“缩放”命令，在弹出对话框中设置比等比缩放75%，单击复制按钮后调整其位置，设置填充颜色为R=158、G=158、B=159，描边为无，如图7-30所示。任务2——角色细节绘制任务实施任务2——角色细节绘制任务实施步骤-2腰带的绘制。使用“钢笔工具”绘制出腰带的外形和阴影，填充颜色为（R=80、G=0、B=0）、（R=111、G=0、B=0），描边为无，如图所示。任务2——角色细节绘制腰带的绘制任务实施

步骤-3腰带金属扣的绘制。首先使用“钢笔工具”绘制出金属扣的外形，填充颜色为R=64、G=33、B=15，描边为R=128、G=79、B=33；接着选中金属扣执行“复制”命令，并按下“Ctrl+Shift+C”粘贴回原处；然后执行鼠标右键“变换”下的“缩放”命令，在弹出对话框中设置比等比缩放80%，单击“复制”按钮后调整其位置，设置描边颜色为R=148、G=97、B=52，填充颜色为渐变；最终通过“渐变面板”设置渐变类型为线性，添加渐变颜色滑块，如图所示。任务2——角色细节绘制任务实施任务2——角色细节绘制任务实施

步骤-4护腕的绘制。首先使用“钢笔工具”绘制出护腕的外形，分别填充颜色为（R=148、G=97、B=52）、（R=106、G=57、B=6），接着利用“网格工具”在护腕的高光和反光处分别添加网格点，为护腕增加真实感，如图所示。任务2——角色细节绘制任务实施

步骤-5护腕的花纹及厚度绘制。选中护腕后执行“复制”及“粘贴”命令，同时使用工具栏中“网格工具”并按住Alt键，单击复制的护腕上网格点。将网格点删除后为护腕填充颜色为R=96、G=76、B=63，并调整排列使其置于护腕的下一层。

接着继续使用“钢笔工具”绘制出护腕表面的花纹，填充颜色为R=178、G=129、B=70，不透明度为30%，如图所示。任务2——角色细节绘制任务实施

步骤-6调整对称复制图案。最后用同样的方法绘制出另外一只手的护腕，调整图形排列及位置，效果如图所示。任务2——角色细节绘制必备知识网格工具“网格工具”是一种渐变的填色方法，通过将对象划分为多个小区域，进行更细致的颜色填充，描绘出更逼真的效果。任务2——角色细节绘制网格点网格线网格片面任务拓展1、使用Illustrator软件绘制游戏场景塔楼外形，并为塔楼绘制出细节效果。要求尺寸宽度为200毫米、高度为200毫米，颜色模式为RGB。任务2——角色细节绘制任务拓展2、使用Illustrator软件绘制游戏场景房屋外形，并为房屋绘制出细节效果。要求尺寸宽度为200毫米、高度为200毫米，颜色模式为RGB。任务2——角色细节绘制任务拓展3、根据“花落溪”的剧本描写，完成角色细节制作，绘制时可通过“网格工具”对角色的衣服、皮肤及随身配饰等进行细节制作，细节的添加要体现“花落溪”温柔、婉约、温和、细腻的人物特点。任务2——角色细节绘制任务分析

武器是角色设计的一部分，且经常跟随角色同时出现，不同性格的角色选择的兵器也有所区别。在使用软件绘制时，除了武器的外形绘制，武器的装饰效果也是绘制的重要环节，对角色的整体形象具有很好的点睛效果。

任务3——武器及背景制作任务实施

在完成角色轮廓和细节后，接下来的工作是武器及特效的制作。武器制作包括火焰枪的绘制、金光环的绘制以及飘带绘制；特效绘制包括火焰效果制作和特效光晕制作。

任务3——武器及背景制作任务实施1、随身兵器绘制（1）火焰枪绘制步骤-1枪头的制作。首先使用“矩形工具”创建一个矩形，填充颜色为R=180、G=180、B=181，并使用“添加锚点工具”在矩形顶边的中心添加一个锚点，接着通过“直接选择工具”配合键盘上的方向键，调整如图

所示锚点位置。

任务3——武器及背景制作任务实施1、随身兵器绘制（1）火焰枪绘制步骤-2绘制枪头细节。选中刚绘制的图形“复制”，执行“Ctrl+Shift+C”粘贴回原处命令，右键执行“变换”下的“缩放”命令，在弹出对话框中设置等比缩放105%，设置填充颜色为R=136、G=136、B=136，并按下“Ctrl+[”下移一层。最后再为枪头绘制高光，如图所示。

任务3——武器及背景制作任务实施任务3——武器及背景制作312任务实施

步骤-3再以同样的方法绘制枪头的侧边，完成后双击工具栏中“镜像工具”，在弹出的对话框中设置轴为垂直，单击复制按钮，调整图形位置如图所示。任务3——武器及背景制作任务实施

步骤-4枪杆的制作。首先使用“矩形工具”创建一个矩形，填充颜色为渐变，接着在“渐变”面板设置渐变类型为线性，并添加渐变颜色滑块；接着在枪杆的底端绘制枪尾，使用“椭圆工具”并按住Shift键在视图中创建一个圆形，填充颜色为渐变，接着在“渐变”面板设置渐变类型为径向，并添加渐变颜色滑块如图所示。任务3——武器及背景制作图7-45枪杆的制作任务实施

步骤-5绘制枪杆些装饰。使用“矩形工具”创建一个矩形，填充颜色为渐变，在“渐变面板”设置渐变类型为线性，并添加渐变颜色滑块如图所示；再使用同样方法再创建两个小矩形，分别置于图形上下两端如图所示位置，并调整渐变颜色，如图所示。任务3——武器及背景制作任务实施

步骤-6绘制枪头细节。首先使用“椭圆工具”并按住Shift键在视图中创建一个圆形，填充颜色为渐变，“复制”后接着执行“Ctrl+Shift+C”粘贴回原处命令，并按下鼠标右键单击“变换”下的“缩放”命令，通过图形的叠加完成制作；接着完成红色枪缨制作，使用“钢笔工具”分别绘制出下图中的图形1、2、3，并依次填充颜色（1：R=199、G=56、B=52）、（2：R=163、G=32、B=31）、（3：R=99、G=0、B=0），图形3放置在最底层，1为最顶层，如图所示。任务3——武器及背景制作任务实施任务3——武器及背景制作任务实施（2）金光环绘制

步骤-1金光环外形制作。首先使用“椭圆工具”并按住Shift键在视图中创建一个圆形，填充颜色为R=255、G=240、B=0，鼠标右键单击“变换”下的“缩放”命令，设置等比缩放85%，完成点击复制按钮，如图所示。任务3——武器及背景制作任务实施任务3——武器及背景制作任务实施

步骤-2完成外形。使用“选择工具”将两个圆形选中，在“路径查找器”面板单击减去顶层，效果如图所示。任务3——武器及背景制作任务实施

步骤-3绘制金光环阴影。将绘制好的金光环外形“复制”两个，将底层的颜色设置为R=251、G=176、B=59，并调整放置的位置如图所示，在“路径查找器”面板单击减去顶层，得到金光环的阴影效果，如图所示。任务3——武器及背景制作任务实施

步骤-4绘制图形高光。使用“钢笔工具”绘制出高光的形状，将其移动至绘制好的金光环图形上，并使用“旋转工具”在图形的中心点击，“复制”后接着执行“Ctrl+Shift+C”粘贴回原处命令，直接使用鼠标在图形上滑动，制作出其它位置的高光，如图所示。任务3——武器及背景制作任务实施（3）飘带绘制

飘带的制作。飘带在绘制时首先要考虑其与武器及人物的位置关系，其次要注意外形飘逸自然。

步骤-1绘制飘带外形。使用“钢笔工具”对飘带的各个部分分别进行描摹，并通过“直接选择工具”调节各锚点的位置。分别填充颜色为（R=140、G=17、B=38）和（R=104、G=0、B=19）。

步骤-2调整飘带各部分的叠放层。将绘制好的飘带移动至角色与武器上，分别选中图形执行“对象”——“排列”菜单中的命令调整各部分的叠放次序。任务3——武器及背景制作任务实施任务3——武器及背景制作任务实施2、特效绘制

（1）火焰效果绘制

步骤-1火焰效果的绘制需要三个层次的效果。首先使用“钢笔工具”对底层和中间层的图形进行绘制，并填充颜色；接着使用“螺旋线工具”创建图形，并对颜色与描边进行设置，如图所示。任务3——武器及背景制作任务实施2、特效绘制步骤-2绘制云效果。调整火焰效果位置后，用同样方法对背景的云效果进行绘制，并对颜色与描边进行设置，调整不透明度为20%，设置如图所示。任务3——武器及背景制作任务实施（2）特效光晕绘制步骤-1绘制场景特效光晕。首先选择“星形工具”，在视图中单击，接着在弹出的对话框中设置半径1为14mm，半径2为7mm，角点数为9，如图所示。任务3——武器及背景制作任务实施步骤-2制作光晕外形。执行“效果”——“扭曲和变换”——“收缩和膨胀”命令，在弹出的对话框中设置收缩与膨胀值为-65%，如图所示。任务3——武器及背景制作任务实施步骤-3制作光晕效果。选中图形设置填充颜色为渐变，在“渐变面板”设置渐变类型为径向，渐变滑块均为白色，调整右端渐变滑块不透明度为0%。设置描边值为0.5pt。将光晕特效放置在适当位置，如图所示。任务3——武器及背景制作任务实施

步骤-4最终效果图。最后设置导入背景素材，并调整所绘制图形的叠放层次，完成效果如图所示。任务3——武器及背景制作任务实施

综合以上内容，游戏原画角色设定项目最终完成效果如图所示。任务3——武器及背景制作必备知识扭曲变形工具:任务3——武器及背景制作变形工具

旋转扭曲工具

收拢工具

膨胀工具扇贝工具晶格化工具皱褶工具任务拓展1、使用Illustrator软件绘制游戏场景树木，并为树木制出细节效果，要求尺寸宽度为200毫米、高度为200毫米，颜色模式为RGB，如图所示。任务3——武器及背景制作任务拓展2、使用Illustrator软件绘制游戏场景小溪，并为溪水中增加石头和水流等细节效果，要求背景为白色,尺寸宽度为204毫米、高度为100毫米，颜色模式为RGB，如图所示。任务3——武器及背景制作任务拓展3、

根据“花落溪”在剧本中的描写，完成角色背景的制作，背景插图的设计应起到烘托人物的作用。另外“花落溪”使用的竹笛也是人物的重要特征之一，绘制时可适当添加特殊效果，同时兼顾与角色性格相吻合。任务3——武器及背景制作实战强化

游戏中角色形象的设定及绘制既能体现创作者创意水平，又需要熟练的操作技能。请自由绘制自己最喜欢的动漫或游戏角色并附上对此形象的说明（100字以内）。数字插画设计项目教程---Illustrator任务到此结束，谢谢。项目2——“梦幻英雄”游戏网页设计第六单元游戏插画设计项目描述

在因特网上浏览时看到的每一个页面均称为网页，很多网页组成一个网站。网站设计即根据委托方（企业或职能单位）希望向浏览者传递的信息（包括产品、服务、理念、文化）进行网站功能的策划，然后进行的网页设计美化工作。精美的网页设计，对于提升企业或职能单位的形象至关重要。网页设计的工作目标就是通过使用更合理的颜色、字体、图片、样式进行网页设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。用Illustrator软件是网页设计常用的工具之一。本项目目标是为“梦幻英雄”游这款游戏设计宣传网站。通过这一项目的完成学习使用Illustrator软件进行网页设计的流程，如图所示。项目描述

任务分析

网页的版式是根据特定的主题，将所有内容进行一定秩序的处理，充满个性和艺术性的设计会使网页与其它有区别。版式设计应从造型、视觉心理及版式构成等方面入手，其中构成的形式包括：分割与比例、重复与渐变、对称与均衡、节奏与韵律、统一与变化等。

任务1——网页版式设计任务实施

网页作品最终储存后要在电脑查看，所以在制作时需要设置文档单位为像素及颜色模式为RGB。网页尺寸设计受两个因素影响，一个是显示器的屏幕，另外一个就是浏览器软件。

1、设置页面尺寸

步骤-1页面尺寸设置。显示器分辨率为1024×768像素，但考虑到浏览器的工具栏、状态栏等必须减去的部分，因此设置页面宽度和高度为1001×747像素。

步骤-2创建网页文档。执行“文件”——“新建”命令，在新建文档设置文件名称为“游戏网页”，尺寸大小为1001×747，单位为像素，设置好后单击确定按钮。任务1——角色造型绘制任务实施2、网页版面构图设计

设置完成网页尺寸后，就可以对网页的版式进行设计，网页设计除了满足一些基本功能以外，更有创意而又美观同样是设计的重点。网页版式主要包括骨骼型、满版型、分割型、中轴型等多种。是依据不同的网页类型决定的。任务1——角色造型绘制任务实施骨骼型：网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。任务1——角色造型绘制任务实施满版型：页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多，如图所示。任务1——角色造型绘制任务实施

分割型：把整个页面分成上下或左右两部分，分别安排图片和文案，如图所示。任务1——角色造型绘制任务实施中轴型：沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉，如图所示。任务1——角色造型绘制任务实施曲线型：图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏，如图所示。任务1——角色造型绘制任务实施

倾斜型：页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目，如图7-73所示。任务1——角色造型绘制任务实施

对称型：对称的页面给人稳定、严谨、庄重、理性的感受，如图所示。任务1——角色造型绘制任务实施

焦点型：焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。

（1）中心：以对比强烈的图片或文字置于页面的视觉中心，如图7-75所示。

（2）向心：视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法，如图7-76所示。（3）离心：视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。

任务1——角色造型绘制任务实施任务1——角色造型绘制焦点型网页1焦点型网页2任务实施

三角型：网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感，如图所示。任务1——角色造型绘制任务实施

自由型：自由型的页面具有活泼、轻快的风格。，如图7-78所示。任务1——角色造型绘制任务实施3、制作基本版式

步骤-1确定主色。在新建完成的文档中，使用“矩形工具”绘制一个矩形，设置填充颜色为渐变，描边为无。通过“渐变工具”调整渐变为垂直方向，如图所示。

任务1——角色造型绘制任务实施3、制作基本版式

步骤-2置入素材。在打开的“游戏角色”文件，选中需要的素材并“复制”到“游戏网页”文件中“粘贴”，接着可继续将制作时需要用到的其它素材一同置入，如图所示。

任务1——角色造型绘制任务实施3、制作基本版式

步骤-3制作版式元素。使用“椭圆工具”并按住Shift键同时拖拽鼠标绘制一个圆，设置填充颜色为渐变，描边值为14pt，颜色为R=0、G=113、B=188。接着通过“渐变工具”调整填充颜色，在“渐变面板”设置渐变类型为径向，并添加渐变滑块颜色，单击右键执行“排列”——“后移一层”，如图所示。

任务1——角色造型绘制任务实施3、制作基本版式

步骤-4制作版式元素装饰。首先使用“椭圆工具”并按住Shift键同时拖拽鼠标绘制一个圆，设置填充颜色为R=0、G=113、B=188，描边值为无。其次选中图形单击右键执行“变换”——“缩放”命令，调整缩放比例为90%，完成后单击复制按钮，再修改颜色为白。接下来再以同样方法复制另一个图形，最后将图形执行“编组”命令，如图所示。任务1——角色造型绘制任务实施任务1——角色造型绘制必备知识外观属性：“外观属性”是在不改变对象结构的基础上影响对象效果，其中包括：填色、描边、透明度和各种效果。“外观”面板可以保存、修改、删除对象的外观属性，在填色、描边或添加效果时，面板会按照先后顺序进行记录，如图所示。任务1——角色造型绘制必备知识添加新描边：单击添加新描边按钮，可以为对象增加一个新的描边属性，。添加新填色：单击添加新填色按钮，可以为对象增加一个新的填充属性，。任务1——角色造型绘制必备知识添加新效果：单击添加新效果按钮，可以在打开的菜单中选择一个效果。例如图7-78添加“涂抹”效果，如图7-85所示。任务1——角色造型绘制必备知识清除外观：单击清除外观按钮，可以清除所选对象的外观效果。复制所选对象：选中面板中的一个项目后，单击复制所选对象按钮可以复制该项目。删除所选对象：选中面板中的一个项目后，单击删除所选对象按钮可以删除该项目。如果要删除填充和描边之外的外观，可执行菜单面板中的“简化至基本外观”命令。任务1——角色造型绘制任务拓展1、使用Illustrator软件绘制四款南瓜表情，可以适当修改或再次创意，但要突出表情的聪明感和可爱感，要求背景为白色,尺寸宽度为204毫米、高度为100毫米，颜色模式为RGB，如图所示。任务1——角色造型绘制任务拓展2、使用Illustrator软件绘制网页图标，可适当使用软件中的外观属性面板中命令为图标增加细节，突出图标的现代感。要求尺寸宽度为204毫米、高度为100毫米，颜色模式为RGB，如图7-87所示。任务1——角色造型绘制任务拓展3、网站子页主要包括官方首页、游戏资料页面、

官方论坛页面、客服中心页面、注册页面、登录页面。分六个任务小组，每组负责一个子页面的版式设计。整理出所负责网页已有的资料，画出子网页版式设计的简图，明确网页每部分显示的内容。在版式设计过程中除了考虑各个子页面的功能特点外还需要做到风格与首页基本保持一致。任务1——角色造型绘制任务实施1、网页元素设计

步骤-1制作页面元素。使用“文字工具”在页面白色区域输入文字，并使用“对齐”面板中的垂直居中对齐使文字对齐，如图7-88所示。任务2——网页内容设计任务分析

步骤-2绘制背景装饰图形。使用“矩形工具”和“椭圆工具”绘制出如图所示的多个图形，接着使用“路径查找器”中的联集将图形合并，设置填充颜色为R=41、G=171、B=226，不透明度为30%，如图所示。任务2——网页内容设计任务分析

步骤-3绘制背景装饰元素。使用“矩形工具”绘制出如图所示的多个矩形。接着使用“路径查找器”中的联集将图形合并，并调节图形中的各节点。最后设置填充颜色为R=41、G=171、B=226，不透明度为60%，最后绘制几个白色的矩形作为窗户，如图所示。任务2——网页内容设计任务分析

步骤-4完成背景装饰元素。使用同样方法还可以绘制出一些其它的同时代建筑。执行“编组”后将其移动至如图7-82所示位置，最后右键执行“排列”——“后移一层”调整图层排列，如图所示。任务2——网页内容设计任务分析步骤-5制作版式元素装饰。使用“椭圆工具”并按住Alt键和Shift键在圆形图形的中心拖拽出一个正圆图形，设置填充颜色为无，描边颜色为白，接着并双击控制栏中的“描边”，在弹出的“描边”面板中，设置粗细为9Pt，勾选“虚线”复选框，虚线值为0Pt，

间隙为30Pt，选择端点为“圆头端点”。最后再以同样方法在制作一个粗细为5Pt，颜色值为R=41、G=171、B=226的图形丰富效果，最后效果如图所示。任务2——网页内容设计任务分析任务2——网页内容设计任务分析步骤-6完善页面信息。使用“文字工具”在页面中心的的底部添加公司信息及标志，并使用“对齐”面板中的垂直居中对齐使文字对齐，如图7-93所示。任务2——网页内容设计任务分析2、文字内容设计

步骤-1标题字体制作。使用“文字工具”分别输入“暑”、“假”、“惊”、“喜”和“奇妙之旅”，设置字体为微软雅黑、字体样式为Blod并分别调整字体大小值和颜色填充。最后使用“选择工具”调整字体的摆放位置，如图所示。任务2——网页内容设计任务分析

步骤-2标题文字效果制作。选择“假”字，执行鼠标右键“创建轮廓”，同时“复制”一个并调整摆放位置，设置填充颜色为白。选中下一层的“假”字，设置填充颜色为R=255、G=255、B=0，描边颜色为R=140、G=98、B=57，描边粗细为3Pt，如图所示。任务2——网页内容设计任务分析

步骤-3标题文字效果装饰。首先打开“符号”控制面板，并在左下角的“菜单库”中找到“Web按钮和条形”，接着选中“徽章1-蓝色”通过工具栏中的“符号喷枪工具”在视图中单击。最后单击右键执行“排列”——“后移一层”并调整位置和大小，如图所示。任务2——网页内容设计任务分析

步骤-4广告文字制作。使用“文字工具”输入“周末整点大放送，更多惊喜等你来拿”，设置字体为“迷你简菱心”、字体大小值为18Pt，颜色填充为白，描边颜色为R=27、G=20、B=100。选中文字，在“控制栏”中为文字指定“制作封套”，在弹出的“变形面板”设置样式为弧形、水平，弯曲度为60%，如图所示。任务2——网页内容设计任务分析任务2——网页内容设计任务分析

步骤-5内容文字制作。使用“文字工具”分别输入网页的文字内容信息，并分别设置其字体和颜色。效果所示。

步骤-6按钮制作。打开“符号”控制面板，并在左下角的“菜单库”中找到“Web按钮和条形”，分别选中需要的符号，通过“符号喷枪工具”在视图中逐个单击。最后调整位置和大小，效果所示。任务2——网页内容设计任务分析任务2——网页内容设计任务分析步骤-7光带效果制作。使用“矩形工具”创建一个

矩形，执行“旋转”命令，设置旋转角度为25°，完成单击复制按钮。接着多次按下“Ctrl+D”键，复制多个如图所示。任务2——网页内容设计任务分析

步骤-8完成光带效果。将刚绘制的图形在“路径查找器”面板执行联集，接着使用“直接选择工具”选中图形中心的点，执行“缩放”命令，设置等比缩放为50%。最后为图形填充渐变颜色，渐变类型为径向，右端渐变滑块的颜色为白，不透明度为0，如图所示。任务2——网页内容设计必备知识图形样式：图形样式是系统默认提供的一系列的外观效果，在为图形添加外观效果时能快速的进行填充，如图所示。任务2——网页内容设计必备知识应用图形样式：使用“选择工具”选择图形，单击“图形样式”面板中的一个图形样式，即可将该样式应用给图形，再次单击其它样式则会替换原有样式（将“图层样式”面板中的样式拖到图形上，也可直接添加效果），如图所示。任务2——网页内容设计必备知识创建图形样式：选中图形对象，单击“图形样式”面板中的“新建图形样式”，就可以保存为新的图形样式，如图所示。任务2——网页内容设计必备知识合并图形样式：在“图形样式”面板中按下Ctrl键单击两个或多个图形样式，在“菜单面板”中选择“合并图形样式”命令，可创建一个新的图形样式，如