网页设计师常用的9个photoshop技巧

网页设计师常用的9个photoshop技巧（共1篇）

1.网页设计师常用的9个photoshop技巧 篇一

1. 网站Logo图标的制作

Logo图标是一个网站的形象标志。在当今品牌时代, 一个优秀的Logo图标, 不但能点缀界面, 而且还可以加深浏览者对该网站的印象, 提高网站的知名度。

Photoshop提供了矢量图绘制功能。使用钢笔 (或形状) 工具, 可直接绘制出矢量线条;也可以首先建立选区, 再通过路径调板上的“将选区转化为路径”按钮, 实现矢量线条的绘制。然后, 通过路径调板上的“填充路径”按钮, 为路径填充上颜色。最终实现矢量图形的绘制。使用这种方法制作出的Logo图标, 具有任意放大不失真的优点。

2. 前景与背景的配合

网页是一个有机整体, 其前景与背景必须紧密配合, 效果才能协调美观。网页上的图像都是一个矩型区域, 采用图案的边缘部分与背景会有一定的差异, 用这样的广块图置于网页中, 必然形成前景与背景之间的突兀变化, 即前景图好象是打在背景图上的一块“补丁”, 影响了画面的整体效果。因此, 必须对前景图的边缘及图中的空白部分进行相应处理, 使之与背景融合为一体。用Photoshop处理前景图时, 通常采用透明、羽化及过渡填充等技术来实现这一目标。当前景图色彩要求较低、图案周围留白较多时, 可选用透明的GIF格式做为图像应用格式, 即选取图像中的有效部分, 复制到一张大小适中的透明背景图层上, 将该图存成透明底GIF格式文件即可。对图像色素较多, 或边界与背景差异太大的情况, 应选用JPEG格式做为图像最终应用格式, 在图像边缘做适当宽度的羽化或者做从前景到背景的过渡填充, 从而消除前景与背景之间的突兀变化, 形成协调的网页布局。

3. 网页中按钮的制作

按钮是网页中经常需要使用的素材, 漂亮的按钮必将给网站增添不少色彩, 使网页更加精美, 有会随着鼠标的接触而变色的按钮, 还有立体按钮、水晶按钮、发光按钮等等。而这些按钮的制作最常使用的工具是Photoshop。

4. 网页中的动画制作

在网页制作过程中, 动画制作和图片制作占有着同样重要的地位。精美的动画不但能美化网页, 而且还可以增加网页的信息容量。Photoshop所整合的Image Ready软件包, 可以方便地制作出GIF和SWF动画。其中GIF动画具有文件体积小、IE支持稳定、网络传输速度快等优点, 被广泛应用于网页制作。

5. 简单WEB页面设计

设计WEB页的软件有很多, 但是大部分的专业设计师还是喜欢使用Photoshop来进行初稿设计。因为在Photoshop环境中, 进行彩色搭配十分方便、直观, 将其用于网页制作的初稿设计是极为合理。首先用Photoshop把整个页而的大体轮廓设计出来, 可保留各图层信息, 因为在利用切片工具进行切割图片时, 可以基于图层进行切割。相应的就产生了流行于网络的PS D网页模板, 这种网页模板大多是利用Photoshop来进行设计的。大体轮廓做好之后, 利用切片工具和切片选择工具, 对图像进行分割, 将文件分割成若干个小的图片组。切割图像的原因是在浏览器中, 一组小幅图像比单个大幅图像下载起来要快速得多。运行Image Ready环境。创建动画效果, 使部分图像动起来。同时创建网站地图定义交互区域, 以及翻转图片等。最后将文件进行优化, 并存储为网页文件格式。利用Photoshop设计WEB页面时, 也可以通过第三方的软件来配合设计。如常见的网页制作软件Dream weaver、Front Page等。首先利用Photoshop设计出大体轮廓, 并进行切片切割, 保存成网页文件;然后再利用第三方软件来对网页文件进行后期处理、优化, 这种做法也被广大的网页设计人员所采用。

6. 提高网络传输的效率

制作网页时, 不仅要考虑图像的艺术性, 也要注意其传输效率。图像做得越大越精细, 则在网络上的传输时间就越长, 从而降低用户访问网站的兴趣。用Photoshop处理可以提高图像的传输效率:一是采用交错格式的GIF文件, 该类文件不增加图像的额外尺寸, 但在视觉上会有传输速度略快的感觉;二是对图像进行减色处理, 去除图像上不必要的颜色, 使图像更为小巧, 但这样做的结果可能会造成图像质量的下降;三是对图像进行分块, 将一幅大图像分割成数块小图像, 这样就可以充分利用网络带宽的资源, 多幅图像同时传送, 以提高传输效率, 这是网络上用得较多的方法。

参考文献

[1]李建霞:浅谈图像处理技术在网页制作中的应用《电脑知识与技术》2010年第5期

[2]边新志:Photoshop教学中上机实验的探讨和总结《中国西部科技》2006年11期