平面设计毕业设计论文-photoshop在网页设计上的应用.doc

毕业设计论文

Photoshop在网页设计上的应用系 别 信息工程系

专 业 计算机网络技术

XXXX学院信息工程系

2012年6月 日

摘要

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

关键词 Photo shop 网页设计切片工具颜色布局

目 录

摘要. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

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

1.1 Photoshop的简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.2 Photoshop的运行环境. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

第二章Photoshop的平面设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.1设计特点. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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

第三章Photoshop的网页设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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注意力及可视项目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

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

第四章Photoshop网页实例设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

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

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

4.2. 1背景及图层文件夹. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4.2.2登录框. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

4.2.2 LOGO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

4.2.3导航栏. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

4.2.4信息发布栏. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

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

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

第五章总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

致谢. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

第一章概述

1.1 Photoshop的简介

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

Photoshop创始人的主要设计师ThomasKnoll的父亲GlennKnoll是密歇根大学教授 同时也是一个摄影爱好者他家地下室是一个暗房。他两个儿子Thomas和John从小就跟着爸爸玩暗房但John似乎对当时刚刚开始发行的个人电脑更感兴趣此后Thomas也迷上个人电脑并在1987年买一台苹果电脑

MacPlus用来帮助完成他的博士论文。

Thomas发现当时的苹果电脑无法显示带灰度的黑白图像 因此他自己写了一个程序Display。而他兄弟也可能是哥哥 John这时在星球大战导演Lucas的电影特殊效果制作公司IndustryLightMagic工作对Thomas的程序很感兴趣。两兄弟在此后的一年多把Display不断修改为功能更为强大的图像编辑程序经过多次改名后在一个展会上他们接受一个参展观众建议把程序改名为Photoshop。此时的Display/Photoshop已经有Level色彩平衡饱和度等调整。此外John写了一些程序后来成为插件Plug-in的基础。

他们第一个商业成功是把Photoshop交给一个扫描仪公司搭配卖名字叫做BarneyscanXP版本是0.87。与此同时John继续在找其他买家包括SuperMac和Aldus都没有成功。最终他们找到了Adobe的RussellBrown Adobe的艺术总监。 RussellBrown在此时已经在研究是否考虑另外一家公司Letraset的ColorStudio图像编辑程序。看过Photoshop以后他认为Knoll兄弟的程序更有前途。在1988年7月他们口头决定合作而真正的法律合同到次年4月才完成。

2003年 Adobe的Creative Suite套装将Adobe Photoshop 8更名为AdobePhotoshop CS。因此 Adobe Photoshop CS5是Adobe Photoshop中的第12个主要版本。对CS更名也导致Adobe众多的软件套件降价。 Adobe Photoshop有两个发行版本标准版Adobe Photoshop和扩展版Adobe Photoshop Extended扩展版除包含标准版所有功能之外还增加了3D处理功能、动画图形编辑功能和高级图像分析功能。 Adobe只支持Windows操作系统和Mac OS操作系统版本的Photoshop但Linux操作系统用户可以通过使用Wine来运行Photoshop CS5。Google也正在透过Wine资助Linux版Photoshop的研究。

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

图1-1 Photoshop创始人之一Thomes Knoll

1.2 Photoshop的运行环境

表1-1运行环境表

第二章Photoshop的平面设计

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

2.1设计特点

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

2. 1 . 1用计算机代替传统的设计工具

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

2. 1 .2信息处理能力强大、快速

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

2. 1 .3使平面设计走向产业化

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

2. 1 .4促进了艺术设计创意

Photo shop软件革新了设计师的艺术语言与表现手法同时促进了创意的萌

发机制与深化过程许多以前想到却做不到的事现在通过计算机能够轻而易举地实现

。 Photo shop象一位神奇的魔法师她可以在埃及的沙漠里建造出金字塔然后将其轻轻地放在Champs的爱丽舍宫上这种逼真即使是巴黎人也不会看出有什么不妥 Pho toshop象一位奇妙的艺术家它可以使扫描的碎片和褪色的数码相片看起来如同由高级摄影师拍摄的无可非议的照片。

2.2设计原则

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

2.2. 1整体与局部相统一原则

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

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

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

Phto shop平面设计软件具有强大的滤镜功能它能够轻而易举地实现设计师魔幻般的想法激发设计师异想天开的创作灵感平面设计作品中可以运用一批夸张变形漫画、卡通、有故事性的连环组画表现科学幻想世界、神奇的太空景观、物理上不能实现的各种现象等模拟的活灵活现生动逼真容易引起读者的阅读兴趣具有很大的商业价值。虽然能使读者看起来饶有兴趣但是这种趣味性必须建立在一定的科学知识