作者：刘蓉
出版社：暨南大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页美工设计（中等职业学校动漫专业一体化丛书）试读：
总序
计算机动漫与游戏制作专业是广州市交通技师学院信息工程系的拳头专业，2013年被纳入国家中等职业教育改革发展示范学校建设重点支持专业。在示范校建设过程中，信息工程系通过与企业和周边社区合作，建立技能提升平台和综合职业能力强化平台，构建了工学结合“双平台”人才培养模式；学校、企业、课程专家共同参与，调研分析企业岗位工作任务，开发教学项目，设计项目课程，进一步优化课程结构，建设优质教学资源，构建出项目式一体化课程体系。通过两年的建设，计算机动漫与游戏制作专业已经成为校企社深度融合的开放式国家示范性专业，在中等职业教育改革发展中发挥引领、骨干和辐射作用。
中等职业教育基于工作过程系统化课程开发模式，所产生的结果就是项目式课程。在课程开发过程中，召开实践专家访谈会提炼出职业岗位群的典型工作任务，经过教育专家的设计转化，形成了以学生为中心、以任务为载体的学习领域，目前已有多个学习领域构建出专业课程方案。显然，传统的学科式教材已经不能满足该类课程的需要。2013年4月，信息工程系成立由2名专业带头人、12名骨干教师组成的教材开发团队，通过1年多的不懈努力，编写出8本项目式校本教材。经过6个教学班级试用，开发团队发现，师生对教材反应良好，具有推广价值。经过各位老师进一步修订后，最终形成本套丛书并出版发行。
本套动漫系列教材共有6册，其中《产品效果图设计（三维建模）》由余毅能主编，周敏慧、王睿副主编；《网页美工设计》由刘蓉主编，郑燕玲、钟鼎、邓兴兴副主编；《海报设计》由靳妍主编，谭伟玉、梁倩雅、罗敏琼副主编；《产品摄影》由黄远岸主编；《Flash动画制作》由邓兴兴主编，刘索云、张惠静、刘蓉副主编；《后期特效设计》由周敏慧主编，卢洁仪、余毅能副主编。
由于时间和精力所限，本套丛书中可能存在一些疏漏甚至错误，请各位专家和读者批评指正，望能及时联系作者或者出版社，我们将尽快修正。丛书编写组2015年5月1色彩基础知识与应用色彩是光从物体反射到人的眼睛所引起的一种视觉心理感受，按字面含义可分为“色”和“彩”。“色”指人对进入眼睛并传至大脑的光所产生的感觉；“彩”指多色的意思，是人对光变化的理解。1.1常用色彩名词
三原色：绘画色彩中最基本的颜色有三个，即红、黄、蓝，称之为原色。这三个原色颜色纯正、鲜明、强烈，且其本身是无法调出的，但是它们相混合可以调配出多种色彩。
间色：间色是由两个原色相混合得出的色彩，如黄调蓝得绿、蓝调红得紫。
复合色：复合色是将两个间色（如橙与绿、绿与紫）或一个原色与相对应的间色（如红与绿、黄与紫）相混合得出的色彩。复合色包含了三原色的成分，是色彩纯度较低的含灰色彩。图1.1.11.2其他色彩名词
对比色：色相环中相隔120°至150°的任何三个颜色被称为对比色。
同类色：同一色相环中不同倾向的系列颜色被称为同类色。如黄色可分为柠檬黄、中黄、橘黄、土黄等，这些“黄”都称为同类色。
互补色：色相环中相隔180°的颜色被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。互补色相减（如演练配色时，将两个互补色颜料涂在白纸的同一点上）时，就成为黑色；互补色并列时，会引起强烈对比的色觉，会感到红的更红、绿的更绿，如将互补色的饱和度减弱，即能趋向调和。图1.2.11.3各种因素影响下产生的色彩
光源色：由各种光源发出的光（室内光、室外光、人造光），光波的长短、强弱、比例性质不同形成的不同色彩被称为光源色，一般在物体亮部呈现。
固有色：自然光线下的物体所呈现的本身色彩被称为固有色。在一定的光照和周围环境的影响下，固有色会产生变化，对此初学色彩者要特别注意，固有色一般在物体的灰部呈现。
环境色：物体周围环境的颜色由于光的反射作用，引起物体色彩的变化被称为环境色。特别是物体暗部的反光部分变化比较明显。1.4色彩的三要素
色相：指色彩的相貌，是色彩最显著的特征，是不同波长的色彩被感觉的结果。光谱上的红、橙、黄、绿、青、蓝、紫就是七个不同的基本色相。图1.4.1
明度：指色彩的明暗、深浅程度的差别，它取决于反射光的强弱。明度包括两个含义：一是指一种颜色本身的明与暗；二是指不同色相之间存在着明与暗的差别。图1.4.2
纯度：也称彩度、艳度、浓度、饱和度，指色彩的纯净程度。图1.4.31.5色彩的调和
光源色调和：指在带有明显光源色的影响下，统一染上光源色所构成的色彩调和。
主调调和：指某类物体色彩占统治的成分所构成的调和。
中性色调和：黑、白、灰、金、银五色为中性色，它们与任何色彩搭配，都能独立承担起各色之间的缓冲与补色平衡。在任何不协调的色彩之间，只要间隔一条黑色或银色中性色线条，立刻就能将整幅画的色彩统一起来。1.6色彩的对比关系
色相对比：指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。
明度对比：指因明度之间的差别形成的对比。柠檬黄明度高，蓝紫色明度低，红色和绿色属中明度。
冷暖对比：指因色彩的冷暖差别而形成的对比。红、橙、黄使人感觉温暖；蓝、蓝绿、蓝紫使人感觉寒冷；绿与紫介于其间。另外，色彩的冷暖对比还受明度与纯度的影响，白光反射率高而感觉冷，黑色吸收率高而感觉暖。图1.6.1
补色对比：将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。图1.6.21.7色调
色调指的是一幅画中画面色彩的总体倾向，是大的色彩效果。在大自然中，我们经常见到这样一种现象：不同颜色的物体或被笼罩在阳光的金色之中，或被笼罩在月光的淡蓝色之中，或被笼罩在秋天的金黄色之中，或被笼罩在冬季的银白色之中。这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体都带有同一色彩倾向的色彩现象就是色调。色调是画面色彩构成的总体效果，也是作画者在写生过程中，将对象的色彩从色相、明度、纯度及面积大小分布等几个方面，在画面上进行组织、加工、调整后形成的，因此带有主观性，它并不是客观对象的照搬。
1．色调和色彩的重要意义
在当今美术高考色彩中，色调是精髓部分。一张好的色调作品是迈向高分的关键一步。色彩构成对现代设计和绘画起到巨大的作用，如室内装饰、服装、国画等。
2．影响色调的因素（1）光源色。
色彩是不稳定的，它会因光线的变化而变化，受光面与背光面的色彩呈现出互补色的关系，这也是阳光下的风景色彩的一个基本特点。室内自然光线下景物的色调就普遍偏向冷色，但如果在有色灯光的照射下，光源颜色的冷暖决定静物的冷暖。（2）主体色。
主体色是决定画面色调走向的主要色彩，它可能是画面中面积最大的一块色彩，也可能是画面中纯度最高、最引人注目的一块色彩。主体色的重要性体现在画面其他色彩都要以它为中心而展开，依据主体色的纯度、明度调整自身的色彩，共同形成统一和谐的画面色调。（3）个人用色习惯。
个人用色习惯与色彩感觉会影响色彩。作画者都有自己的习惯，画面色调的确定与个人用色习惯有直接的关系，比如梵高就喜欢用纯度较高的色彩，反差大，容易形成充满旺盛生命力的视觉效果。而有些画家则喜欢用单纯而含蓄的色彩，比如维亚尔，他喜欢用土黄、赭石、熟褐一类色相较近的色彩，追求色彩间的微差正是他色彩语言的特点。
每个人的色彩感觉有很大的差异，对色彩感觉敏锐的人来说，丰富多变的色彩从自然中拿来即可，像莫奈这样的色彩大师就具有这种天赋，而且难以模仿。而对于缺乏色彩感觉的人或初学者，则可以通过对技术的合理运用、对色彩的理性控制使色彩关系合乎规律。
3．色调的分类
色调可以从以下四个方面来分类：①以明度来分类：亮调、灰调和暗调。②以纯度来分类：鲜调、中纯度色调和灰调。③以色性来分类：冷色调、暖色调和中性色调。④以色相来分类：红、黄、橙、蓝、绿、紫、赭。
4．色调与色彩的关系
色调与色彩的关系是密不可分的。色彩关系合理有序，画面色调感就强；色彩关系凌乱无序，画面就缺少色调感。换句话说，要想获得画面的整体色调，就必须建立和谐统一的画面色彩关系，推敲用色的纯度、明度，并对色彩进行适当的归纳与概括。对现实的色彩进行归纳与概括，或者说准确把握一幅画面的整体色彩关系，是完成一幅作品的必要条件。如果在落笔前就能明确要表现对象的整体色调，那么局部色彩也会随之变得明确而容易把握，色彩的整体关系就不会出现大的偏差，这时，色调就成了作画者对缤纷的自然色彩进行归纳和概括的有效手段。
5．色调中的大体色彩关系
色彩关系：指两个或两个以上物体，前后、左右、上下之间或物体本身之间的冷暖、明度、纯度关系。
明度：前亮后灰。
纯度：前纯后灰。
冷暖：暖光下，受光部位偏暖，暗部偏冷；冷光下，受光部位偏冷，暗部偏暖。
色相相同，便从明度、冷暖上去找物体之间的色彩差异。
6．色调的构建原则（1）和谐之美。
和谐是指色彩作品中色彩相互协调，在差异中趋向一致的视觉效果。和谐是构建画面氛围的重点之一。（2）对比变化。
对比是一幅作品形成的基本条件，是一种艺术的表现手法。一幅作品的色彩在色相、纯度、明度上的差异，以及色块的大小、曲直、虚实、动静、强弱、清浊、冷暖、聚散、断续、阴阳、简繁、疏密等都有重要的对比关系。恰当地运用对比手法，强化对比效果，可以提高艺术表现力和感染力。（3）主次原则。
画面色彩有主次之分，形成画面基调的色彩是主体色，比如蓝色调中大面积的蓝色。衬托色和点缀色是次要色彩，它们对画面的色调不起决定作用，但通过对比，它们能起到丰富画面的作用。（4）均衡原则。
画面的均衡包括两层意思，一层是画面重量感的均衡，另一层是色彩对比上的相对稳定感，要使画面均衡、统一，一定要避免一边倒或头重脚轻的情况出现。均衡的画面是以画面的偏中心为基准，向上下、左右或对角线作重量来调整的，稳定的色彩关系使画面有舒适、优雅的视觉效果，是色彩具有美感的表现。（5）节奏原则。
作品中色彩的配置富有节奏感，才能产生统一中有变化的美感。如果画面中都是比较极端的颜色，如大红色、大紫色，就会令人烦躁不安；如果画面中全是灰色就会显得消沉，没有活力。只有将纯色、间色、中性色作合理搭配，用心经营位置，推敲用色，才能获得富有节奏感的画面效果。
7．组织色调的方法（1）主体色配色法。
主体色是形成画面色调的基本色彩，其作用是决定性的，因此主体色在画面中应是最醒目的。（2）概括归纳法。
概括归纳法简单来说就是把色彩作简化处理，这不等于随意，而是对自然色彩进行符合整体特征的归纳。掌握概括归纳法的关键在于要对色彩作准确观察，在绘画中，观察也是一种思考，思考的结果就是提炼出最能反映事物本质的特征色彩。（3）微差法。
微差简单地讲就是过渡和对比微弱，不明显，可以营造出一种和谐统一的色调感。这种微差效果的运用，需要围绕画面的中心部分展开，将画面的色彩关系向丰富的方向引导。
微差的运用涉及主体色与点缀色双方的面积对比，如果大色调已经确定，即使局部有小面积的色彩与主调形成较大反差也不会影响主色调，相反恰当的对比会使画面色彩更具张力。（4）透底法。
透底法是一种制作感较强的色调组织方法。其作画步骤是：先在整个画面薄涂一种基色，然后在基色上附加色彩。色彩不作大面积覆盖，而是适当露出底色，形成两层或多层色彩层次感的透气效果。1.8网页中色彩的应用
色彩是艺术表现的元素之一。在网页设计中，网页设计师根据内容和谐、布局平衡和突出重点的设计原则，将不同的色彩进行组合、搭配，构成令人赏心悦目的网页页面。同时，色彩对人们的心理也具有一定的影响力，网页设计师将合理地运用这一特点进行网页设计。
在网页设计中起码应该把握以下几点色彩设计的原则：
1．确定网页的主色调，选择衬托色彩，凸显网站内容和主题
平日里我们浏览的网页，一般都是以浅色调为主，如：人人网以浅蓝色为基调，豆瓣网以浅绿色为基调，沪江网以浅灰色为基调等。以浅色为底，给人以柔和素淡的感觉，配合深色的文字，让人视觉上得到舒适的感觉。浅色的基调有利于整体页面的搭配，便于突出网页的重点内容，方便阅读。其他的如背景图片等次要内容，不能喧宾夺主，要采用不那么抢眼的颜色。而需要得到突出表现的内容，就适宜采用明亮的色彩，或者与背景色对比度大的色彩，对网页的浏览者产生强烈的视觉冲击，但不宜过多使用，否则反而会让页面变得繁杂混乱。
2．在网页中运用同色系的色彩
使用同色系的色彩，会让人觉得页面赏心悦目，给人留下好印象。同色系的色彩易于搭配，不会使得页面显得杂乱，也不会让人视觉疲惫，可以大面积使用。但同色系的色彩搭配也存在弊端，它容易使得网页色彩单调，令人觉得乏味，为了解决这个问题，网页设计师可以采取局部使用对比色图片的方法来增加页面整体变化，制造一种轻松活泼的感觉。
3．页面中对比色的运用
通过使用对比色，能够营造轻松活泼、运动感强的网页效果，它适宜体现轻松主题的网站，既色彩丰富，又协调悦目。虽然对比色带来了如此的好处，但它同样也存在着缺陷。过于丰富的色彩会造成视觉的疲惫和重点不清晰，譬如，过于丰富的背景色彩会影响前景图片和文字的取色，严重时会使文字融于背景中不易辨识。所以，在设计网页的时候，我们只用一到两种色彩占据主导地位，其他的对比色则作为陪衬或点缀来调节整体效果，大面积的色彩填充宜用低对比度色彩，所以背景色以单一的色彩为佳。
总而言之，色彩的运用方式多种多样，目的是要让网页设计达到实用和审美的统一与和谐。要解决设计中的色彩运用的具体问题，就需要在长期的实践中不断积累经验和学习前人总结的解决方法。
一个好的网页设计会给用户带来记忆深刻、好用易用的体验。网页设计的版式、信息层级、图片、色彩等视觉方面的运用，直接影响到用户对网站的最初感觉，而在这些内容中，色彩的配色方案是至关重要的，网站整体的定位、风格调性都需要通过颜色给用户带来感官上的刺激，从而产生共鸣。
从色彩研究的方向来看，色彩包括色相、明度和纯度三个方面。颜色的运用是研究纯色之间的关系，以及它们混合在一起的效果。我们可以从当前众多的网络应用中的实例，找到色彩运用的一些广泛的色彩关系和配色方案，作为实际工作、学习中配色的指南。
单色：使用一个色调不同的饱和度与亮度，如图1.8.1所示。图1.8.1
近似色：使用色盘中的邻近色调，如图1.8.2所示。图1.8.2
互补色：使用色盘中的相反色调，如图1.8.3所示。图1.8.3
分割互补色：使用一个色调和两个与它的补色邻近的色调，如图1.8.4所示。图1.8.4
三分色阶：使用色盘中的等距的三个色调，如图1.8.5所示。图1.8.5
双互补色：使用两个色调和它们的补色，如图1.8.6所示。图1.8.6
近似互补色：使用两个互补色调和一个颜色相近色调，如图1.8.7所示。图1.8.7
中间色：使用没有色度的颜色，如图1.8.8所示。图1.8.8
突出色：在没有色调的颜色中突出一个高饱和度的色调，如图1.8.9所示。图1.8.9
暖色：使用色盘中暖色调的颜色，如图1.8.10所示。图1.8.10
冷色：使用色盘中冷色调的颜色，如图1.8.11所示。图1.8.112网页中的版式设计在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机地、秩序地、艺术性地组织在一起，形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以很多网页看起来千篇一律，缺乏个性。为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机地结合起来，使网络呈现更绚丽的色彩。网页的版式设计应从造型，点、线、面及留白的处理，构成形式三方面入手。2.1版式设计的造型
在版式空间中，标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素。将这些基本元素在800像素×600像素或1024像素×768像素的版面中有机地结合起来就是设计的过程。网页版式设计常常借助多种形式的框架（骨骼），包括规则的框架与不规则的框架，可见的框架与不可见的框架。同时框架还要与文字样式、色调等因素紧密联系起来。
网页版式设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。多数人的显示器分辨率为800像素×600像素或1024像素×768像素，我们设计版面时就应以800像素×600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容。垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就存在较大的难度。为此，网页设计师应采取一些相应的对策：（1）运用自适应宽度技术。即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。（2）运用背景来适应不同分辨率的版面效果。（3）使版面保持固定尺寸，禁止滚动出现，增强对版面的控制，这样的方案非常适用于设计性较强的图形界面。
通常网页中还会有一些动态的信息，不仅活跃了画面气氛，还可通过不同内容的替换，增大信息量。不过动画效果的运用要合理，千万不能泛滥，否则会造成喧宾夺主的效果，而且动画的形式与内容要与网页主题相适应，政治与教育等内容比较严肃的网页在动画应用上更是要慎重。2.2页面中的点、线、面及留白的处理
在版式设计中，文字、图形图像根据其在画面中的大小、方向、排列可以视为点、线、面等构成要素，同时文字又有标题和正文之分，图片也有主次之分，所以在设计网页时都要加以考虑。图片与文字、动画这些信息都需要同时展示给观众，如果不加设计简单地罗列在一个页面上，往往会使人感觉粗制滥造，不愿继续停留。所以必须要根据主题内容的需要，将传递信息的图片和文字按照一定的次序和关系进行合理的编排和布局，使整个页面和谐统一，充满艺术性。
点、线、面、视觉中心、留白等元素所处位置不同，对观众的视觉和心理产生的作用也不同。当设计主体处于版面的几何中心时，给人的感觉是平衡、稳重，不过相对就会显得呆板、缺乏灵活性；如将设计主体向一侧稍作偏移，则打破了原有的稳定与平衡，形成一个动向，画面因此形成不稳定趋势，这时需要在适当的位置添加平衡元素，使画面在变化中求稳定。2.2.1 点的作用
单一的点在空间中有集中醒目的特点，能给人明确、坚定、充实的感觉。所以可利用点的这一特性强调要重点表现的对象。可利用“点”符号，对文字信息加以强调，也可采用点状图形、图像形式加以提示。可口可乐宣传网页中左下部分的三张小图片，在这个页面中实际上起着“点”的作用，以图片的形式强调后面的信息。2.2.2 线与面的作用
线与面不仅能作为造型元素，同时还是划分空间的有力工具。由线和面形成的对空间的分割与遮挡，使空间的层次得以延伸，形成距离美感。2.2.3 留白的运用
在网页设计中，点、线、面等实体造型元素往往是人们重点注意的部分，而实际上“留白”也是不容忽视的。所谓“留白”，就是除文字、图片、图案等信息要素以外的空白空间。“留白”与其他元素一样具有大小、形状等特征，它与其他元素的关系就是“图”与“地”的关系，是相互依存、相互衬托的。“无意”的留白应与“有意”的造型同样引起足够的重视，因为“无意”的留白空间有时给人的视觉冲击会高于其他元素所带来的效果。不过“留白”并不是越多越好，这要根据主题内容和整体风格而定，信息量大、内容更新快的网站一般“留白”较少，而专业的、艺术类的网站“留白”较常见。2.2.4 点、线、面关系的处理
根据大小、方向等因素，文字与图片在一个页面中既可以是点，也可以是线或面。孤立的、小的文字与图片，在页面中往往被视为点。按一定方向、秩序排列的字与图片会形成视觉上的线，在界面中一般起到引导和分割的作用。面多数是由文字或图片、图形组成的，有时也会由小字块构成，起到突出主题和衬托的作用。2.3版式设计的构成形式
与其他设计一样，网页的版式设计也要遵循一定的规律和秩序，将各个构成要素按一定的规律和秩序系统化地组合，协调好各个要素之间的关系，使整个网页作品体现整体秩序的美感。首先要抓住主线，然后协调好各个层级的关系，应注意各部分之间的逻辑结构，根据主体特征确定版面设计形式结构，做到既风格统一，又富于变化。其构成形式主要有：分割与比例、重复与渐变、对称与均衡、节奏与韵律、统一与变化等。2.3.1 分割与比例
空间分割是设计中最常用的造型方法之一，它所解决的就是如何把文字、图形、图像巧妙地配置在限定的版面空间的问题，同时还要确保有主有次，相互关联。
设计主体一般会占据较大的、突出的空间，其他的辅助元素则依附于它，围绕主体进行配置。有时分割也会由色彩色调来进行，最引人注目的部分，很容易被视为主体。当图片中大背景是灰蓝色块时，彩色图片部分的绚丽色彩自然成为人们的视觉焦点，画面中的动与静的对比也将人的视线先引入中间地带，此时可通过色调的变化融合这种对比，使画面趋于统一。2.3.2 重复与渐变
重复是指相同或相似的形态规律性地连续出现。其实重复是构成中最常见的一种形式，我们生活中熟悉的花朵、小昆虫，甚至人类都存在重复的表象。一定秩序的重复能够给人以统一、有节奏、连续、平稳的感觉。重复又分单纯重复和渐变两种。单纯重复就是单一个体的反复出现，形状、大小、方向、颜色都不作改变，这种重复多被用作背景图案或底纹。渐变是在重复的基础上连续而又带有一定变化的反复出现，有时是形状上的变化，有时是方向上的变化，有时是色彩上的变化，这种变化与重复给人感觉整齐而多样。2.3.3 对称与均衡
对称分为绝对对称和相对对称。绝对对称是指以中心线或中心点为轴，作上下、左右、旋转等同等、同量的对称，这种形式能展现出严正、庄重、肃穆、沉静的特征。我国的传统宫殿建筑就是以对称式造型为主的，如故宫，在对称的造型中有一种威严的宏伟气势。
相对对称是在对称的格局中存在部分形状或色彩等方面的微小变化，这种对称形式具有对称的稳定性，同时又富于变化。相对对称的表现形式较多，如形状置换、方向颠倒、体量变化、位置交叠、动势变化等。
均衡即是平衡，它摆脱了对称式的中心线或中心点的控制，但始终存在重心。版面的均衡并不是实际重量的均衡，而是根据版面构成元素的形量、大小、轻重、色彩、位置等视觉判断产生的平衡。均衡感使设计版面更具和谐的生命力，它同时存在调和与力学的空间配置。2.3.4 节奏与韵律
节奏与韵律源自于音乐概念。节奏是按照一定的条理和秩序，重复连续地排列，形成的一种律动形式。节奏有等距离的连续，也有渐变、大小、长短、明暗、形状、高低等的排列，在节奏中注入美的因素和情感使之富于个性，就产生了韵律。韵律就像是音乐中的旋律，既有节奏又有情调，它能增强版面的感染力与艺术表现力。2.3.5 多样与统一
多样与统一是形式美的总法则，是对立统一规律在版面构成上的应用，两者完美结合，是版面构成最根本的要求，也是艺术表现力的形成因素之一。多样变化是一种智慧、想象的表现，强调造型的曲直变化、虚实变化、平面与立体的变化；强调色彩的冷暖变化、明暗变化、色相变化；强调质感与肌理的粗糙与细腻、柔和与刺激等因素中的差异性，造成视觉上的跳跃。2.3.6 形式的统一
统一是强调物质和形式中种种因素的一致性，保证版面统一的方法是保持版面的构成要素尽可能少，而构成的形式却要丰富。统一的手法可借助均衡、调和、秩序、渐变等形式法则。在同一版面中，尽量避免多样与统一两种因素同时出现，应以其一作为主导，或变化为主，或统一为主，以相对的一方求得统一。3BURGER KING品牌网页美工设计3.1BURGER KING首页制作最终效果图
STEP1在Photoshop CS4中新建一个“宽度”和“高度”分别为1366像素和768像素，“分辨率”为72像素/英寸的黑色背景文档，将文档另存为“首页.psd”。
STEP2选择“菜单”栏中的“视图”，选中“标尺”；选择“菜单”—“编辑”—“首选项”—“单位与标尺”，将“标尺”的单位设置为“厘米”，回到Photoshop CS4界面，上、左、右各拉出0.3cm血位，下拉出0.1cm血位。
STEP3新建一个组，命名为“导航”，新建一个图层，命名为“底色”，选择工具栏中的“矩形选框工具”，设置“固定大小”为2000px×165px，参数如图3.1.1所示。在Photoshop CS4界面创建一个矩形条，填充颜色为“白色”，颜色值为“#ffffff”，置于线的下方。图3.1.1
STEP4新建一个图层，命名为“首页”，设置“固定大小”为213px×85px，参数如图3.1.2所示。在Photoshop CS4界面创建一个矩形条，填充颜色为“蓝色”，颜色值为“#063d97”，复制粘贴出五个矩形，将图层分别命名为“产品介绍”“历史回顾”“品牌故事”“加盟咨询”“加入团队”，每个图层间隔0.15cm。图3.1.2
STEP5在每个矩形框里输入导航的文字内容，文字如图3.1.3所示。图3.1.3
STEP6新建一个图层，命名为“搜索框”，选择工具栏中的“矩形选框工具”，设置“固定大小”为310px×37px，参数如图3.1.4所示。在Photoshop CS4界面创建一个矩形条，填充颜色为“黑色”，颜色值为“#000000”。新建一个图层，命名为“搜索框2”，选择工具栏中的“矩形选框工具，设置“固定大小”为305px×33px，参数如图3.1.5所示。在Photoshop CS4界面创建一个矩形条，填充颜色为“灰色”，颜色值为“#dcdcdc”，如图3.1.6所示，最终效果如图3.1.7所示。图3.1.4图3.1.5图3.1.6
试读结束[说明：试读内容隐藏了图片]