论文部分内容阅读
摘 要:随着网络技术的快速发展,基于网络而开展的远程教育、企业宣传等都离不开网站的支持。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环境中,进行彩色搭配十分方便、直观,将其用于网页制作的初稿设计上是极为合理。
第一步:用Photoshop把整个页面的大体轮廓设计出来,可保留各图层信息,因为在利用切片工具进行切割图片时,可以基于图层进行切割。相应的就产生了流行于网络的PSD网页模板,这种网页模板大多是利用Photoshop来进行设计的。大体轮廓做好之后,利用切片工具和切片选择工具,对图像进行分割,将文件分割成若干个小的图片组。切割图像的原因是在浏览器中,一组小幅图像比单个大幅图像下载起来要快速得多。运行 ImageReady环境,创建动画效果,使部分图像动起来。第二步:创建网站地图定义交互区域,以及翻转图片等。第三步:将文件进行优化,并存储为网页文件格式。
利用Photoshop设计WEB页面时,也可以通过第三方的软件来配合设计。如常见的网页制作软件Dreamweaver、FrontPage等。
4 前景与背景的配合 网页是一个有机整体,其前景与背景必须紧密配合,效果才能协调美观。网页上的图像都是一个矩型区域,采用图案的边缘部分与背景会有一定的差异,用这样的广块图置于网页中,必然形成前景与背景之间的突兀变化,即前景图好象是打在背景图上的一块“补丁”,影响了画面的整体效果。因此,必须对前景图的边缘及图中的空白部分进行相应处理,使之与背景融合为一体。用Photoshop处理前景图时,通常采用透明、羽化及过渡填充等技术来实现这一目标。当前景图色彩要求较低、图案周围留白较多时,可选用透明的GIF格式做为图像应用格式,即选取图像中的有效部分,复制到一张大小适中的透明背景图层上,将该图存成透明底GIF格式文件即可。对图像色素较多,或边界与背景差异太大的情况,应选用JPEG格式做为图像最终应用格式,在图像边缘做适当宽度的羽化或者做从前景到背景的过渡填充,从而消除前景与背景之间的突兀变化,形成协调的网页布局。
5 提高网络传输的效率
制作网页时,不仅要考虑图像的艺术性,也要注意其传输效率。图像做得越大越精细,则在网络上的传输时间就越长,从而降低用户访问网站的兴趣。用Photoshop处理可以提高图像的传输效率:一是采用交错格式的GIF文件,该类文件不增加图像的额外尺寸,但在视觉上会有传输速度略快的感觉;二是对图像进行减色处理,去除图像上不必要的颜色,使图像更为小巧,但这样做的结果可能会造成图像质量的下降;三是对图像进行分块,将一幅大图像分割成数块小图像,这样就可以充分利用网络带宽的资源,多幅图像同时传送,以提高传输效率,这是网络上用得较多的方法。
6 结束语
Photoshop在网页制作中的应用还有很多,如导航栏设计等方面的内容。应用Photoshop制作网页是动手性很强的工作,需要制作人员不断积累经验,熟练掌握各类技巧,借鉴他人好的做法,这样才能能博采众长,不断提高网页制作水平。
参考文献
[1]丁晓燕 Photoshop在网页制作中的应用 《计算机时代》 200 第8期 - 维普资讯网
[2]徐国栋 王利青浅谈photoshop在网页制作中的应用 《实验室科学》 2005 第6期
作者简介:万玉萍(1973.02-),女,教师,长期从事中职计算机教学工作。
关键词: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环境中,进行彩色搭配十分方便、直观,将其用于网页制作的初稿设计上是极为合理。
第一步:用Photoshop把整个页面的大体轮廓设计出来,可保留各图层信息,因为在利用切片工具进行切割图片时,可以基于图层进行切割。相应的就产生了流行于网络的PSD网页模板,这种网页模板大多是利用Photoshop来进行设计的。大体轮廓做好之后,利用切片工具和切片选择工具,对图像进行分割,将文件分割成若干个小的图片组。切割图像的原因是在浏览器中,一组小幅图像比单个大幅图像下载起来要快速得多。运行 ImageReady环境,创建动画效果,使部分图像动起来。第二步:创建网站地图定义交互区域,以及翻转图片等。第三步:将文件进行优化,并存储为网页文件格式。
利用Photoshop设计WEB页面时,也可以通过第三方的软件来配合设计。如常见的网页制作软件Dreamweaver、FrontPage等。
4 前景与背景的配合 网页是一个有机整体,其前景与背景必须紧密配合,效果才能协调美观。网页上的图像都是一个矩型区域,采用图案的边缘部分与背景会有一定的差异,用这样的广块图置于网页中,必然形成前景与背景之间的突兀变化,即前景图好象是打在背景图上的一块“补丁”,影响了画面的整体效果。因此,必须对前景图的边缘及图中的空白部分进行相应处理,使之与背景融合为一体。用Photoshop处理前景图时,通常采用透明、羽化及过渡填充等技术来实现这一目标。当前景图色彩要求较低、图案周围留白较多时,可选用透明的GIF格式做为图像应用格式,即选取图像中的有效部分,复制到一张大小适中的透明背景图层上,将该图存成透明底GIF格式文件即可。对图像色素较多,或边界与背景差异太大的情况,应选用JPEG格式做为图像最终应用格式,在图像边缘做适当宽度的羽化或者做从前景到背景的过渡填充,从而消除前景与背景之间的突兀变化,形成协调的网页布局。
5 提高网络传输的效率
制作网页时,不仅要考虑图像的艺术性,也要注意其传输效率。图像做得越大越精细,则在网络上的传输时间就越长,从而降低用户访问网站的兴趣。用Photoshop处理可以提高图像的传输效率:一是采用交错格式的GIF文件,该类文件不增加图像的额外尺寸,但在视觉上会有传输速度略快的感觉;二是对图像进行减色处理,去除图像上不必要的颜色,使图像更为小巧,但这样做的结果可能会造成图像质量的下降;三是对图像进行分块,将一幅大图像分割成数块小图像,这样就可以充分利用网络带宽的资源,多幅图像同时传送,以提高传输效率,这是网络上用得较多的方法。
6 结束语
Photoshop在网页制作中的应用还有很多,如导航栏设计等方面的内容。应用Photoshop制作网页是动手性很强的工作,需要制作人员不断积累经验,熟练掌握各类技巧,借鉴他人好的做法,这样才能能博采众长,不断提高网页制作水平。
参考文献
[1]丁晓燕 Photoshop在网页制作中的应用 《计算机时代》 200 第8期 - 维普资讯网
[2]徐国栋 王利青浅谈photoshop在网页制作中的应用 《实验室科学》 2005 第6期
作者简介:万玉萍(1973.02-),女,教师,长期从事中职计算机教学工作。