视觉元素的分离和拼合

来源：杭州天琥设计培训学校时间：2018/11/23 10:25:20

快速更新的互联网产品需求使得UI设计师需要优先保证UI设计稿的视觉效果，也因此有时候没有时间整理UI设计稿源文件。所以，拿到手边的UI设计稿，可能存在图层缺少命名，分组混乱等问题。

如何快速找到需要分离的视觉元素所在的图层?这时候应该使用的是Photoshop的“自动选择”。另外要注意的是，某些边缘阴影及高光是由图层样式生成的，在选取这些部分时应选取旁边的实际绘图内容。

Photoshop的“移动工具“，在使用时勾选一个“自动选择”的复选框即可。此外可以设置是自动选择图层还是图层所在的分组。

拼合是在一个新建立的psd源文件上进行，命名应当与最后输出的图片命名相同。拼合时应当使用网格做整齐的排列(快捷键Ctrl + ‘ 切换网格显示)。整齐的拼图不仅方便多人编辑，而且css代码中的背景坐标定位会更加快捷(谁都喜欢有规律的数字)。

在Photoshop的编辑→首选项中可以设置合适的网格尺寸。

为方便后续编辑，拼图源文件应适当保留原UI设计稿图层(如保留文本图层，不做图层合并，方便以后的文本更改)，同时做好图层命名和分组。此外，推荐在底部增加2个图层：底色层和网格尺寸描述层。

底色层：Photoshop默认的表示透明区域的网格背景(和前面的尺寸标识的“网格”不同)中，子网格的边线不容易看清。而加上一个铺满全画布的底色，网格线就很容易辨识了。底色一般用纯白色即可，对于部分颜色偏白的UI元素，可以填充黑色作为底色。底色层只是方便排列元素，在输出图片时，底色层设置为不可见再输出。

网格尺寸描述层：空白图层，采用“20×20”这种格式的命名，说明使用的网格尺寸大小。这样，多人编辑时，可以方便别人很快的设置出适合编辑此拼图源文件的的网格尺寸。

拼图源文件一定要保存到开发目录中，可以在images目录中，单独建立命名为_psd的目录，然后相关的拼图源文件都保存在这个目录中。

对应的，在静态页中用作图片占位和示意的临时图片(如用户头像)，可以保存在命名为_temp的目录中。