作为设计师或者前端开发，做出一个好的网站、APP或者其他的数字作品，一个精准的切图是必不可少的步骤。而 PS 切图也是设计师们的必修技能之一。那么如何利用 PS 完成精准的切图呢？下面我们就来分享一下技巧和经验。

一、切图前的准备

1.确定需求和设计稿

首先，确定所需要的页面和设计稿。要留意 UI 设计师给我们的 PSD 文件中有哪些图层需要切图，这些图层中需要哪些元素，哪些元素需要仿照 - 保留透明度填充的方式进行切割。

2.层的命名

其次，从整体上进行层结构的定义，比如文件夹、图层、文本命名的规范。切图前，命名方便识别，可以提高制作效率。

3.根据指导线切图

为了使切图更加精准，设计师也做好指导线来辅助前端开发者布局和切图。因此，在进行切图之前，一定要将线调成对的，这样可以保证整个网站各个部分的对齐。

4.选择合适的分辨率

在进行切图前，一定要明确所需的分辨率，不同的分辨率，切图的大小不同。一般来说，移动端的设计稿选择320或者414px的分辨率，而对于PC端的设计稿，一般选择1920或者1366px的分辨率。

5.调整画布

在打开设计稿后，可以使用菜单栏中的图像 - 调整面板，重新设置画布的大小，并将其调整为适合的大小。

6.颜色设定

在切图时，需要注意 Photoshop 文件的颜色模式，选择 RGB 以便网站和应用的格式更加合适。使用色板和取色器来选择和查看颜色会更方便。网站和应用的颜色选择如果使用了太多颜色，不仅不好看，也不太合适，所以平时建立一个颜色板是不错的选择。

二、切图技巧

1.切分图层

在进行切图时，我们需要将整体图片版面进行分层，将每个独立的部分分割开来，方便后面的展开切图。方法是在选中对应层的情况下，点击菜单中的图层 - 复制图层并新建的选项，将复制的图层拖到新建的图层中。

2.利用边缘像素

在进行切图的时候，我们可以利用笔刷、魔杖和快速选择工具等手段来选取边缘像素，以保证精度和准确性。因为很多图片在进行缩放之后会出现锯齿状，而使用边缘像素则可以使切图边缘更加平滑。

3.对半透明问题的处理

在进行切图时，半透明问题非常容易让我们犯难，大多数情况下我们选择直接复制半透明图层，但这种方法的转化率不高。需要使用自己独立切分的透明图层，处理透明效果再进行其他步骤。

4.使用自动切割工具

为了提高效率，我们可以使用一些切图插件，如：易切、UTools、Slicy 等等。这些插件可以自动完成图片的切割，大大减少了人工输入的时间。 其中，易切使用起来比较容易，只需在 Photoshop 中安装后选择 Export 后，选取输出文件夹，即可将图层切图，并保存为所需格式。

三、切图后的处理

1.优化图片

在切图后，我们需要对导出的图片进行进一步优化，以保证页面或APP的加载速度。优化图片可以使用 PhotoShop 中图像 - 图像大小 面板调整。 如果是 PNG 格式的图片，可以尝试缩小图片下面的色调选项，从而达到减少图片的大小。

2.优化排版

在进行排版时，我们需要根据设备的像素比例调整排版。可以使用外部工具来帮助我们优化排版，例如 Sketch，Vim等。

3.语义化 HTML 代码

在切图完成之后，我们还要将切分好的图片、CSS文件和HTML文件进行整合，以构建一个完整的网站。当我们合并所有的资源和代码，项目就更为完整，并且可以更方便地和其他设计师、前端开发者进行协作。

4.细心检查

最后，我们要注意细节的处理，使网站或APP更具聚焦力和关注度。在进行各种操作后，要耐心地对切图的结果进行反复检查，以确保所有细节都处理到位。

总结

在进行切图时，我们需要对整体的设计思路和切图技巧进行了解和掌握。同时也要结合实际需求来进行切割，以达到最终目标。尝试使用工具和插件能够大大提高切图效率，提高我们的工作质量。最后，要保证设计品质到位，并细心检查整体效果，以迎接用户的最善光顾。