PS另类实用技巧辑（一）：

在上期教程中，我们用PHOTOSHOP CS的“WEB照片画廊”功能制作出了网页像册，不知道大家有没有将制作好的网页像册上传到网站空间中，圆了自己制作网页、建立网站的愿望呢？

这次，我们要来讲解一下如何用PS来制作一个网页效果图并对其进行裁剪，即使你不懂任何的HTML语法和原理，只要你看完本期教程，那么离独立完成自己的个人网站的目标就不远了。

会有朋友说是不是用FIREWORKS比较好，笔者的意见是先学好PS再用FW便会得心应手，PS是个基础的东西，先打好基础。

一、网页布局理论

再精美的网页，它也是有个大概布局的。比方说新浪网的首页，它的布局就是图1中右边灰色部分的样式，网页设计师用工具（如DW、FP）画好相应的表格，然后填充表格的颜色，加如相应的字和一些网页特效，就形成了一个网站的首页。如图1。

可是自己不会工具，是不是就不能做出精美的网页呢？答案是可以的，我们用 PHOTOSHOP的“保存图片的WEB功能”就可以轻松实现。不会画表格？可以在PS上做表格，总之自己想象中的的网站是什么样的、什么颜色的、什么风格的等等，我们把这些想法当一张效果图制作出来，裁剪好，只需要一个步骤，PS就会帮我们自动生成一个网页，无需懂得HTML代码。那么教程正式开始！

二、制作网页效果图

每个人的想法是不一样的的，设计理念也是不一样的，在本教程中的图片例子，引用北极的个人网站文字版网页效果图进行讲解，不论什么样的效果图，步骤都是一样的，要做到举一反三。先看看这个网页的效果图。如图2。

观察效果图我们可以看出，该效果图总体上分三行一列：最上面标题为一行；中间的内容部分为一行；最下面的相关信息为一行；整体为一列；细分的话最上面一行又可以分为三列；中间内容部分可以分为两列；最下面相关信息部分又可以分为两行。整体的布局应该如图3样式。如图3。

布局分布出来以后，一些制作网页的老手该开始启动工具勾画表格了。那我们初者要做什么呢？下一步就要用PS的图片裁剪功能，根据图3的布局分布样式，对网页效果图进行裁剪。

[1]