知识储备_Adobe Photoshop 网页设计与制作标准实训教程（CS5修订版）-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

知识储备

知识1 版面设计的知识

在制作一个网页之前，应该先进行构思，最好将初步的设想画在纸上，以免在进行到一半时发现页面不和谐而重做。

（1）明确页面主题。例如，正在做一个关于设计作品展示的首页，就应先想好网页的标题。假设标题为“师生作品展示平台”，那么就要考虑是否有合适的图片来衬托主题，然后将标题的主色调定下来，这对后面几步的版面影响很大，如图2-1所示。

图2-1 首页

（2）明确页面上要链接的目录。例如，共有“专业介绍、教师风采、课程展示、实训室、校园写真、设计欣赏，课外活动”7个主链接目录，那么要将它们放在明显的位置。根据页面风格的不同，可以放在顶部、左边、右边、中部等位置，主链接可以做成小图标的形式，但注意图片不能太大，也不能过分抢眼，一般情况下不能比标题或主图的色彩重，如图2-2所示。

图2-2 首页链接目录

（3）指定主图。所谓主图，就是一幅较能反映页面主题思想的图片，其大小可适当超过页面上的任何图片，颜色也可以不加限制。例如，这里采用一幅学生设计作品的大图，如图2-3所示。

图2-3 首页整体

以上3步确定下来后，页面的基本风格就出现了，可以根据情况进行调整，或者看是否加上背景，主要考虑主图是否需要修改。

从版面设计上来讲，一个有特色的主页主要包含3个要素：图像、排列方法、主色调，这三者相辅相成，缺一不可。

图像是一个极为重要的要素，缺少了恰当的图像，整个页面就会黯然失色，就是一个不完整的主页。

有时虽然有不错的图像，但是无法将图与其他要素有机地结合排列，只会千篇一律地设置为左边链接右边内文。打破常规，创作出大胆的排列方式，才能给人以新颖、大气的感觉。网页的设计排版要求精细，只要多欣赏优秀网页（图2-4所示即为一种优秀网页版式），就会慢慢提高自己的版面设计能力。

图2-4 优秀网页版式

知识2 版面设计的原理

1．平衡

简单地说，平衡就是重量的平均分配，使构成图像的各组成部分在视觉重量上保持一种均衡稳定的状态，如图2-5所示。

图2-5 平衡构图

理解平衡时，需要研究3个相关的视觉因素：重量、位置、布局。

若在页面上作一个标记，这个标记就会在视觉上具有重量。标记的大小、颜色、形状、背景都对视觉重量有影响。例如，图2-5页面中心是很强有力的，拥有很大的视觉重量。

（1）绝对平衡

绝对平衡是指构成图像的各部分在上下或左右的方向上完全相同的一种对称式平衡，分为平移、回转、镜像、扩散对称。绝对平衡构图如图2-6所示。

图2-6 绝对平衡构图

（2）相对平衡

相对平衡是指构成画面各部分的形象不同，以其大小、位置、明暗、色彩等方面的因素所构成的一种视觉重量的平衡，分为位置、大小、色相的平衡。相对平衡构图如图2-7所示。

图2-7 相对平衡构图

就网页设计而言，明晰合理的理性编排（注重对角线、垂直、水平等的构图安排），以及版面的对称与平衡，能使读者阅读起来心情愉悦，给人明确、清新的阅读感受，提高阅读兴趣。

2．焦点和主次

当人们浏览网页时，首先看到的位置为焦点。焦点是设计网页时最注重的一部分，如图2-8所示。设计人员通常有一个主要信息要传达，同时还有一些辅助信息。设计时，如果强调一切元素，就等于什么都没有强调，最后造成视觉的混乱。

图2-8 焦点

让一个物体形成一个焦点的方法如下。

（1）将焦点做成最亮的。

（2）颜色与其他不同；或者焦点不透明，其他透明；或者焦点为彩色的，其他物体为黑白的。

（3）方向不同。

（4）在位置上有所区别。

（5）加底纹，或者与其他元素底纹不同。

（6）安排其他元素都指向这个元素。

（7）形状与其他元素不同。

（8）将其隔离。

（9）焦点清晰，其他物体模糊。

（10）颠倒。

（11）焦点有光泽，其他物体发暗。

设计人员要注意网页产生的一种视觉主次关系，确定元素的重要性。同时，还要清楚浏览者首先看到的是什么，其次、最后看的又是什么。如图2-9所示的图片就明确地显示出视觉的主次关系。

图2-9 视觉的主次

对页面上的几个元素加以强调，使其在显示中比其他元素有更大的优先权。要建立一个主次关系，利用大小、位置、颜色、调值等元素使浏览者根据重要性来看这些元素。产生一个信息流，从最重要的开始，一直到最不重要的。图2-10较好地体现了这一点。

图2-10 主次关系

3．韵律

在网页设计中，韵律的实现是通过图案的点和线条的排列来实现的，把韵律当作一种节奏，是由视觉而不是声音组成的。韵律是用重复变动的元素来生成的形，需要考虑空间的因素，形成一个元素向另外一个元素运动的效果。在设计中要产生韵律的关键是理解重复和变化的不同。通过运用韵律的技巧可以使网页活泼、生动、运动、有生命。韵律节奏设计能够渲染某种情调，增加版面的感染力，并使人沿着版面节奏变化的趋势展开遐想的空间，如图2-11所示。

图2-11 韵律的设计

4．统一和变化

统一不是让许多形态元素单一化、简单化，而是使它们的多种变化因素具有条理性和规律性。网页是一个文字、图形等多种元素组成的统一体，在设计网页的时候，统一是设计网页时组织版面的目标之一。统一可以让浏览者看到一个整体的页面，而不是几个互相不关联的独立的部分。统一对加深记忆程度、表现整体效果和清晰传达都有积极影响，也反映了将设计组合成一个整体的程度，如图2-12所示。