Photoshop 在网页制作中的应用

王春艳 石家庄理工职业学院 050228

张彦芳 石家庄职工大学 050200

【文章摘要】

信息化时代里，越来越多的人借助于互联网交流联络、办公学习，网页浏览成了现代人必不可少的需求。在网络市场竞争日益激烈的当下，网站制作者们更加注重网站的图标设计、内容质量、页面排版，这些直接关系到观者对该网站的兴趣与网站点击率。Photoshop 在网页制作中起着不可替代的作用。Photoshop 简称“ps”，是网页图像处理软件，主要处理以像素所构成的数字图像，在网页制作中借助其编修与绘图工具，可以有效的进行图片编辑工作。本文就Photoshop在网页制作中的应用进行了简要分析。

【关键词】

Photoshop ；网页制作

1 网站logo 图标制作

一个网站留给观者的第一印象大多来自其logo 图标的魅力。网站中的logo 图标有如中国古代诗歌的诗眼，也有如人的双目，是网站的凝聚点与核心。作为网站的形象标志，要想让观者在众多网站中一眼相中，必须具备新颖独特、简练明朗、且能够完美突出网站个性的设计特征。如“腾讯印象”中“image”的含义，“m”中间的两个门为两只企鹅手牵手，企鹅大小一致，折叠后一只企鹅可以印出另一只企鹅，表示“印象”；色泽的多彩表示多元化的特点，又通过“m”（main）表示出QQ 是主要平台；“腾讯印象”四字使用“腾讯网”字体，引用母品牌元素，外框形状为文字泡泡，象征了沟通。再如人人网，其logo是两个抽象的变形人字组成，“人”字成圈形寓意每个人的人际圈，同时两个人字中间出现交集，寓意人人网是人与人之间相互沟通、分享的平台；分享真实，沟通快乐。诸如腾讯网、人人网、新浪网等众多优秀的logo 设计，不仅仅是起到点缀界面的作用，更加深了观者对该网站的第一印象，无形之中提高了网站的知名度。运用Photoshop 中的钢笔工具可以绘制出矢量图，再通过路径调板上的“填充路径”为路径填充颜色，同时也可将图片保存为较小的JPG 格式，使得文件过大的矢量图也可上传至网页。这种方法制作出来的logo 图标有任意放大缩小且不失真的特点，使得企业标志不仅是局限于网站应用，也可放大到海报上，缩小至名片上。

2 网站元素的色彩搭配

在网站页面设计中，色彩的搭配深有讲究。和谐美好的色彩搭配可以加深浏览者对网页的整体印象。网页设计中色彩技巧的把握要注意两点：一是色彩与网页整体的照应关系，二是色彩和色彩自身的对比关系。色彩与网页整体的照应关系具体在于首先要确定一种能够表现网站主题的主体色，在主体色的选配上要注意应符合网站内容与传达的情感倾向。如红色代表热情、蓝色代表忧郁、黑色代表深沉、白色代表简约大方。如果是情感类的网站可选用喜庆热烈的红色为主色调，心理咨询类的网站可选配简约大方的白色，给人以轻快感，诗歌散文类具有文艺气息的网站可选配青绿色为主色，以显示朝气蓬勃的气息。主体色确定后，接着要考虑色彩和色彩自身的对比。所谓色彩与色彩的对比，即副色与主色的对比，副色与副色之间的对比，色彩使用的深浅对比、轻重对比、点面对比、繁简对比、雅俗对比、反差对比。其包括传统、稳重与古典的搭配，柔和、明亮及爽朗的搭配，冷静、自然的搭配，简单、时尚与高雅的搭配，活泼、动感有趣的搭配，运动与轻快的搭配等。在页面设计过程中还应注意的是页面的统一、连贯、分割、对比与和谐，充分考虑到页面的整体效果，统一风格，内容连贯，对比鲜明。在了解这些搭配细节后，运用Photoshop 进行色彩调节，网页整体色彩所呈现的才是给人以美的享受的最佳视效。

3 网页背景图片的制作

网页背景图片是网页美工的基础，也是网页制作过程中的基本元素之一。简单的制作方法即在网页制作设计好之后，使用切片工具划分，再用Dreamweaver 制作表格，最后将图片逐一加入单元格，以背景或是图片显示出来。其次，在制作背景图片时可以选择有规则平铺与不规则平铺两种方式。有规则平铺：首先选定一张PNG 图案，使用“编辑-- 自定义图案”存成自定义图案，然后“编辑-- 填充”，将自定义图案填充。不规则平铺：同样先选定一张PNG 图案，使用“编辑-- 自定义画笔预设”存成自定义画笔， 然后再在画笔窗口里调整分布。在制作过程中需要注意__的是如若想得到图案重叠的效果，散布数值要小，数量要稍大，且在“形态动态”里调节“角度抖动”可达到不同方向的视觉效果。

4 网页中背景底纹的制作

网页制作中在选用一幅图像作为背景底纹时可以运用Photoshop 进行背景图处理，先选定一张用于底纹的图像，通过滤镜将该图像向左上移动半幅幅面，且保持环绕，形成水平与垂直两条分割线后使用图章工具将分割线两边的图像复制到分割线上即可。由此能够迅速快捷的生成上下左右四个方向的无缝图。用Photoshop处理的这种无缝图，图像边界的彻底融合可以使得底纹无明显的图像边缘或方块拼图状，上下左右四部分边缘之间相互融合、平滑过渡。底纹完成后还可通过文字工具添加网站标题，将文件另存为PSD 文件，保留各图层信息，可以在以后对图片进行再编辑。

5 结语

Photoshop 是一款功能强大的图像处理软件，已被应用于平面设计、广告摄影、影像创意等社会各行业中。在网页制作中，Photoshop 更是必不可少的网页图像处理软件，加之网络的普及，促使更多的人开始掌握Photoshop 的运用。网络的发展离不开网页的作用，作为网络发展中最主要的元素，网页在其中起到了决定性的作用，网页制作也越来越受到设计者们的高度关注。网页制作犹如画画，首先要想象出网站的大概图框，以及在框架里填充实物，然后通过Photoshop 的工具进行设计，紧接着排版成静态页面，编辑代码。而在整个制作过程中，Photoshop 对于网站logo 的设计、网站背景图片的制作、网站背景底纹的制作、网站元素的色彩搭配等都起着重要作用。

【参考文献】

[1] 张志明, 段红玉.Photoshop 在网页制作中的应用[J]. 科技信息( 学术版). 2006(10)

[2] 李进军, 张倩玲. 巧用PhotoshopCS 设计网页版式[J]. 科技信息( 学术研究). 2008(15)

[3] 边新志.Photoshop 教学中上机实验的探讨和总结[J]. 中国西部科技.2006(11)

[4] 朱明秀. 浅析Photoshop 在网页设计中的技巧及应用[J]. 大众科技.2009(10)

[5] 郑晶晶.Photoshop 学习策略分析[J]. 宁德师专学报( 自然科学版).2009(02)