资源简介 (共53张PPT)任务 3 任务 1制作福鼎白茶信息图任务 2 制作福鼎白茶信息内页制作福鼎白茶详情页项目八 信息设计任务1 制作福鼎白茶信息图1. 掌握新建符号的方法。2. 掌握符号喷枪工具、符号移位器工具、符号紧缩器工具、符号缩放器工具、符号旋转器工具、符号着色器工具、符号滤色器工具、符号样式器工具的使用方法。3. 能利用符号喷枪工具、符号紧缩器工具、符号旋转器工具等制作信息化图表。任务 1 制作福鼎白茶信息图本任务是一个信息图实例,通过设计制作图8-1-1 所示的福鼎白茶信息图,学习新建符号的方法,掌握符号喷枪工具、符号移位器工具、符号紧缩器工具、符号缩放器工具、符号旋转器工具、符号着色器工具、符号滤色器工具、符号样式器工具的使用方法。要完成本任务,还需要具备一定的色彩搭配和页面布局能力。图8-1-1 福鼎白茶信息图任务 1 制作福鼎白茶信息图一、符号工具组工具箱中的符号工具组提供了八种不同类型的符号工具,包括符号喷枪工具、符号移位器工具、符号紧缩器工具、符号缩放器工具、符号旋转器工具、符号着色器工具、符号滤色器工具、符号样式器工具,用户可根据设计需要对符号图形进行编辑,符号工具组如图8-1-2 所示。任务 1 制作福鼎白茶信息图图8-1-2 符号工具组1. 符号喷枪工具使用符号喷枪工具可在页面中创建单个或多个指定的符号。在“符号”面板中选择一个符号样本,使用该工具在页面中单击即可创建一个单独的符号实例,如图8-1-3 所示。单击并拖动鼠标,符号将沿鼠标的运行轨迹进行分布,形成符号组,如图8-1-4 所示。任务 1 制作福鼎白茶信息图图8-1-3 创建符号实例图8-1-4 创建符号组2. 符号移位器工具符号位移器工具可以调整符号的顺序,更改符号的堆叠顺序。按住工具箱中的“符号喷枪工具”按钮 ,可从弹出的工具组中选择符号移位器工具 。使用符号移位器工具在创建的符号实例上单击并拖动鼠标,可调整符号的位置,如图8-1-5 所示。使用符号移位器工具还可以更改符号的堆叠顺序,按住“Alt + Shift”组合键的同时单击符号实例,可将符号向后排列,如图8-1-6 所示。任务 1 制作福鼎白茶信息图任务 1 制作福鼎白茶信息图图8-1-5 调整符号位置图8-1-6 更改符号堆叠顺序3. 符号紧缩器工具符号紧缩器工具可以使符号实例更集中或分散。在选择符号紧缩器的情况下,按住“Alt”键单击指定符号可以使符号相互远离,在符号上按住鼠标左键单击或拖动可以使符号之间靠近,如图8-1-7 所示。任务 1 制作福鼎白茶信息图图8-1-7 紧缩符号实例4. 符号缩放器工具使用符号缩放器工具单击指定的符号,可以将符号放大,按住“Alt”键的同时单击符号,可以将符号缩小,如图8-1-8 所示。任务 1 制作福鼎白茶信息图图8-1-8 缩放符号实例5. 符号旋转器工具在符号工具组中选择符号旋转器工具 ,在符号实例上按住鼠标左键拖动可以实现符号的旋转,如图8-1-9 所示任务 1 制作福鼎白茶信息图图8-1-9 旋转符号实例6. 符号着色器工具使用符号着色器工具 可以修改符号实例的颜色。在拾色器或“色板”面板中选定颜色,使用该工具在符号实例上单击,即可改变符号实例的颜色,连续单击,可以增加颜色的浓度,如图8-1-10所示。单击“色板”面板中的颜色接着单击符号,符号颜色将进行混合,如图8-1-11 所示。如果要恢复符号的颜色,按住“Alt”键在符号实例上单击即可。任务 1 制作福鼎白茶信息图任务 1 制作福鼎白茶信息图图8-1-10 修改符号实例的颜色图8-1-11 混合符号实例的颜色7. 符号滤色器工具选择符号滤色器工具 ,在符号上单击或按住鼠标左键拖动,可以增加符号实例的透明度,单击次数越多,鼠标左键停留时间越长,符号颜色越透明。按住“Alt”键在符号上单击或按住鼠标左键拖动,则能减少符号的透明度,随着单击次数的增加符号颜色恢复,效果如图8-1-12 所示。任务 1 制作福鼎白茶信息图图8-1-12 减少符号透明度效果8. 符号样式器工具符号样式器工具 可以在“图形样式”面板上添加或删除图形样式。选择符号集,从“图形样式”面板中选取一种样式,单击或按住鼠标左键拖动,符号会被添加所选的图形样式。按住“Alt”键单击或按住鼠标左键拖动可以删除图形样式,效果如图8-1-13 所示。任务 1 制作福鼎白茶信息图图8-1-13 符号应用图形样式效果二、新建符号“符号”面板中的“新建符号”按钮 可以将选定的对象作为新符号创建到面板中。在页面中选择要创建为符号的对象,如图8-1-14a 所示。单击“符号”面板下方的“新建符号”按钮,打开“符号选项”对话框,输入符号名称“星星”,如图8-1-14b 所示。单击“确定”按钮,即可在“符号”面板中创建一个新的符号样本,如图8-1-14c所示。也可以将要创建为符号的图形直接拖入至“符号”面板中新建符号。单击“符号”面板右上角的扩展按钮 ,在弹出的下拉列表中选择“新建符号”命令,也可以新建符号。任务 1 制作福鼎白茶信息图任务 1 制作福鼎白茶信息图a)图8-1-14 新建符号a)选择符号对象 b)“符号选项”对话框 c)完成效果b)c)任务2 制作福鼎白茶信息内页1. 掌握图表工具的使用方法。2. 掌握图表数据输入的方法。3. 掌握编辑图表的方法。4. 能利用柱形图工具、折线图工具、饼图工具等制作信息化图表内页。任务 2 制作福鼎白茶信息内页本任务是一个信息化图表内页设计实例,通过设计制作图8-2-1 所示的福鼎白茶信息内页,学习图表工具、图表数据输入、编辑图表的方法,掌握图表的应用技巧,学会修改图表中各个色块的颜色。图8-2-1 福鼎白茶信息内页任务 2 制作福鼎白茶信息内页一、图表工具在工具箱中默认的图表工具为柱形图工具,按住该工具可弹出图表工具组,包括柱形图工具、堆积柱形图工具、条形图工具、堆积条形图工具、折线图工具、面积图工具、散点图工具、饼图工具和雷达图工具,如图8-2-2 所示。用户可根据设计需要,使用不同的图表工具来创建不同的图表。任务 2 制作福鼎白茶信息内页图8-2-2 图表工具组1. 柱形图工具柱形图工具可创建柱形图表,用于在相同的图表中提供不同的统计数据类型的直接比较。选择工具箱中的柱形图工具 ,在要创建图表的位置单击,在弹出的“图表”对话框中可设置图表的宽度和高度,如图8-2-3a 所示。单击“确定”按钮,会自动打开“图表数据输入”对话框,按图8-2-3b 所示输入相应的数值,输入完成后单击“应用”按钮 ,或者按“Enter”键,即可生成由刚刚输入的数据构成的柱形图,如图8-2-3c 所示。任务 2 制作福鼎白茶信息内页任务 2 制作福鼎白茶信息内页图8-2-3 创建柱形图a)“图表”对话框 b)“图表数据输入”对话框 c)柱形图a)b)c)2. 堆积柱形图工具使用堆积柱形图工具 创建的图表,是由多个矩形堆积组合而成,用于数据的综合分析或比较数据的比例,其使用方法与柱形图工具一致。“图表数据输入”对话框,如图8-2-4a 所示,输入的数据构成的堆积柱形图,如图8-2-4b 所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-4 创建堆积柱形图a)“图表数据输入”对话框 b)堆积柱形图3.条形图工具“条形图工具” 通过一组或多组水平矩形表示图表的数据,其使用方法与柱形图工具一致。“图表数据输入”对话框,如图8-2-5a所示,输入的数据构成的条形图,如图8-2-5b所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-5 创建条形图a)“图表数据输入”对话框 b)条形图4.堆积条形图工具“堆积条形图工具” 是通过堆积条形图中的条形进行数据的比较。它与堆积柱形图的区别在于方向,一个是横向条形,一个是纵向柱形。“图表数据输入”对话框,如图8-2-6a所示,输入的数据构成的堆积条形图,如图8-2-6b所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-6 创建堆积条形图a)“图表数据输入”对话框 b)堆积条形图5.折线图工具“折线图工具” 是通过关键的点相连形成不同的折线,以表示图表的数据,显示一组或多组对象在一段时间内变化的趋势。“图表数据输入”对话框,如图8-2-7a所示,输入的数据构成的折线图,如图8-2-7b所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-7 创建折线图a)“图表数据输入”对话框 b)折线图6.面积图工具面积图工具 是将数据以填充后的路径形式表现,且一个堆积在另一个上面,用来展示图中图例对象的总面积。“图表数据输入”对话框,如图8-2-8a 所示,输入的数据构成的面积图,如图8-2-8b 所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-8 创建面积图a)“图表数据输入”对话框 b)面积图7. 散点图工具使用散点图工具 可创建散点图表,在该图表中每个数据是根据x、y 坐标来确定位置,并使用直线段将各个点连接起来,可以直观反映出数据的变化。“图表数据输入”对话框,如图8-2-9a 所示,输入的数据构成的散点图,如图8-2-9b 所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-9 创建散点图a)“图表数据输入”对话框 b)散点图8. 饼图工具使用饼图工具 可创建饼形图表,用于比较各部分的百分比。图表按比例的大小显示饼和饼的各个楔形。“图表数据输入”对话框,如图8-2-10a 所示,输入的数据构成的饼图,如图8-2-10b 所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-10 创建饼图a)“图表数据输入”对话框 b)饼图9.雷达图工具雷达图工具 创建的雷达图以环形方式显示在时间或特定分类的确定点上各组数据的关系。“图表数据输入”对话框,如图8-2-11a 所示,输入的数据构成的雷达图,如图8-2-11b 所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-11 创建雷达图a)“图表数据输入”对话框 b)雷达图任务 2 制作福鼎白茶信息内页二、“图表数据输入”对话框使用图表工具在页面中绘制图表时,会弹出“图表数据输入”对话框,如图8-2-12所示。在对话框中输入并应用数据,图表中会出现相应的数据和名称。“图表数据输入”对话框中各按钮的功能如下。导入数据 :通过“导入图表数据”对话框导入制表文本文件中的数据。需要注意的是,导入文本之间必须用制表符进行分隔,行与行之间要用回车符进行分隔。任务 2 制作福鼎白茶信息内页换位行/ 列 :用于置换行或列之间的数据。切换x/y :将x/y 轴位置相互转换。单元格样式 :通过“单元格样式”对话框设置小数位数和列宽度。恢复 :用于将图表数据恢复到初始状态。应用 :用于将当前数据应用到图表中。图8-2-12 “图标数据输入”对话框任务 2 制作福鼎白茶信息内页三、编辑图表1. 修改图表类型“图表类型”对话框用于设置图表的相关属性。执行“对象”→“图表”→“类型”命令,或双击工具箱中的任意图表工具,即可弹出“图表类型”对话框。在对话框的“类型”选项中选择需要的类型,即可进行图表类型的转换。“图表类型”对话框如图8-2-13 所示。图8-2-13 “图表类型”对话框任务 2 制作福鼎白茶信息内页“图表类型”对话框中各选项的功能如下:图表选项:在下拉列表框中可选择“图表选项” “数值轴” 和 “类别轴”,以切换至相应的选项组中,如图8-2-14 所示。图8-2-14 图表选项任务 2 制作福鼎白茶信息内页类型:通过单击相应的图表按钮,即可转换图表类型,如图8-2-15 所示。a)b)图8-2-15 转换图表类型a)图表类型—柱形图 b)图表类型—饼图任务 2 制作福鼎白茶信息内页数值轴:在下拉列表框中可选择“位于左侧” “位于右侧” “位于两侧”等选项,以显示左边、右边或者两边的数值轴,如图8-2-16 所示。a)b)图8-2-16 转换数值轴任务 2 制作福鼎白茶信息内页图8-2-16 转换数值轴a)数值轴—位于左侧 b)数值轴—位于右侧 c)数值轴—位于两侧c)任务 2 制作福鼎白茶信息内页样式:用于为图表添加投影、在顶部添加图例、第一行在前、第一列在前等样式的设置,添加阴影效果如图8-2-17 所示。选项:用于设置图表列宽和群集宽度。图8-2-17 添加投影效果2. 修改图表数据图表创建后,若发现错误可选中图表,执行“对象”→“图表”→“数据”命令,在打开的“图表数据输入”对话框中进行修改。修改完成后,单击“应用”按钮即可,修改前图表数据如图8-2-18a 所示,修改后图表数据如图8-2-18b 所示。任务 2 制作福鼎白茶信息内页a)b)图8-2-18 修改图表数据a)修改前图表数据 b)修改后图表数据任务3 制作福鼎白茶详情页1. 掌握创建图案图表的方法。2. 掌握标记图案图表的方法。3. 掌握切片工具的使用方法。4. 能利用创建图案图表、标记图案图表等方法制作详情页。任务3 制作福鼎白茶详情页本任务是一个详情页设计实例,通过设计制作图8-3-1 所示的福鼎白茶详情页,进一步掌握图表的应用技巧,学会设计图表以及为图表添加“3D”效果。图8-3-1 福鼎白茶详情页任务3 制作福鼎白茶详情页一、创建图案图表如果想使图表变得更加醒目耀眼,可在页面中绘制符号,如图8-3-2a 所示。执行“对象”→“图表”→“设计”命令,打开“图表设计”对话框。单击对话框中的“新建设计”按钮,将符号添加到对话框中。单击“重命名”按钮,设置名称为“花朵”,“图表设计”对话框如图8-3-2b 所示。单击“确定”按钮,创建完成图表图案。任务3 制作福鼎白茶详情页任务3 制作福鼎白茶详情页图8-3-2 创建图表图案a)绘制符号 b)“图表设计”对话框b)a)选中图表,执行“对象”→“图表”→“柱形图”命令,打开“图表列”对话框,在对话框的“选取列设计”选项中选择“花朵”,在“列类型”下拉列表框中选择“重复堆叠”,“图列表”对话框如图8-3-3 所示。单击“确定”按钮,效果如图8-3-4所示。任务3 制作福鼎白茶详情页图8-3-4 创建图案图表效果图8-3-3 “图表列”对话框任务3 制作福鼎白茶详情页二、标记图案图表标记图案图表可以将折线图、散点图、雷达图图表中的数据点以自定义的方式重新标记图形。选择需要标记的图形对象,执行“对象”→“图表”→“设计”命令,在弹出的“图表设计”对话框中单击“新建设计”按钮,如图8-3-5a 所示。使用直接选择工具选择需要标记的点,执行“对象”→“图表”→“标记”命令,在弹出的“图表标记”对话框中选择新定义好的标记,单击“确定”即可,“图表标记”对话框如图8-3-5b所示,效果如图8-3-5c 所示。任务3 制作福鼎白茶详情页a)b)c)图8-3-5 标记图案图表a)“图表设计”对话框 b)“图表标记”对话框 c)完成效果任务3 制作福鼎白茶详情页三、切片工具切片工具用于网页设计的图片中,由于Illustrator 2021 中完成的内容编排不能直接把整张图上传到网络上,需要使用切片工具将一个完整的网页切割成许多小片,再转换成可编辑的网页,以便上传。任务3 制作福鼎白茶详情页1. 创建切片选择工具箱中的切片工具 ,按住鼠标左键在页面中拖动,绘制出一个矩形,松开鼠标后即可创建一个切片,如图8-3-6 所示。图8-3-6 创建切片任务3 制作福鼎白茶详情页2. 选择切片按住“切片工具”按钮,从弹出的工具组中单击“切片选择工具”按钮 ,在图像中单击,即可选中切片。按住Shift键同时单击其他切片,可选中多个切片。效果如图8-3-7所示。图8-3-7 选择切片任务3 制作福鼎白茶详情页3. 移动和调整切片大小单击“切片选择工具”,按住鼠标左键拖动,即可移动切片位置。按住鼠标左键拖动切片的边框即可调整切片大小,如图8-3-8 所示。图8-3-8 调整切片大小任务3 制作福鼎白茶详情页4. 删除与释放切片单击“切片选择工具”,选择要删除的切片,按住“Delete”键即可删除切片。选中切片,执行“对象”→“切片”→“释放”命令,即可释放切片,如图8-3-9 所示。图8-3-9 释放切片 展开更多...... 收起↑ 资源预览