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

毕业设计论文

Photoshop在网页设计上的应用

系 另壯 信息工程系

专业计算机网络技术

学生姓名

_________________

指导教师

_________________

XXXX学院信息工程系

2012年6月日

摘要

计算机图像技术的飞速发展使个人电脑上的美术创作进入一个新的阶段,各种图像处理软件越来越完善普及程度不断提高。其中的图像处理工具Photo shop是目前公认的、较好的通用平面美术设计软件它功能完善性能稳定使用方便。使用Photo shop平面设计软件设计网页简单实用具有很多不可代替的优点为大众所推崇。比如通过Photo Shop的切片工具可将一个完整的网页切割许多小片不仅方便上传也容易对每一张图块进行单独的优化 同时利于浏览下载。在使用Photo shop对网页进行设计和美工的过程中所需要掌握和了解的知识很多颜色的搭配版面的布局 以及人机交互的繁简性 都需要斟酌思考。

关键词 Photo shop 网页设计切片L具颜色布局

目录

摘要. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

第一章概述. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.1 Photo shop的简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.2 Photo shop的运行环境. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

第二章Photo shop的平面设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2」设计特点. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.1.1用计算机代替传统的设计工具. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.1.2信息处理能力强大、快速. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2. 1.3使平面设计走向产业化. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.2设计原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2.2.1整体与局部相统一原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2.2.2知识性与趣味性统一原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2.2.3艺术性与观赏性统一原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

2.2.4独创性原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

第三章Photo shop的网页设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

3. 1网页设计原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

3. 1. 1画面内容. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

3. 1.2造型的组合. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

3.1.3色彩的运用. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

3.2网站的交互可用性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

3.2.1眼动造成的热点效应. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

3.2.2注意力及可视项目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

3.3切片工具的使用. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

第四章Photo shop网页实例设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

4.1网页功能概述. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

4.2网页界面设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

4.2.1背景及图层文件夹. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

4.2.2登录框. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

4.2.3导航栏. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

4.2.4信息发布栏. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4.2.5切片处理及导出网页. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4.5网页的整体设计效果. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

第五章总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17

致谢. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

第一章概述

1.1 Photoshop的简介

Adobe Photoshop,简称“PS”(其程序图标便是“PS”)是一个由Adobe Systems开发和发行的图像处理软件。多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”并不知道它的诸多应用实际上 Photo shop的应用领域很广泛的在图像、图形、文字、视频、 出版等各方面都有涉及。

Photo shop创始人的主要设计师Tho ma sKnol l的父亲GlennKnoll是密歇根大学教授 同时也是一个摄影爱好者他家地下室是一个暗房。他两个儿子Tho ma s和J ohn从小就跟着爸爸玩暗房但J ohn似乎对当时刚刚开始发行的个人电脑更感兴趣此后Tho ma s也迷上个人电脑并在1987年买一台苹果电脑(MacP lus)用来帮助完成他的博-上论文。

T ho ma s发现当时的苹果电脑无法显示带灰度的黑白图像 因此他自己写了一个程序D i sp l ayo而他兄弟(也可能是哥哥)J o hn这时在星球大战导演Luc a s的电影特殊效果制作公司IndustryLi ghtMagi c工作对Tho ma s的程序很感兴趣。两兄弟在此后的一年多把Display不断修改为功能更为强人的图像编辑程序经过多次改名后在一个展会上他们接受一个参展观众建议把程序改名为Photo shopo此时的Display/Photoshop已经有Level,色彩平衡,饱和度等调整。此外John写了一些程序后来成为插件(Plug-in)的基础。

他们第一个商业成功是把Photo shop交给一个扫描仪公司搭配卖名字叫做B arneyscanXP,版本是0. 87。与此同时John继续在找其他买家包括Sup erMac和Aldus都没有成功。最终他们找到了Adobe RusselIBrown,Adobe的艺术总监。RusselIBrown在此时已经在研究是否考虑另外一家公司Letraset的

ColorStudio图像编辑程序。看过Photo shop以后他认为Knol l兄弟的程序更有前途。在1988年7月他们口头决定合作而真正的法律合同到次年4月才完成。

