第7章网页美工设计PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白 灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统 一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效 果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。
2020/3/25
10
Photoshop职业应用项目教程 第7章 网页美工设计
第三原则，注意色彩的对比。 有对比才会有和谐，要注意色彩中的对比关系并有效控
一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
2020/3/25
3
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
8
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
9
Photoshop职业应用项目教程 第7章 网页美工设计
4．网站配色的原则 第一原则：先定主色，再配辅色。
在网页美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。
Photoshop职业应用项目教程
第7章 网页美工设计
2020/3/25
1
Photoshop职业应用项目教程 第7章 网页美工设计
7.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述
网页美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。
鲜明主题的诱导力 形式内容的统一 强化整体布局 B 网页版面的构成元素 世间百态千变万化，归纳这些事物的空间形态均由 点、线、面等基本元素构成，它们彼此交互，有序构成 了缤纷的世界。在设计中也是同样的道理，任何的版式 设的基本元素归根结底都是点、线、面的和谐构成。
2020/3/25
7
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
12
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.3网页构成及特点 1．网页的创意
创意的概念：什么是创意？简单的说就是具有新颖性 和创造性的想法。创意的范围很广，网站的创意不同于一 般的平面广告，既要考虑网页的新颖独特，同时更重要的 是考虑所用创意是否符合所设计网页客户的行业特点及网 页整体功能的实现。
创意的表现：创意的完美实现需要具体的形式来加以 表现，关键是找到合适的创意点。例如：设计可口可乐的 网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色 彩带，所有和可口可乐相关的元素。
电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的， 调整这三个基色就可以调校出其它的颜色。在许多图像处理 软件里，都提供有色彩调配功能，可以输入三原色的数值来 调配颜色，也可直接根据软件提供的调色板来选择颜色。 网页设计是以三色模式为标准。在Photoshop里也可直接选 择WEB模式进行色彩编辑。
和民俗学等等。心理学家近年提出许多色彩与人类心理 关系的理论。他们指出每一种色彩都具有象征意义，当 视觉接触到某种颜色，大脑神经便会接收色彩发放的讯 号，即时产生联想，例如红色象征热情，于是看见红色 便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静 下来。经验丰富的设计师，往往能藉色彩的运用，勾起 一般人心理上的联想，从而达到设计的目的。
网页美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网页美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
2020/3/25
2
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.2网页美工设计流程 1．需求分析
随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划
2020/3/25
5
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
6
Photoshop职业应用项目教程 第7章 网页美工设计
2．网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产
品手册、宣传单、网页设计等许多设计形式。本章我们 只针对网页设计研究版式。 A网页版式设计的组织原则
3．网站设计 通过前期的沟通与策划，使用图形软件实施创意，完成初步的 作品设计。 4．客户反馈 在提供客户小样后，设计师需要根据客户提出的修改建议修正 设计作品。这一流程非常关键，设计的网页能否得到客户的认 可与这一过程有很大的关系。
2020/3/25
4
Photoshop职业应用项目教程 第7章 网页美工设计
制这些对比关系。如色彩的明度对比，纯度对比，色相对比， 冷暖对比，轻重对比，面积对比等等。只有有效控制这些对 比关系，网页才会达到色彩明快、视觉和谐的效果。
2020/3/25
11
Photoshop职业应用项目教程 第7章wenku.baidu.com网页美工设计
5．色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学
3．网页色彩规划 A 色彩基本概念
自然界中的颜色可以分为非彩色和彩色两大类。非彩色 指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属 于彩色。任何一种彩色具有三个属性：
（1）色相（Hue）：是颜色的基本特征，反映颜色的基 本面貌。
（2）饱和度（Saturation）：指颜色的纯洁程度。 （3）明度（Brightness）：体现颜色的深浅。 非彩色只有明度特征，没有色相和饱和度的区别。 B 三原色
2020/3/25
10
Photoshop职业应用项目教程 第7章 网页美工设计
第三原则，注意色彩的对比。 有对比才会有和谐，要注意色彩中的对比关系并有效控
一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
2020/3/25
3
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
8
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
9
Photoshop职业应用项目教程 第7章 网页美工设计
4．网站配色的原则 第一原则：先定主色，再配辅色。
在网页美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。
Photoshop职业应用项目教程
第7章 网页美工设计
2020/3/25
1
Photoshop职业应用项目教程 第7章 网页美工设计
7.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述
网页美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。
鲜明主题的诱导力 形式内容的统一 强化整体布局 B 网页版面的构成元素 世间百态千变万化，归纳这些事物的空间形态均由 点、线、面等基本元素构成，它们彼此交互，有序构成 了缤纷的世界。在设计中也是同样的道理，任何的版式 设的基本元素归根结底都是点、线、面的和谐构成。
2020/3/25
7
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
12
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.3网页构成及特点 1．网页的创意
创意的概念：什么是创意？简单的说就是具有新颖性 和创造性的想法。创意的范围很广，网站的创意不同于一 般的平面广告，既要考虑网页的新颖独特，同时更重要的 是考虑所用创意是否符合所设计网页客户的行业特点及网 页整体功能的实现。
创意的表现：创意的完美实现需要具体的形式来加以 表现，关键是找到合适的创意点。例如：设计可口可乐的 网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色 彩带，所有和可口可乐相关的元素。
电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的， 调整这三个基色就可以调校出其它的颜色。在许多图像处理 软件里，都提供有色彩调配功能，可以输入三原色的数值来 调配颜色，也可直接根据软件提供的调色板来选择颜色。 网页设计是以三色模式为标准。在Photoshop里也可直接选 择WEB模式进行色彩编辑。
和民俗学等等。心理学家近年提出许多色彩与人类心理 关系的理论。他们指出每一种色彩都具有象征意义，当 视觉接触到某种颜色，大脑神经便会接收色彩发放的讯 号，即时产生联想，例如红色象征热情，于是看见红色 便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静 下来。经验丰富的设计师，往往能藉色彩的运用，勾起 一般人心理上的联想，从而达到设计的目的。
网页美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网页美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
2020/3/25
2
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.2网页美工设计流程 1．需求分析
随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划
2020/3/25
5
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
6
Photoshop职业应用项目教程 第7章 网页美工设计
2．网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产
品手册、宣传单、网页设计等许多设计形式。本章我们 只针对网页设计研究版式。 A网页版式设计的组织原则
3．网站设计 通过前期的沟通与策划，使用图形软件实施创意，完成初步的 作品设计。 4．客户反馈 在提供客户小样后，设计师需要根据客户提出的修改建议修正 设计作品。这一流程非常关键，设计的网页能否得到客户的认 可与这一过程有很大的关系。
2020/3/25
4
Photoshop职业应用项目教程 第7章 网页美工设计
制这些对比关系。如色彩的明度对比，纯度对比，色相对比， 冷暖对比，轻重对比，面积对比等等。只有有效控制这些对 比关系，网页才会达到色彩明快、视觉和谐的效果。
2020/3/25
11
Photoshop职业应用项目教程 第7章wenku.baidu.com网页美工设计
5．色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学
3．网页色彩规划 A 色彩基本概念
自然界中的颜色可以分为非彩色和彩色两大类。非彩色 指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属 于彩色。任何一种彩色具有三个属性：
（1）色相（Hue）：是颜色的基本特征，反映颜色的基 本面貌。
（2）饱和度（Saturation）：指颜色的纯洁程度。 （3）明度（Brightness）：体现颜色的深浅。 非彩色只有明度特征，没有色相和饱和度的区别。 B 三原色