前端基本功之切图（二）
by ann
at 2010-11-24 15:10:38
original http://www.fu-an.net/archives/34
当前端接到设计人员发来的设计稿（PSD格式），我是使用的切图软件为PHOTOSHOP（以下简称PS），在PS中，我们使用图一中的6个工具为矩形选框工具，缩放工具，移动工具，切片工具，文字工具，吸管工具。下面我们仔细说一下每个工具具体使用情况： 1.当我们看到一个设计稿，对设计稿进行分析，分清设计稿中的每一部分（头部logobanner、主体部分、版权等）所在的PS中的组和图层，我们使用参考线对页面进行分区域。 2.[矩形选框工具]是对选择的部分进行像素的量取，量取宽度和高度的时候当然要配合[缩放工具],做到1像素不差。 3.[移动工具]是对图层具体的选择。 4.[文字工具]查看文字部分所用的文字大小font-size（一般正文为12px），文字粗细font-weight，文字颜色color。 5.[吸管工具]是查看所需位置的背景或者边框或者文字的颜色。 6.[切片工具]是我们切设计稿的利器，切图切图最终就是使用此工具进行切图了。 综述，上面所提到工具的是我们切图时经常用到的，其它的工具视情况所需而用。 如果你希望是一个优秀的前端，最好把经常用到的工具的快捷键记下来: [矩形选框工具]的快捷键M [缩放工具 ]的快捷键Z [移动工具]的快捷键V [切片工具]的快捷键K [文字工具]的快捷键T [吸管工具]的快捷键I 注：快捷键的使用为，PS处于当前的操作状态，键盘上直接敲快捷键字母。