第7章网页美工设计优质PPT.ppt

1、先整体布局，再局部整理，力求做到条理清晰、内容明确。Photoshop职业应用项目教程第7章 网页美工设计3网站设计通过前期的沟通与策划，使用图形软件实施创意，完成初步的作品设计。4客户反馈在提供客户小样后，设计师需要根据客户提出的修改建议修正设计作品。这一流程非常关键，设计的网页能否得到客户的认可与这一过程有很大的关系。Photoshop职业应用项目教程第7章 网页美工设计7.1.3网页构成及特点1网页的创意 创意的概念：什么是创意？简单的说就是具有新颖性和创造性的想法。创意的范围很广，网站的创意不同于一般的平面广告，既要考虑网页的新颖独特，同时更重要的是考虑所用创意是否符合所设计网页客户的

2、行业特点及网页整体功能的实现。创意的表现：创意的完美实现需要具体的形式来加以表现，关键是找到合适的创意点。例如：设计可口可乐的网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色彩带，所有和可口可乐相关的元素。Photoshop职业应用项目教程第7章 网页美工设计Photoshop职业应用项目教程第7章 网页美工设计2网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产品手册、宣传单、网页设计等许多设计形式。本章我们只针对网页设计研究版式。A网页版式设计的组织原则 鲜明主题的诱导力 形式内容的统一 强化整体布局B 网页版面的构成元素 世间百态千变万化，归纳这些事物的空间形态均由点、线、面等

3、基本元素构成，它们彼此交互，有序构成了缤纷的世界。在设计中也是同样的道理，任何的版式设的基本元素归根结底都是点、线、面的和谐构成。Photoshop职业应用项目教程第7章 网页美工设计3网页色彩规划A 色彩基本概念自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。任何一种彩色具有三个属性：（1）色相（Hue）：是颜色的基本特征，反映颜色的基本面貌。（2）饱和度（Saturation）：指颜色的纯洁程度。（3）明度（Brightness）：体现颜色的深浅。非彩色只有明度特征，没有色相和饱和度的区别。B 三原色电脑屏幕的色彩是由RGB（红、

4、绿、蓝）三种色光所合成的，调整这三个基色就可以调校出其它的颜色。在许多图像处理软件里，都提供有色彩调配功能，可以输入三原色的数值来调配颜色，也可直接根据软件提供的调色板来选择颜色。网页设计是以三色模式为标准。在Photoshop里也可直接选择WEB模式进行色彩编辑。Photoshop职业应用项目教程第7章 网页美工设计Photoshop职业应用项目教程第7章 网页美工设计4网站配色的原则第一原则：先定主色，再配辅色。在网页美工设计中要想让网页美观大方，色彩和谐，达到视觉统一的效果是要经过严格的色彩规划的。在一个网站中主色直接决定网站的色彩风格，在网页色彩搭配中起主导作用，决定网页的整体色调。主

5、色决定后就是辅色的搭配，辅色的搭配在主色的基础上进行，辅色在网页中的比例一般为主7辅3，或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色彩混乱，风格模糊的情况。第二原则：有效利用黑白灰色进行网页的色彩搭配。在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。Photoshop职业应用项目教程第7章 网页美工设计第三原则，注意色彩的对比。有对比才会有和谐，要注意色彩中的对比关系并有效控制这些对比关系。如色彩的明度对比，纯度对比，色相对比，

6、冷暖对比，轻重对比，面积对比等等。只有有效控制这些对比关系，网页才会达到色彩明快、视觉和谐的效果。Photoshop职业应用项目教程第7章 网页美工设计5色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学和民俗学等等。心理学家近年提出许多色彩与人类心理关系的理论。他们指出每一种色彩都具有象征意义，当视觉接触到某种颜色，大脑神经便会接收色彩发放的讯号，即时产生联想，例如红色象征热情，于是看见红色便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静下来。经验丰富的设计师，往往能藉色彩的运用，勾起一般人心理上的联想，从而达到设计的目的。Photoshop职业应用项目教程第7章 网页美工设计色彩

7、象征 红血、夕阳、火、热情、危险 橙晚霞、秋叶、温情、积极 黄黄金、黄菊、注意、光明 绿草木、安全、和平、理想、希望 蓝海洋、蓝天、沈静、忧郁、理性 紫高贵、神秘、优雅 白纯洁、素、神圣 黑夜、死亡、邪恶、严肃 Photoshop职业应用项目教程第7章 网页美工设计 但心理学家也留意到，一种颜色通常不只含有一个象征意义。正如上述的红色，既象征热情，却也象征了危险，所以不同的人，对同一种颜色的密码，会作出截然不同的诠释。除此之外，个人的年龄、性别、职业、他所身处的社会文化及教育背景，都会使人对同一色彩产生不同联想。这个色彩和心理联想的理论，对设计师来说又重要的指导意义。在选择运用何种色彩时，须得

8、同时考虑作品面向的是那类群体，以免适得其反。我们一定要充分理解色彩的一般象征含义，才能正确有效的把握色彩应用色彩。Photoshop职业应用项目教程第7章 网页美工设计7.1.4网页框架结构1网页框架结构的内容组成 一个基本的门户型网页一般包括标志（Logo）设计、广告形象区域（Banner）设计、导航区域设计、网页主体内容显示区域或产品服务介绍区域，以及一些附加的消息栏、搜索区域、注册用户区域等。在基本构架完成后，我们可以充分发挥聪明才智，为客户合理的科学的展示他们需要展示的内容。Photoshop职业应用项目教程第7章 网页美工设计2网站Logo设计规范 Logo的应用一直是CIS导入的基

