《网页美工设计》课件-第1章 网页美工设计概述

网页美工设计目录第一部分

理论基础篇第二部分技能提升篇第三部分综合实训篇第一章

网页美工设计概述第一节

网页美工设计概述（上）本节主讲：第一节

网页美工设计概述（上）软件使用者使用环境使用方式科学+艺术交互设计图形设计前台设计用户测试网页美工设计的职能网页布局界面设计了解网站和网页的基本设计思想，能掌握网页风格类型定位、网页布局视觉流程设计、网页配色技巧、网页图片设计制作、网页Logo设计与制作、网页主题按钮设计制作、网页导航设计制作、网页UI设计制作等，运用PS软件完成网页的综合案例，掌握网页设计的基本方法。网站美工设计概述LOGO。导航栏Banner按钮图片文字网页的构成要素CONTENTS01网页LOGO在传播的过程中，简单的标志便于加深受众的印象。网页LOGO识别性logo设计原则简洁易记原则网页LOGO内涵性通过设计创意主题，依据设计的名称、品牌、地域民俗文化，对所要传达的文化思想理念进行挖掘分析、规划提炼、转化为设计元素。logo设计原则标志内涵性原则网页LOGO艺术性形式美观、构思巧妙、与众不同。logo设计原则艺术性原则（矢量图、色系不易太多）CONTENTS02导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。顶部水平栏导航模式顶部水平栏导航设计模式有时设计有下拉菜单，有文字链接、按钮形状、或者选项卡形状。设计元素。导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。竖直/侧边栏导航模式适合数量多的链接设计元素。导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。选项卡导航模式导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。面包屑导航模式二级导航的一种形式辅助网站的主导航系统设计元素。导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。标签导航模式标签提高网站的可发现性和探索性导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。搜索导航模式适合拥有无限内容的网站导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。出式菜单和下拉菜单模式出式菜单(与竖直/侧边栏导航一起使用)下拉菜单(一般与顶部水平栏导航一起使用)导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。页脚导航模式页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接导航栏请输入标题基于演示设计的一站式在线演示、素材销售、服务交易系统。导航栏案例：餐饮类网页制作CONTENTS03Banner468*60为国际标准尺寸但也可根据自己的画面定制大小。色彩不易太多图形要简洁明了一个网页中若有多个Banner要动静结合BannerBanner修改前销售、服务交易系统。修改后销售、服务交易系统。Banner修改前销售、服务交易系统。修改后销售、服务交易系统。修改之前的banner同为文字信息的小字内容没有放在一起，造成用户浏览时视觉跳跃；修改之后将同类型元素进行整合，既方便用户加工信息，又符合阅读习惯第一章

网页美工设计概述第二节

网页美工设计概述（下）本节主讲：第二节

网页美工设计概述（下）04按钮按钮按钮醒目准确反应功能与UI风格保持一致按钮格式.jpg.gif.png.bmp.swf按钮按钮按钮CONTENTS05图片图片案例“徽州文化旅游开发有限公司”技术层面1、缩略图大小合适。2、超链接建立正确。设计层面1、设计合理。2、配色美观大方。图片图片JPEG属于有损压缩，所设置的图片质量越低，文件的压缩比例越高，从而图片文件的容量也越小。GIF格式称为图形交换格式，鉴于网页对浏览速度的要求高于图像质量的要求，所以网页中的图像素材一般都使用GIF格式。图片CONTENTS06文字要做好网页文字效果，在对待文字设计上，切勿将文字只简单地视为创意之外的一个次要的、只为阅读而存在的内容。而要将文字作为整体设计中的一个设计元素对待，考虑其在整个设计中的作用、位置、形状。既要考虑文字、间距与色彩关系这些基本属性，也要考虑整个页面中文字的编排效果。文字一、字体选择设计者可以用字体更充分地体现设计中要表达的情感，字体选择是一种感性、直观的行为，选择字体的一些原则只能是一种相对适合的标准，不能绝对化。基本的原则是文字信息表达清晰、与主题内容不冲突、视觉效果舒适。文字1．字体粗细字体纤细，会显得比较有艺术气息，字形也非常优美；字体变粗，效果明显增强，会传递强而有力的印象。

2．标题文字标题一般要用粗字来表示，如果用细字作标题，会让人觉得内容没有价值。粗字热情而细字冷静，粗字给人有精神、有力量的印象，适合于强调戏剧性信息与富有活力感的网页３．正文文字正文文字一般字形较小，所以多采用笔画较细的文字，笔画间隙明显，以加强字体的辨识性。

文字二、字号选择

三、间距设置

