《网页美工设计》教案-第1讲 PC端网页UI设计制作

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 PAGE1第二部分技能提升篇第七章网页UI设计制作标题第一节PC端网页UI设计制作第一讲PC端网页UI设计制作（上）课时2课时教学目标教学内容与过程如果说功能UI是指具有明确指代含义的图形，通过抽象化的视觉符号向用户传递信息。那么主题UI则多存在于电脑主屏幕界面，或者从网站下载时看到的图，通过点击它进入到某个网页或者某个应用。网页图标是具有明确指代含义的图形，通过抽象化的视觉符号向用户传递信息。网页图标将分为两次课讲授，本节课主要讲解图标设计的基础知识：1、功能图标的相关概念2、功能图标绘制技法功能图标是指在网页界面中具有明确表意功能用来替代文字快速引导客户的导航。它的设计原则主要有三点，其中形状规范是功能图标最重要的一点。说到形状规范就不得不说起布尔运算，他是目前绘制功能图标的最佳方式。大名鼎鼎的苹果公司LOGO就是运用这一方法设计出来的。掌握了最基本概念，接下来我们就通过某家居网站的功能图标绘制来掌握UI绘制的基本方法。通过观察效果图可知，该网页的功能图标多集中于导航栏位置和搜索栏位置，接下来我们由简到繁从最左侧的定位图标开始学习。首先，新建一个900乘600像素的画布。接下来为了方便操作，使图形更加规范，我们在显示中打开网格并且调出辅助线利用辅助线建立一个画面的中心点。将图形放大，我们观察定位图标发现它是由圆形和菱形合并组成。回到我们的操作界面选择椭圆形状，以中心点为圆心建立一个100像素X100像素从中心出发的椭圆。接下来将工具切换至矩形工具，路径关系转化至合并形状，以椭圆的圆形为出发点，建立一个50像素X50像素的矩形。接下来选择路径选择工具，依次选择椭圆以及菱形，CTRL+T变换形状将角度调至45度，调整位置。再次将工具切换到椭圆形状工具将路径关系更改为减去顶层形状，以刚才的的圆心为中心，建立一个50像素X50像素的同心小圆，点击确定。为了验证我们形状的准确性，将路径转换为选区（CTRL+ENTER）。形状设置成功，新建图层并修改前景色，RGB：24622，填充前景色，完成定位图标的绘制。在前面的概念中我们知道图标具有表意功能对形象有高度概括能力，如用户图标就是根据人像的外轮廓和使用规范的几何形体描绘基础形态。绘制出来的形状不但外形易识别，通用性还极强，绘制方法也非常简单。在工具当中选择椭圆工具，将鼠标放置在辅助线的中心，设置一个60X60大小的圆。接下来，切换回矩形工具，属性栏更改为合并形状路径。在圆的一半的位置上创建一个举行大小为60X20的矩形，点击确定。再次回到椭圆工具创建人像的头部，建立一个30X30大小的圆，点击确定。并利用路径选择工具将圆放置在合适的位置上。这时我们将路径转换为选区，发现人像的下半部分有一个多出来的半圆。我们利用矩形选框工具当中的从选区中剪去将半圆裁切。这时新建图层，并在新建的涂层上填充前景色：RGB：140136137，填充前景色完成用户头像的绘制。完成前面两个案例，不难发现在网页图标语言中再复杂的形状也是运用布尔运算法则将基础几何形体相互作用产生复杂形状。例如案例当中的设置图标，在网页设计中是运用较为广泛的图标，虽然它的外形复杂但通过仔细观察发现他是由多边形和椭圆相互作用得到的形状。二、设置图标的制作方法首先选择多边形工具，创建大小为150X150像素的八边形。这时要选择平滑拐角、选择星形、选择缩进边依据50%、选择平滑缩进，点击确定。这时我们会发现图像不在中心位置我们还是利用路径移动工具将图像放置在中心。接下来我们利用椭圆工具进行形状的相交，将路径更改为与形状区域相交。椭圆的建立依然以图片的中心为圆心，建立一个125X125像素的正圆。接下来，我们做设置图标中间的镂空依然是以大圆为圆心，但是我们要将路径关系更改为减去顶层形状，并建立50像素乘50像素的同心圆，点击确定。（CTRL+ENTER）将路径转换为选区，同时修改前景色，（RGB：11150247）点击确定。在新建的图层上填充前景色完成设置图标的制作。接下来是整个案例当中最为复杂的购物车图标，它是案例当中最复杂的图标，不仅涉及到布尔运算法则还涉及到对图形尖角的圆角化处理。首先选择圆角矩形工具创建一个大小为100X80的圆角矩形。这里半径更改为20像素，从中心出发。接下来切换为多边形工具，将路径方式更改为合并形状，创建一个50X50像素的三角形。取消平滑拐角取消星形，点击确定。通过CTRL+T将三角形移动到合适的位置上，接下来继续选择多边形工具，但是路径关系更改为减去顶层形状，建立一个小三角形。大小为30乘30。继续利用CTRL+T更改三角形的位置，这里注意的是要用路径选择工具选择三角形。这时会发现在这个案例当中，三角形的尖角非常的尖锐，在我们的网页设计图标当中尖锐的拐角会给用户视觉上带来非常不舒服的感觉，而圆滑的拐角会给用户带来轻盈柔和的视觉效果如：在网页当中经常看到的播放按钮的三角形就是做了圆滑拐角的处理。那么在我们的PS当中，除了圆角矩形工具其他形状都需要设计师手动调节尖角。在这个案例当中该如何调节三角形的尖角呢？首先选择椭圆工具，将路径操作更改为合并形状绘制一个与三角形内角相切的圆，大小为5像素。通过路径选择工具将圆与三角形的内角相切。接下来选择矩形工具，路径关系更改为减去顶层形状，做一个五成五像素的矩形。将矩形的位置移动到能够遮盖住三角形的尖角。接下来继续选择路径选择工具选择小圆，对他进行（CTRL+C）复制，再次DELET小圆。再次执行（CTRL+V）粘贴。为了验证我们圆角是否转化成功，CTRL+ENTER进行转化，发现尖角变成圆角，方法成功。接下来回到上一步，在整个设计当中为了让圆角矩形显得内容更加的丰满，我们在矩形的中心设立一个镂空的小圆。将形状更改为椭圆工具，并将关系更改为减去顶层形状。建立一个50X50像素的同心小圆，点击确定。（CTRL+ENTER）将路径转换为选区，并在新建了图层上进行前景色的填充。至此，完成本案例的网页图标制作部分。教学反思

