01Photoshop CS5创意+：Photoshop CS5网页设计与配色实战攻略创意+：Photoshop CS5网页设计与配色实战攻略PHOTOSHOP2PHOTOSHOPPHOTOSHOP1.1 网页界面的构成要素网页是通过视觉元素的引人注目而实现信息内容的传达的，为了使网页获得最大的视觉传达功能，使网络真正成为可读性强而且新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理特点，并由此确定各种视觉构成元素之间的关系和秩序。1．网页显示尺寸网页在屏幕上显示的页面尺寸和显示器大小及分辨率有关系，网页的局限性在于网页无法突破显示器的范围，而且浏览器本身也将占去不少空间，因此留给网页的页面范围变得越来越小。一般来说，当显示器分辨率为1024×768时，页面的显示尺寸为1002×600像素；当显示器分辨率为800×600时，页面的显示尺寸为780×428像素，如图1-1所示。从以上数据可以看出，分辨率越高页面的尺寸就越大。图1-1 不同分辨率下的网页显示浏览器的工具栏也是影响页面尺寸的因素。目前一般的浏览器的工具栏都可以取消或者增加，那么当显示全部工具栏和关闭全部工具栏时，页面的尺寸是不一样的。提示2．网页中的五大元素了解网页中的基本元素，可使浏览者对网页中各部分内容的安排有总体认识。在网页设计过程中，向下拖动页面是唯一给网页增加更多内容的方法。但是除非站点的内容能够吸引大家拖动，否则不要让访问者拖动页面超过三屏高。如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部连接，方便访问者浏览。另外还需要考虑到网页元素——图片、文本、多媒体，以及页眉和页脚等，如图1-2所示。页眉 又可称之为页头，其作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里，这样，访问者能很快了解该网页的主要内容。在页眉部分通常放置站点名字、图片和公司标志以及旗帜广告。文本 在页面中文本多数是以行或者块（段落）出现的，它们的摆放位置决定着整个页面布局的可视性。随着DHTML（动态HTML）的普及，文本、段落已经可以通过层的概念按要求放置到页面的任何位置。页脚 是指在页面最下方的一块空间，它和页眉相呼应。页眉是放置站点主题和标识的地方，而页脚则通常是放置制作者、公司相关信息、版权的地方，有时候，还会放置一个导航栏。1024×768 800×600013PHOTOSHOP第1章 Photoshop CS5网页设计PHOTOSHOP图1-2 网页中的基本元素图片 图片和文本是网页的两大构成核心，缺一不可。如何处理好图片和文本的排列放置关系成了整个页面布局的关键。多媒体 除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不经常被利用，但随着动态网页的兴起，它们在网页布局上也将变得更重要。人们对美的追求是不断提高的，网页设计同样如此。为使受众能更好地、更有效率地接收网页上的信息，这就需要从审美的方面入手。网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸，两者的表现形式和目的都有一定的相似性。把传统平面设计中美的形式规律同现代网页设计的具体问题结合起来，运用一些平面设计中美的基本形式到网页中去，可以增加网页的美感和大众的视觉审美需求。首先，网页的内容与形式的表现必须统一和具有秩序，形式表现必须服从内容要求，网页上各种构成要素之间的视觉流程，能自然而有序地达到信息诉求的重点位置。在把大量的信息放到网页上的时候，要考虑怎样把它们以合理、统一的方式排列，使整体感强的同时又要有变化，如图1-3所示。图1-3 网页内容与形式的统一PHOTOSHOP1.2 网页设计的审美需求创意+：Photoshop CS5网页设计与配色实战攻略创意+：Photoshop CS5网页设计与配色实战攻略PHOTOSHOP4PHOTOSHOP其次，网页要突出主题要素，必须在众多构成要素中突出一个清楚的主体，它应尽可能地成为阅读时视线流动的起点，如图1-4所示。如果没有这个主体要素，浏览者的视线将会无所适从，或者导致视线流动偏离设计的初衷。作为形式美的法则， 也随着时代的变化而不断发展进步，特别是在生活节奏如此快的互联网时代，由于追求目标的变化，人们的审美观念也在不断地变化，但是美的本质是一样的。图1-4 突出网页主题网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，但它兼容了传统平面设计的特征，又具备其所没有的优势，网页已成为信息交流的一个非常有影响的途径。所以网页在一定意义上也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，而色彩的应用可以产生强烈的视觉效果，使页面更加生动。1．秩序产生美感秩序是通过对称、比例、连续、渐变、重复、放射、回旋等方式，表现出严谨有序意境的设计理念，是创造形式美感的最基本的方式之一，如图1-5所示。2．和谐产生美感和谐是以美学上的整体性观念为基础的。构成界面形式的文字、图形、色彩等因素之间相互作用，相互协调映衬，都为界面的功能美与形式美服务，如图1-6所示。3．变化产生美感变化的法则体现了设计存在的终极意义，即不断推陈出新、创造新的形式。图1-7所示为具有创意的网页效果。PHOTOSHOP1.3 网页设计的艺术表现图1-5 秩序美图1-6 和谐美图1-7 变化美
……
