Photoshop在网页设计上的应用计算机网络技术专业毕业设计毕业论文

1、毕业设计论文photoshop在网页设计上的应用系 别： 信息工程系 专 业： 计算机网络技术 学生姓名： 指导教师： xxxx学院信息工程系2012年 6 月 日摘要计算机图像技术的飞速发展，使个人电脑上的美术创作进入一个新的阶段，各种图像处理软件越来越完善，普及程度不断提高。其中的图像处理工具photoshop是目前公认的、较好的通用平面美术设计软件，它功能完善，性能稳定，使用方便。使用photoshop平面设计软件设计网页简单实用，具有很多不可代替的优点，为大众所推崇。比如：通过photoshop的切片工具，可将一个完整的网页切割许多小片，不仅方便上传，也容易对每一张图块进行单独的优化，

2、同时利于浏览下载。在使用photoshop对网页进行设计和美工的过程中，所需要掌握和了解的知识很多，颜色的搭配，版面的布局，以及人机交互的繁简性，都需要斟酌思考。 关键词：photoshop；网页设计；切片工具；颜色；布局 目 录摘要2第一章 概述11.1 photoshop的简介11.2 photoshop的运行环境3第二章 photoshop的平面设计42.1 设计特点42.1.1用计算机代替传统的设计工具42.1.2信息处理能力强大、快速42.1.3使平面设计走向产业化42.2 设计原则52.2.1 整体与局部相统一原则52.2.2 知识性与趣味性统一原则52.2.3 艺术性与观赏性统一

3、原则62.2.4独创性原则6第三章 photoshop的网页设计73.1 网页设计原则73.1.1画面内容73.1.2造型的组合83.1.3色彩的运用83.2 网站的交互可用性93.2.1眼动造成的热点效应93.2.2注意力及可视项目113.3 切片工具的使用11第四章 photoshop网页实例设计134.1网页功能概述134.2网页界面设计144.2.1背景及图层文件夹144.2.2登录框154.2.2 logo154.2.3 导航栏154.2.4 信息发布栏164.2.5 切片处理及导出网页164.5网页的整体设计效果17第五章 总结18参考文献19致谢20第一章 概述1.1 photo

4、shop的简介adobe photoshop，简称“ps”（其程序图标便是“ps” ）是一个由adobe systems开发和发行的图像处理软件。多数人对于photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用，实际上，photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版等各方面都有涉及。photoshop创始人的主要设计师thomasknoll的父亲glennknoll是密歇根大学教授，同时也是一个摄影爱好者，他家地下室是一个暗房。他两个儿子thomas和john从小就跟着爸爸玩暗房，但john似乎对当时刚刚开始发行的个人电脑更感兴趣；此后thomas

5、也迷上个人电脑，并在1987年买一台苹果电脑（macplus）用来帮助完成他的博士论文。thomas发现当时的苹果电脑无法显示带灰度的黑白图像，因此他自己写了一个程序display。而他兄弟（也可能是哥哥）john这时在星球大战导演lucas的电影特殊效果制作公司industrylightmagic工作，对thomas的程序很感兴趣。两兄弟在此后的一年多把display不断修改为功能更为强大的图像编辑程序，经过多次改名后，在一个展会上他们接受一个参展观众建议把程序改名为photoshop。此时的display/photoshop已经有level，色彩平衡，饱和度等调整。此外john写了一些程序

6、后来成为插件（plug-in）的基础。他们第一个商业成功是把photoshop交给一个扫描仪公司搭配卖，名字叫做barneyscanxp，版本是0.87。与此同时john继续在找其他买家，包括supermac和aldus都没有成功。最终他们找到了adobe的russellbrown，adobe的艺术总监。russellbrown在此时已经在研究是否考虑另外一家公司letraset的colorstudio图像编辑程序。看过photoshop以后他认为knoll兄弟的程序更有前途。在1988年7月他们口头决定合作，而真正的法律合同到次年4月才完成。2003年，adobe的creative suit

7、e套装将adobe photoshop 8更名为adobe photoshop cs。因此，adobe photoshop cs5是adobe photoshop中的第12个主要版本。对cs更名也导致adobe众多的软件套件降价。adobe photoshop有两个发行版本：标准版adobe photoshop和扩展版adobe photoshop extended，扩展版除包含标准版所有功能之外，还增加了3d处理功能、动画图形编辑功能和高级图像分析功能。adobe只支持windows操作系统和mac os操作系统版本的photoshop，但linux操作系统用户可以通过使用wine来运行ph