9、础和最直接的表现形式，网络标志的设计尤其如此。A标志的职能：作为独特的传媒符号，标志（Logo）一直成为传播特殊信息的视觉文化语言。无论从古时繁复的欧式徽标、中式龙纹，到现代洗练的抽象纹样、简单字标等都是在实现着标志被标志体的目的，即：通过对标志的识别、区别、引发联想、增强记忆，促进被标志体与其对象的沟通与交流，从而树立并保持对被标志体的认知、认同，达到高效提高认知度、美誉度的效果。作为信息时代的产物，网络Logo的设计，更应遵循CIS的整体规律并有所突破。Photoshop职业应用项目教程第7章 网页美工设计B网络Logo设计的基本过程：一看、二挖、三总结。一看：看客户，准确定位要仔细分析客

10、户是什么行业，其公司行业特征，产品服务特征是什么，只有做到定位准确才不会犯方向性错误。二挖，挖掘和客户行业、产品等有联系的、可以用来表现的想法，进行创意。在定位明确后既开始进入创意阶段，这个过程是思考的过程，挖掘的过程，不放过任何相关的想法点子，最后进行综合分析提炼创意。三总结，总结挖掘出的点子创意，并进行实施。这个过程是个总结的过程也是个实施的过程，把好的想法提炼选取出后进行制作，通过图形创作软件实现其最终效果。Photoshop职业应用项目教程第7章 网页美工设计C网络Logo的表现形式：作为具有传媒特性的Logo，为了在最有效的空间内实现所有的视觉识别功能，一般是通过特示图案及特示文字的

11、组合，达到对被标志体的出示、说明、沟通、交流，从而引导受众的兴趣、达到增强美誉、记忆等目的。Photoshop职业应用项目教程第7章 网页美工设计 表现形式的组合方式一般分为特殊图形，特殊字体，图文并貌。1、特殊图形：通过独特、醒目的图形来吸引观者的眼球，特殊图案本身易被区分、记忆，通过隐寓、联想、概括、抽象等表现方法表现被标志对象，更容易强化沟通和被理解。2、特殊文字：在沟通与传播活动中，将反复使用的被标志体的名称或其产品名称，用一种文字形态加以统一，并对文字进行独特设计变形，以加深观者的印象，达到传播的目的。3、图文并貌:指文字与图案结合的设计，兼具文字与图案的属性，更容易被观者所接受。P

12、hotoshop职业应用项目教程第7章 网页美工设计D网络Logo的规范 设计Logo时，面向应用的各种条件作出相应规范，对指导网站的整体建设有着极现实的意义。设计时要规范Logo的标准色、辅助色等配色体系，同时要考虑其大小，色彩。如果企业有VI规范手册要按VI规范手册严格执行，大小依据网页的整体结构风格而定。Photoshop职业应用项目教程第7章 网页美工设计3广告形象区域（Banner）设计 Banner的英文翻译有网幅广告的含义，指网幅广告、旗帜广告、横幅广告。4导航区域设计 导航区域是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问

13、到所需的内容，是人们浏览网站时从一个页面转到另一个页面的快速通道。利用导航条，可以快速找到要浏览的页面。导航条的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。Photoshop职业应用项目教程第7章 网页美工设计5网页的框架结构类型网页的框架结构无疑就是网页的骨骼、筑“房”地基。网页版面布局以导航栏为界，大致可分为：上下、左右、上左右、上左中右、综合，不规则等。1）上下结构通常上方为导航条，或者动态的企业形象、广告区域。下方为正文、内容部分。通常在内容较少或简

14、洁的企业网站或个人网站中出现。2）左右结构一般左侧是导航条，右侧是正文、内容部分或者公司企业形象展示。3）上左右结构上方为主要的菜单导航条，左侧为点击出现的细分栏目导航条，下方为较主要的栏目及小广告等，右侧为内容区域。这种结构形式是大中型企业较喜欢的框架形式。Photoshop职业应用项目教程第7章 网页美工设计4）上左中右结构式同上左右框架式稍有区别的是中间部分为内容区域，右侧则是该网站较重要的内容导航区域，或是登录、搜索区域、Flash广告等。5）综合结构式特点是功能模块多，信息分类详细，因此根据需要采用区域版面结构较合适。信息储量大的门户网站较多应用这类结构。6）不规则结构式信息量少，通常在以产品宣传为目的的企业网站和个人网站中使用。Photoshop职业应用项目教程第7章 网页美工设计7.2任务1个人网页设计 个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。个人网页可以充分体现个人的个性风格，形式自由灵活，受到广大电脑爱好着的青睐。制作个人网页或为别人设计个人网页不要盲目开始设计，一定要做好前期定位工作。要注意设计个人网页的风格。男孩子可能一般喜欢简洁大方或是色彩个性，蓝色、灰色、黑色的网页风格，而女孩子可能多数还是喜欢颜色温柔漂亮艳丽活泼，风格唯美的网页风格，这些元素都直接影响最终的