2003年,Adobe的Creative Sui te套装将Adobe Photoshop 8更名为AdobePhoto shop CSo因此,Adobe Photo shop CS 5是Adob e Photo shop中的第12个主要版本。对CS更名也导致Adobe众多的软件套件降价。Adobe Photo shop有两个发行版本标准版Adobe Photo shop和扩展版Adobe Photoshop Extended,扩展版除包含标准版所有功能Z外还增加了3D处理功能、动画图形编辑功能和高级图像分析功能。Adobe只支持Windows操作系统和Mac O S操作系统版本的Photo shop,但Linux操作系统用户可以通过使用Wine来运行Photoshop CS 5。 Goo gle也正在透过Wine资助Linux版P hoto shop的研究。

Photoshop被人们认为是最好的图像处理软件但与著名的3D Studio Max一样昂贵的价格使其难以普及。但Adobe不想失去屮国大陆这块市场于是在2011年推出了“校园先锋计划”价格低的令人大跌眼镜 比如原价7707元的AdobePhotoshop CS5 Extended在此计划中只卖349元。不过此计划只面向大学生与高校教师。

图1-1 Photoshop创始人之—Thornes Knol l

1.2 Photoshop的运行环境

表1T运行环境表

第二章Photoshop的平面设计

Photo shop在平而设计中扮演着极其重要的角色它广泛应用于我们日常生活和学习工作的各个方面首先浅谈一下Photo shop平面设计软件具有特点和常用的设计原则。

2.1设计特点

根据Photo shop的功能和作用总结其明显的特点。

2.1.1用计算机代替传统的设计工具

现代平面设计以计算机作为主要创作工具利用Photo shop设计软件提供的强大的工具和菜单功能 同时结合了各种传统绘画工具的特点又能体现多种新的艺术风格使创作技法不断推陈出新。

2.1.2信息处理能力强大、快速

Photo shop软件在文字录入、图像扫描、图像存储、图像编辑、特效处理等方面具有超强的处理能力 同吋在图文混排图像输出等方面的操作方便快捷。设计效果所见即所得修改快捷、方便。

2.1.3使平面设计走向产业化

Photo shop软件在平面设计中的应用极大地改变平面设计的作业环境使艺术创作逐步走向标准化、工业化、产业化社会上各种创作设计室如雨后春笋般的发展壮大提供丰富的就业机会为哪些有艺术天赋而没有艺术功底的人提供了广阔的工作和生活天地。

2.1.4促进了艺术设计创意

Photo shop软件革新了设计师的艺术语言与表现手法 同时促进了创意的萌发机制与深化过程许多以前想到却做不到的事现在通过计算机能够轻而易举地实现。 Photo shop象一位神奇的魔法师她可以在埃及的沙漠里建造出金字塔然后将其轻轻地放在Champ s的爱丽舍宫上这种逼真即使是巴黎人也不会看出有什么不妥 Photo shop象一位奇妙的艺术家它可以使扫描的碎片和褪色的数码相片看起来如同由高级摄影师拍摄的无可非议的照片。

2.2设计原则

Phto shop现代平面设计的原则是根据平面设计的性质和目的针对平而设计的特点进行制作它一般遵循的原则如下。

2.2.1整体与局部相统一原则

Phto shop平而设计的根本目的是通过平面设计作品为人们传播直观的信息使人们获得美感享受的同时获得大量直观的信息充分表达用户要求的主题设计师通过完美的平面设计形式表达符合主题的思想内容这也是平面设计的根基这就要求设计师在设计中强化整体布局合理突出局部使整体与局部合理地统一使作品取得独特的社会与艺术价值。

整体与局部合理地统一就是设计师在平面设计中要强化版面各种排版要素在版面屮结构与色彩具有相互关联性通过版面的文图间的整体组合与协调性的编排使版面更具秩序美、条理美从而获得更好的视觉效果力求作品的尽善尽美。

2.2.2知识性与趣味性统一原则

