前端基本功之切图（一）
by ann
at 2010-11-01 16:06:04
original http://www.fu-an.net/archives/15
我是一名前端开发人员。作为前端开发人员html+div+js是最基本的基本功，其他的还应该懂得颜色的对比、色彩的搭配、web页面的标准书写，jquery。各项基本功的好坏，影响制作页面的速度与质量。 今天我想和朋友们谈谈当设计给我们页面以后的第一个操作，切图。 我们看到一张设计稿（psd格式的原稿） 第一步将设计稿分一下是什么样的结构，是上下结构，还是T型的结构。而后看一下设计对设计稿是如何分层，一般好的设计，在使用photoshop进行设计时，将层进行分类，头部的设计的层放在一个文件夹中，左侧的设计放在一个文件夹中，右侧的设计放在一个文件夹中（这只是我个人举得一个层的分法的例子，还可以将层分的更细致些）。 第二步将设计稿区中纯色和不是纯色的部分分开。纯色的部分当然可以用css中的代码书写出。不是纯色的部分，就需要我们切图了。切图的原则，我个人觉得可以尽量整块切，可以减少httpa请求图片的个数，但需要很好的把控好图片的大小，千万不要图片过大，造成图片下载过慢，要在不失真的情况下，尽量控制好图片的大小。 我们采用的切图工具为photoshop软件中的切片工具，而后按SHIFT+CTRL+ALT+S弹出[存储为Web所用格式-由Imageready提供支持]弹出框，在弹出框中选择每一个切片具体存储的格式。选择部分截图为：一般切片选择gif的格式，颜色过多图片质量要求高的选择jpeg（jpg）格式，背景透明的选择png格式。依据各个图片的具体要求选择。而后确定生成一个含html页面和一个images的文件夹，images文件夹里面为大家需要的切出来的图片。