《网页美工设计》教案-第1讲 家居类网页设计制作

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 PAGE1第三部分综合实训篇第二章综合案例——服饰类网页设计制作标题第一节家居类网页设计制作案例1第一讲家居类网页设计制作1（上）课时2课时教学目标教学内容与过程在浏览网页中常常可以看到，家居类网页界面较其它类型的网页界面更为灵活、精彩、美观，在设计时大多数设计师都会选用室内某处局部或某种元素作为页面的背景，令网页看起来更加时尚大气。而为了让浏览者体会到网页的美观和优雅，家居类网页在设计时应该考虑哪些因素呢？下面，我们就来学习家居类网页设计制作。第一部分，确定网站设计风格大多数家居类网站与服饰类网站的功能很相似，在网站中都有其商业性的部分，而这两者最主要的不同之处在于产品本身，家居类网页的重要功能是将家居产品展示给用户，将家居产品最完美的一面展现出来，另外，家居类网页除了展示家居产品类型，还有展示家居设计案例类型的网站，那么这类网站的功能则是主要展示在不同功能空间的室内设计案例。1、家居产品类网站此类网站主要是以展示产品类型为主，以欧普家居照明官网为例，我们可以看到，在设计时，需要考虑将欧普不同种类的灯具以及新产品在内容区域展示出来，以便浏览者在浏览时能够明确地看出，挑选出心满意足的产品。因此，该类网站的主要功能就在于清晰明确地展示产品，以便浏览者了解。2、家居产品以及设计综合类网站另外一种常见类型的家居类网站除了展示家居产品外，还有全屋定制之类的设计部分，该综合型的家居网站功能模块比起前者会更多，在网页设计时需要充分考虑用户的使用需求。以志邦家居网页界面设计为例，我们可以看到，在设计时需要在界面中将家居设计的部分体现出来，志邦家居的中部和右侧面都可以清晰的看到进入家居设计的入口。其次，经典案例的展示在此类网站中也很重要，在志邦家居的网页中，可以看到根据产品特性，用户可以从户型、装修风格、门板材质三方面的细致筛选，找到符合自己需求的家居产品，从而进行产品定制设计。但是在色彩选择上，由于案例需要大量的产品图片展示，因此，在设计时背景区域颜色的选择大部分是以白色为背景，不会选择饱和度较高的色彩，从而能够让客户的视觉焦点集中突出在产品本身。准确运用色彩搭配色彩搭配在网页界面设计时往往起到引导用户浏览视线的作用,因此，在设计时，要充分考虑色彩对家居产品展示以及网页的色彩统一和谐等因素。1.色彩突显家居主题色彩的色相、明度、亮度等属性能够给予人们不同的心理感受，从而影响人们的浏览行为，因此，我们可以通过网站中不同的颜色变化，在追求色彩创新的同时注意网页中和家居品牌理念相契合，建立起用户的情绪感知，从而吸引用户的注意力，突显家居产品主题。如全友家居的官方网站上，我们可以看出网站的界面以绿色贯穿始终，而绿色往往会让人联想到绿色、环保、健康。因此，这样的配色与全友家居的“绿色、环保”的家居品牌核心价值相契合。2.色彩划分网页的功能模块色彩作为一种视觉艺术呈现在人们面前，他的不同，表达着想要传递给人们不同的信息。在家居网页界面设计中，我们可以通过色彩与形态对网页的不同功能区域进行划分，用户通过这些色彩区块能够建立浏览网页的视觉层次，提高网站的信息阅读效率。在曲美家居网页界面设计中，我们可以看到整个网页界面用黑、白、灰三色块分为几个主要部分，从而能够让浏览者清晰的看到导航、品牌内容、旗下产品和售后服务四个模块。3、色彩搭配的持续性当家居网页界面的色彩一旦搭配完毕，在一定时间内往往不会进行改变。但对于家居网页来说，每过一段时间会有新的产品会出现，因此，在一定时间内，需要根据新产品更换局部的色彩，从而达到与家居产品色彩的和谐统一，因而在网页建立时就应该考虑到色彩搭配的持续性。合适的文字及排版在进行家居网页设计时，合适的文字及排版可以提高浏览者的阅读效率，因此，在设计时，通过清晰可读的文字和有层次的文字排版可以有效的传递家居产品的信息。1、清晰可读的文字网页界面上文字的主要功能是在美化页面视觉效果的同时，向大众传达页面中的各种信息内容，如品牌文化，产品系列说明和企业愿景等信息。因此，网页设计中的文字应避免为了设计而设计，而是需要根据人们对于文字的阅读习惯，清晰准确地给用户传达产品信息，增强文字的可读性。2、有层次的文字排版网页设计中文字的版式编排是设计的主要内容之一，浏览者在浏览页面时，几乎都需要通过文字来了解产品某些方面的信息，因此，文字的排版设计必须具备一定的层次性。文字内容按一定的层次来编排不仅可以方便浏览者快速发现页面中所需家居产品信息的所在位置，更重要的是降低浏览者眼睛的疲劳程度。为了能够做到有层次的文字排版，在排版时，要注意字体的粗细变化、字号大小的选择及字体的颜色和底纹颜色的选择。3、突出重点词汇在编排网页信息时，为了能够让浏览者迅速看到关键词，在页面中通常会将某些重点词语进行突出，以便引起客户的注意，提高浏览者在阅读时的重点关注度。如全友家居的企业简介这一栏目页面设计中，我们可以看到品牌名称和创立时间分别用不同的颜色和粗细的字体标出，这些关键词的标明，能够让用户在浏览时将注意力集中在这些关键信息上，提高了用户的网页阅读效率。四、合理布局网站界面家居品牌网页设计根据其功能，在界面布局上要考虑以下几个部分内容。1、产品服务内容明确家居网站其中一项重要功能在于能够将公司提供给用户的产品服务内容展示清楚。根据家居网站常见的两种类型，如果是单纯的家居产品类网站，那么需要在网页中分类展示家居产品，如图中的飞利浦照明，在产品的分类上给出了明确的展示，以便用户找到适合自己使用的灯具。而家居产品及设计综合类网站则除了需要展示出产品类型，在网页的侧面或其它明显的地方还要表示出设计的入口区域，志邦家居官网除了有不同场景经典案例的展示，在网页的右侧和下端就明确地展示出了用户量身设计的入口。2、信息完备完整的网页通常包括品牌logo，导航，内容，关注、联系方式、网站备案资料等部分，侧面有时会有在线客服和合作加盟等信息，在进行网页设计制作时，在线客服和合作加盟的内容位置可以改变，但是内容不能从网页界面中缺失，要保证几个部分的完整性。可以看到，虽然家居网页有不同的类型，但是在设计时都应该本着从功能出发进行设计的理念，合理选择网站的设计风格、准确运用色彩搭配、选用合适的文字及排版、合理布局网站界面这四个部分进行思考，就能设计出能够展示家居产品，满足用户浏览需求的网站界面。教学反思第二章综合案例——服饰类网页设计制作标题第一节家居类网页设计制作案例1第二讲家居类网页设计制作1（中）课时2课时教学目标教学内容与过程本节课通过M家居网页的设计制作来了解家居类网页的制作方法。首先，通过观察该网页案例，我们可以发现，它主要是由导航、内容和尾端导航三个部分组成，在导航部分的绘制当中，要注意联系方式、搜索和登录、注册图标的添加；在内容部分：主要是经典案例的添加，而在尾端除了要增加导航的详细内容还要增加关注、联系方式、网站备案资料等一些具体内容。接下来，让我们进入PS界面，来进行家居类网页的设计制作。首先进行新建文件，文件的宽度呢,我们进行设置1920、高度1080，分辨率72、颜色模式RGB模式，点击确定。接下来,我们来应用标尺工具对其进行区域的划分，找出大概的中间位置。接着，我们将纵向进行划分，首先划分出来导航。接着我们划分内容部分，尾端导航以及版权部分，这样一来，我们已经可以将网页进行了一个整体的划分。好，接下来我们新建几个空白的图层。将我们网页当中几个重要部分应用选框工具进行区分。我们的网页呢主要运用黑色，所以将颜色调整为黑色，框选，在第一个图层当中添加颜色。接着呢，我们进入第二个图层，添加颜色，大家一定要注意，在这当中呢要有图层的区分，添加一个图层，绘制最后的版权页，版权部分呢它是主要是灰色的，所以将颜色调成灰色。这样一来，大家可以看到我们网页的大概的布局已经呈现出来了。第一部分，导航的绘制。通过字体工具，先绘制品牌名称，这里我把文字复制进来，对应文字的大小，要稍微大一些。接下来是导航的具体内容。文字的空隙、间隔基本上要等距，他要稍微调整一下。另外，大家要注意文字的大小。在右上方呢是它的搜索和联系，那我们将图标引入其中，注意图标的一个大小，这两个图标呢要差不多大小。最后需要制作登录和注册页。我们用形状工具。接着，将形状里面的颜色进行修改，描边注意修改。好，这样的一个圆角矩形就出来了。在圆角矩形的上面我们写上它的文字，文字的颜色为黑色，将文字复制进来。大家要修改一下文字的大小以及我们图层的顺序。好，这样呢大家可以看到我们的导航栏基本上就做完了。在做完以后呢，大家注意将导航栏所有的部分进行群组，这样也是方便后期大家的修改。第二部分，内容部分。我们将图片导入其中，文件打开，找到我们所需要的图片，这样的一个图片效果呢过于的灰暗，因此，我们可以把图片移进来，注意调整图片的大小，调整图片到合适位置。接着呢我们给图片增加一个蒙版，将它不需要的部分进行遮盖。好，这样我们的图片修改完成，将图片进行颜色的修改，我们可以通过图像、调整、曲线，调整它的对比度，调整它的饱和度，这样我们的图像调整就完成了。教学反思第二章综合案例——服饰类网页设计制作标题第一节家居类网页设计制作案例1第三讲家居类网页设计制作1（下）课时2课时教学目标教学内容与过程本节课，继续学习家居网页的绘制实践操作。打开PS,接着上节课的内容继续绘制，接下来，需要增加经典案例的部分内容。将图层2，也就是前面绘制的矩形选框调至效果图上，调整不透明度，在这上面书写文字，将文字复制过来，注意文字的大小、字体、文字的间隔，因为文字当中呢会有图标在后面绘制，因此文字之间的间隔需要稍微大一些，将文字移至中间位置。接下来我们给文字旁边增加小图标，将图标调至合适的大小，大家注意，这里我运用的是等比例缩小，图标调整至跟文字差不多的大小，我们给图标修改颜色，从选区中减去，给图标增加颜色，选用白色，好，这样的一个小图标就绘制完成了。增加第二个图标，更改图标颜色，增加卧室的图标，将图片进行修改，主要是颜色的调整以及大小的修改，调整色相饱和度，图像、调整、色相饱和度，将饱和度调整为黑白，明度调高，调整曲线；增加客厅的图标，将图标多余的部分运用魔棒工具去掉；调整沙发的大小，调整图像，调整色相；最后增加餐厅的图标，调整图像的曲线，调整图像的大小，这样一来，我们的中间部分的图标就全部完成了。接下来，绘制经典案例的部分内容。首先，加上文字，文字的颜色调整为黑色，文字大小，在案例部分需要增加三个图片，所以我们要找到图片的大小。运用形状工具，绘制圆角矩形，再进行圆角矩形的图层复制，这样一来，我们的图片所在的位置就已经确定完了，接下来将图片放置其中。文件打开我们需要的三张图片，将图片一张一张移入到我们的案例当中，调整图片大小，可以稍微大一些，因为我们后期会用到蒙版工具；放置第二张图片，需要注意的是将三张图片都需要放置在圆角矩形的图层之上，下面呢我们运用蒙版工具，首先选择圆角矩形的所在区域，按住Ctrl键，再选中第一张图片加蒙版；第二张图片运用同样的方法，先选择圆角矩形，按住Ctrl键，再继续找到所在图片位置，添加蒙版；第三张图片选择圆角矩形所在的区域，找到图片的位置添加蒙版，这样我们的三个案例图片就已经全部出来了。添加导航部分的文字，这里的文字呢要与前面文字有所区别，我们运用仿宋；字体大小可以稍微小一些，添加新图层，调整颜色为黑色，填充，调整竖线大小，接下来我们在两个文字中间都加上这条竖线，注意竖线的等高；增加轮播符号，符号可以调整大小，调整字体，