PhotoShop网页设计的技巧研究

张成忠

摘要：自改革开放以来，随着社会的发展，科技日新月异，网络已经成为人们生活中不可缺少的一部分，网页设计也越来越受到人们的追捧，其在网络发展过程中的重要作用亦日渐凸显出来。特别是近些年来，PhotoShop在网页设计中的应用越来越多，它在网页规划布局中起着不可替代的作用。文章首先简单介绍了PhotoShop在网页设计中的重要作用，让读者对PhotoShop有一定的了解，明白为什么学习PhotoShop，继而着重分析如何加强PhotoShop在网页设计中的应用，使其具有一定的技巧。

关键词：PhotoShop；网络；网页设计；技巧；研究

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）20-0152-03

Study on the Technique of PhotoShop Webpage Design

ZHANG Cheng-zhong

（Dehong Teachers College， Dehong 678400， China）

Abstract： since the reform and opening up， with the development of society， science and technology change rapidly， the network has become an indispensable part of people's life， Webpage design is becoming more and more popular， its important role in the network development process are also increasingly prominent. Especially in recent years， PhotoShop is used more and more in Webpage design， it plays an irreplaceable role in the Webpage layout. This paper first briefly introduces the important role of PhotoShop in Webpage design， so that the readers can have a certain understanding of PhotoShop， why to learn PhotoShop， then focuses on the analysis of how to strengthen the application of PhotoShop in the Webpage design， so it has certain skills.

Key words： PhotoShop； network； Webpage skills； research design

随着社会的发展，科技日新月异，人们已经进入网络高速发展的时代，大家在互联网上花费的时间越来越多，网页设计必然成为一个受人追捧的行业。网页设计不仅仅是一门技术活，还是一门艺术活，需要设计者具有一定的专业知识与技巧，这样才能使网页实用性强，也更加美观。如今，PhotoShop作为一种先进的图像处理软件，有很多优点：功能强大，易于人们学习，能够被广泛应用于网页设计，这些优点使之成为近些年来网页设计者的一大利器[1]。

1 PhotoShop在网页设计中的作用

PhotoShop在网页设计中起着至关重要的作用，它对网页的美观效果有着深刻的影响，特别是文字、图像以及文字与图像的有机结合。但是部分人对PhotoShop这个图像处理软件的认识还不足，不能够正确运用或者运用的时候不能充分发挥软件的优势，在此，我将通过自身实践的经验以及查阅文献资料的结果，叙述PhotoShop在网页设计中的重要意义，使人们加深对PhotoShop的研究。

1.1 PhotoShop输出图像，加快网页加载速度

人们在浏览网页的时候，都希望网页的加载速度快些，能够赶快加载出我们所需要的信息，节省不必要的时间。所以，优化网页的速度至关重要，此时，我们就可以利用PhotoShop输出图像来优化网速[2]。我将从以下三方面来进行阐述：

第一，网页设计者要把握图像的精度。读者在浏览网页时，由于显示器的特性，会有合适的图像精度，也就是会有合适的屏幕分辨率，有些人认为分辨率越高越好，其实不然，分辨率会影响加载的速度，两者是成反比的，分辨率越高，加载速度越慢，而且在大多数情况下，没必要用太高的分辨率，因此，网页设计者利用PhotoShop来正确把握图像的精度，优化网页速度。

第二，网页设计者要把握颜色深度。现在网页大部分图像文件都是gif格式的，这种图像的颜色深度越少，它所占的内存就越小，因此，在不影响读者浏览的情况下，减少这种图像文件的颜色深度，有利于降低文件所占的空间，从而提高了图像文件的加载速度。例如以下gif格式的图像文件：小按钮、背景图片等，这些图像都对色彩的要求都不高，可以适当的降低颜色深度，节省空间。最终，网页设计者利用PhotoShop处理这些图像文件，就可以在某种程度上优化网页速度。

第三，网页设计者要选择合适的图像格式[3]。一种图像格式可以采用不同的压缩方法，但是压缩后产生的显示效果差异也会很大，这时候就需要网页设计者根据不同的色彩需要来用不同的压缩方法压缩图像，如果所需要的图像颜色深度比较小，就可以采用压缩后输出为gif格式的文件，如果所需要的图像颜色深度比较大，就需要采用压缩后输出为jpg格式的文件。因此，网页设计者可以利用PhotoShop这一图像处理软件来加工图像，选择合适的图像格式进行输出，加快网页加载速度。

1.2 PhotoShop应用于网页布局

合理的网页布局不仅增加了网页的美观程度，更重要的是使人们感到舒适，能够很快的找到自己所需要的信息，节省时间，因此，网页布局在网页设计中是至关重要的。我将从以下三方面阐述PhotoShop在网页布局中的重要作用：

