基于photoshop网页效果的实现

第1章  引言

1.1  课题来源

随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页美工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，正是一个不断为用户设计视觉效果使之满意的过程。所以网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。网页艺术设计是艺术与技术的高度统一，网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。

这次生产实习给了我一个难得的学习机会，让我有机会可以对网页美工这个职业有更深刻的研究，对我将来的工作将会有着重要的帮助。

1.2  网页设计项目需求分析

一个网页项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网页设计拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网页设计项目的成败。因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以图文的形式表达给参与项目设计的每个成员，保证设计过程按照满足用户需求为目的正确项目设计方向进行，是每个网页设计项目管理者需要面对的问题。目前，大中企业都愿意花一定的钱改善自己的网页，目的就是给自己企业的包装。

1.3  使用软件

Photoshop是专业网络图形设计和处理的软件，使用Photoshop来创建、编辑、处理网页图片，可以为网页增加先进的互动性，在专业环境中优化图像。在网页设计的前期，需要使用Photoshop来绘出网页的轮廓。

 

1.4  软件运行环境

Adobe Photoshop：图像元老，最受欢迎的强大图像处理软件之一 。 　　

Photoshop是Adobe公司旗下最为出名的图像处理软件之一。多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，Photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版各方面都有涉及。

充分利用无与伦比的编辑与合成功能、更直观的用户体验以及大幅工作效率增强；最初的Photoshop只支持Macintosh麦金塔平台，并不支持Windows。由于Windows在PC机上的出色表现，Adobe公司也紧跟发展的潮流，自Photoshop以来开始推出Windows版本，自此，一般的系统均能实现对Photoshop软件的操作。

第2章  平面设计的设计艺术

为了是网页效果能做到好，我们对于平面设计也应该有一定的了解。

为了使平面设计一鸣惊人，设计者不得不每天绞尽脑汁，想方设法地多方寻找一个最为恰当的点，使其设计鹤立鸡群，这一点就是最佳创意切入点。本文以创意切入点的路径与手段为主要分析对象，浅述本人的观点。

‍2.1　准确定义平面设计是找准创意切入点的先决条件‍

普遍情况下，设计被分成平面设计、立体设计、空间设计。平面设计是指在平面上，通过文字、图形、色彩、版式安排，具有艺术性、功能性、相应的科学技术含量并具有时代特性的设计。

　　随着现代科技的调整发展和设计领域不断地扩大，设计又因此被分为视觉传达、产品设计、环境设计等。平面设计与视觉传达设计在一般情况下同指一个范围。在很多时候，有很多人对平面设计与视觉传达设计的认识存在很大误区，他们认为这是两个非常不同的概念，但分不清他们到底从哪区别。一般来说，平面设计与视觉传达设计，同指在二维空间之上的设计，只是从不同侧面表述而己。平面设计重在设计之“物”，而视觉传达设计重在为“人”设计。但两者都是在二维空间上进行设计，然后把所要表述的信息通过刺激“人”的感官而达到其目的。严格地说，平面设计较视觉传达设计的范围，稍微窄一点。视觉传达设计除了包含二维空间设计外，还包含三维空间的展示设计，展示设计不仅仅包括“物”“人”，还包括“场地”和“时间”。因此平面设计与视觉传达设计不能等同论之。　　

2.2  找准创意切入点是做好平面设计的关键 　　

现代平面设计紧随着时代的步伐，不断在更新换代，随着新思维、新观念、新科技、新媒体、新材料开发利用，表现形式越来越复杂。设计者不得不时常寻找一个最为恰当的设计切入点，让他们的平面设计一鸣惊人。

作为平面设计者的我们，如何在这琳琅满目、层出不穷的平面设计大海中脱颖而出呢？如何在这更新热浪中迎接滚滚而来的挑战，鹤立鸡群呢？这就要求设计者有着独到的创意，这种创意既显个性，也最为受众所认可与接受。怎么做到这一步呢？关键之一就是要找准平面设计的最佳切入点。

权威人士认为“一个伟大的平面设计不是一个好的广告所要传达的东西；一个伟大的平面设计能改变大众文化，一个伟大的平面设计就是能够开创一项事业或挽救一家企业。”有专家形容，平面设计好比一个塑造过程：在受众的脑海中塑造一种虚拟的形象，并不断的使这种形象更加清晰、更牢固。在这个过程中设计师所设计的作品，就是商家在市场中立足和发展的媒介。不管是从商业还是从非商业去思考，平面设计伟大的关键在于创意；创意的本质，就是改变，甚至是颠覆。因此，找准最佳创意切入之点是做好平面设计的关键。　

2.3  创意切入点的路径与手段

2.3.1  平面设计的构成元素是创意切入点的直接通道

