浅谈Photoshop在网页制作中的应用.docVIP

浅谈Photoshop在网页制作中的应用 　　摘 要：随着网络技术的快速发展，基于网络而开展的远程教育、企业宣传等都离不开网站的支持。Photoshop是一款功能强大的图像处理软件，被广泛应用于各行各业。本文详细介绍了Photoshop在网页制作中的各种应用方法，对网页制作具有一定的指导意义。 　　关键词：Photoshop 网页制作 图像 　　0 引言 　　信息化时代，网络技术得到快速发展。网络发展离不开网页的作用，网页作为网络发展中最主要的元素，在其中起到了决定性的作用。网页制作是介于网像处理技术和编程技术之间的学科，网页作为一种媒体.必须要有一定的艺术感染力。网页制作的工具很多，Photoshop因其图像处理的强大功能在网页制作中也发挥着巨大的作用。正确使用Photoshop处理图像可以增加网页的美观，提高网页的下载速度，提高网页的制作效率。 　　1 网页中的图像制作 　　1.1 网站Logo图标的制作 　　Logo图标是一个网站的形象标志。一个优秀的Logo图标，不但能点缀界面，而且还可以加深浏览者对该网站的印象，提高网站的点击率和知名度。 　　Photoshop提供了矢量图绘制功能。使用钢笔（ 或形状）工具，可直接绘制出矢量线条；也可以首先建立选区，再通过路径调板上的“将选区转化为路径”按钮，实现矢量线条的绘制。然后，通过路径调板上的“ 填充路径”按钮，为路径填充上颜色。最终实现矢量图形的绘制。使用这种方法制作出的Logo图标，具有任意放大不失真的优点。 　　1.2 网页顶部图片制作 　　网页顶部图片一般位于网页的顶端，同时包含了网站Logo图标和网站名称等重要信息。此图片的制作工作，在网页设计中占有举足轻重的地位。 　　在Photoshop环境下，先把网站Logo图标的图像复制到顶部图片文件中，并将其调至背景层上方；然后，在图层调板上按“添加图层蒙版”按钮，为该层添加图层蒙版；再利用画笔或渐变工具在图层蒙版上处理，使两层图片实现“无缝”衔接。最后利用文字工具添加网站标题；将文件保存成JPG文件完成顶部图片制作的同时，将文件另存为PSD文件，保留各图层的图层信息，以便将来对顶部图片的再编辑。 　　1.3 网页背景图片的制作 　　网页背景图片是网页制作过程中不可缺少的基本元素之一，是网页美工的基础。 　　GIF和JPEG是网页制作中最常见的两种图像文件格式。在Photoshop环境下，可通过“图像/模式/...”命令，将图像文件转换成相应的颜色模式；然后，在保存文件时的“格式”选择项中，选取相应的文件格式进行保存，即可实现两种文件格式间的相互转换。同时，GIF文件还支持图片背景透明效果。 　　1.4 网页中按钮的制作 　　按钮是网页中经常需要使用的素材，漂亮的按钮必将给网站增添不少色彩，使网页更加精美，有会随着鼠标的接触而变色的按钮，还有立体按钮、水晶按钮、发光按钮等等。而这些按钮的制作最常使用的工具是Photoshop。 　　2 网页中的动画制作 　　在网页制作过程中，动画制作和图片制作占有着同样重要的地位。精美的动画不但能美化网页，而且还可以增加网页的信息容量。Photoshop所整合的ImageReady软件包，可以方便地制作出GIF和SWF动画。其中GIF动画具有文件体积小、IE支持稳定、网络传输速度快等优点，被广泛应用于网页制作。 　　这里是一个简单的动画制作实例，介绍利用ImageReady来创建动画的做法。 　　在ImageReady环境下打开两张GIF格式的素材图片（素材1是睁着眼睛的人物；素材2是闭着眼睛的人物，其它部位完全相同），并通过“窗口/动画”打开动画调板。把素材2文件中的人物图层，复制到素材1文件中，并将该图层命名为“图层2”；在动画调板上点击“复制当前帧”按钮，复制一个动画帧；在动画调板中选中第1帧，在图层调板中隐藏“图层2”的显示，并在第1帧下方的“选择帧延迟时间”设置为“1秒”；然后选择第2帧，在图层调板中将“图层2”显示出来；在动画调板上，设置循环次数为“一直有效”；点击动画调板上的“播放/停止”按钮，即可预览动画效果（每隔1秒钟，人物眨一下眼睛）；最后，执行菜单“文件/将优化结果存储为”命令，打开“将优化结果存储为”对话框，将“保存类型”设为“*.gif”，点击“保存”，即可生成GIF动画。 利用Photoshop制作SWF动画，与上述的制作GIF动画十分相似，仅在保存文件时有所不同。预览动画后，执行菜单“文件 /导出/MacromediaRFlashTM SWF”，即可生成SWF动画。 　　3 设计简单WEB页面 　　设计WEB页的软件有很多，但是大部分的专业设计师还是喜欢使用Photoshop来进行初稿设计。因为在Photoshop环