第一，网页设计者应用PhotoShop进行布局规划。PhotoShop可以在网页设计中布局多个图层，每个图层与每个图层之间可以是相互独立存在的，也可以是存在链接的，这样的操作，前者可以使设计者在设计网页时，随意移动图片位置；后者是让图片之间存在必然的联系，方便设计者进行系统设计。

第二，网页设计者应用PhotoShop掌握网页的布局要点。网页文档主要有两种像素规格，一种规格是1007*600的像素，另一种规格是708*800的像素，分辨率一般为72dpi。大多时候，很少有网站多于三屏的，即使是大型网站。为了使读者便于观看，网页的背景颜色往往与信息的颜色是相互协调的，同时为了避免出现浏览器不兼容的情况，耽误读者时间却没能其浏览网页，所以导航字体多用黑体，而正文字体多用宋体。要想用其他的字体来突显页面设计的个性，就需要网页设计者应用PhotoShop来处理，在PhotoShop中“制作”，然后“切分”。只要网页设计者利用PhotoShop把握好网页的布局要点，将会使自己设计的网页蓬荜生辉。

第三，网页设计者应用PhotoShop正确“切片”。网页设计有很多工具，目前最受人们喜爱并被广泛接受的工具是Dreamweaver，它的实质是将元素组合起来，例如在网页中出现的图片、声频、音频、文字等等。而用PhotoShop做完“切片”后，需要用Dreamweaver进行组合元素，要想充分组合这些元素，就要正确“切片”。如何正确“切片”呢？一方面是切片时要有合适的参考线，使切片后的结果能够协调统一，例如网页设计中有Banner和Logo时，应用PhotoShop切片，将大图像切分成基本相同的小图像，优化网页速度，然后在Dreamweaver中用Banner和Logo的源文档替换。另一方面是切片后，存为gif格式，这种格式占空间较小，也有利于提高页面的加载速度。

2 PhotoShop在网页设计中的应用技巧

通过上面对PhotoShop在网页设计中作用的叙述可以看出，PhotoShop作为一个强大的图像处理软件，网络设计者很有学习的必要，甚至是利用PhotoShop创造出属于自己风格的网页，赢得大家的认可。为此，我结合自身的经验以及查阅文献的结果，着重从以下几方面介绍PhotoShop在网页设计中的应用技巧。

2.1 网页构图

要想充分利用好PhotoShop来设计网页，就要了解一些网页的基本知识，例如网页构图[4]。通常网页包括以下几部分：Logo、导航、正文等等，因此，要规划好整个页面的构图，就需要网页设计者把握好Logo放在哪个区域，导航放在哪个区域，正文在什么位置更能吸引读者等，我们在浏览网页第一眼的时候，就能判断出这个网页是否布局合理，因为在构图不合理的情况下，人们会感到不舒服，观看起来别扭，这就是页面布局不合理导致的结果。

网页布局通常有以下几种类型：第一，方向式布局。电子科技、旅游自驾、商务通、汽车汽修等通常都用方向式布局，方向式布局又分为水平型、垂直型、斜向型三种框架。水平型框架是指将页面分为左右结构，左边是企业的Logo，导航等，右边是关于企业的正文。它的优势在于人们浏览页面时具有很强的整体感，布局简单大方，结构清晰，便于读者观看，节约时间。垂直型框架与水平型框架优势基本相同，唯一不同的就是它是上下结构。斜向型框架就比较个性些，有很多种情况，举一例说明，有的网页最上面是标题以及重要标志，而在网页的左右两侧确是关于网页内容的链接或者图片，中间是正文，在网页的最下面则是一些联系方式等辅助信息，这样的结构优势在于读者在浏览网页时，可操作性强，主次分明。第二，曲线式布局。曲线比较柔和，适合抒情，能够表达出一种浪漫的情怀，因此，它的优势是具有一种艺术感，适用于交友网站、教育教育等方面。第三，其他结构式布局。这样的布局相对没有规则，优势在于趋向表现自己的特性，适用于建筑设计、美术设计等方面。

2.2 PhotoShop处理简单图像

在了解网页构图后，就能合理布局，这时候就需要进一步细致的处理图片，将图片布置到网页中去。网页设计里面很多时候都会用到图片的某一部分，需要网页设计者掌握如何截取图片[5]。截图的方法有很多种，如果使用PhotoShop，那将会更加简便。首先，打开PhotoShop，然后找出原图片，在工具栏中选中所需要的工具，截取图片。倘若需要更加准确的截取，就在工具选项栏中找到“样式”，在“样式”里就可以设定需要的尺寸，例如“固定大小”，设定固定的宽度和高度，单击图像即可确定选区，用鼠标拖住选区移动到要截取的地方，即可获得截取的图片。单击“菜单-编辑-拷贝”，就可以复制图片，单击“菜单-文件-新建”，就可以新建画布，将刚刚复制的图片粘贴到新建的画布上，单击“菜单-编辑-粘贴”即可，最后保存图片。利用PhotoShop截图就算是完成了。

