Photoshop在网页制作中的应用-吴明宇.doc

《Photoshop在网页制作中的应用-吴明宇.doc》由会员分享，可在线阅读，更多相关《Photoshop在网页制作中的应用-吴明宇.doc（22页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-datePhotoshop在网页制作中的应用-吴明宇浅析计算机安全与防范措施毕业设计论文Photoshop在网页设计中的应用 作者姓名： 吴明宇 入学年月： 2011年9月 学科专业： 计算机 应用技术 指导老师： 梁胶东 2015 年 09 月 09 日摘要随着计算机技术的发展，图像处理以渗透我们的学习、生活和工作等各个方面。图像以其视觉上的冲击力，已成为了现代社会传递信息

2、的首选。不论是在高级文化中还是在技工文化中，Photoshop课程都是非常重要的，Photoshop是图像处理软件中一款比较优秀的软件，我们运用它可以随心所欲的制作出符合自己意图的各种图片，随着电脑的大众化普及，越来越多的人们开始接触电脑，接触图像处理软件，并利用Photoshop等软件制作具有自己个性的桌面，电子相册等，来丰富自己的业余生活。在制作各种有特色的图片的同时，需要增加各种点缀来美化自己的图片。本文利用了Adobe公司的Photoshop软件，对计算机合成文件进行了一些尝试性的设计，设计出一幅图，对Photoshop中一些相关的工具进行了详细的讲解。概述Photoshop的简介Ad

3、obe Photoshop，简称“PS”（其程序图标便是“PS” ）是一个由Adobe Systems开发和发行的图像处理软件。多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用，实际上，Photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版等各方面都有涉及。Photoshop掌握绘画的基础理论，学习色彩原理和选取颜色、范围选取、工具与绘图、图像编辑、控制图像色彩和色调、使用图层、路径、通道和蒙板的应用、滤镜等。Photoshop的平面设计Photoshop在平面设计中扮演着极其重要的角色，它广泛应用于我们日常生活和学习工作的各个方面，首先浅

4、谈一下Photoshop平面设计软件具有特点和常用的设计原则。设计特点：根据Photoshop的功能和作用，总结其明显的特点。用计算机代替传统的设计工具：现代平面设计以计算机作为主要创作工具，利用 Photoshop设计软件提供的强大的工具和菜单功能，同时结合了各种传统绘画工具的特点，又能体现多种新的艺术风格，使创作技法不断推陈出新。信息处理能力强大、快速：Photoshop 软件在文字录入、图像扫描、图像存储、图像编辑、特效处理等方面具有超强的处理能力，同时在图文混排图像输出等方面的操作方便快捷。 设计效果所见即所得，修改快捷、方便。设计原则：Phtoshop 现代平面设计的原则是根据平面设

5、计的性质和目的，针对平面设计的特点进行制作，它一般遵循的原则如下。整体与局部相统一原则：Phtoshop平面设计的根本目的是通过平面设计作品为人们传播直观的信息，使人们获得美感享受的同时获得大量直观的信息，充分表达用户要求的主题，设计师通过完美的平面设计形式表达符合主题的思想内容，这也是平面设计的根基，这就要求设计师在设计中强化整体布局，合理突出局部，使整体与局部合理地统一，使作品取得独特的社会与艺术价值，整体与局部合理地统一，就是设计师在平面设计中要强化版面各种排版要素在版面中结构与色彩具有相互关联性，通过版面的文图间的整体组合与协调性的编排，使版面更具秩序美、条理美，从而获得更好的视觉效果

6、，力求作品的尽善尽美。1.1网站Logo图标的制作Logo图标是一个网站的形象标志。在当今品牌时代,一个优秀的Logo图标,不但能点缀界面,而且还可以加深浏览者对该网站的印象,提高网站的知名度。Photoshop提供了矢量图绘制功能。使用钢笔(或形状)工具,可直接绘制出矢量线条;也可以首先建立选区,再通过路径调板上的“将选区转化为路径”按钮,实现矢量线条的绘制。然后,通过路径调板上的“填充路径”按钮,为路径填充上颜色。最终实现矢量图形的绘制。使用这种方法制作出的Logo图标,具有任意放大不失真的优点。1.2网页顶部图片制作网页顶部图片一般位于网页的顶端,同时包含了网站Logo图标和网站名称等重

7、要信息。此图片的制作工作,在网页设计中占有举足轻重的地位。在Photoshop环境下,先把网站Logo图标的图像复制到顶部图文件中,并将其调至背景层上方;然后,在图层调板上按“添加图层蒙版”按钮,为该层添加图层蒙版;再利用画笔或渐变工具在图层蒙版上处理,使两层图片实现“无缝”衔接。最后利用文字工具添加网站标题;将文件保存成JPG文件完成顶部图片制作的同时,将文件另存为PSD文件,保留各图层的图层信息,以便将来对顶部图片的再编辑。1.3网页背景图片的制作网页背景图片是网页制作过程中不可缺少的基本元素之一,是网页美工的基础。GIF和JPEG是网页制作中最常见的两种图像文件格式。在Photoshop

8、环境下,可通过“图像/模式/.”命令,将图像文件转换成相应的颜色模式;然后,在保存文件时的“格式”选择项中,选取相应的文件格式进行保存,即可实现两种文件格式间的相互转换。同时,GIF文件还支持图片背景透明效果。2、网页中的动画制作在网页制作过程中,动画制作和图片制作占有着同样重要的地位。精美的动画不但能美化网页,而且还可以增加网页的信息容量。Photoshop所整合的Imag eReady软件包,可以方便地制作出GIF和SWF动画。其中GIF动画具有文件体积小、IE支持稳定、网络传输速度快等优点,被广泛应用于网页制作。下面通过一个简单的动画制作实例,介绍如何利用Imag eReady来创建动画