　　平面设计的构成元素包括：文字、色彩、图形。平面设计作品中的文字已不仅仅是从字意上传递信息、表述内容，而是更多的可以从形态上追求个性化、风格化的形式语言，从而达到作品整体性状态的具体指向。当文字作为平面设计中的一个元素时，文字的形状、大小、位置、排列疏密，本身的节奏、韵律都能传递特定的信息。作为与点、线、面、色彩一样的视觉符号，在形式的安排下，使之在结构上成为不可分割的设计元素，从而赋予了文字更深刻、更丰富的内涵
　　色彩是一个无声的语言，它能通过它的冷暖色调、明度纯度、色彩调和、对比、大小面积、位置等把设计者想传达的信息传达给受众。它能反映某种民族文化，能传递喜怒哀乐、酸甜苦辣，能表达人情冷暖。合理的色彩运用，可以把最佳的设计主题信息传递给受众。

图形，在平面设计中称插图，是现代平面设计必不可少的构成元素，插图形式多种多样、包括摄影、绘画、构成图形等。比如用摄影作品作广告，以它为广告设计主体，在其上加以再创作的艺术表现形式，它明确清晰的视觉形象比文字、符号及抽象的构成形式更为直接和可读，这是以一种情节化的姿态来阐述其广告主题的，因此设计可充分利用图形这一元素直接进入平面设计主题。文字、图形的合理编排也是平面设计创意切入的一个通道，我把其归之为平面设计构成元素之中。

2.3.2  设计目标的准确定位是创意切入点的主要渠道

　　我们做平面设计，尤其是商业方面的平面设计，创意的形成始终有一个核心点来支持，这一核心点指的是消费者、市场动态、生产定位三个层面，它是设计的核心目标，是创意切入点的主要渠道。　这种创意之“点”非常难以寻找，因为创意点是由目标消费群的所需和产品结构定位、市场局势三者最佳结合所产生出来的。消费群的需求方向是一个不定式，而产品对其的产生吸引力的点也颇多，但你所要确定的却只有一点。竞争的潮流中，同类产品越多，创意设计的水准就越高，切入新点就越不容易找到。我们因此要对消费群、市场动态、生产定位有一个全方位的掌握，通过设计者的脑，收集信息、发散联想、归纳精简、提炼，然后确定创意最终切入点，直到设计作品出炉。不同的设计师有不同思维，他们创意切入点也就有所不同。但总体有三个大的切入点：消费群、生产定位、市场需求。消费群是商品主要需求对象。

2.3.3  民族文化的理解运用是创意切入点的重要渠道

世界之所以丰富多彩，不同民族文化有着不同的生活与意识观，行为模式、生活情趣、思维方式、价值观念有着独特的偏向，创意设计的切入点从民族文化上下手，会有着意想不到的效果，因为各民族鲜明的文化特质，最能吸引观众，它即是民族的、却也是世界的。

平面设计本身就是一种文化，也是一门艺术，而创意则是设计艺术的灵魂。我们以广告为例，设计者在做广告设计之前首先对广告主题内容、表达形式所进行的观念性的文化构思，然后对其中锁定受众的社会文化，民族特色、生活习俗、人文地理的了解。其目的在于把产品信息高度凝炼，植入公众认同的文化氛围之中。

靳埭强先生的设计作品多运用中国水墨文化。水墨画是中国画的一种，是中国民族文化的缩影，内含了中国古老文化的精髓，文明古人在以水墨抒发情怀的同时也赋予了水墨浑厚的文化底蕴。靳先生在现代平面设计中借用水墨文化来表现，充分体现了靳先生对水墨文化语言深度理解与深厚的中国传统文化修养。他从整体的表现形式、构图结构中体现出东方文化的审美理念。大师采用的天圆地方、平衡稳重、大面积留白等这些构图形式也源于中国传统的古代哲学和审美意识。

把一种新的创意手法培植于传统文化的根基上，可以在日新月异的国际创意的发展中出现更大的空间，对于正在发展社会中的平面设计者，提供又种新的展现平台。

2.3.4  设计工具是创意切入点传递的重要手段

　　我们做设计，起初是手绘，然后有了印刷，之后出现了摄影、电脑图形图像处理。综合运用不同的设计工具，是现代设计最常用也非常重要的设计手段。手绘的痕迹，真实与抽象的照片形式、电脑的后期处理等艺术创作手段的混合使用，使得创意主题的传达更为准确，也使得作品的整体性更加完善。新的表现手段的应用，一方面使作品的设计周期大大缩短，作品更加真实可信，另一方面使设计涉及的范围越来越广，原来不敢想象的表现手段成为可能。设计的题材和表现方法也不断地扩展，这其中最重要的是设计师的思维不停地在运转，思维方式在不断的发生变化，致使整个社会中的受众人群也相应的运转和改变。