2.3 PhotoShop处理图像使其背景透明

运用PhotoShop处理图像，使其背景透明在网页设计中应用特别广泛，举一例说明，有些时候需要将一张图片中的人物抠出来放到另一个背景中，这就需要将人物图片的背景透明，只有这样，才能将这张人物图片中的人物与另一个背景融合，成为一体。网页设计者可以这样应用PhotoShop：首先打开PhotoShop，找出原图片，利用选取工具选中需要的图像，保留下来，倘若原图片是单一的背景颜色，那就能用魔棒工具选中背景颜色，单击“菜单-选择-反向”，利用反向选中需要保留的图片，然后同上述PhotoShop处理图像中复制的操作一样开始复制图片，新建画布，在画布的“背景内容”项中选择“透明”，其次粘贴图片，这样就将所需要的内容从原图片中抠出来了，调整尺寸，最后保存图片。

2.4 应用PhotoShop使图像融合

网页设计者在给网页做背景图片或者做banner图像时会发现，很多情况下都需要将两张或者两张以上的图像进行合成，成为一张图片，这时候，如果应用PhotoShop，会使合成图片更容易一些。举一例说明，将两张高度相同的图片进行合成，其操作如下：首先在PhotoShop中打开第一张图片，找到第二张图片，用鼠标将其拖进来，调整放置的位置，倘若两张图片有不协调的地方，可以利用工具栏中的工具一一进行调整，使其统一，然后在第二张图片所在的图层建立蒙版，选择渐变工具，拖拽两张图片的结合处，使其变成黑白渐变，其次调整其不透明度，最后保存图片，两张图像的融合就完成了。

2.5 在PhotoShop中使用特殊字体

网页设计中最基本的要素就是文字与图像，上面已经对如何应用PhotoShop处理图像的技巧做了简单叙述，接下来我将着重叙述如何在PhotoShop中将特殊字体写在图片上。在众多网页设计中，单单是一种字体已经满足不了人们的需求，大家更希望出现一些另类的字体吸引人们的注意，但是计算机在默认情况下大都是没有这些字体的，这就需要我们上网下载并安装到计算机中去方可使用。举一例说明，在图片上添加一种特殊字体—“方正清刻本悦宋简体”，这种字体一般情况下计算机上是没有的，这就需要我们采取以下操作：首先，在网上下载“方正清刻本悦宋简体”字体并安装到电脑上，下载的字体一般都是.ttf格式的文件，复制该文件，粘贴到c盘的Windows文件夹下的Fonts文件夹下，这样就完成了字体的安装工作，然后关闭PhotoShop并重新启动，就可以看到字体列表中有了“方正清刻本悦宋简体”，其次在图片上输入要写的内容，最后保存即可。

2.6 应用PhotoShop绘制网站Logo

网站Logo指的是网站的标志，它的设计在网页设计中占有十分重要的地位。读者在浏览网页的时候，最先看到的就是网站的Logo，一个好的网站，其Logo必定能展现出网站的内涵以及重要的信息或者理念，体现其独特的风格，才能够吸引大家的目光，增加点击量。熟练地应用PhotoShop绘制网站Logo，会使网页设计更加成功，其操作过程如下：首先，在PhotoShop中新建画布，使用钢笔工具勾勒出网站Logo的轮廓，利用“转化点工具”将某些直线变成曲线，增加柔和度，利用“直接选择工具”调整曲线弧度，然后按Ctrl+Enter键，将路径变为选区，填充选区，其次开始添加重要的文字，最后保存即可。

3 结束语

总而言之，PhotoShop在网页设计中有着至关重要的作用，要想提高我国计算机网页设计的总体水平，网页设计者就必须好好学习PhotoShop这一强大的图像处理软件。通过上述PhotoShop在网页设计中应用技巧的简单介绍，我们了解到只有掌握并熟悉这些技巧，才能在网页设计中减少不必要的麻烦，使我们的制作效率更高，网页展示效果更好。当然，PhotoShop在网页设计中的技巧还有很多，我们只有不断实践探索，才能找到更好的方法。本文是根据笔者自身经验以及查阅文献资料总结出的技巧，希望对广大网页设计者有借鉴意义。

参考文献：

[1] 周婧.PhotoShop网页设计技巧[J].科技创新与应用，2012（5）：38.

[2] 许金元.Photoshop在网页设计中的作用[J].信息与电脑（理论版），2010（6）：67-69.

[3] 邓美玲，李丹.Photoshop在网页设计中的作用[J].电子技术与软件工程，2015（4）：110.

[4] 朱明秀.浅析Photoshop在网页设计中的技巧及应用[J].大众科技，2009（10）：32-33.

[5] 洪颖.Photoshop在网页设计中的应用[J].信息与电脑（理论版），2013（6）：183-185.