网页艺术设计网络图像处理基础

精品示范课网页艺术设计网络图像处理根底 王建中 2004年6月30日一、网页艺术设计1.开展环境及背景 互联网对当今世界的强大影响无庸质疑。随着网络的高速开展和“所见即所得网页编辑工具的出现，网页设计已开展为一门新兴的学科。网站设计不单纯是计算机技术的运用，也是平面设计在网络世界的延伸。新的领域需要复合型的人才，作为一个合格的网页设计师不仅要有熟练的网页制作技术，也要有扎实的页面设计能力。一、网页艺术设计 随着时代的开展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原那么和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。一、网页艺术设计 网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原那么；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等特点。在明确了网页艺术设计与网站主题的关系的根底上，提出了“美和“功能都是为了更好地表达网站主题这一观点。一、网页艺术设计 网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为根底，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成局部，并随着网络技术的开展而开展。外表上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。一、网页艺术设计(一)、网页艺术设计的内容 设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。一、网页艺术设计1.视听元素 这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布里。多媒体技术的运用大大丰富了网页艺术设计的表现力。一、网页艺术设计 以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比方，大局部浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件如MP3音乐需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件Plug-in可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的开展前景。总之，技术的不断开展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。一、网页艺术设计2.版式设计 网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页那么不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。一、网页艺术设计(二)、网页艺术设计的原那么 网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的根本原那么。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下三个主要原那么：一、网页艺术设计1.主题鲜明 视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给欣赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。一、网页艺术设计 根据认知心理学的理论，大多数人在短期记忆中只能同时把握到条分立的信息，而对多于条的分立信息或者不分立的信息容易产生记忆上的模糊或遗忘，概括起来就是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。一、网页艺术设计(二)、网页艺术设计的原那么 作为视觉设计范畴一种的网页艺术设计，其最终目的是到达最正确的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法那么进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最正确的主题诉求效果。一、网页艺术设计(二)、网页艺术设计的原那么 (1)技术与艺术的紧密性 (2)交互性设计 (3)多维性结构与导航系统 (4)版式的不可控性 (5)多种媒体的综合 (6)动态更新一、网页艺术设计 优秀的网页设计必然效劳于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设计是为主题效劳的；其次，设计是艺术和技术结合的产物，就是说，即要“美，又要实现“功能；最后，“美和“功能都是为了更好地表达主题。当然，有些情况下，“功能即是“主题，还有些情况下，“美即是主题。例如，雅虎作为一个搜索引擎，首先要实现“搜索的“功能。它的主题即是它的“功能。而一个个人网站，可以只表达作者的设计思想，或者仅仅以设计出“美的网页为目的。它的主题只有一个，就是美。一、网页艺术设计(二)、网页艺术设计的原那么 只注重主题思想的条理性而无视网页构成元素空间关系的形式美组合，或者只重视网页形式上的条理而淡化主题思想的逻辑，都将削弱网页主题的最正确效果，难以吸引浏览者的注意力，出现平庸的网页设计或使网页设计以失败而告终。要使网页从形式上获得良好的诱导力，鲜明地突出主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来到达。一、网页艺术设计(二)、网页艺术设计的原那么 一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能表达出网页设计独具的分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考虑来实现全面的功能并表达美感才能实现形式与内容的统一。一、网页艺术设计(二)、网页艺术设计的原那么2.形式与内容统一 任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的根底，被称为“设计的灵魂；形式是构成内容诸要素的内部结构或内容的外部表现方式。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。内容决定形式，形式反作用于内容。一个优秀的设计必定是形式对内容的完美表现。正如黑格尔所说：“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、风格、风气、趣味，使物质经由象征变成相似于精神生活的有关环境。黑格尔?美学?第三卷一、网页艺术设计(二)、网页艺术设计的原那么 一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能表达出网页设计独具的分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考虑来实现全面的功能并表达美感才能实现形式与内容的统一。一、网页艺术设计(二)、网页艺术设计的原那么 据有关资料所做的保守估计，目前在WWW上网页数据传输平均以每秒1.5k的速度到达客户端。假设某个网页为了丰富其艺术性而追赶时髦地大量使用图像或其它多媒体元素等，虽然到达了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏览者必须等待很长时间才能看到“庐山真面目，这样的网页就不是一个优秀的网页，因为它不符合网页传播信息的突出特性之一快捷性，使网页内容不能很快地到达访问者，影响了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响了传达信息的效果，因而不是形式与内容的完美统一。一、网页艺术设计(二)、网页艺术设计的原那么 网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以到达多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能无视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。因此，在网页设计中必须注意形式与内容的高度统一一、网页艺术设计(二)、网页艺术设计的原那么3.强调整体 网页的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整体性。网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的时间和空间环境里为人们所理解和接受，它以满足人们的实用和需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是表达一个站点独特风格的重要手段之一。一、网页艺术设计(二)、网页艺术设计的原那么 网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成局部的共性因素或者使诸局部共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。一、网页艺术设计(二)、网页艺术设计的原那么 从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体是“多变根底上的整体。一、网页艺术设计三、网页艺术设计的特点 1、技术与艺术结合的紧密性 设计是主观和客观共同作用的结果，是在自由和不自由之间进行的，设计者不能超越自身已有经验和所处环境提供的客观条件限制，优秀设计者正是在掌握客观规律根底上得到了完全的自由，一种想象和创造的自由。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页信息的高质量需求。一、网页艺术设计三、网页艺术设计的特点 1、技术与艺术结合的紧密性 例如，浏览者欣赏一段音乐或电影，以前必须先将这段音乐或电影下载回本地机器，然后使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的下载时间。流Stream技术出现以后，网页设计者充分、巧妙地应用此技术，让浏览者在下载过程中就可以欣赏这段音乐或电影，实现了实时的网上视频直播效劳和在线欣赏音乐效劳，无疑增强了页面传播信息的表现力和感染力。一、网页艺术设计三、网页艺术设计的特点 网络技术与艺术创意的紧密结合，使网页的艺术设计由平面设计扩展到立体设计，由纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，而更接近于电影或电视的欣赏效果。技术开展促进了技术与艺术的紧密结合，把浏览者带入一个真正现实中的虚拟世界。技术与艺术的紧密结合在网页艺术设计中表达得尤为突出。一、网页艺术设计三、网页艺术设计的特点 2、交互性与持续性 网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web成为热点的主要原因，也是网页设计时必须考虑的问题。传统媒体如播送、电视节目、报刊杂志等都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份参加到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反响信息，经常地对网页进行调整和修改。例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性的根底上，不断创作出新的网页设计作品。一、网页艺术设计三、网页艺术设计的特点 3、多维性结构与导航系统 多维性源于超级链接，主要表达在网页设计中对导航的设计上。由于超级链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅使浏览者检索和查找信息增加了难度，也给设计者带来了更大的困难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。一、网页艺术设计三、网页艺术设计的特点 印刷品中导航问题不是那么突出，如果一个句子在页尾突然终止，读者会很自然地翻到下一页查找剩余局部，为了帮助读者找到他们要找的信息，出版者提供了目录、索引或脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于“续68页这样的指引语句。然而，作为一名网页设计者，你以前所学的导航技术没有一种完全适合于网页导航。在替浏览者考虑得很周到的网页中，导航提供了足够的、不同角度的链接，帮助读者在网页的各个局部之间跳转，并告知浏览者现在所在的位置、当前页面和其他页面之间的关系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通常还有一个返回上级页面的链接。对于网页设计者来说，面对的不是按顺序排列的印刷页面，而是自由分散的网页，因此必须考虑更多的问题。如：怎样构建合理的页面组织结构，让浏览者对你提供的巨量信息感到条理？怎样建立包括站点索引、帮助页面、查询功能在内的导航系统？这一切从哪儿开始，到哪儿结束？一、网页艺术设计三、网页艺术设计的特点 4、多种媒体的综合性 目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着网络带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息传输质量提出的更高要求。目前国内网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流Stream技术的推动下，Internet网上出现实时的音频和视频效劳，典型的有在线音乐、在线播送、网上电影、网上直播等。因此，多种媒体的综合运用是网页艺术设计的特点之一，是未来的开展方向。一、网页艺术设计三、网页艺术设计的特点 5、版式的不可控性 网页版式设计与传统印刷版式设计有着极大的差异：(1)印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的电脑或浏览器；(2)网络正处于不断开展之中，不象印刷那样根本具备了成熟的印刷标准；(3)网页设计过程中有关Web的每一件事都可能随时发生变化。这一切说明，网络应用尚处在开展之中，关于网络应用也很难在各个方面都制订出统一的标准，这必然导致网页版式设计的不可控制性。一、网页艺术设计三、网页艺术设计的特点 5、版式的不可控性 其具体表现为：(1)网页页面会根据当前浏览器窗口大小自动格式化输出；(2)网页的浏览者可以控制网页页面在浏览器中的显示方式；(3)不同种类、版本的浏览器观察同一个网页页面，效果会有所不同；(4)用户的浏览器工作环境不同，显示效果也会有所不同。把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的吸引人之处。一、根本概念3.学习方法 以实践为主，并通过系统的应用型理论使之系统化，加深学生的认识以及相关知识的综合运用能力，通过深入的分析学习网站的系统化知识。一、根本概念4.浏览器 浏览器的概念 WWW中的一切都是在浏览器中实现的，HTML文档也只能在浏览器中显示。实际上浏览器是计算机中一种特殊的应用程序，它是专门用来根据一定的标准展示网页内容的载体。2传统浏览器简介 Mosaic Netscape Navigator Microsoft Internet ExplorerIE一、根本概念浏览器 Netscape Navigator Microsoft Internet ExplorerIE一、根本概念网络色彩5.网络色彩1传统的色彩模式：RGB红色、绿色、蓝色CMYK青色、洋红、黄色、黑色INDEXE(索引颜色模式)uRGB色彩模式加色模式一、根本概念网络色彩红色(R)+绿色(G)=黄色(Y)绿色(G)+蓝色(B)=青色(C)蓝色(B)+红色(R)=洋红(M)红色(R)+绿色(G)+蓝色(B)=白色(W)uCMYK色彩模式减色模式一、根本概念网络色彩洋红(M)+黄色(Y)=红色(R)黄色(Y)+青色(C)=绿色(G)青色(C)+洋红(M)=蓝色(B)洋红(Ma)+黄色(Y)+青色(C)+=黑色(B)uINDEXD索引色彩模式256色模式u 索引色模式是网络上最常用的模式之一。它也是几种常见模式中包含色彩数量最少的。索引色是用256种色彩来表达图像的，所以又叫作256色模式。但这256色并不是指色彩数量只有256种，而是指在1677万色中，一次能够提取的不同颜色数量最多只能有256种。一、根本概念网络色彩一、根本概念网络色彩u色彩模式的色彩范围RGB CMYK INDEXDu网络平安色网络平安色u 216平安色是指在不同的硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合即调色板，也就是说这些颜色在任何终端显示设备上的显示都是相同的。所以使用216网页平安色进行网页配色可以防止原有的色彩失真。假设要保护颜色不在浏览器中仿色，可将颜色转换为 Web 调板中最接近的颜色。这样就确保了当在只能显示 256 种颜色的 Windows 或 Macintosh 操作系统上的浏览器中显示时，颜色不会仿色。一、根本概念网络色彩u网页的配色u 比照与统一u 色系u 色彩数量u 一、根本概念网络色彩什么叫视觉流程？视觉流程的形成是由人类的视觉特性所决定的。受生理结构限制，人眼只能产生一个焦点，不能同时把视线停留在两处或更多的地方，我们可以做的只有先看什么、后看什么、依照一定的顺序浏览、观察。一、根本概念视觉流程一、根本概念视觉流程传统的平面设计视觉流程和网页的视觉流程是不同的1分散的焦点与集中的焦点2信息量与形式的权衡3滚动条带来的动态流程二、图像格式1矢量与点阵矢量：形状、色彩、方向点阵位图：像素二、图像格式矢量图与点阵图位图的区别矢量图与点阵图位图的区别条件条件矢量图文件矢量图文件点阵图（位图）文件点阵图（位图）文件构成用数学方法定义的线小的四边形像素的集合解析度没关系移动图像、调整图像大小时与解析度有密切的关系图像表现力可以显示极小的文字，但在表现自然效果方面则有所欠缺可以自然地表现图像，但放大时图像变形，很难表现小的图像保存以数学公式进行保存在固定的解析度下，保存为像素打印可以自动调整大小、效果鲜明只有保证高解析度，图像才能鲜明显示器鲜明程度不受大小影响放大时图像变形程序Illustrator，CorelDraw，FreeHandPhotoshop，Painter2 常见的网络图像格式 1 GIF图形交换格式 GIFGraphical Interchange Format是网页中最常使用的图像格式之一，其采用的色彩模式为INDEXED，所以色彩数目最多为256色。GIF另外两种特性是支持透明度和动画，这促进了它的广泛应用。在Photoshop中创立GIF最有效的方法是使用Save For Web命令。二、图像格式二、图像格式GIF点阵动画2 JPG联合图像专家组联合图像专家组 JPGJoint photographic Experts Group是在网络环境或在其它在线效是在网络环境或在其它在线效劳中显示照片等连续色调的图像时最常劳中显示照片等连续色调的图像时最常用到的文件格式之一。它可以提供体积用到的文件格式之一。它可以提供体积很小却色彩丰富的照片效果。很小却色彩丰富的照片效果。JPG所采用的色彩模式为所采用的色彩模式为RGB，所以它，所以它可以显示多达可以显示多达1.6亿种色彩。它适合于色亿种色彩。它适合于色彩过渡较为丰富的照片而不适合表现文彩过渡较为丰富的照片而不适合表现文本和图形本和图形二、图像格式3 PNG可移植网络图形格式可移植网络图形格式 PNG格式曾被认为是下一代的格式曾被认为是下一代的Web图像图像格式。它结合了格式。它结合了GIF和和JPG两种格式的优两种格式的优点：多达点：多达1.6亿种色彩和亿种色彩和256色透明度色透明度允许半透明区域，并且超越了它们的允许半透明区域，并且超越了它们的一些局限性，比方一些局限性，比方PNG强大的伽玛矫正强大的伽玛矫正功能保证了图像在所有平台上都能保持功能保证了图像在所有平台上都能保持同样的亮度。同样的亮度。二、图像格式三 Photoshop中的网络优化功能u图片切片图片切片 u存储为网络格式存储为网络格式Save For Webu使用使用Action(动作动作)u利用自动批处理利用自动批处理(Batch)u网页画廊网页画廊(Web Photo Gallery)四 实例练习1u5分钟制作一个简单的图片网站u创立 Web 照片画廊(Photoshop)u使用“Web 照片画廊命令从一组图像中自动生成 Web 照片画廊。Web 照片画廊是一个 Web 站点，它具有一个包含缩览图图像的主页和假设干包含全大小图像的画廊页。每页都包含链接，使访问者可以在该站点中浏览。例如，当访问者点按主页上的缩览图图像时，便载入包含相关全大小图像的画廊页。眨眼的鹰眨眼的鹰四 实例练习1u创立创立 Web 照片画廊：照片画廊：u选取选取“文件文件“自动自动“Web 照片画廊。照片画廊。u在在“网站下，执行以下操作：网站下，执行以下操作：u从从“样式弹出式菜单中选取一种画廊样式。样式弹出式菜单中选取一种画廊样式。所选样式的主页预览出现在对话框中。所选样式的主页预览出现在对话框中。u输入要显示为画廊的输入要显示为画廊的 的电子邮件地址。的电子邮件地址。u从从“扩展名弹出式菜单中选取所生成的文件扩展名弹出式菜单中选取所生成的文件的扩展名。的扩展名。u在在“文件夹下，执行以下操作：文件夹下，执行以下操作：u点按点按“浏览浏览(Windows)或或“选取选取(Mac OS)，然后选择包含要显示在画廊中的图像的文件，然后选择包含要显示在画廊中的图像的文件夹，并点按夹，并点按“确定确定(Windows)或或“选取选取(Mac OS)。u选择选择“包含所有子文件夹，以包含所选文件包含所有子文件夹，以包含所选文件夹的任何子文件夹中的图像。夹的任何子文件夹中的图像。u点按点按“目的，选择要包含画廊中的图像和目的，选择要包含画廊中的图像和 HTML 页的目标文件夹，并点按页的目标文件夹，并点按“好好(Windows)或或“选取选取(Mac OS)。u假设要设置在画廊中每页上显示的横幅的选项，假设要设置在画廊中每页上显示的横幅的选项，请从请从“选项弹出式菜单中选取选项弹出式菜单中选取“横幅，然横幅，然后执行以下操作：后执行以下操作：u对于对于“网站名称，输入画廊的标题。网站名称，输入画廊的标题。u对于对于“摄影师，输入创作画廊中的照片的个摄影师，输入创作画廊中的照片的个人或组织的名称。人或组织的名称。u对于对于“联系信息，输入画廊的联系信息，如联系信息，输入画廊的联系信息，如 号码或单位地址。号码或单位地址。u对于对于“日期，输入希望在画廊每页上出现的日期，输入希望在画廊每页上出现的日期。默认情况下，日期。默认情况下，Photoshop 使用当前日期。使用当前日期。u对于对于“字体和字体和“字体大小，选取横幅文本字体大小，选取横幅文本的选项。的选项。u假设要设置画廊页选项，请从假设要设置画廊页选项，请从“选项弹出式选项弹出式菜单中选取菜单中选取“大图像，然后执行以下操作：大图像，然后执行以下操作：u假设要让假设要让 Photoshop 调整源图像的大小以便调整源图像的大小以便将它放置在画廊页上，请选择将它放置在画廊页上，请选择“调整图像大小调整图像大小。然后从弹出式菜单中选取图像大小的选项，。然后从弹出式菜单中选取图像大小的选项，或输入像素大小。对于或输入像素大小。对于“约束，选取在调整约束，选取在调整大小时要限制的图像尺寸。对于大小时要限制的图像尺寸。对于“JPEG 品质，品质，从弹出式菜单中选取选项，输入从弹出式菜单中选取选项，输入 0 到到 12 之间之间的值或拖移滑块。值越大，图像品质越好，但的值或拖移滑块。值越大，图像品质越好，但文件大小也越大。文件大小也越大。u对于对于“边界大小，输入图像边框的宽度以边界大小，输入图像边框的宽度以像素为单位。像素为单位。u对于对于“标题使用，指定在每个图像下显示题标题使用，指定在每个图像下显示题注信息的选项。选择注信息的选项。选择“文件名以显示文件名，文件名以显示文件名，或者选择或者选择“题注、题注、“荣誉、荣誉、“标题和标题和“版权以显示从版权以显示从“文件简介对话框中提取的文件简介对话框中提取的题注文本。有关详细信息，请参阅添加文件信题注文本。有关详细信息，请参阅添加文件信息息(Photoshop)。u对于对于“字体和字体和“字体大小，选取题注文本字体大小，选取题注文本的选项。的选项。u假设要设置主页选项，请从假设要设置主页选项，请从“选项弹出式菜选项弹出式菜单中选取单中选取“缩览图，然后执行以下操作：缩览图，然后执行以下操作：u对于对于“大小，从弹出式菜单中选取缩览图大大小，从弹出式菜单中选取缩览图大小的选项，或输入每个缩览图宽度的像素值。小的选项，或输入每个缩览图宽度的像素值。u对于对于“列和列和“行，输入要在主页上用于显行，输入要在主页上用于显示缩览图的列数和行数。该选项不适用于使用示缩览图的列数和行数。该选项不适用于使用“水平画框样式或水平画框样式或“垂直画框样式的画廊。垂直画框样式的画廊。u对于对于“边界大小，输入每张缩览图边框的宽边界大小，输入每张缩览图边框的宽度以像素为单位。度以像素为单位。u假设要设置画廊中元素的颜色选项，请从假设要设置画廊中元素的颜色选项，请从“选选项弹出式菜单中选取项弹出式菜单中选取“自定颜色。假设要自定颜色。假设要更改某一特定元素的颜色，请点按它的色板，更改某一特定元素的颜色，请点按它的色板，然后使用然后使用“拾色器选择新颜色。拾色器选择新颜色。“背景选背景选项允许更改每页的背景色。项允许更改每页的背景色。“横幅选项允许横幅选项允许更改横幅的背景色。更改横幅的背景色。u假设要设置一些选项以在每个图像上显示起到假设要设置一些选项以在每个图像上显示起到防剽窃作用的文本，请从防剽窃作用的文本，请从“选项弹出式菜单选项弹出式菜单中选取中选取“平安性，然后执行以下操作：平安性，然后执行以下操作：u对于对于“使用，请选择使用，请选择“自定文本输入自定自定文本输入自定的文本。选择的文本。选择“文件名、文件名、“题注、题注、“荣誉荣誉、“标题或标题或“版权以显示从版权以显示从“文件简介文件简介对话框中提取的文本。有关详细信息，请参对话框中提取的文本。有关详细信息，请参阅添加文件信息阅添加文件信息(Photoshop)。u指定字体、颜色和文本对齐选项。假设要将文指定字体、颜色和文本对齐选项。假设要将文本以一定的角度放置到图像上，请选取旋转选本以一定的角度放置到图像上，请选取旋转选项。项。uPhotoshop 将以下将以下 HTML 和和 JPEG 文件放入文件放入目标文件夹：目标文件夹：u名为名为 index.htm 或或 index.html 的画廊主页，的画廊主页，具体名称取决于具体名称取决于“扩展名选项。在任何扩展名选项。在任何 Web 浏览器翻开此文件可预览您的画廊。浏览器翻开此文件可预览您的画廊。u图像子文件夹内的图像子文件夹内的 JPEG 图像。图像。u页子文件夹内的页子文件夹内的 HTML 页。页。u缩览图子文件夹内的缩览图子文件夹内的 JPEG 缩览图图像。缩览图图像。u创立创立 Web 照片画廊照片画廊(Photoshop)u点阵动画：眨眼的鹰点阵动画：眨眼的鹰u制作玻璃质感的网站按钮制作玻璃质感的网站按钮button四 实例练习1u5分钟制作一个简单的图片网站u创立 Web 照片画廊(Photoshop)u点阵动画：眨眼的鹰u制作玻璃质感的网站按钮button四 实例练习四 实例练习四 实例练习四 实例练习四 实例练习课程结束 谢谢欣赏!