Photoshop与网页制作之间的完美结合
开篇：润墨网以专业的文秘视角，为您筛选了一篇Photoshop与网页制作之间的完美结合范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘 要 网页制作的工具很多，photoshop因其图像处理的强大功能在网页制作中也发挥着巨大的作用。正确使用Photoshop处理图像可以增加网页的美观，提高网页的下载速度，提高网页的制作效率。
关键词 网页优化；图像格式；图像特效；网页布局
中图分类号TP39 文献标识码A 文章编号 1674-6708（2011）57-0178-02
网页设计的工具很多，目前使用最为广泛的是Dreamweaver(简称DW)。本文针对Photoshop与网页制作之间的关系进行阐述。
1 Photoshop可优化图像质量
优化网页、使之能快速下载是网页制作中必须考虑的因素。Photoshop可优化图像质量，提高网页速度优化网页页面，图像的正确处理极其重要。
1.1采用合适的图像精度
网页是提供给阅读者在显示器上观看的，根据显示器的特性，图像的精度一般采用72dpi即可，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。有些图像原始文件的尺寸很大，而在网页中显示的区域是有限的，很多时候设计者采用在DW中缩小图像来实现，在DW中缩小图像并没有真正改变图像的大小，下载需要较长的时间，所以在输出图像时，要采用合适的大小，降低输出的精度。
1.2选择合适的颜色深度
Gif格式的图像文件色彩深度越少文件也就越小，在肉眼可以接受的范围内，尽量将gif文件的色彩数量降低，对图像文件的大小进行有效的优化。如小图标、按钮、背景图案等图像文件对色彩的要求并不高，这些图像输出一般采用gif格式。对颜色要求不高的图像，采用64色的图像对比256色图像，输出后可以少掉一半还多的字节数，且效果完全能满足视觉要求。每个网站这种小图像往往会有几百张，每张图片都节省一些，最终可以节省很多空间。
1.3输出正确的图像格式
不同的图像格式由于采用的压缩方法不同，显示效果差不多的图像其文件大小会有很大的差别。一般情况下色彩较少的图片使用png-8、gif格式文件，色彩变化丰富的图像则使用jpg格式，如果要使用在多种背景中，需要输出为透明式时就需要选用gif格式。jpg格式的图片，需综合对比压缩品质高、中、低下的效果，尽量选择效果好且压缩品质较低的选项。输出图像时，可使用Photoshop的“存储为web所用格式”功能来输出，使用“存储为web所用格式”可以压缩约50%。
2 Photoshop可调整网页的布局结构
2.1布局规划
在设计网站的过程中，事先进行布局规划也是提高网站开发效率的有效方法。设计者在设计网站的过程中需要反复与客户进行交流、沟通、修改，而客户更看重就是布局的效果与使用的便捷性。当布局确定后，内容的组织、程序的设计就由程序设计者完成了。避免了程序设计好后反复修改界面的复杂性。Photoshop在设计布局中还有如下优势：Photoshop的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束。一个打开、下载速度慢的网站是没有价值的，心理学研究表明一个网站的下载时间超过10s，人们会自动转向其它网站。决定下载速度的因素很多，其中网页大小、网页元素的优化和网络配置是重要的因素。其中网页大小与网页元素的优化是设计者需要解决的，使用Photoshop设计的网页经过裁切、整合处理后体积会小得多。
2.2布局要点
网页文档一般为1007×600和708×800像素，分辨率为72像素。一般情况下，大型网站不要超过3屏。网站背景颜色与文件颜色要统一协调，导航字体一般用黑体，正文一般用宋体，其它字体可能会因为客户的浏览器不兼容而给工作带来麻烦。如果为增强页面效果用到其它字体，最好在Photoshop中制作然后切分。图文搭配要合理，图像大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。要精确定位网页元素，可用对齐参考线的方法来实现，而参考线的精确定位可以借助标尺和网格来实现。网站的Logo、Banner或导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，否则进入DW整合时，可能出现空边或撑开表格的现象。
2.3活用“切片”
利用Photoshop做好布局效果图后，关键的一步就是“切片”。只有正确地切片，DW才能对效果图进行有效的整合。切片时要用好参考线。参考线能保证我们切出的图像在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。为提高Logo和Banner的显示效果，如果效果图中存在Logo和Banner，必须将这些切片然后在DW中用Logo和Banner的原文档替换。大的图像必须切分成均匀的图像，这样可以提高网页下载速度。导航条一般都是特别设计的，其效果在DW难以实现，所以也必须切片后供后期使用。存储切片的文件夹必须是英文名字，存储切片时建议使用用“文件―存储为web所用格式”命令。如无特殊要求，切片的存储格式要求使用Gif格式。
在DW中对切片进行整合时，要考虑以下几个原则：能使用纯颜色代替区域不要使用图像文件，能用小图像代替的就不要用大图像，切片区域要尽量整齐规整以防止在使用过程中表格错位。
3 Photoshop可用来设计图像特效
在网页设计过程中，往往需要一些特殊的效果美化网页。如虚线、变幻线、阴影、圆角表格、异型表格装饰等等，这些效果在DW中无法直接实现，可以先在Photoshop中绘制相应效果，然后裁切成小图片在DW中进行整合即可。
在网页设计中，最常用的字体是黑体和宋体，其它的字体在客户浏览器中可能不支持，为了保证客户所看到的网页效果与设计效果一致，对于标题、广告等需要使用特殊字体的内容，都需要在Photoshop中设计好后，转换成图像文件整合到网页中。
在网页中经常看到一些大面积的渐变图像，如渐变的网页背景、表格背景、渐变导航条、渐变线等等，在网页中的渐变图像一般是单向渐变（径向或横向渐变），对于这样的图像，可以沿渐变方向切一小块（保证切片包含色阶变化的所有信息），然后在DW中进行填充而达到大面积的渐变效果。使用小图像代替大图像而得到同样的显示效果，可以大大缩小文件的大小，提高下载速度。同样道理，网页背景一般也是使用小图像进行填充来实现整个网页的背景。
4 Photoshop应用自动化提高效率
Photoshop提供了一些自动化的功能，可以大提高网页的制作效率。可应用的自动化功能有“批处理”、“动作”、“脚本”、“历史记录”等，这些功能相互配合更加实用。如像册网站，像册网站、产品展示网站等，一般是先展示各图像的缩略图，然后链接相应的大图。当需展示的图像较多时，制作缩略图也是一件很大的工程。利用Photoshop的批处理功能可以快速的制作缩略图。基本方法如下：
1）录制动作
打开动作面板，启动录制按钮。手动完成一个图像的缩略图制作过程。Photoshop的动作功能会把操作的过程完整的记录下来。动作录制完后可以对动作进行修改，把录制过程中的一些无用、重复、错误的步骤删除。
2）检验动作
打开一图像文件，直接运行录制好的动作，检验动作效果是否理想。如果需展示的图像有横向和竖向的，建议竖向与横向的缩略图动作单独录制，以保证各文件的比例协调。
3）批处理运行动作
打开“批处理”面板，选定录制好的动作，指定源文件夹与目的文件夹，指定目的文件的命名规则，点击确定就可以一次性制作大量的缩略图了。
在网页制作中还有很多图像的规范化操作都可以使用以上方法，在此不一一列举。
5 Photoshop可提供多套皮肤效果的制作
我们经常看到很多网站，用户可以根据个人喜欢选择各种皮肤。
有些网站会在不同的季节以不同的风格显示。更换皮肤常用的方法，一是利用CSS样式实现，一种是利用数据库实现。不管哪一种方法，都必须具备多皮肤所需要的图片。所谓的多皮肤，实质就是有多套不同的布局外观可供用户或设计者更换。
有些网网站的不同皮肤，其外形特征基本上是一致的，主要是颜色搭配的差别。这类皮肤的制作比较容易，只需把一套布局用的图片复制一份到另一文件夹，利用Photoshop的动作修改各图片的色阶、亮度等信息即可得到多套皮肤。
如果不同的皮肤外形也有差别，需在Photoshop中设计一套布局页面后，切片输出并保存好切片图层。再设计不同的页面外观，利用相同的切片图层对各套页面外观进行切片，即可得到几组不同的搭配效果。
Photoshop与Dreamweaver的结合越来越紧密，图像是网页必不可少的重要元素。在网页设计中，充分利用好Photoshop的特有功能，不仅可以美化网页，提高网页的下载速度，还可以提高制作网站的效率。
参考文献
[1]汪可等.ADOBE PHOTOSHOP CS3标准培训教材[M].北京：人民邮电出版社，2008：395.
[2]谭贞军，等.中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通[M].北京：清华大学出版社，2008：315-340.
[3]聂小燕，等.美工神话Dreamweaver+Photoshop精美网页设计与制作[M].北京：人民邮电出版社，2006：86.
[4]聂小燕，等.美工神话Dreamweaver+Photoshop精美网页设计与制作[M].北京：人民邮电出版社，2006：113.
[5]李晓华，等.PHOTOSHOP CS3图层通道、蒙版和动作技术详解[M].北京：兵器工业出版社，2008：375-390.