8、otoshop cs5。google也正在透过wine资助linux版photoshop的研究。photoshop被人们认为是最好的图像处理软件，但与著名的3d studio max一样，昂贵的价格使其难以普及。但adobe不想失去中国大陆这块市场，于是在2011年推出了“校园先锋计划”，价格低的令人大跌眼镜，比如原价7707元的adobe photoshop cs5 extended在此计划中只卖349元。不过此计划只面向大学生与高校教师。图 1-1 photoshop创始人之一thomes knoll1.2 photoshop的运行环境表 1-1运行环境表运行环境环境要求硬件cpuinte

9、l pentium 4 或 amd athlon 64 处理器ram512mbhard disk1gb 可用硬盘空间用于安装;安装过程中需要额外的可用空间(无法安装在基于闪存的可移动存储设备上)分辨率和vga1024768 屏幕(推荐 1280800)，配备符合条件的硬件加速 opengl 图形卡、16 位颜色和 256mb vram，某些 gpu 加速功能需要 shader model 3.0 和 opengl 2.0 图形支持cdrom无特殊要求mouse无特殊要求版本photoshop cs4操作系统windows xp或以上多媒体quicktime 7.6.2 软件网络在线服务需要宽带

10、 internet 连接，通讯协议为tcp/ip第二章 photoshop的平面设计 photoshop在平面设计中扮演着极其重要的角色，它广泛应用于我们日常生活和学习工作的各个方面，首先浅谈一下photoshop平面设计软件具有特点和常用的设计原则。2.1 设计特点根据photoshop的功能和作用，总结其明显的特点。2.1.1用计算机代替传统的设计工具现代平面设计以计算机作为主要创作工具，利用 photoshop设计软件提供的强大的工具和菜单功能，同时结合了各种传统绘画工具的特点，又能体现多种新的艺术风格，使创作技法不断推陈出新。2.1.2信息处理能力强大、快速 photoshop 软件在

11、文字录入、图像扫描、图像存储、图像编辑、特效处理等方面具有超强的处理能力，同时在图文混排图像输出等方面的操作方便快捷。 设计效果所见即所得，修改快捷、方便。2.1.3使平面设计走向产业化 photoshop软件在平面设计中的应用，极大地改变平面设计的作业环境，使艺术创作逐步走向标准化、工业化、产业化，社会上各种创作设计室如雨后春笋般的发展壮大，提供丰富的就业机会，为哪些有艺术天赋而没有艺术功底的人提供了广阔的工作和生活天地。2.1.4促进了艺术设计创意photoshop软件革新了设计师的艺术语言与表现手法，同时促进了创意的萌发机制与深化过程，许多以前想到却做不到的事，现在通过计算机能够轻而易举

12、地实现。photoshop象一位神奇的魔法师，她可以在埃及的沙漠里建造出金字塔，然后将其轻轻地放在champs的爱丽舍宫上，这种逼真即使是巴黎人也不会看出有什么不妥； photoshop 象一位奇妙的艺术家，它可以使扫描的碎片和褪色的数码相片看起来如同由高级摄影师拍摄的无可非议的照片。2.2 设计原则phtoshop 现代平面设计的原则是根据平面设计的性质和目的，针对平面设计的特点进行制作，它一般遵循的原则如下。2.2.1 整体与局部相统一原则phtoshop平面设计的根本目的是通过平面设计作品为人们传播直观的信息，使人们获得美感享受的同时获得大量直观的信息，充分表达用户要求的主题，设计师通过

13、完美的平面设计形式表达符合主题的思想内容，这也是平面设计的根基，这就要求设计师在设计中强化整体布局，合理突出局部，使整体与局部合理地统一，使作品取得独特的社会与艺术价值。整体与局部合理地统一，就是设计师在平面设计中要强化版面各种排版要素在版面中结构与色彩具有相互关联性，通过版面的文图间的整体组合与协调性的编排，使版面更具秩序美、条理美，从而获得更好的视觉效果，力求作品的尽善尽美。2.2.2 知识性与趣味性统一原则phtoshop平面设计软件具有强大的滤镜功能，它能够轻而易举地实现设计师魔幻般的想法，激发设计师异想天开的创作灵感，平面设计作品中可以运用一批夸张变形漫画、卡通、有故事性的连环组画表

