前端学习路径图教程 前端学习笔记11前端必备技能

注：使用的photoshop版本为PS6。

今天的任务是按照设计师提供的设计稿，实现HTML页面。一般来讲，设计稿里面会出现很多图标和图像，这个在利用HTML和CSS是绘制不出来或者很难绘制出来的，开发效率会很低，因此我们会选择切图然后贴图的方式完成我们的工作。

之前工作的时候也用过切图，但是很少使用参考线，重新学习发现参考线的作用真的很大，它可以提前确定切图的区域，方便我们判断切图分区的合理性；其次切图时自动吸附到参考线的操作减少了我们切图时的误差。

切图应该按照如下步骤：

1. 观察设计图选取一个最优切图方案；
2. 将影响切图的图层隐藏起来；
3. 使用参考线将需要切的图标和图像包裹起来；
4. 选择切片工具将图标和图像切割；
5. 将切好的图标和图像存储为web所用格式。

以百度前端技术学院给我们的设计图（下图）为例

1 观察设计图选取一个最优切图方案

该设计图比较常规，我们需要的切图分为四种：背景图，图标，异形字标题，图片。根据这个需求我们来切割设计图。

2 将影响切图的图层隐藏起来

在上述案例中，切割背景图时我们需要将背景图上面的图层全部隐藏，这样才能得到一个干净的背景图。

利用上图的操作（将图层前面的眼睛点掉）我们将需要隐藏的图层隐藏器来，得到下面这些干净的背景图

注意：第三章人像背景图去掉遮盖在上面的图层后与其他人像背景图颜色不一样时因为原设计图人像背景颜色本来就不一样，这里时设计时素材选择出现的问题，正常应该是人像背景图颜色一致，这样才能统一美观。

3 使用参考线将需要切的图标和图像包裹起来

设计时一般都会用到参考线，我们拿到设计图时没有看到参考线可能是被隐藏了，使用快捷键“ctrl” “；”可以显示（隐藏）参考线。

如下图所示，点击红框标尺部分不放然后拖动到设计图区域即可创建一条横向/竖向参考线，将参考线拖动到标尺部分即可删除该条参考线；当当前工具为移动工具时，按住“alt”键然后点击参考线会将竖向参考线变成横向参考线（横向参考线变成竖向参考线）。

以下图建好的参考线为例，红色箭头指向的参考线将图标包裹起来，绿色箭头指向的参考线表明图标与右侧文字的间距，方便同类型图标大小和间距的选择。

4 选择切片工具将图标和图像切割

如下图所示，将鼠标停在从上到下数第五个工具处，点击鼠标右键，选取切片工具，找到需要切的图标或图形，从左上角拖拉到右下角。因为右参考线的辅助，选取的时候会自动吸附到参考线上，这样避免了切图时的误差。

注意：选取的时候尽量靠近参考线，这样更好帮助软件工作。

将所有图标或图像切好后呈现下图的样子，每个切片的左上角都有一个角标显示自己是哪一个切片。

5 将切好的图标和图像存储为web所用格式

点击“文件”-“存储到web所用格式”。

选择下图箭头所示存储格式。

点击存储，然后跳出下图所示弹窗，根据自己的需求设置格式，设置和切片（下图中的所有设置为常规设置），然后选择保存路径，最后点击保存。

保存成功后我们会在保存路径里面找到一个“image”文件夹，所有的切片都在文件夹里面，如下图所示。

最后选取出我们需要的切片，大功告成。

1. 使用参考线包裹图标时需要注意相同类型的图标大小要一致，与旁边文字的间距一致。这样可以减少相关内容的代码量。
2. 用参考线包裹图标时，图标不一定需要在区域中心位置，这个需要根据设计图来选择。