第七章网页UI设计制作标题第一节PC端网页UI设计制作第二讲PC端网页UI设计制作（下）课时2课时教学目标教学内容与过程本节课，我们将在建立形态的基础上学习如何利用图层样式为图标添加造型和质感。近年来，不管是最早的拟物化风格还是当下流行的轻质感风格、扁平化风格都需要在图标基本型的基础上给其添加高光、材质、纹理、颜色阴影等效果，这就需要我们熟练地掌握PS当中的图层样式工具。图层面板底部添加图层样式是PS中用于制作各种渐变、高光、投影、质感等特效的强大效果。本节课主要结合图标制作讲解六个常用的图层样式，1、投影添加投影后图层的下方会出现一个轮廓和图层对象的内容相同的影子。参数越大投影越深，反之越浅。“角度”决定投影的位置。添加投影后的图层看上去有一种浮在上层的立体空间感，“距离”是调整影子与图层的远近关系，参数越大影子离图层越远，反之越近。“扩展”是调整影子的虚化，参数越大虚化越小，反之越大。“大小”是调整影子的面积，参数越大影子的面积越大，反之越小。2、内阴影内阴影与投影原理相同，区别在于投影是图层对象外部效果，内阴影是图层对象内部效果。其他参数都与投影一致。内阴影的正负光源角度会造成两种截然不同的效果，正角度光源内阴影的图层看上去有一种内嵌掏空的立体感，也就是内阴影角度90°反负角度光源（-90°）时，图层看上去是有厚度的立体感。3、渐变叠加渐变叠加视图层对象一个颜色过渡到另一个颜色或多个颜色的图层效果。每一个选项都产生不同的效果。渐变叠加包括线性、径向、对称、角度和菱型五种不同的样式，其中线性、径向和角度3种样式最常用，运用线性渐变做图标凸起效果时需要深色在下方，浅色在上方当做图标凹陷效果时，则需要深色在上方，浅色在下方。当我们绘制球面、气泡等形态的图标，通常使用径向渐变；绘制圆形金属质感的按钮、音乐碟片等则使用角度渐变。4、内发光内发光是在图层对象内部均匀的发光效果，类似径向渐变。混合模式有非常多的选项，每一个选项都产生不同的效果，参数越大光线越强，反之越弱。拖拽“杂色”会产生类似燥点的效果。“方法”的选择值分为柔和和精确，选择精确的光比柔和的穿透力更强一些。“源”是指光源，选择边缘，光源处于内侧边缘从图层对象边缘由外至中心发光；选择居中，光源则处于中心从图层对象中心由内至外发光。“大小”的参数越大发光范围越大，反之越小。内发光设置不同的颜色和混合模式可以绘制不同的效果，白色的光，混合模式选择“滤色”大小选择50可以绘制气泡等效果；黑色的光，混合模式选择“正片叠底”大小选择50可以绘制凹陷的效果。5、外发光外发光和内发光相反，是在图层边缘向外均匀的发光效果。外发光设置不同的颜色和混合模式可以绘制不同的效果，白色的光，混合模式选择“滤色”等可以绘制向外发光的效果；黑色的光，混合模式选择“正片叠底”绘制的是类似投影的效果，外沿有凹陷感。6、描边描边是沿着图层对象的轮廓进行填充的效果。“大小”参数越大描边越粗，反之越细。“位置”分为外部、居中和内部，与字面意思一致。“不透明度”的参数越大越不透明，反之越透明。描边填充类型分别是颜色、渐变和图案，颜色就是填充单色的描边；6PX渐变和渐变叠加样式相同，可以理解为描边部分添加了渐变叠加样式；如要给图标添加金属质感边缘，则可以使用渐变叠加样式线性黑白图案是填充位图，通常使用场景不多。7、斜面和浮雕斜面和浮雕是图层对象