14、现科学幻想世界、神奇的太空景观、物理上不能实现的各种现象等，模拟的活灵活现，生动逼真，容易引起读者的阅读兴趣，具有很大的商业价值。虽然能使读者看起来饶有兴趣，但是这种趣味性必须建立在一定的科学知识的基础上，光与色彩的处理必须符合现实科学和生活，符合人的视觉特性，才能够被人们充分地接受，作品才能够具有实质的社会和商业价值，没有知识支撑的趣味性就像镜中花水中月，使人们感觉到不真实。设计该真实地反映社会生活的方方面面，不能偏离客观实际。2.2.3 艺术性与观赏性统一原则phtoshop版面设计艺术性是使人们在欣赏作品时能够潜移默化地接受作品表达的主题内容，充分领会到作品的意图和设计师的意愿，这就要求

15、设计师首先构思立意，它是设计作品中所进行的思维活动，也是体现作品品质的重要环节。立意完成以后，版面构图布局和艺术的表现形式就成为版面设计艺术的核心，这种艺术性就是要求平面设计达到意新形美，变化而统一的艺术作品，并具有较好的审美情趣，使它具有良好的可观赏性，艺术性与观赏性相互统一，相得益彰，即使艺术性十分强烈，但如果人们不能够充分观赏，就不能够领会到设计师的意图，作品的艺术性就会大打折扣。2.2.4独创性原则独创性原则是平面设计中较为重要的原则，它是设计师个性的充分体现，它是设计师设计的作品相互区别的重要标志 它的本质上是突出个性化特征设计的原则，清楚地传达设计作品中设计师个性化的理念和思想，表

16、达设计师独特的创作手段和方法 如：徐悲鸿的马，齐白石的虾，有时候鲜明的突出的个性是版面设计创意的灵魂。平设计必须遵循phtoshop的特点，掌握常用的设计原则，即将人的思想，素养、对艺术的感悟及表现技法，创造性地运用文字，图形、色彩去设定构图和表现形式，在感知与思考，感性与理性的交互运作中追求最合理的形式组合，形成好的作品。第三章 photoshop的网页设计使用photoshop平面设计软件设计网页简单实用，具有很多不可代替的优点，为大众所推崇，比如：通过photoshop的切片工具，可将一个完整的网页切割许多小片，不仅方便上传，也容易对每一张进行单独的图块进行优化，以便于浏览下载。在使用p

17、hotoshop对网页进行设计和美工的过程中，所需要掌握和了解的知识需要很多，颜色的搭配，版面的布局，以及人机交互的繁简性，都需要斟酌思考。3.1 网页设计原则好的网页不仅仅是有一个好的外表，它还要将信息传达给用户，这可能要比起好看的外表重要得多，现在就谈谈几个重要的原则。3.1.1画面内容画面设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。 统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。 连贯，是指要注意页面的相互关系。设计中应利用

18、各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。 分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。 对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，

19、影响统一。 和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。 3.1.2造型的组合在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。 通常我们可以使用的组合手法有秩序、比

20、例、均衡、对称、连续、间隔、重叠、反复、交插、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现手法，这样有利于主题的表现。 通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让观者在感受美的过程中领会设计的主题，从而实现设计的任务。 造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上的各种元素有机的组织起来，它甚至还可以引导观者的视线。 3.1.3色彩的运用色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明

21、度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。 我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。 色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。 单纯的颜色并没有实际的意义，和不

22、同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应尽量使用网页安全色。 但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。 图3-1 网站标题和导航的基本色块3.2 网站的交互可用性网站的

23、目的就是邀请用户访问和互动。网站的设计者希望用户以期望的方式使用网站，网站可用性可以用目标与它交互的难易程度来衡量。不合理的网站会拒人于外，精心设计的网站设计的网站则将用户导向预期的目标。3.2.1眼动造成的热点效应眼球追踪是测量我们凝视的点，或者相对于头部来说眼睛移动的过程。眼球追踪研究可以帮助估计浏览网站的用户是否舒适地使用网站，以及他们理解网站背后的架构和系统有多快。用户眼球的第一运动聚焦于网页的左上角，用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容用户普遍的浏览方式呈现出“f”的形状。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与，在此放置

24、头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读，标题能吸引眼球，确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。视线往往只停留几分之一秒，因此读者会忽视横幅广告，而花哨的字体和格式被忽视，因此该努力保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。图3-2网页中视点停留的热点图像图3-3 网页中眼动追踪图像3.2.2注意力及可视项目注意力本身可以集中、分散和转移。集中一般出于明确的需求、潜在的兴趣；分散则由于信息干扰和不可控的时间；转移一般发生在需求探索阶段。以网站信息结构内的各元素为单位，加上每个页面的所有视觉元素，可以得到网站总的注意力“项”。用户就