　　当然，设计工具不意味着无所顾忌地作为设计手段而加以滥用，比如电脑处理图像与文字时，如果文字设计面目全非，或在某种程度上形成了视觉上的混乱与无序，从而在阅读上产生障碍；只为好看而把摄影图片随便引用插入，不考虑内容与主题；不考虑色彩本身的含意与色彩与民族文化、生活习俗的联系而滥用等，这种毫无目标地去设计，都会给设计界带来严重的伤害。

第3章  网页制作

3.1  制作网页的步骤

再做网页之前，我确定了做网页的五个步骤。

一、确定网站主题 ：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。

二、搜集材料 ：明确了网页的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网页 ：一个网页设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

四、选择合适的制作工具 ：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

五、制作网页 ：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

3.2  制作网页的要素

3.2.1  网页的整体布局设计 

　  网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。
3.2.2  网页设计中色彩的运用 

   色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。

3.2.3  网页形式与内容相统一

　　要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

3.3   网页各模块内容的布局

我的招生网页的主页包括了logo 、导航栏、新闻资讯、其他链接等。

3.3.1  Logo

    1).LOGO是与其它网站链接以及让其它网站链接的标志和门户。

    INTERNET之所以叫做“互联网”，在于各个网站之间可以联接。要让其他人走入你的网站，必须提供一个让其进入的门户。而LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代，这一点尤其重要。

    2).LOGO是网站形象的重要体现。

    试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪？就一个网站来说，LOGO即是网站的名片。而对于一个追求精美的网站，LOGO更是它的灵魂所在，即所谓的“点睛”之处。

    3).LOGO能使受众便于选择。

    一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种LOGO的链接页面中，这一点会突出的表现出来。想一想，你的受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要。    

3.3.2  网页导航栏

导航条在网站上具有导航作用，是指引和方便浏览者访问另一页面的快速通道。网站导航是网站的指路灯，也是网站内容的总体概述，同时也是搜索引擎收录网站的重要权衡因素。创建一套良好的网站导航系统将会使网站更易访问。  

    以下是我各个栏目的效果图：

    1).Logo

    2).导航栏

    3).招生资讯

    4).报考指南

    5).其他链接

  

     6).企业风采及企业新闻

     7).基本链接

 

第4章 主页的设计

4.1  主页的设计要求

  主页是一个网站的入口，是其他内容的一个目录，因此其作用很重要。主页的要求应该是：

  主题表达明确。网站主题首先通过主页给访问者第一印象。所以主题确定后必须考虑好由什么栏目来表达，用什么内容来丰富，只有这样才能提供给访问者以持续访问下去的吸引力。

  界面简洁大方。现在网页开发工具很丰富，网页特效也很精彩，但是在主页的设计上最好以简洁为好，适当配合一点与主题相关的特效即可，不要以特效来堆积，毕竟简洁大方可以让绝大多数人接受。

  规范合理布局。由于主页是网站其他信息的入口，因此在栏目和内容的索引规范上应该有一条明确的线索，尽量以简洁的提示线索告知访问者点击后的大致内容，使访问者一目了然。

  网页是用来呈现信息的，所以网页的界面效果与所呈现的内容要协调，底色和图形要合理搭配，布局美观大方。

  同一主题的网页通过一定的方式使其界面一致，保持风格的一致性。

  下面是我设计的招式网页整体效果：

第5章  结束语

    网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。我们需要了解一个完整网站的制作过程，并知道网页制作在网站制作中的作用。一方面结合具体的实例，多加练习，培养对于技术的敏感和快速适应性，注意到技术变化带来的各种新的可能性，消除技术所形成的障碍；另一方面要多方面、多角度地感受与掌握电脑设计的时尚语言，扩展对传统设觉设计范畴的认识。

第6章  结论与展望

6.1  结论  

网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，它兼容了传统平面设计的特征，又具备其所没有的优势，成为今后信息交流的一个非常有影响的途径。网页设计师一种综合性的设计，它所涉及的范围非常的广泛，在本文中只从视觉传达的角度进行了一些阐述与分析。好的网页设计出首先应考虑其内容上的精益求精外，其次就是对内容合理有效的视觉编排。是任何网页所必需具备的基本因素，网页信息不仅是为了满足使用者的需求，更重要的是创造一种愉悦的视觉环境，技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。

参考文献

[1] 《完美网页设计》（商业网站篇）刘任凭 中国青年出版社

[2] 《Dreamweaver cs3完全自学手册》胖鸟工作室 北京希望电子出版社

[3] 《photoshop cs3完全自学手册》 龙马工作室  人们邮电出版社

[4] 《网页与多媒体设计》 朱仁成 朱艺  电子工业出版社

[5] 《网页制作实用技术 FrontPage 2000》 陈强  清华大学出版社