2009年第3期总第144期
林区教学
Teach i n g of Forestry R eg i o n
N o .32009G eneral N o .144
应用Photoshop 进行网页制作
刘  宇
(绥化学院计算机科学与技术系，黑龙江绥化152061)
摘 要:Photoshop 是一款功能强大的图像处理软件，主要应用于平面设计。介绍应用Pho toshop 解决网页制作中的各种问题。
关键词:Photo s hop ；网页制作；应用
中图分类号:TP317  文献标志码:A    文章编号:1008-6714(2009)03-0081-02
收稿日期:2009-01-23
作者简介：刘宇(1984-)，男，黑龙江绥化人，从事计算机软件研究。
网络发展离不开网页的作用，网页作为网络发展中最
主要的元素，在其中起到了决定性的作用。随着网络的发展，运用于网页制作的开发软件也日益增多，主要介绍Photoshop 在网页制作中的具体应用。1 利用Pho t oshop 处理网页中的图元素1.1 Logo 图标的制作
Logo 图标是一个网站的形象标志。在当今品牌时代，一个优秀的Logo 图标，不但能点缀界面，而且还可以加深浏览者对该网站的印象，提高网站的知名度。Photoshop 提供了矢量图绘制功能。使用钢笔(或形状)工具，可直接绘制出矢量线条；也可以首先建立选区，再通过路径调板上的 将选区转化为路径 按钮，实现矢量线条的绘制。然后，通过路径调板上的 填充路径 按钮，为路径填充上颜，最终实现矢量图形的绘制。使用这种方法制作出的Logo 图标，具有任意放大不失真的优点。1.2 网页中按钮的制作
按钮是网页中经常需要使用的素材，漂亮的按钮必将给网站增添不少彩，使网页更加精美，有会随着鼠标的接触而变的按钮，还有立体按钮、水晶按钮、发光按钮等等。而这些按钮的制作最常使用的工具是Phot osho p 。1.3 网页顶部图片制作
网页顶部图片一般位于网页的顶端，同时包含了网站Logo 图标和网站名称等重要信息。此图片的制作
工作，在网页设计中占有举足轻重的地位。在Phot osho p 环境下，先把网站Logo 图标的图像复制到顶部图片文件中，并将其调至背景层上方；然后，在图层调板上按 添加图层蒙版 按钮，为该层添加图层蒙版；再利用画笔或渐变工具在图层蒙版上处理，使两层图片实现 无缝 衔接。最后利用文字工具添加网站标题；将文件保存成J PG 文件完成顶部图片制作的同时，将文件另存为PS D 文件，保留各图层的图层信息，以便将来对顶部图片的再编辑。
1.4 网页背景图片的制作
网页背景图片是网页制作过程中不可缺少的基本元素之一，是网页美工的基础。G I F 和J PEG 是网页制作中最常见的两种图像文件格式。在Photoshop 环境下，可通过 图像/模式/... 命令，将图像文件转换成相应的颜模式；然后，在保存文件时的 格式 选择项中，选取相应的文件格式进行保存，即可实现两种文件格式间的相互转换。同时,G I F 文件还支持图片背景透明效果。1.5 网页底纹处理
进行网页设计时，一般可以采用固定的背景做底，或指定一幅图像作为背景底纹，使做出来的网页相比之下更为生动。用图像做底纹是将该图像做上下左右四个方向的连续复制，使之充满整个屏幕，因此做背景的图案必须是 无缝 的，即该图像的上下左右边缘必须能相互融合，平滑过渡，底纹无明显的图像边缘或方块拼图状。用Photoshop 进行背景图处理可以很方便地生成这种无缝图，具体做法是：打开一幅用于底纹的图像，选定全图，用offset 滤镜将该图像向左上移动半幅幅面，并保持环绕方式，这样
原先图像的上边与下边、左边与右边将移到新图像的中间位置并互相衔接，形成水平与垂直两条明显的分隔线。然后，用图章工具，将分隔线两边的图像小心地复制到分隔线上，将分隔线平滑地覆盖掉(注意不要破坏新图像的边缘)。经过反复处理后，图像的边界即可彻底融合，形成可用于网页背景的无缝图。
1.6 前景与背景的配合
网页是一个有机的整体，其前景与背景必须紧密配合，效果才能协调美观。网页上的图像都是一个矩形区域，采用图案的边缘部分与背景会有一定的差异，用这样的广块图置于网页中，必然形成前景与背景之间的突兀变化，即前景图好像是打在背景图上的一块 补丁 ，影响了画面的整体效果。因此，必须对前景图的边缘及图中的空白部分进行相应处理，使之与背景融合为一体。用Photo  shop 处理前景图时，通常采用透明、羽化及过渡填充等技巧来实现这一目标。当前景图彩要求较低、图案周围留白较多时，可选用透明的G I F 格式作为图像最终应用格式，即选取图像中的有效部分，复制到一张大小适中的透
!
81!
明背景图层上，将该图存成透明底G I F格式文件即可。对图像素较多，或边界与背景差异太大的情况，
应选用J PEG格式作为图像最终应用格式，在图像边缘做适当宽度的羽化或者做从前景到背景的过渡填充，从而消除前景与背景之间的突兀变化，形成协调的网页布局。
2 利用I mage R eady制作网页中的动画
在网页制作过程中，动画制作和图片制作占有同样重要的地位。精美的动画不但能美化网页，而且还可以增加网页的信息容量。Photoshop所整合的I m age Ready软件包，可以方便地制作出G I F和S W F动画。其中G I F动画具有文件体积小、I E支持稳定、网络传输速度快等优点，被广泛应用于网页制作。
3 设计简单W EB页面
最简单的网页制作软件设计W EB页面的软件有很多，但是大部分的专业设计师还是喜欢使用Phot oshop进行初稿设计。因为在Pho toshop环境中，进行彩搭配十分方便、直观，将其用于网页制作的初稿设计上是极为合理的。
首先用Photoshop把整个页面的大体轮廓设计出来，可保留各图层信息，因为在利用切片工具进行切割图片时，可以基于图层进行切割。相应的就产生了流行于网络的PSD网页模板，这种网页模板大多是利用Photoshop进行设计的。大体轮廓做好之后，利用切片工具和切片选择工具，对图像进行分割，将文件分割成若干个小的图片组。切割图像的原因是在浏览器中，一组小幅图像比单个大幅图像下载起来要快速得多。运行I m a ge Ready环境，创建动画效果，使部分图像动起来。同时创建网站地图定义交互区域，以及翻转图片等。最后将文件进行优化，并存储为网页文件格式。
利用Photoshop设计WEB页面时，也可以通过第三方的软件来配合设计。如常见的网页制作软件D r ea mw eav er、Fr on t Page等。首先利用Phot osho p设计出大体轮廓，并进行切片切割，保存成网页文件；然后再利用第三方软件对网页文件进行后期处理、优化，这种做法也被广大的网页设计人员所采用。
4 网站改版
网站改版可以保持网站的新鲜感，吸引更多的浏览者。而网站中往往存在着大量的图像文件(如顶部图片、背景图片、G I F动画图像等)，增加了网站改版的难度。利用Phot osho p提供的图层信息、动作调板，以及任务自动化处理等功能，可以简化操作，提高效率。
4.1 使用图层信息
在网页图像制作过程中，合理保存图层信息可以简化图像文件的再编辑。在生成网页素材图像文件的同时，可通过菜单 文件/存储为命令，打开 存储为对话框，在 格式下拉项中选择 Phot osho p(*.psd)格式，进行保存。再编辑图像文件时，可以打开相应的PSD格式文件，可有针对性地对相应图层进行编辑。4.2 使用动作调板
动作可将用户的操作步骤和设置进行记录，再对其他图像文件进行相同操作时，只需单击这个动作按钮，
就可以完成同样的操作。打开图像文件，并通过 窗口显示出动作调板；单击动作调板上的 创建新动作按钮，填充相应的 名称和 序列后，单击 记录按钮，即可开始录制新动作；然后开始对当前图像文件进行编辑，编辑完成后，单击动作调板上的 停止/播放记录按钮，这样就完成了新动作的创建。再打开其他图像文件，在动作调板上选择相应的动作，单击 播放动作按钮，就可以对该图像文件进行相同的操作。
4.3 使用自动化批处理命令
自动化批处理命令可以对文件夹或子文件夹中的所有图像文件进行播放动作。主要用于对多个图像文件进行相同操作，从而简化繁重的重复性工作。
首先将需要处理的图像文件放至同一文件夹(源文件夹)中，并新建一个文件夹(目标文件夹)用于存放目标文件。打开动作调板，选择相应的动作；执行菜单 文件/自动/批处理∀ 命令，打开 批处理对话框，将 源设置为 文件夹，并单击 选取浏览选取源文件夹；再将 目的设置为 文件夹，单击 选取浏览选取目标文件夹；单击 好按钮,Photoshop即可自动完成批处理工作。
5 创建W EB照片画廊
在Photoshop环境下，用户可以直接创建网页形式的WEB照片画廊。它有一个包含缩略图片的主页和若
干包含全尺寸图像的画廊页，通过链接可以方便地访问各个页面。执行菜单 文件/自动/WEB照片画廊∀ 命令，打开 W EB照片画廊对话框，选择一种网站的 样式，并可选择填写 地址信息；选择源图像项中的 使用项为 文件夹，并 浏览指定图像文件夹；然后，设置 目的按钮选择网页的存放位置；单击 好按钮，即可完成W EB照片画廊的制作。
6 结束语
Photoshop在网页制作中的应用还有很多，如导航栏设计、按钮设计等方面的内容，本文没有全部进行详细描述。仅对Photoshop在网页制作中常见的应用作了简单介绍，希望能够起到抛砖引玉的效果。
参考文献:
[1]马忠梅，籍顺心.Photoshop在设计中的应用[M].北京:
北京航空航天大学出版社,2004.
[2]浮木.Adobe Pho t o s hop&I m ag e R eady W eb图像设计高级
教程[M].北京：人民邮电出版社,2002.
[3]Stephen R o m an iell o.Pho t o s hop CS从入门到精通[M].魏
海萍，等，译.北京：电子工业出版社,2004.
[4]沈建，翟骁曙.Pho toshop设计与后期处理[M].北京：清
华大学出版社,2004.
#责任编辑：李海波∃
!
82 !

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。