25、是利用这些项去满足自己的需求，交互设计则是这些项的描绘者、组织者。如果假设注意力有限，那么每个项分享到的注意力应该是固定值。加上因为个体差异，兴趣和需求的等级不同，便得到了以下公式。图3-4 注意力转化率计算公式一般来说，交互设计的重头工作是项设计。如确定信息结构、元素词典、视觉形式等。为什么说可视项数量越大，注意力越小呢？这是由认知特点决定的。选项越 多，步骤越长，人越需要耗费理解力。理解力带给人的压力比较大，需要求助于向内的注意力，把注意力的任务属性，转向逻辑属性，造成交互能力降低。加上对注 意力转移所使用时间的预期，对鼠标和键盘操作的苛求（体力），人们普遍反感冗长的表单，页面跳转等情况。

26、于是便出现了“响应式展开”、“弹出泡”、“弹窗”、“标签”等交互形式。图3-5网页中项的组织和展3.3 切片工具的使用任何一个网页都包含大量的表格, 难道这些表格都是设计者一点点设计出来的吗? 其实不然, 现在很多的网页都是使用photoshop编辑后再通过dreamweaver来轻松布局网页表格。图3-6 在ps中对切片工具的使用第四章 photoshop网页实例设计本网页实例的设计，主要以学院信息工程系主页的设计为例。4.1网页功能概述本网页要求实现以下功能：l 网页界面简洁、大方，色彩搭配合理。具有规范的版式，各版面布局合理。 l 支持各种主页模块的添加，保证操作简单、便捷，实现交互的友

27、善。l 在主页添加最新的微博等交互内容，支持登录操作的表单。通过对进网页的需求分析，可以将本网页的导航划分为登录框，导航，图片锦集、系部介绍、系部新闻、通告通知、党团建设、实训基地、微博互动、招生就业、招生联系、合作伙伴。划分布局如图所示。图4-1 网站的划分结构4.2网页界面设计4.2.1背景及图层文件夹1.新建宽高为1004*1474的rgb图像，背景为白色。2.建立各个图层的文件夹，并重命名。2.新建图层“背景”使用“渐变工具”在背景上端上充填一灰白色的渐变。3.在灰色的渐变背景上，使用“矩形工具”，绘出数个白边小框作为背景底纹。图4-2 网页背景的颜色充填及底纹图4-3 图层文件夹4.

28、2.2登录框1.使用“矩形工具”在背景的上端上制作出一条矩形，改变矩形的不透明度为32%，并设置其投影的样式。2.在矩形上继续制作两个背景为白色，边框为灰色的矩形作为登录框，使用“字体工具”输入字体为：微软雅黑，大小11，颜色为蓝灰的学号，密码等文字项。图4-3 登录栏的样式及字体4.2.2 logo1.使用“钢笔工具”绘制蓝灰色系标，并在旁边输入文字，字体：汉鼎行楷，颜色蓝，字体41。2.使用“圆角矩形工具”绘制一圆角矩形，在调整好其颜色和透明度后，在上输入文字，格式：宋体，大小13。图4-4 系标及其文字的样式4.2.3 导航栏1.使用“文字工具”输入导航内容，字体：黑体，颜色蓝墨，字体1

29、7。2.使用“铅笔工具”绘制导航之间的风格线，并在文字下绘出淡蓝色虚线。图4-5 导航文字格式4.2.4 信息发布栏1.使用“矩形工具”绘制一定长度的白色矩形，设置其样式为“投影”“描边” 2.使用“钢笔工具”绘制一蓝底的矩形，作为标题栏的装饰，并用“钢笔工具”绘制一小椭圆，选中椭圆后，在图层上进行裁剪的处理。3. 使用“字体工具”输入标题，字体：黑体，大小15，颜色为蓝灰。“更多” 文字按钮使用字体：宋体，大小10，灰色。4.正文通过其后台的设计决定，但基本的字体：宋体，大小13，颜色为蓝灰。图4-6 网页所有消息发布栏的基本4.2.5 切片处理及导出网页1.使用“切片工具”对页面的导航，栏目进行细致的切割。2.选择“文件”， 选择“将优化结果储存为”，将作品以html的形式保存。图4-7 对网页使用“切片工具”4.5网页的整体设计效果图4-8 信息工程系主页的整体效果第五章 总结现在是it时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页美工布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