xiebiji.com

开始实际操作啦！今天从画图软件开始。能力有限不过可以先明确一下：

1.以上是最终达到的效果如图（点击可以放大），PS源文件：  make-up.rar (unknown, 14 hits) 需注册

2.我用的画图软件是photoshop cs3,请先了解它最基本工具的使用方法（请务必先了解）。

3.这里主要介绍PS中用于网页制作的工具：参考线，网格，切片，裁剪。

好！这个图很简单，所以画图步骤也不难。我们现在开始画图（很简略不过还是要耐心看完哦^_^!）：

第一，新建文件。

设计图大小是有讲究的，网页具体要做成多大主要取决于大多浏览者电脑显示器的大小及分辨率。目前，15寸的显示器已经甚少了，17寸都要开始被淘汰。17寸的显示器分辨率是1024*768，一般在这种分辨率下浏览器中显示的尺寸只有1003*600左右（即所谓的第一屏），于是我如下新建文件：

但是大家注意这个大小只是图片大小，实际网页不包括背景的显示区域实际应该如下图：

第二，划分好图层组。

画图之前我们需要安排一下图层分组，不然以后切割的时候会因为图层太多而找不到需要的图层，如下图我是这么分的：

第三，定好参考线，网格

1.参考线：按菜单->视图->标尺（或者ctrl+r），显示出标尺,在以下图操作可画出参考线

参考线非常有用，它可以帮你规划区域。

2.网格：按菜单->视图->显示->网格（或者ctrl+’）,网格可以辅助定位（不过我很少用）

第四，画色块拼图，添加并处理字体

要是你真的了解过PS的基本操作的话，文字工具跟矩形工具应该不难运用，按照辅助线的规划，就靠这两个工具基本上就可以画出以下图片了（点击可放大，蓝色线是辅助线）：

这里并不介绍详细画图操作（>_<!假如你了解过PS这个对于你不会难的），特别提醒画图的时候记得要在相应图层文件夹内操作。

最后，输出图片，裁剪，切片。

1.裁剪：工具条上面有一个这样的工具 ，选择它，在需要裁剪的区域上面进行裁切，如下图：

裁剪主要用于切割图片，因为HTML+CSS化一张草图的时候不可能整张拿过来用，需要分开一张张素材来用。

2.切片：切片 可以说是PS里面特意设置给网页编写用的，它有两个功能一个是“切片工具”，另一个是“切片选取工具”，两个功能加起来相当于高级裁剪，选取它的切片工具在需要切片的位置拖拉鼠标，如图：

蓝色的表示实际已经切割的区域，灰色的表示自动生成的切割区域。你可以用“切片选取工具”选取特定的切片区域，并且双击更改其属性（例如更改生成图片的名字）。

最后输出切片图片的时候可以按：菜单->文件->输出web和设备所用格式 操作。可以按shift+鼠标单击选取多个切片区域，然后在“存储”的时候选择不同的存储方式生成多个图片，如图：

以上是前台设计篇第一个需要做也是要先做的最基本过程，假如你有所不明白的话可以留言提问，鉴于知识有限，有什么说错的地方请原谅并指出。

今天先说到这里。>_<!

转载请注明：作者Joe 地址:http://xiebiji.com/2008/09/huazhuang4