Phto shop平面设计软件具有强人的滤镜功能它能够轻而易举地实现设计师魔幻般的想法激发设计师异想天开的创作灵感平面设计作品中可以运用一批夸张变形漫画、卡通、有故事性的连环组画表现科学幻想卅界、神奇的太空景观、物理上不能实现的各种现象等模拟的活灵活现生动逼真容易引起读者的阅读兴趣具有很大的商业价值。虽然能使读者看起来饶有兴趣但是这种趣味性必须建立在一定的科学知识的基础上光与色彩的处理必须符合现实科学和生活符合人的视觉特性才能够被人们充分地接受作品才能够具有实质的社会和商业价值没有知识支撑的趣味性就像镜中花水中月使人们感觉到不真实。设计该真实地反映社会生活的方方面面不能偏离客观实际。

2.2.3艺术性与观赏性统一原则

Phto shop版面设计艺术性是使人们在欣赏作品时能够潜移默化地接受作品表达的主题内容充分领会到作品的意图和设计师的意愿这就要求设计师首先构思立意它是设计作品中所进行的思维活动也是体现作品品质的重要环节。立意完成以后版面构图布局和艺术的表现形式就成为版面设计艺术的核心这种艺术性就是要求平面设计达到意新形美变化而统一的艺术作品并具有较好的审美情趣使它具有良好的可观赏性艺术性与观赏性相互统一 相得益彰 即使艺术性十分强烈但如果人们不能够充分观赏就不能够领会到设计师的意图作品的艺术性就会大打折扌 II。

2.2.4独创性原则

独创性原则是平而设计中较为重要的原则它是设计师个性的充分体现 它是设计师设计的作品相互区别的重要标志它的本质上是突出个性化特征设计的原则清处地传达设计作品中设计师个性化的理念和思想表达设计师独特的创作手段和方法如徐悲鸿的马齐白石的虾有时候鲜明的突出的个性是版面设计创意的灵魂。平设计必须遵循Phto shop的特点掌握常用的设计原则即将人的思想素养、对艺术的感悟及表现技法创造性地运用文字图形、色彩去设定构图和表现形式在感知与思考感性与理性的交互运作中追求最合理的形式组合形成好的作品。

第三章Photoshop的网页设计

使用Photo Shop平面设计软件设计网页简单实用具有很多不可代替的优点为大众所推崇 比如通过Photo Shop的切片工具可将一个完整的网页切割许多小片不仅方便上传也容易对每一张进行单独的图块进行优化以便于浏览下载。在使用Photo shop对网页进行设计和美工的过程中所需要掌握和了解的知识需要很多颜色的搭配版面的布局 以及人机交互的繁简性都需要斟酌思考。

3.1网页设计原则

好的网页不仅仅是有一个好的外表它还要将信息传达给用户这可能要比起好看的外表重要得多现在就谈谈几个重要的原则。

3.1.1画面内

画面设计是有原则的无论使用何种手法对画面中的元素进行组合都一定要遵循五个大的原则统一、连贯、分割、对比及和谐。

统一是指设计作品的整体性一致性。设计作品的整体效果是至关重要的在设计中切勿将各组成部分孤立分散那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

连贯是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应并注意整个页面设计风格的一致性实现视觉上和心理上的连贯使整个页面设计的各个部分极为融洽犹如一气呵成。

分割是指将页面分成若干小块小块之间有视觉上的不同这样可以使观者一目了然。在信息量很多时为使观者能够看清楚就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲分割也可以被视为对于页面内容的一种分类归纳。

对比就是通过矛盾和冲突使设计更加富有生气。对比手法很多例如 多与少、 曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重对比过强容易破坏美感影响统一。

和谐是指整个页面符合美的法则浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合那么作品将不但没有“生命感”而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式而U要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通产牛心灵的共鸣。这是设计能否成功的关键。

3.1.2造型的组合

在网页设计中我们主要通过视觉传达来表现主题。在视觉传达中造型是很重要的一个元素。抛去是图述是文字的问题画面上的所有元素可以统一作为画而的基本构成要素点、线、而来进行处理。在一幅成功的作品里是需要点、线、而的共同组合与搭配来构造整个页而的。