间距设置的内容包括字距设置与行距设置两个方面文字适当的行距有引导阅读的作用文字四、对齐方式1．两端对齐2．一端对齐文字3．居中排列文字4．文字绕排5．自由编排五、字体设计原则字体设计是一项需要大胆想象，更要细心求证的严肃工作，为更好的指引我们完成字体设计，我们应该遵循以下原则：1．可视原则文字2．适合原则文字设计重要的一点在于要服从表达主题的要求，不能相互脱离，更不能相互冲突，破坏文字的诉求效果。尤其在商品的文字设计上，一个商品品牌有其自身内涵，将它正确无误地传达给消费者，是字体设计的目的，否则设计就失去了意义。根据文字字体的特性和使用类型，文字的设计风格大约可以分为下列几种：（1）秀丽柔美文字（2）简洁有力字体造型规整，富于力度，给人以简洁爽朗的现代感，有较强的视觉冲击力。如图3-4-5所示的字体，适合于现代、科技，男性化主题的网页。文字（3）活泼有趣字体造型生动活泼，有鲜明的节奏韵律感，色彩丰富明快，给人以生机盎然的感受。文字（4）古朴典雅字体饱含古时之风韵，能带给人们一种怀旧感觉。如下图所示的字体，适用于传统产品、传统艺术、古典风格等主题的网页。文字3．美学原则文字作为视觉传达中的形象要素，必须具有视觉上的美感，给人美的感受。强调节奏与韵律，创造出更富表现力和感染力的设计，把内容准确、鲜明地传达给受众，是文字设计的重要课题。文字1、不要使用过多的字体网站排版中建议最多不要超过3种字体类型2、尽量使用标准字体为了使用户在终端上看到同一个字体。网页设计注意事项：3.限制一行文字的长度保证每一行文字的字符数量是文本可读的关键目录第一部分理论基础篇第二部分技能提升篇第三部分综合实训篇第一章

网页配色技巧第一节

网页配色技巧1本节主讲：网页配色技巧色彩的基本原理01网页配色原则0203网页色彩搭配方式网页配色技巧一.色彩的基本原理英国科学家牛顿1666年的三棱镜实验，解开了色彩之谜网页配色技巧一.色彩的基本原理颜色有彩色无彩色色彩系统网页配色技巧一.色彩的基本原理RGB模式代表红绿蓝的色光三原色CMYK模式中CMY为青色，洋红，黄色为色料三原色,K为黑色HSB是色彩的色相、饱和度、明度。在色彩中色相，明度，饱和度（纯度），色调是色彩搭配最重要的元素网页配色技巧一.色彩的基本原理1.色相即色彩的相貌，类似于人名，这是色彩最基本的特征，也是一种色彩区别于另一种色彩的最主要的因素。TheColorRun™彩色跑网站网页配色技巧一.色彩的基本原理2.明度色彩的明暗程度。TheColorRun™彩色跑网站

英国独立电影网站网页配色技巧一.色彩的基本原理2.明度TheColorRun™彩色跑网站网页配色技巧一.色彩的基本原理3.饱和度（纯度）指色彩的鲜艳程度指色彩的鲜艳程度。TheColorRun™彩色跑网站在photoshop软件中常运用图形调整CTRL+U色相饱和度等工具来调整网页的色相，明度与纯度。网页配色技巧一.色彩的基本原理4.色调网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。TheColorRun™彩色跑网站主色调辅色调点睛色背景色网页配色技巧二.网页配色原则1.色彩的特色性2.色彩主题突出3.色彩的艺术性4.色彩搭配的合理性

TheColorRun™彩色跑网站网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站1.根据页面风格以及产品本身的诉求确定主色红色代表热情、活力；绿色代表希望、春天，可用于环保网站；橙色代表活跃和快乐可用于儿童餐厅网站；紫色代表华丽、妖艳、神秘可用于化妆品网站色彩搭配设计。色彩有心理暗示的作用，很多行业都有其行业色，很多品牌都有其品牌色。网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。2.1冷暖色调，暖色调搭配网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。2.1冷暖色调，冷色调网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。

2.2同色彩搭配方式网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。

2.3邻色彩搭配方式网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。

2.4对比色搭配方式网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。

2.5互补色对比网页配色技巧三.网页色彩搭配方式TheColorRun™彩色跑网站

2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。

2.6.混合色彩搭配方式第一章

网页配色技巧第二节

网页配色技巧2本节主讲：010203123三、色相环4色相环色相环，是指一种圆形排列的色相光谱，暖色位于包含红色和黄色的半圆之内，冷色则包含在绿色和紫色的那个半圆内。色相环分为很多种，在使用色相环时，要注意色相环的不同种类和区别。四、网页色彩的重要性网页色彩基本知识

