《Photoshop在网站建设中的应用.doc》由会员分享，可在线阅读，更多相关《Photoshop在网站建设中的应用.doc（15页珍藏版）》请在三一办公上搜索。
1、Photoshop在网站建设中的应用摘 要毋庸置疑，Internet的作用在今天显得越来越重要，网站的数量和规模发展迅猛。在Internet的早期，网站只能保存单纯的文本。经过几年的发展，图像、声音、图片、动画、视频，甚至3D技术开始Internet上流行，网站也发展成为我们今天看到的图文并茂的样子。在制作网站过程中Photoshop是必不可少的网页图像处理软件。网站界面设计虽然可以用Dreamweaver和Frontpage等网页创作工具来完成，但是最自由和艺术化的创作方式，还是使用Photoshop这样的专业图像处理软件。Photoshop的功能及其强大，在图像、图形、文字、视频、出版等方
2、面都有涉及。制作完整体界面效果后，再进行优化和切片，以达到更好的网页浏览效果。良好的运用Photoshop能在网站开发及后期发展中起到很重大的作用。关键词Photoshop；网站；设计目录摘要 1关键词 1Abstract 1引言 11 Photoshop的发展历史 11.1 Photoshop的开发 11.2 Photoshop的功能特色 21.3 Photoshop的应用领域 42 Photoshop在网站中的应用 5 2.1 网站的规划 5 2.2 内容的采集 5 2.3 Photoshop在网站开发中的应用 5 2.4 Photoshop在网站后期的应用 103 结束语 10附录 10
3、参考文献 14引言Internet是强有力的工具，能以低代价却很方便的把产品和服务信息传遍世界的每个角落。全世界所有客户都能够通过网站，了解信息。不管网站怎么发展，让客户方便快捷得找到所需要的信息都是最重要的。因此一个网站信息分布式很重要的，这就需要在网站开发中进行设计。我所实习的网络公司是运营电子商务的。随着网购的流行，电子商务是未来经济发展的大趋势，电子商务类网站也因此蓬勃发展。设计一个电子商务类网站更加需要Photoshop技术的支持。电子商务类网站需要提供更多的图片信息，要让客户迅速找到所需产品，并能与相似产品进行比较，选出最满意的商品。这需要对网站的良好布局，通过文字和图形的空间结合
4、，表达出和谐和美。1 Photoshop的发展历史1.1 Photoshop的开发Photoshop是Adobe公司旗下最为出名的图像处理软件之一。多年来以其优异的品质和强大的功能成为业界标准，是平面设计开发人员的必备工具，也是web开发等电脑应用的必备软件。1.1.1Photoshop的开发及版本1986年，密歇根州大学的一个研究生Thomas编制了一个程序Display，能在MacintoshPlus上显示灰阶图像。之后与他兄长一起开发了早期的Photoshop软件。此后的一年多里，Display不断修改成为一个功能更强大的图像编辑程序。在一个展会上有人建议把程序改名为Photoshop。
5、此时的Photoshop已经具有色彩平衡，饱和度等调整了。此外他的兄弟写了一些程序后来成为插件（Plug-in）的基础。之后他们寻找买家，包括SuperMac和Aldus，但都没成功。1988年，与Adobe签署授权销售协议，但这仅仅是获得发行权，而不是买断所有版权。1990年Photoshop版本1.0.7正式发行。之后Adobe开始着手开发适用于Windows平台的版本，正式版本编号2.5，增加了调色板和16位文件支持。版本3.0增加了一个重要的新功能层。版本4.0主要是改进了用户界面，与Adobe的其他产品统一化。这是Adobe意识到Photoshop的重要性，1995年买断所有权。版本
6、5.0引入了历史记录的概念，并增加了色彩管理的功能，这是Photoshop历史上的已达改进，在业界引起很大的反响。之后一年发行了版本5.5，主要增加了支持Web功能和imageReady2.0。2000年推出的6.0版本改进了其他Adobe工具交换的流畅。2003年的版本7.0增加的Healing Brush修复画笔和一些基本的数码相机功能如文件浏览器，是一项非常重大的改进。之后的的版本8.0的改成为Photoshop Creative Suite。Photoshop CS为数码相机开发了更多的新功能，如智能调节亮度，镜头修正等。9.0则变成CS2，10.0变成CS3,11.0变成CS4，也就
7、是最新的版本。Adobe Photoshop CS4拥有一百多项创新，特别注重简化工作流程，提高设计效率，支持基于内容的智能缩放，支持65为操作系统、更大容量内存。1.1.2Photoshop的开发平台Photoshop最初的应用平台是Macintosh麦金塔。1985年苹果公司率先推出图形界面的Macintosh麦金塔系列电脑。当时的Thomas迷上了个人电脑，他发现当时的苹果电脑无法显示带灰度的黑白图像，因此加以研究。随着Windows的流行应用，版本2.0之后Adobe开始开发支持Windows版本，代号为Brimstone,而Macdonald版本为Merlin。当时Photoshop
8、在Mac版本上以能大大超越对手，但是在Windows上的版本则需要经过一段时间改进后才能赶上对手。1.2 Photoshop的功能特色1.2.1Photoshop的功能Photoshop功能丰富实用，界面简洁，集成化程度高。与ImageReady 2.0相结合，提高了对web的支持能力，不断开发的新功能更是充分激发创作者的想象力。Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可以进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、广告制作、人像照片处理制作中有非常大的用场，去除人
9、像上的不满意部分，进行美化加工，得到让人非常满意的结果。图像合成则是将几幅图像通过图层操作、工具应用完成的，传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好的融合，使图像的合成天衣无缝、校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色调的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面反应。特效制作在Photoshop中主要是通过滤镜、通道及工具综合应用完成。包裹图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可以借由photoshop特效完成
10、。而各种特效字的制作更是很多美术设计师热衷于Photoshop研究的原因。1.2.2常用工具Photoshop的常用工具主要有选取工具，用于选取图像的某个部分。模糊工具，对图像进行模糊虚化，也可以采用羽化或者滤镜中的模糊工具进行。锐化和减淡工具，对图像进行适当调整。橡皮图章工具，用于修改或弥补缺陷。编辑更改图像颜色最主要是进行亮度/对比度，色相/饱和度，色彩平衡和曲线，其次还可以运用自动对比度、自动色阶进行调节。滤镜的功能很强大，能进行特效处理。滤镜中最常用的是模糊滤镜工具、锐化滤镜工具、各种风格化滤镜工具、各种苏彪效果滤镜工具和各种艺术化滤镜工具。1.2.3与其他相似软件相比的优势图像处理的
11、软件很多，除了Photoshop外，常用的还有Fireworks，AutoCAD，CorelDRAW，Painter，Illustrator，Pagemaker，InDesign。Photoshop用途比较广泛，主要是图片的处理，图片效果的制作。Illustrator，CorelDRAW，InDesign，Pagemaker等，这些都是用于制作矢量图的。CorelDRAW在矢量领域占有一席之地，其强大的实力和Adobe的产品在平面设计领域共享盛誉，主要是用于排版的，文字排版功能比Photoshop强大，可以用来设计名片，宣传单，海报，画册，报纸等。Illustrator与CorelDRAW比较
12、相似，操作起来有点像Photoshop和CorelDRAWd综合体。它与Photoshop配合有很大的又是，适合用于任何小型设计到大兴的复杂项目。InDesign是后起之秀，与Photoshop和Illustrator同样是ADOBE公司推出的，是一款功能非常强大的排版软件。Pagemaker主要用于排书刊，现在已经停止开发。Painter同样是Corel公司出品的专业突袭那个创建软件，它完全模拟了现实中作画的自然绘图工具和纸张效果，并提供电脑作画的特有工具。他是一个非常理想的图像笔记和绘画工具。Painter绘画比较方便，而Photoshop做图比较方便，两者的功能特色是有所不同的。Auto
13、CAD是一款专业制图软件，绘制的平面图是矢量的，能严格反映我们所画实物的尺寸比例，特别是在机械设计中要求更严格。AutoCAD经常被用于画零件图，电路图，房屋设计等等机械，电器，建筑等领域，常常与Photoshop结合使用。Fireworks是主要面向网络应用的，侧重网页图像处理，是网页三剑客中辅助制作网页的，可以制作动态效果。虽然Photoshop也能制作动态的图片，但是需要切换到ImageReady中进行制作。Photoshop和Fireworks功能上很相似，各自都有各自的优势。Photoshop的设计初衷是用于传统平面图像出版，在平面设计方面有很大的优势，可以兼做网页。在色彩上，Pho
14、toshop的色彩管理及功能几乎是无懈可击的，它囊括了全部专业需求，再加上“通道”，是Photoshop无可比拟。相比较Fireworks由于对网络的特殊考虑，大大简化了色彩管理过程，只提供了“遮罩”。Photoshop的滤镜的功能是非常丰富强大的，即使不精通Photoshop也可以通过滤镜制作出不可思议的艺术品。虽然Fireworks能借用Photoshop的滤镜，但是在运用上并不如Photoshop那样顺畅，制作的特效远远不及Photoshop。Photoshop强大的位图处理能力、专业的色彩管理以及长期形成的各种软件对其的支持是其它软件无法比拟的。而Fireworks从出生就是为了网络图
15、形服务，其轻巧、方便，以及网络功能的完善则是独一无二的。1.3 Photoshop的应用领域Photoshop不仅是一个很好的图像编辑软件，它的应用领域还很广泛，在图像、图形、文字、视频、出版各方面都有涉及。Photoshop在平面设计、修复照片、广告摄影、影响创意、艺术文字、网页制作、建筑效果图后期修复、绘图、绘制或处理三维贴图、婚纱照片设计、视觉创意、图标制作、界面设计中都有很广泛的应用。平面设计师是Photoshop中应用最广泛的领域，无论是我们正在阅读的图书封面，还是在大街上看到的招贴、海报，这些都是具有丰富图像的平面印刷，基本上都需要Photoshop软件对图像进行处理。修复照片，利
16、用Photoshop强大的图像修复功能，可以快速修复破损的老照片，还可以修复照片上的斑点，以及人物的红眼等缺陷。广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过Photoshop的修改才能得到满意的效果。影像创意是Photoshop的特长，通过Photoshop的处理能将不同的对象组合在一起。利用Photoshop可以使文字发生各种各样的变化，病利用这些艺术化处理后的文字为图像增加效果。随着网络的普及，Photoshop成为制作网页时必不可少的图像处理软件，更多的人学习和掌握Photoshop。在制作建筑效果图时，人物与配景包括场景的颜色常常需要在Photoshop中增加并调整。
17、由于Photoshop具有良好的绘画和调色功能，许多插画设计制作者往往使用铅笔绘制草图，然后用Photoshop天色的方法来绘制插画。除此以外，近些年来非常流行的像素画也多为设计师运用Photoshop的创作作品。利用Photoshop可以制作出在三维软件中无法得到的合适的材质，起到很好的渲染效果。当前很多影楼都使用Photoshop设计婚纱照片，通过Photoshop的设计能是婚纱照片更加唯美，也使得婚纱照片设计的处理成为一个新兴的行业。视觉创意与设计师设计艺术的一个分支，此类设计通常没有明显的商业目的，但由于它为广大设计爱好者提供了广阔的设计空间，因此越来越多的设计爱好者从学习Photos
18、hop开始，病进行具有个人特色与风格的视觉创意。图标制作也是Photoshop的一个应用领域，虽然感觉上有点大材小用，但是用Photoshop制作的图标的确非常精美。界面设计师一个新兴的领域，已经收到越来越多的软件企业以及开发者的重视，虽然暂时还未成为一种全新职业，但相信不久一定能够会出现专业的界面设计职业。而Photoshop在现实中海不止这些应用，目前在影视后期制作及二维动画制作中，Photoshop也有所应用。2 Photoshop在网站开发中的应用2.1 网站的规划在设计制作网站之前，首先要给网站一个准确的定位。企业网站、新闻网站、综合服务类网站、文化教育类网站、电子商务类网站、个人网
19、站，各个网站的风格、细节都是不一样的，所以首先要确定网站类型。以我所在的公司为例，这是个B2C网站。制作这样一个B2C的电子商务类网站，包括产品展示、用户管理、购物车、新闻发布、论坛、邮件群发、团购通道等等一些B2C必备的功能。之后就可以确定主题与设计风格，各个页面的风格要统一，整体性要强。2.2 内容的采集用Photoshop设计网站初期布局也是需要采集内容的，只有了解一个网站所要包含的内容，才能更好的设计出合理布局的网站，更准确的反应网站未来的样子。采集内容必须与标题相符，在采集内容的过程中，应注重特色。主页中的特色应该更突出网站的个性，特别是制作电子商务类网站要设置栏目，让人根据产品分类
20、，找到所需要的产品，而重点栏目要能直接从首页到达，保证用各种浏览器都能看到主页最好的效果，这些就需要制作网页的人员去考虑了。2.3 Photoshop在网站开发中的应用以制作我所在的公司的网站首页为例。首先要明白运用Photoshop设计的网是各个网页的整体效果呈现。第一次制作对这一个空白的页面有点无从下手，后来找了一个同类网站截一个图，放在最底层作为草图。网站制作中对图片的精准度要求很重要，图片过大会被压缩扭曲，导致图片不清晰，太小会显得不美观。先要拉三根垂直辅助线：左边线，中间虚线位置，右边线。 然后建立头、中、底三个图层组。建立图层组的是很重要的的，以前制作图片没有多少层，因此也不回建立
21、图层组，但是制作一个页面会有很多层，如果都放在一起，杂乱无章，也影响工作效率。制作的时候最好尽量把文字内容也放上去，这是我们公司的一位美工教的，说这样可以更接近网页呈现的效果。一个网页由若干部分组成，如LOGO，标题栏，广告栏，文字等，如果放在同一个文件里面会有非常多的图层，可以先制作好各个部分，然后组合到一起。在主页设计时应考虑到： “图片”适当地插入网页中可以起到画龙点睛的作用；“文字”与“背景”的合理搭配，这样可以使文字更加醒目和突出。2.3.1网站LOGO的设计LOGO设计是品牌形象设计的核心因素，已经成为企业品牌策划的热点。拥有一款优秀的LOGO，可以使品牌视觉形象如虎添翼，加快企业
22、的发展步伐。网站LOGO的出现和丰富与网络发展紧密相连。网站LOGO蕴含着网络文化与计算机文化内涵。LOGO设计往往是非常复杂的，空间感，色彩的调整，各个元素的协调，等等，其工作量丝毫不亚于传统设计，而且只有真正掌握了矛盾与协调的统一性，我们才有资格说到设计，才有资格说登堂入室。一个网站的LOGO不仅要美观还要传达一定意思，例如一个电子商务类网站，从LOGO上传达信息，让人能更快了解这是个怎样的网站，销售怎样的东西。我们公司的网站除了这也上的LOGO以外，还有各个分域名也有各自的LOGO。不同页面的LOGO要包含自己的名称和网址。起初制作的时候色调上搭配很不协调，放到网页中显得很突兀。而且我们
23、网站的LOGO是橘红色的，因为注册的关系是不能乱改的，要想让其他信息跟橘红色不冲突，我想只能用橘红色，但是如果整体呈现这种颜色是很不显眼的。后来突然先到后面的文字用黑色，但是部分笔画用橘红色，这样即没有改变原来的LOGO，又达到了协调的目的。除了网站LOGO之外，我还要设计品牌LOGO作为按钮，让客户通过LOGO连接到相应品牌的网站上。LOGO设计要多做多想，只要有想法，都可以先做出来，看看实际的效果。（第一次设计）（最终效果）2.3.2 标题栏的设计和制作一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。
24、一个B2C网站通常通栏用来展示热销的商品、新上市的商品及推荐的产品。我们公司左栏放置品牌通道，可以通过品牌通道迅速到达二级域名。右栏用于部分商品讯息展示。在制作标题栏的时候，放个简单的小按钮会更加增色。制作标题栏最好将其设计成立体效果。我在制作中经常运用渐变色的填充已达到立体的效果。标题栏不一定要长方形的一条，可以再标题栏上制作出一个小关卡来防止该栏的名称，这就看制作中的创意设计了。2.3.3图片的处理网站不能只用文字，那是枯燥乏味的，必须在页面上适当地添加一些图片，增加可看性。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小，另外，网页中最好对图片添加注解，当图片的下载速度较慢，
25、在没有显示出来时注解有助于让浏览者知道这是关于什么的图片，是否需要等待，是否可以单击，特别考虑到纯文本浏览者浏览的方便，很有必要为图片添加一个注解。这是一个小地方，却能体现一个网页的制作水准。根据网站的需要，图像处理可能很简单，如把一幅图像裁剪为合适的尺寸或在一幅图像上叠加文字等 。商品的图片最重要的是突出商品，因此需要对图片明暗进行调整，压缩图片的大小，尽量减少对网页传输速度的影响；图像处理也可能很复杂，如把多个图像素材剪接、合并到一幅图像中。通常处理图像操作包括的以下几个步骤：1.确定图像主题及构图图像的设计和处理都是围绕着主题进行的，因此必须首先确定主题和目标。 如制作品牌介绍的图片，需
26、要将品牌放在显眼位置，放上品牌商品。2.确定图片的尺寸及背景根据设计目标，确定图像的图纸大小。可以根据基本图像素材重采样或裁剪 、放大到合适的尺寸。背景可以单色填充，渐变填充或者图案填充。添加了背景的图片是锦上添花的。背景可以在设计好风格的时候设置，也可以再整天设计完成后根据整体设计放置背景。上网的时候经常看到漂亮的图片素材，我都会保存下来，以备以后设计之用。3.获取基本的数字图像素材打开需要处理的图像素材。根据需要，有可能要准备多幅图像素材。图像尺寸要基本与需要相符或稍大一些。4.素材的处理首先在各基本素材图像中定义所需素材的选择区，把各种素材从基本素材图像中“抠出”。色彩对比强烈的图片可以
27、快速的用魔棒抠出来，除此之外还有很多方法，如抽出，通道抠图等。将素材置于基图的不同图层当中。然后确定各个素材的大小、显示位置、显示顺序。这些步骤需要反复操作才能达到较理想的构图效果。5.文字的生成如果设计中需要绘制一部分图，或叠加文字，绘制的图及文字都可分别生成新的图层，便于对各图层进行编辑及调整图层间的前后关系，而且各个图层在基图中的位置也可随意调整以达到设计要求。 6.各对象的处理及整体效果调整首先将暂时不处理的图层隐藏，在编辑窗口中仅露出当前需编辑的图层。对图层中图像的处理包括图像的色调、边缘效果及其他一些效果处理等。在图像处理的过程中，完成的几个较满意的操作或处理完一个图层以后，应注意
28、及时保存，以便在进行了不满意的处理时，可恢复到前面的效果，或调出原有图层。根据整体效果，进行各部分的细调 ，以完成最终的图像作品。7.图像转换并保存文件图像处理完成以后 ，应保存一个PSD格式的文件，以保存各图层信息，以便将来做进一步处理。然后，将将处理结果优化保存由于图片是要应用到网站上的。在目前网络传输速度不是很快的情况下，图片的大小在很大程度上影响了网页的传输速度。所以要特别注意图片的大小，一般要将图片优化为web形式的图片，优化之后的图片会小很多。小图片一般可以控制在6KB以内，动画控制在15KB以内，较大的图片可以“分割”成小图片。一般来说，图片颜色较少、色调平板均匀以及颜色在256
29、色以内的最好把它处理成gif图像格式，如果是一些色彩比较丰富的图片，最好把它处理成jpg图像格式，因为gif和jpg图像格式各有各的压缩优势，应根据具体的图片来选择压缩比。在制作图片的过程中经常碰到问题。比如我们公司某个品牌的商品图片调整背景色为白色，原图是灰白的，很多商品都是白色的，因此很难扣取。如果采用通道等方式较为复杂，所要制作的图片量较多，会花费很多时间。因此我通过容差的调整利用魔棒扣取，再加上图层的使用，能较快做好。2.3.4广告栏的应用在我们的生活中已经离不开广告，而作为一个网站，在自己的网站或别人的网站上发布广告是吸引客户很重要的方式，在运营中广告也是一个主要收入。广告栏的设置不
30、仅能美化网站，给人以视觉享受，而且能够迅速传达网站所要表达的信息。广告栏形式是多种多样的，电子商务类网站，它最吸引人的是它的产品，因此以这些产品制作而成的图片，再加上适当的文字信息，就能起到广告的作用。一般网站的广告栏都有个后台系统，可以将若干图片组合成flash自动播放，这样能提供给客户更多的信息。每次有新商品上市，我都会制作若干张商品图片，然后放置到广告栏中。这些商品图片并不是随便制作，美观就可以的，还要有主题。通常要制作这个品牌图片，特价商品图片及热销商品图片。这和图片制作是一样的，在通过后台放到广告栏中。2.3.5特殊字体的应用无论是在图片中，还是在网站制作中，特殊字体的运用都是很重要
31、的。使用不同的字体，颜色可以吸引目光，对于希望客户快速了解的信息，可以适当变大或者更改颜色。在图片制作中我对特殊字体的使用较多。用较大且突出的字让客户迅速了解信息。在这过程中，我知道了很多字体呈现的效果，累计了经验。在之后的制作中能更快得找到想要的字体。2.3.6网页背景的应用图像的另一个重要应用是作为网页的背景。网页的背景并不一定要用白色，选用的背景应该和整套页面的色调相协调。不过我们公司网站背景并没有特别的要求，是白色的，这样显得更加明快。制作好网站整体效果之后，进行优化和切片，我习惯将网页分为头部，中间和底部来进行裁切，这样方便修改，也方便使用。2.4 Photoshop在网站后期中的应
32、用Photoshop在网站后期的应用并不需要大的调整，通常都是小地方的调整。更新网站图片，制作新商品图片，在此就不累赘描述。3 结束语学习Photoshop态度和目的很重要。一开始虽然想要做美工设计，但是知道自己的能力不够，而且课本上学到的跟实际运用是不一样的。每次被要求制作的时候总是空空的，生恐自己做不好。在实习的过程中我学到了很多，工作，生活上都得到了很大的提高。我有了设计LOGO，制作图片，对不同内容设置不同字体，不同字体运用不同背景颜色，制作整体布局的经验，这过程中碰到很多问题，从一开始不知道如何配色，不知道如何让制作的东西协调，到现在我已经能合理搭配，并开始注重细节的表现。在设计中不能满目的制作，不能闭门造车，要经常学习别人的经验，听取别人的意见。制作前要理解所做的图片，所设计的网页排版的要求，要运用图片的地方，网页要展现的功能。设计东西经常会被要求修改返工，要有这个意识，制作中要经常注意为修改做准备。每次的制作中我都有收获。除此之外还经常自己学习，看别人的作品，之后结合实际进行练习。在这个工作学习的过程中，我懂得了要把握整体工程的效果。我一定会在这方面努力，相信未来我可以做得更好。附录图A-1 网站LOGO图A-2 第二域名网站LOGO图A-3品牌LOGO图A-4图片制作图A-5左栏制作图A-6广告栏制作
