2018铜陵电大专科形考任务1 综合运用视觉要素设计完成简单的网页界面
网站界面(UI)设计-国家开放大学电大学习网形考作业题目答案
网站界面（UI）设计实训3 完成App项目原型的制作（必做）实训目的通过制作App产品原型，将策划书的内容可视化，将每一个页面中的功能可视化，使设计出的UI符合App功能需求实训内容确定App产品应用的系统，确定UI页面的基本结构和布局，根据策划书和思维导图完成App功能页面的绘制，为相关页面建立超链接。
掌握原型制作软件的使用。
实训要求教师指导2学时，学生课后8学时或以上。
需完成二级页面原型，如下图。
实训过程记录步骤简述：01 框架搭建1. 新建页面底部导航分为5个部分，所以也对应着五个页面。
在制作时先不考虑登录等其他页面，只做主界面。
1. 在页面部分（注意不是概要部分）添加文件夹命名为主界面，放置主界面的页面。
2. 在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。
由于该原型底部导航分为5个部分，所以在主界面下是五个子页面。
每个子页面可以继续添加子页面，类似下图中我——个人主页，代表页面内跳转的页面。
2. 页面布局实训日期：成绩：实训5 设计制作App项目图标组(必做)实训目的（1）通过图标组的绘制，确定App项目UI的风格。
（2）在熟练使用软件工具的同时，熟悉不同系统对图标制作的要求。
实训内容（1）完成底部标签栏图标的设计制作。
（2）完成App功能图标的设计制作。
（3）完成App导航栏上功能图标的设计制作。
实训要求教师指导2 学时，学生课后用8 学时或以上。
需给出图标组效果和图标组交互效果，如下图。
实训过程记录步骤简述：1.使用最简单的图形简单的形状可以组合成复杂的图标。
你只需要从不同的角度去观察他们。
将注意力放在每一个图标是如何通过简单元素组合而成的。
2.还有一种纯色的线性风格。
比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是这种纯色的。
3.所谓的icon 图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现出来。
最新电大《视觉设计基础》形考作业任务01-04网考试题及答案(Word最新版)
最新电大《视觉设计基础》形考作业任务01-04网考试题及答案通过整理的最新电大《视觉设计基础》形考作业任务01-04网考试题及答案相关文档，渴望对大家有所扶植，感谢观看！最新电大《视觉设计基础》形考作业任务01-04网考试题及答案100%通过考试说明：《视觉设计基础》形考共有4个任务。
做考题时，利用本文档中的查找工具，把考题中的关键字输到查找工具的查找内容框内，就可快速查找到该题答案。
本文库还有其他教学考一体化答案，敬请查看。
01任务一、名词说明（共4 道试题，共10 分。
）1. 点------- 参考答案：点-------是一切形态的基础。
在几何学中点表示位置，它既无形态也无大小。
但点一旦作为造型元素出现在设计图面上后，无论多么细小，只要看得见，必定存在大小和形态，它可以是一个几何形，也可以是一个自然形，它可以是一个文字，也可以是一张图片，点的意念是无限的，它通常可产生小巧、集中、定位、闪烁或游移等心理效果。
2. 线------- 参考答案：线-------是点移动的轨迹。
几何学上的线是没有粗细的，只有长度和方向。
线在视觉设计中却有着重要的作用，它可以表现动与静、轻与重等感觉，可以表现对象各种不同的性质与特点，可以表现不同感情和特色，自然中凡是具有方向性延长的现象，大都可理解为线的意象。
3. 面------- 参考答案：面-------点和线的聚集形成了面。
面的形态在视觉上往往给人整体感、重量感等。
面最为直观的特点便是大小和形态。
大面积的面，给人以扩张感；小面积的面，给人以向心感。
4. 变更统一-------- 参考答案：变更统一--------变更和统一是一种相当普遍运用的基本法则，是形式美法则的高级形式，又称多样统一。
事物原来就是丰富多彩而又富有变更的统一整体，变更统一体现了生活、自然界中对立统一的规律。
“变更”或“多样”体现了各个事物的特性的千差万别，“统一”体现了各个事物的共性或整体联系。
(更新版)国家开放大学电大专科《计算机平面设计》网络课形考任务1及任务4作业答案
（更新版）国家开放大学电大专科《计算机平面设计》网络课形考任务1及任务4作业答案(更新版)国家开放大学电大专科《计算机平面设计(2)》网络课形考任务1及任务4作业答案盗传必究考试说明：本课程考核采用100%形成性考核的方式。
不再另设期末考试。
即形成性考核成绩达到60分及以上，可获得本课程相应学分。
第一次形成性考核任务（预备知识：第二单元；权重：20%；需辅导教师评分）一、作品题（共3道试题，共100分。
）题目1 1. 运用所学的Illustrator软件，根据所提供的样图，临摹“男女洗手间”标识注意线条和细节（本题30分）。
要求：(1)用文字描述所有临摹过程和步骤（包括主要用到了哪些菜单和工具），存成Word文件上交；(2)保留Illustrator作品的原始的层文件，存成AI文件格式上交，无层文件的作业无效；(3)为了保证作品的效果，另存一张tif文件格式上交，分辨率100dpi即可；答案如下：操作过程1) 洗手间示意图的绘制过程：2) 运用钢笔工具，先绘制男士的轮廓并填充蓝色。
3) 运用钢笔工具，先绘制女士的轮廓并填充红色。
4) 在图片下方拉出蓝色的长方形，并填充为蓝色。
5) 输入字体：男洗手间以及Male Toilet，将将字体设置为白色6) 输入字体：女洗手间以及Female Toilet，将将字体设置为白色答案：特别说明:这个压缩包只能复制到除电脑桌面和C盘之外的其它硬盘上才能正常解压。
这个压缩包里的答案包含三个文件（①男女洗手间示意图绘制过程.doc ②男女洗手间绘制示意图.tif ③男女洗手间.ai）,第一个文件是Word文档，内容是本题的操作过程，把内容直接复制粘贴到答题页面中的答题框中即可。
第二个文件是tif格式的图片，答本题时直接通过答题页面上的把第二个文件上传上去即可。
第三个文件是已通过Illustrator矢量图形软件制作成的原始的层文件，制作成的文件已生成ai文件格式，只需按照提交第二个文件的方法把第三个文件直接上传上去即可。
最新国家开放大学电大《视觉设计基础》形考任务1试题及答案
最新国家开放大学电大《视觉设计基础》形考任务1试题及答案二、简答与分析题（共2道试题，共20分。
）题目21.何为“形式美法则”？它包括哪些内容？（本题8分）答：形式美的法则包括：变化与统一；对比与和谐；对称与均衡；比例与尺度；节奏与韵律.其中最高法则便是变化与统一.审美关系的构成正是体现了这一原则.过于追求变化就破坏统一关系,使其显得杂乱无章；作品一:节奏通常表现为一些形态元素有条理的反复、交替或排列,使人在视觉上随着视觉路线,形成视觉的节拍。
韵律是指按照美学要求而产生的由元素与元素之间有节奏的连续进行或者流动,通常体现为视觉流动的通畅性。
在奥林帕斯照相机广告这个广告中,手臂上的金属圈的有序排列构成一个韵律和谐,节凑协调的画面。
作品二:对称均衡,重心等法则也是形式美的法则之一。
任何形体的重心位置都和视觉的安定有紧密的关系。
色彩或明暗的分布等都可对视觉重心产生影响。
在奥迪汽车的这个广告中,气球和气嘴的组合中,成功的将人的视觉重心集中到他们的接触面,产生一种和谐稳定的美感。
作品三:自然界中到处可见对称的形式,如鸟类的羽翼、花木的叶子等。
所以,对称的形态在视觉上有自然、安定、均匀、协调、整齐、典雅、庄重、完美的朴素美感,符合人们的视觉习惯。
在这个卫生巾的广告中,设计师巧妙的利用了对称的原则,将人们的视觉焦点从卫生巾的外部形状转移到内部构造上,以协调整齐的形式表达产品的内部构造与功能。
三、简答与分析题（共2道试题，共20分。
）题目41.色彩的视错觉有哪些？（本题10分）答：（1）并置色彩错觉两种或两种以上的颜色安置在一起时，每一种色的纯物理性质在视觉中有所改变，如红和绿搭配，红的更红、绿的更绿。
色彩并置得当则可使色彩交相辉映，相互衬托。
（2）补色错觉视觉色彩补偿现象也称为色彩的视错觉现象。
人的视觉对色彩永远需要一种生理的平衡,即人眼看到任何一种颜色时,总要求它的相对补色,如果客观上这种补色没有出现,眼睛就会自动调节,在视觉中制造这种颜色补偿。
(更新版)国家开放大学电大专科《计算机平面设计(2)》网络课形考任务1作业答案
（更新版）国家开放大学电大专科《计算机平面设计 (2) 》网络课形考任务 l 作业答案
考试说明：本课程考核采用 100％形成性考核的方式。
不再另设期末考试。
即形成性考核成绩达到 60 分及以上， 可获得本课程相应学分。
第一次形成性考核任务（预备知识：第二单元；权重：20%；需辅导教师评分）
一、作品题（共3道试题，共100分。
）
题目1
1.运用所学的Illustrator软件，根据所提供的样图，临摹“男女洗手间”标识注意线条和细节（本题30分）。
要求：
(1)用文字描述所有临辜过程和步骤（包括主要用到了哪些菜单和工具），存成W or d文件上交；
(2)保留I llustrator作品的原始的层文件，存成A I文件格式上交，无层文件的作业无效；
(3)为了保证作品的效果，另存一张t if文件格式上交，分辨率lOOdpi即可；
答案如下：
操作过程
l)洗手间示意图的绘制过程：
2)运用钢笔工具，先绘制男士的轮廓并填充蓝色。
3)运用钢笔工具，先绘制女士的轮廓并填充红色。
4)在图片下方拉出蓝色的长方形，并填充为蓝色。
5)输入字体：男洗手间以及Male Toilet,将将字体设置为白色． ．
6)输入字体：女洗手间以及Female Toilet,将将字体设置为白色
男洗手间艾i先手i司
Male Toilet Female To i let
男女洗手间rar
答案：
2021.01.06。
最新国家开放大学电大《视觉设计基础》形考任务1试题及答案(Word最新版)
最新国家开放高校电大《视觉设计基础》形考任务1试题及答案通过整理的最新国家开放高校电大《视觉设计基础》形考任务1试题及答案相关文档，渴望对大家有所扶植，感谢观看！最新国家开放高校电大《视觉设计基础》形考任务1试题及答案形考任务1 一、论述题（共20 分）题目1 请你谈一谈对于视觉设计的重要性以及作用的相识，并结合你的喜好举例进行说明，请将例子上传为附件。
答：1，视觉须要传递精确的信息2，视觉应包含确定的信息量3，视觉效果来源于匹配程度4，视觉与信息的唯一匹配性（这是视觉传达的最高境界）视觉传达设计是为现代商业服务的艺术主要包括标记设计、广告设计、包装设计、店内外环境设计、企业形象设计等方面，由于这些设计都是通过视觉形象传达给消费者的，因此称为“视觉传达设计”，它起着沟通企业——商品——消费者桥梁的作用。
此外，视觉设计在商业设计领域是一个较为宽泛的概念，依据周韧所著《当代视觉设计精品——欧洲篇》对视觉设计的归纳分类，视觉设计还包含商业店招及门面展示设计、指示系统设计、设计雕塑、商业环境设计、公共设施设计、橱窗展示设计、壁面展示设计等方面。
视觉传达设计主要以文字、图形、色调、立体造型为基本要素的艺术创作，在精神文化领域以其独特的艺术魅力影响着人们的感情和观念，在人们的日常生活中起着特殊重要的作用。
二、简答与分析题（共2 道试题，共20 分。
）题目2 1.何为“形式美法则”？它包括哪些内容？（本题8分）答：形式美的法则包括：变更与统一；对比与和谐；对称与均衡；比例与尺度；节奏与韵律.其中最高法则便是变更与统一.审美关系的构成正是体现了这一原则.过于追求变更就破坏统一关系,使其显得杂乱无章；而过于追求统一就会显得单调、平凡而空洞.所以形式美的法则就是在统一的前提下尽量制造变更,内容丰富而不失主题.这一关系用辩证法原理加以理解最合适不过,任何适用于辩证法的实例都可以用来说明形式美的法则.典型的实例便是道家的黑白阴阳图,外边的圆线及对称式结构体现了统一的秩序感,这是大前提,然后在圆中制造变更---原来黑白是两个不相容的两极,又处于面积等分状态,可谓是追求变更的极致了.但是阴阳鱼用S型曲线缓冲了黑白等分面积的猛烈对比,又用白点和黑点相互渗透到对方,使白中有黑,黑中有白,加强了黑白之间的联系和形式上的统一. 题目3 2.谈谈你对下列作品的评价，并且用形式美法则的相关内容进行分析，每个作品的分析不少于100字（本题12 分）作品1 奥林帕斯照相机广告作品2 奥迪汽车广告作品3 卫生巾广告答：作品一:节奏通常表现为一些形态元素有条理的反复、交替或排列,使人在视觉上随着视觉路途,形成视觉的节拍。
(更新版)国家开放大学电大专科《Dreamweaver网页设计》网络核心课形考任务1试题及答案
（更新版）国家开放大学电大专科《Dreamweaver网页设计》网络核心课形考任务1试题及答案(更新版)国家开放大学电大专科《Dreamweaver网页设计》网络核心课形考任务1试题及答案盗传必究形考任务一（1）网页的内容应该包括哪些元素？答：一般网站的页面组成都有文字、图象、超链接、表格、表单、动画及框架等。
一、框架框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。
例如，我们可以在一个框架内放置导航栏，另一个框架中的内容可以随着单击导航栏中的链接而改变，这样我们只要制作一个导航栏的网页即可，而不必将导航栏的内容复制到各栏目的网页中去。
二、文本文本是网页中的主要信息。
在网页中可以通过字体、字号、颜色、底纹以及边框等来设置文本属性。
这里指的文字是文本文字，而并非图片中的文字。
在网页制作中，文字可以方便地设置成各种字体和大小，但是这里还是建议，用于正文的文字不要太大，也不要使用太多的字体，中文文字使用宋体、9磅或者12、14像素左右即可。
因为过大的字在显示器中显示时线条的显示不够平滑、颜色也不要使用得太过复杂，以免造成影响用户视觉。
大段文本文字排列，建议参考一下优秀的报纸杂志等。
三、图片今天看到的丰富多彩的网页，都是因为网页中有了图象，可见图象在网页中的重要性。
用于网页上的图片一般为JPG和GIF格式的，即以.jpg和.gif为后缀的文件。
四、超链接超链接是整个网站的通道，它是把网页指向另一个目的端的链接。
例如指向另一个网页或相同网页上的不同位置。
这个目的端通常是另一个网页，但也可以是图片、电子邮件地址、文件、程序，或者也可以是本阿谀的其他位置。
超链接可以是文本或者图片。
超链接广泛的存在于网页的图片和文字中，提供与图片和文字相关内容的链接。
在超链接上单击鼠标左键，即可链接到相应地址（URL）的网页。
有链接的地方，鼠标指到光标会变成小手形状。
可以说超链接正是Web的主要特色。
（更新版）国家开放大学电大专科《Dreamweaver网页设计》操作题题库及答案
（更新版）国家开放大学电大专科《Dreamweaver网页设计》操作题题库及答案(更新版)国家开放大学电大专科《Dreamweaver网页设计》操作题题库及答案盗传必究一、操作题题目1 代码按照如下要求定义div样式效果。
A height:60px;B text-align:center;C color:#FFF;D width:60px;E font-size:60px; 从上面选择正确的选项，填入到下面对应的括号内。
（注：每空只有一个正确的选项）（1）设置宽度为60像素 D （2）设置高度为60像素 A （3）文本水平居中对齐 B （4）设置字号为60像素 E （5）设置文字颜色为白色 C 题目2 从下面选择正确的选项，填入到下面对应的括号内。
（注：每空只有一个正确的选项）如图所示的文件夹结构。
在samples文件夹下面有work1文件夹，在work1文件夹下面有images文件夹，图像文件back08.gif在work1文件夹中，图像文件ch_cook1.gif、ch_cook2.gif在work1子文件夹的images文件夹中。
请根据相对路径的方式写出对应的文件路径。
如文件index.html在sample文件夹下，若要调用图像文件back08.gif，图像文件back08.gif在index.html文件中的路径表示为：work1/back08.gif A. back08.gif B. work1/back08.gif C. ../work1/images/back08.gifD. ../../work1/back08.gifE. ../back08.gif 从上面选择正确的选项，填入到下面对应的括号内。
（注：每空只有一个正确的选项）1）文件index.html工作在work1目录下，若要调用图像文件back08.gif，图像文件back08.gif在index.html文件中的路径表示为 A （2）文件index.html工作在sample目录下，若要调用图像文件back08.gif，图像文件back08.gif在index.html文件中的路径表示为 B （3）文件 abc.html工作在work2 目录下，若要调用图像文件back08.gif，图像文件back08.gif在abc.html文件中的路径表示为 C （4）文件abc.html工作在work1/images 目录下，若要调用图像文件back08.gif，图像文件back08.gif在abc.html文件中的路径表示为 E （5）文件abc.html工作在work2/images 目录下，若要调用图像文件back08.gif，图像文件back08.gif在abc.html文件中的路径表示为 D 题目3 从上面选择正确的选项，填入到下面对应的括号内。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实训指导综合运用视觉要素设计完成简单的网页界面1. 目的掌握网页中常见构成要素的设计要点。
能够使用设计软件制作简单的网页界面，在实践中提升对视觉要素的综合把握能力，以及设计软件的操作熟练度。
2. 内容掌握网站界面的设计与制作。
设计制作特定主题的网站界面，了解网页的构成要素，综合运用视觉要素设计完成简单的网站界面。
提交源文件，并附上不少于200 字的设计说明。
实训指导在学习网页界面设计的初期，模仿制作一些现有网站的界面是一种比较好的学习手段，希望同学们在模仿学习的过程中，不断加深对网页界面设计制作的理解，多多练习，一定能取得较大的进步。
在开始制作之前，首先为大家介绍一个Photoshop标记外挂神器Assistor PS。
步骤1：我们新建一个空白网页，宽度是1920px，高度是2410px。
为了适应各种分辨率的电脑，一般网站的主体内容（非页面宽度）的最小宽度应在960以上。
这个页面的主体内容宽度是988px，因为主体内容是居中的，所以主体内容到页面左右边缘的距离应该是相同的。
主体内容到页面左右边缘的距离均是466px。
步骤2：打开我们刚才已经下载好的Assistor PS，这个软件有个用于网页布局的神奇功能，点击面板中的“Guide Maker”，大家可以理解为“绘制参考线”。
这里不仅可以设置主体部分至上下左右边缘的距离，而且还可以快速分栏，设置栏宽。
此处网页主体部分分为三栏，栏宽为314px，栏间距是23px。
314px（栏宽）×3+23px（栏间距）×2=988px（主体总宽度）。
步骤3：除了分栏，还可以分行，通过参考线测量，我们可以知道网页主体部分距离网页上边缘的距离是245px，距离网页下边缘的距离是802px，这里主体部分总高度是2410px-245px-802px=1363px，分为三行，行高是437px，行间距是26px。
437px（行高）×3+26px（行间距）×2=1363px（主体总高度）步骤4：因此，在Assistor PS 的“Guide Maker”面板中设置如下图，非常直观。
步骤5:点击“Create”按钮后，空白页面中就会出现以下蓝绿色的参考线，为了便于大家理解其中的数量关系，我将涉及的距离数值用红色标注在页面中（实际界面是没有这些红色标注的）。
步骤6：制作页头1.用矩形工具绘制长1920px，高为101px的矩形，颜色为“#ffffff”，图层命名为“页头白底”，为图层添加【投影】图层样式，混合模式为“正片叠底”，色彩为“#a0a0a0”，不透明度为40%，角度为120度，设置距离为4px，扩展为1%，大小为3px，其他保持默认设置即可2.添加网站logo，依次绘制logo右侧的搜索框和搜索按钮。
搜索框宽200px、高30px，描边大小为1点，描边颜色为“#e3e3e3”，搜索框内输入文字“国家、目的地…”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色“#444444”，搜索按钮宽60px，高30px，半径为2px，填充色为“#ff7400”，按钮上“搜索”两字，字体：Microsoft YaHei UI，类型：Regular，字号：14px，字体颜色“#ffffff”。
如图3.输入文字“行程大师”、“在线客服”，字体：Microsoft YaHei UI，类型：Regular，字号：14px，字体颜色“#666666”；输入文字“预定资讯”，字体：Microsoft YaHei UI，类型：Light，字号：14px，字体颜色“#666666”；输入文字“4006-646-888”，字体：Microsoft YaHei UI，类型：Regular，字号：17px，字体颜色“#fb6a00”；置入png格式的手机图标和对话图标；绘制两条高为13px的短线段，颜色为“#e3e3e3”，并放到合适的位置，起到分隔的作用。
最终结果如图4.绘制宽为1920px，高为3px的橙色渐变的矩形，“渐变叠加”图层样式，混合模式正常，不透明度100%，渐变颜色从#fa4300到#ffaf00，样式为线性，角度为0度，其他按默认设置，如图3-49所示。
这条线将页头的上半部分和网页主导航文字分隔开来。
5.输入主导航文字“首页”、“定制自由行”、“包车自由行”、“目的地”、“商场”和“达人”，字体：Microsoft YaHei UI，类型：Regular，字号：16px，字体颜色深灰色“#333333”；输入“超级自由行”，字体：Microsoft YaHei UI，类型：Regular，字号：16px，字体颜色橙色“#fb6a00”。
6.输入文字“登录”、“注册”，字体：Microsoft YaHei UI，类型：Regular，字号：16px，字体颜色深灰色“#333333”。
最终效果如图7.输入文字“问答”、“精致生活”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色深灰色“#333333”；输入文字“实用”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色白色“#ffffff”，并绘制实用红底；输入文字“NEW”，字体：Microsoft YaHei UI，类型：Regular，字号：10px，字体颜色白色“#ffffff”，并绘制NEW橙色底。
最终效果如图3-51所示。
至此页头部分已经制作完成，此过程中注意图层编组，将内容进行分组管理比较直观易找。
步骤7：页面搜索及线路文字结果。
1.绘制页面搜索框，长为425px，高为40px，半径为4px的圆角矩形，描边大小为1点，描边颜色为“#e3e3e3”，填充颜色为# fbfbfb，搜索框内输入文字“意大利”，字体：Microsoft YaHei UI，类型：Regular，字号：18px，字体颜色“#333333”，在“意大利”前置入搜索放大镜图标。
搜索按钮宽78px，高40px，半径为4px，填充色为“#fc9500”，按钮上“搜索”两字，字体：Microsoft YaHei UI，类型：Regular，字号：20px，字体颜色“#ffffff”。
2.输入文字“共114相关的超级自由行”，字体：Microsoft YaHei UI，类型：Regular，字号：26px，字体颜色“#333333”，其中“114”颜色改为橙色“#fb6a00”，以表示强调。
步骤8：线路单元制作。
这里要强调模块化的思路，因为9个线路单元就设计样式而言，都是完全一样的，所以只要制作完成一个路线单元，其他的复制后更改文字和图片即可。
1.根据之前步骤2和步骤3的计算，单个线路单元的宽为314px，高为437px，所以首先绘制一个宽为314px，高为437px的矩形，颜色为“#ffffff”，描边大小为1点，描边颜色为“#cccccc”，为图层添加【外发光】图层样式，如图3-53所示，混合模式为“正片叠底”，外发光色彩为“#a6a6a6”，不透明度为75%，角度为120度，设置扩展为1%，大小为4px，其他保持默认设置即可。
2.绘制一个宽为290px，高为200px 的矩形，任意填充颜色。
将素材文件夹内“线路单元大图”文件置入当前文档，注意“线路单元大图”图层在任意色矩形图层之上，再对“线路单元大图”图层【创建剪贴蒙版】。
结果如图3-54 所示。
将这两个图层进行图层编组为“大图”图层组。
3.绘制一个边长为64px的正方形，任意填充颜色。
将素材文件夹内“线路单元小图1”文件置入当前文档，注意“线路单元小图1”图层在正方形图层之上，再对“线路单元小图1”图层【创建剪贴蒙版】。
结果如图3-55所示。
并将这两个图层进行图层编组为“小图1”图层组。
4.按照制作“小图1”图层组的方法，依次类推，完成“小图2”图层组和“小图3”图层组，并置入“行程总览图标”5.制作线路标题价格。
输入文字“纯净山水别样意瑞10日深度旅行”，字体：Microsoft YaHei UI，类型：Regular，字号：18px，字体颜色“#666666”；输入“￥”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色“#fb6a00”；输入“14,999”，字体：Microsoft YaHei UI，类型：Regular，字号：22px，字体颜色“#fb6a00”，这里用橙色是强调价格这一重点信息；输入文字“起”，字体：Microsoft YaHei UI，类型：Regular，字号：14px，字体颜色“#b0b0af”；将以上进行图层编组为“线路标题价格”。
6.制作打造者介绍。
置入打造者的头像图片，大小调整为宽和高均为48px。
输入文字“blingbling”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色“#333333”。
绘制长46px，高15px，半径8px的圆角矩形，填充蓝色#3e67dd，绘制白色五角星，输入文字“达人”，字体：Microsoft YaHei UI，类型：Bold，字号：10px，字体颜色“#fbcb54”，并给文字“达人”添加图层样式“描边”，描边大小为1px，颜色为# d06802。
输入文字“欧洲生活多年，深度自助旅行…”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色“#b0b0b0”；输入文字“打造”，字体：Microsoft YaHei UI，类型：Bold，字号：14px，字体颜色“#b0b0b0”。
绘制宽为314px，描边大小为1点的灰色分隔线，颜色为“#e3e3e3”，这条线将打造者介绍和上面的内容分隔开来，将以上进行图层编组为“打造者信息”图层组，7.输入文字“35种深度体验”，字体：Microsoft YaHei UI，类型：Regular，字号：14px，字体颜色“#ffffff”，其中“35”改成橙色“#fb6a00”以示强调。
绘制宽为102px，高27px的矩形，颜色为“#040404”，图层的不透明度为75%，作为文字“35种深度体验”的衬底。
至此就完成了完整的单个线路单元的制作，我们把相关图层组和图层共同编组到“路线单元1-1”图层组内。
步骤9：其他八个线路单元的复制。
有了“路线单元1-1”图层组这样一个成形的模块，其他8个线路单元只要利用【复制组】功能，如图3-60所示，就可以轻松制作。
为了便于管理和查找，可以将线路单元所在图层组命名为“路线单元1-1”、“路线单元1-2”、“路线单元1-3”、“路线单元2-1”、“路线单元2-2”、“路线单元2-3”、“路线单元3-1”、“路线单元3-2”、“路线单元3-3”，沿着三栏三行的参考线，调整到合适的位置，步骤10：将网页背景色设为灰色# efefef。