9、。在ImageReady环境下打开两张GIF格式的素材图片(素材1是睁着眼睛的人物;素材2是闭着眼睛的人物,其它部位完全相同),并通过“窗口/动画”打开动画调板。把素材2文件中的人物图层,复制到素材1文件中,并将该图层命名为“图层2”;在动画调板上点击“复制当前帧”按钮,复制一个动画帧;在动画调板中选中第1帧,在图层调板中隐藏“图层2”的显示,并在第1帧下方的“选择帧延迟时间”设置为“1秒”;然后选择第2帧,在图层调板中将“图层2”显示出来;在动画调板上,设置循环次数为“一直有效”;点击动画调板上的“播放/停止”按钮,即可预览动画效果(每隔1秒钟,人物眨一下眼睛);最后,执行菜单“文件/将优化

10、结果存储为”命令,打开“将优化结果存储为”对话框,将“保存类型”设为“*.gif”,点击“保存”,即可生成GIF动画。利用Photoshop制作SWF动画,与上述的制作GIF动画十分相似,仅在保存文件时有所不同，预览动画后,执行菜单“文件/导出/MacromediaRFlashTMSWF”,即可生成SWF动画。3、设计简单WEB页面设计WEB页的软件有很多,但是大部分的专业设计师还是喜欢使用Photoshop来进行初稿设计。因为在Photoshop环境中,进行彩色搭配十分方便、直观,将其用于网页制作的初稿设计上是极为合理。首先用Photoshop把整个页面的大体轮廓设计出来,可保留各图层信息,

11、因为在利用切片工具进行切割图片时,可以基于图层进行切割。相应的就产生了流行于网络的PSD网页模板,这种网页模板大多是利用Photoshop来进行设计的。大体轮廓做好之后,利用切片工具和切片选择工具,对图像进行分割,将文件分割成若干个小的图片组切割图像的原因是在浏览器中,一组小幅图像比单个大幅图像下载起来要快速得多。运行ImageReady环境,创建动画效果,使部分图像动起来。同时创建网站地图定义交互区域,以及翻转图片等。最后将文件进行优化,并存储为网页文件格式。利用Photoshop设计WEB页面时,也可以通过第三方的软件来配合设计。如常见的网页制作软件Dreamweaver、FrontPag

12、e等。首先利用Photoshop设计出大体轮廓,并进行切片切割,保存成网页文件;然后再利用第三方软件来对网页文件进行后期处理、优化,这种做法也被广大的网页设计人员所采用。4、网站改版网站改版可以保持网站的新鲜感,吸引更多的浏览者。而网站中往往存在着大量的图像文件(如顶部图片、背景图片、GIF动画图像等),增加了网站改版的难度。利用Photoshop提供的图层信息、动作调板,以及任务自动化处理等功能,可以简化操作、提高效率。4.1使用图层信息在网页图像制作过程中,合理保存图层信息可以简化图像文件的再编辑。在生成网页素材图像文件的同时,可通过菜单“文件/存储为”命令,打开“存储为”对话框,在“格式

13、”下拉项中选择“Photoshop(*.psd)”格式,进行保存。再编辑图像文件时,可以打开相应的PSD格式文件,可有针对性的对相应图层进行编辑。4.2使用动作调板动作可将用户的操作步骤和设置进行记录,在对其它图像文件进行相同操作时,只需单击这个动作按钮,就可以完成同样的操作。打开图像文件,并通过“窗口”显示出动作调板;单击动作调板上的“创建新动作”按钮,填充相应的“名称”和“序列”后,单击“记录”按钮,即可开始录制新动作;然后开始对当前图像文件进行编辑,编辑完成后,单击动作调板上的“停止/播放记录”按钮,这样就完成了新动作的创建。再打开其它图像文件,在动作调板上选择相应的动作,单击“播放动作

14、”按钮,就可以对该图像文件进行相同的操作。4.3使用自动化批处理命令自动化批处理命令可以对文件夹或子文件夹中的所有图像文件进行播放动作。主要用于对多个图像文件进行相同操作,从而简化繁重的重复性工作。首先将需要处理的图像文件放至同一文件夹(源文件夹)中,并新建一个文件夹(目标文件夹)用于存放目标文件。打开动作调板,选择相应的动作;执行菜单“文件/自动/批处理”命令,打开“批处理”对话框,将“源”设置为“文件夹”,并单击“选取”浏览选取源文件夹;再将“目的”设置为“文件夹”,单击“选取”浏览选取目标文件夹;单击“好”按钮,Photoshop即可自动完成批处理工作。5、创建WEB照片画廊在Photo

15、shop环境下,用户可以直接创建网页形式的WEB照片画廊。它有个包含缩略图片的主页和若干包含全尺寸图像的画廊页,通过链接可以方便地访问各个页面。执行菜单“文件/自动/WEB照片画廊”命令,打开“WEB”照片画廊”对话框,选择一种网站的“样式”,并可选择填写“电子邮件地址”信结束语息。选择源图像项中的“使用”项为“文件夹”,并“浏览”指定图像文件夹;然后,设置“目的”按钮选择网页的存放位置;单击“好”按钮,即可完成WEB照片画廊的制作。Photoshop在网页制作中的应用还有很多,如导航栏设计、按钮设计等方面的内容,本文没有全部进行详细描述,读者可以参阅相关书籍。希望通过本文对Photoshop在网页制作中常见应用的介绍,能够起到抛砖引玉的效果。 参考文献1Photoshop7.0平面设计完全手册.北京:清华大学出版社,2002.92adobPhotoshop图像设计教程.北京:人民邮电出版社,2002.43StephenRomaniello.PhotoshopCS从入门到精通.北京:电子工业出版社,2004.7-