网页色彩是树立网页形象的关键之一。网页色彩鲜明，更容易引人注目；网页色彩独特，才能带来与众不同的色彩感，也能加深网页的视觉印象；色彩的联想，能够突出网页的艺术性内涵。5网页色彩基本知识61、网页中色彩的表达使用三种颜色，即红(R)、绿(G)、蓝(B)，也就是通常所说的RGB色彩。网页设计使用RGB色彩模式，RGB色彩就是常说的色光的三原色，其原理是使用三种原色分量的多少进行叠加，生成需要的各种色彩，被称之为加色混合。五、网页色彩搭配常识五、网页色彩搭配常识网页色彩基本知识2、色彩的联想性。不同的色彩会产生不同的联想，在设计网页色彩时，要根据网页的内容和主题来设计网页色彩，选择色彩要与网页内涵相关。7（一）具体联想：灯笼、火焰、鲜血（二）抽象联想：热情、喜庆、警惕

大海、天空、海军深沉、辽阔、沉静

五、网页色彩搭配常识网页色彩基本知识3、网页色彩的选用。82企业标准色用户需求网页类型和主题不同类型的网页，色彩可以发挥不同的作用、传递不同的印象。网页色彩的选择同样需要建立在详细的用户研究的基础上，使色彩的使用和设计符合用户的需求和喜好。对于具有自己形象系统的企业和机构，网页色彩应该选择与机构形象一致的色彩，有利于对企业形象进行延伸与应用。1、整体性原则网页色彩配色原则整体视觉效果舒适，赏心悦目，不刺眼。网页设计要避免采用单一色彩，以免产生单调的感觉。网页设计不仅色彩要漂亮，还要考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，纯度很高的单一色彩容易造成视觉疲劳。92、鲜明性原则网页色彩配色原则色彩的鲜明性并不是要求色彩非常活跃或夸张，主要是能够意向鲜明，让整个网页更加突出、明确，可以有效地抓住浏览者的注意力。网页色彩鲜明多侧重色块、线条的组合，强调形式感，多用原色，这样就很容易吸引眼球，便于人们识别和记忆。103、独特性原则网页色彩配色原则网页的用色要有自己独特的风格，这样才能显得个性鲜明。每种色彩具备独特性，网页设计用色必须体现页面独特的风格，才容易提升网页的辨识度。111、类似色搭配类似色搭配又称为同种色彩搭配，是用色相环上邻近的色彩进行搭配，或者使用同一种色相不同明度的色彩搭配。这种色彩搭配能带来和谐统一的视觉效果。网页配色案例分析122、对比色搭配对比色搭配是指色相环上距离较远、色相差异较大的颜色之间搭配，对比色彩效果较为鲜明。进行对比色设计时要注意色彩面积的大小，因为面积大小不同，产生的视觉效果不同。网页配色案例分析133、暖色搭配暖色搭配是指使用红色橙色黄色等色彩的搭配。暖色色调能够带给人温暖的感觉。这种色调的运用可为网页营造出温馨、和谐和热情的氛围。网页配色案例分析144、冷色搭配冷色搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色调色彩与白色搭配一般会获得较好的视觉效果。网页配色案例分析15目录第一部分理论基础篇第二部分技能提升篇第三部分综合实训篇第一章

综合案例——餐饮类网页设计制作第一节

餐饮类网页设计制作案例1第一讲餐饮类网页设计制作第一节

综合案例——餐饮类网页设计制作案例1第一讲

餐饮类网页设计制作1（上）设计网页Logo确定网站设计风格确定网站整体颜色基调0102032餐饮类网页设计一、设计网页Logo

餐饮类网页的标志设计，首先要反映餐饮的行业特征。创作素材可以选用与餐饮相关的各类事物。如：餐具、食材、品质、工艺、地域、特色、环境、人物形象、经营内容等。(一)反映经营内容

1、中餐或西餐

标志设计前先确定其经营的是中餐还是西餐。3餐饮类网页设计(二)反映地域特征

标志设计就要反映出该地域特定的文化元素或名称，让消费者便于鉴别和选用。2、饮食品类不同餐饮企业具体经营的品类不同，标志设计可以从品类入手进行设计。4餐饮类网页设计(四)反映品质特色(三)反映经营主体5餐饮类网页设计(五)反映情感回忆二、确定网站设计风格（一）明确整体要求

干净整洁、鲜艳明亮、色彩对比鲜明、行业特征明显6餐饮类网页设计（二）确定设计风格

1、根据经营对象的整体面向确定风格

整体面向的是中餐或是西餐

。中餐采用中式设计风格，西餐采用西式设计风格。也可采用折中的现代简约设计风格。

7餐饮类网页设计2、根据对象的经营内容和特点确定风格

如：经营对象为中