前端切图步骤图

一、使用Photoshop打开设计稿，一般是psd文件。（图1）
图1

二、当有参考线时，先按ctrl+H隐藏参考线。（图2）

图2

三、先思考哪些需要切成png格式图片，哪些需要切成jpg格式。（图3-1、图3-2）
ps：图3-1、图3-2圈出的是需要切成png格式的区域，一般png都是一些小图标，或者带透明度的图片
图3-1

图3-2

四、隐藏图层，便于切出png格式图片
1，步骤1：（图4-1）
(1)选择移动工具
(2)勾选自动选择
(3)点击选择您要隐藏的图层
(4)查看右下角，关闭眼睛
图4-1

2，步骤1的结果图（图4-2）
(1)关闭眼睛后
(2)会让图层隐藏

图4-2

3，步骤2：重复步骤一，直到你想要关闭的图层都隐藏掉了；结果图为（图4-3）
图4-3（结果图）
Ps：因为购物车有选中状态，所以我们需要切出2个购物车png图片（图4-4）

图4-4

五、使用切片工具切出图片
1，步骤一：基本步骤（图5-1）
(1)选择切片工具
(2)切出logo
(3)为png图片重命名（方便后期使用）
(4)设置宽高w为宽度，h为高度（一般为整数）

图5-1

2，步骤二：补充说明
(1)问题1：图5-1的弹窗有些双击打的开，有些打不开（图5-2）

图5-2
说明：
图5-2中：
1，为过去切片图片，框框是蓝色的，所以需要右键点击选择编辑切片选项才能打开命名和改变图片宽高的弹出窗
2，为当前的切片图片，框框是黄色的，所以直接双击即可打开命名和改变图片宽高的弹出窗

(2)问题2：如何让设计稿放大放小便于操作
答：使用alt+鼠标滚轮即可控制设计稿缩放。

六、保存图片
1，开始我们先切出图片（图6-1,、图6-2、图6-3）

图6-1

图6-2

图6-3
2，选择存储为web所用格式（图6-4）

图6-4
3，弹出一个窗（偷懒了找之前做好的图片作解释）（图6-5）

图6-5
4，设置为所有用户切片（图6-6）

图6-6
说明：有三个选择：
①　选中切片就是当前切片是你最后一个操作的切片。
②　所有切片是包括一些系统给你自己弄好的（不是你想要的切片图片）都生成出来。
③　所有用户切片是你自己预想要切出来的切片
5，结果如图（图6-7）

图6-7
七、承接第六点，改变图标颜色
1，给3个图标切片重命名（图7-1）

图7-1

2，选择微信图层（图7-2）
说明前文步骤为第四点步骤1，使用移动工具查看选择图层

图7-2
3，拷贝图层样式（图7-2）

图7-2
4，粘贴图层样式（图7-3）

图7-3
5，最终效果如下（图7-4）

图7-4
6，重复第六点的步骤，选择存储为web格式，再选择所有用户切片，最后点击保存（图7-5）

图7-5

7，最终效果图：（图7-6）

图7-6