本文目录导读：

  1. 重新理解“切图”：为什么要切？
  2. “切图”的三大主流方法
  3. 最核心的技巧：从“切”到“想”
切图怎么切，从切到设计，一份关于切图的完整指南

“切图怎么切？”——这大概是每个初入行网页设计师、前端开发者甚至UI新手都曾深夜对着屏幕问过的问题，曾经，它是一项繁琐、机械、考验耐力的苦差事，但如今，当我们再次探讨“切图怎么切”时，问题的核心早已不再局限于“把设计稿切成碎片”，而是演变成了一个关乎效率、协作与设计思维的综合性话题。

重新理解“切图”：为什么要切？

在回答“怎么切”之前，我们首先要明白“为什么切”，切图的核心目的只有一个：将设计师的视觉想法，转化为浏览器能理解并高效渲染的素材。

  • 从矢量到像素： 设计稿通常是矢量的（如Sketch、Figma、XD文件），可以在任意尺寸下保持清晰，但网页上显示的绝大多数图片、图标、背景，都是像素构成的PNG、JPG、SVG或WebP文件，切图就是将矢量源文件“翻译”成这些格式。
  • 保持精确度： 切图确保了前端看到的UI元素（如图标、按钮背景、渐变条）与设计师想象中的一模一样，位置、颜色、尺寸分毫不差。
  • 控制体积： 一张完整的设计稿图动辄几MB甚至几十MB，直接用于网页会加载缓慢、卡死浏览器，切图将大图拆解成小尺寸、小体积的碎片，只加载当前页面所需的部分，大幅提升加载速度与用户体验。

“切图”本质上是一种 “资源优化” 和 “设计规范化” 的过程。

“切图”的三大主流方法

明确了目的,我们再来谈具体操作，根据你的工具和工作流，切图方法分为三大流派。

传统手工切片（以Photoshop为例）

这是最古老、但也最考验耐心和细节的方法，适合处理复杂的、非标准结构的UI元素。

  1. 准备阶段： 在Photoshop里打开PSD文件，建议合并所有可见图层为一个智能对象，然后再复制一层进行切片，因为这能避免图层样式（如投影、描边、发光）在切片时被意外破坏。
  2. 使用切片工具（C）： 选择左侧工具栏的“切片工具”，然后像使用裁切工具一样，在需要切出的元素周围拖动出一个矩形选框，Photoshop会自动吸附到像素边界上（视野边界需放大到100%才能精确吸附）。
    • 技巧： 对于有背景的区域，比如按钮周围的阴影，记得把阴影也包含进切片区域内，对于无背景的图标，切图时应只切图标本体（通常为透明底PNG），不要包含多余空白。
  3. 导出切片： 执行“文件”→“导出”→“存储为Web所用格式（旧版）”，在弹窗中：
    • 格式选择： 图标、照片等复杂色彩用JPEG；带透明背景的图标、按钮、渐变用PNG-24；纯色、几何图形用PNG-8（颜色少，体积小）；简单图形、图标用SVG（矢量，无限缩放）。
    • 质量控制： JPEG品质建议80%-90%；PNG-24无需压缩；PNG-8颜色数尽量少但要保证视觉完美。
    • 导出设置： 勾选“存储为切片”，选择“所有用户切片”，点击“存储”即可，Photoshop会自动生成以切片名称命名的图片文件夹（需提前在切片上右键重命名，名字不要用中文或空格）。

现代设计与代码工具（以Figma、Sketch、Zeplin为例）

这是目前最高效、最主流的协作方法，它彻底告别了手工切片的繁琐。

  1. 设计师端： 在Figma或Sketch里，大多数UI元素本身就是组件（如按钮、图标、文本框），需要切图时，设计师只需操作两件事：
    • 导出设置： 选中一个图层或组（比如一个图标），在右侧面板“设计”或“属性”中找到“导出”选项，选择格式（PNG、SVG、PDF、JPG等）和比例（1x、2x、3x，适配不同屏幕密度）。
    • 命名规范： 这是关键，名字决定了前端工程师拿到的文件叫什么，规范通常是：文件夹/模块_组件_状态@倍数.png。icons/navigation_menu_active.png 或 buttons/cta_button_hover@2x.png。
  2. 开发端： 设计师将Figma/Sketch文件链接分享给前端，前端打开后，可以直接在工具里选中任意元素并一键下载它正确的切片文件，像Zeplin、Avocode这类协作工具更进一步，它能自动识别设计稿中的所有图层并作为可导出的图片，前端工程师甚至可以自己在工具里调整导出尺寸、格式，而不需要设计师二次操作。

纯CSS/矢量技术（图标字体、SVG Sprite、CSS背景定位）

真正的“高级切图”不是把图切成碎片，而是用代码来代替“切图”。

  • 图标字体（Font Awesome、Iconfont）： 将小图标封装成字体文件（.woff/.ttf），前端只需写一行 <i class=”fa fa-home”></i> 就能加载图标，图标可以像字体一样设置颜色、大小、阴影。这彻底消灭了“切图标”这个需求。
  • SVG Sprite（雪碧图）： 把多个SVG小图标合并到一个文件中，通过SVG的 <use> 标签或CSS background-position 定位来显示需要的图标，一次性加载多个图标，只发一次HTTP请求，极大提升性能。前端无需针对每个图标反复切图。
  • CSS背景定位（Sprites）： 同样是雪碧图思想，但使用PNG图片，工程师将多个切好的PNG合成一张大图（如 sprites.png），然后在CSS中设置 background-image: url(‘sprites.png’); background-position: -20px -50px; 来精确显示其中一小块，这要求切图时所有图标尺寸一致，且排列在雪碧图网格内。

最核心的技巧：从“切”到“想”

  1. 不要切背景图之外的整块区域： 如果设计稿里的按钮背景只是一条纯色渐变条，你完全不需要切一个完整的矩形，而只需切一个1px宽、高度等于渐变条的“重复条”，前端用CSS background: linear-gradient(); 和 background-size: 100% 100%; 就能完美复现，这比切一张大图轻量百倍。
  2. 响应式思维： 不要只切1x尺寸，现代屏幕有1x（普通屏）、2x（Retina屏）、3x（iPhone Plus/Pro等）多种密度。切片文件和命名必须包含倍数标记。icon@2x.png、background.jpg（无标记视为1x）。
  3. 善用svg： 只要是纯色或简单渐变的图标、Logo、小的装饰元素，永远优先使用SVG格式，它体积小、矢量可无限缩放不失真、支持CSS样式、可做动画，只有当设计稿中包含照片级细节、复杂渐变、纹理、半透明叠加时才考虑PNG。
  4. 沟通是最高效的切图： 不要等设计师发给你切片文件，现代协作中，提前约定好命名规范、导出格式、雪碧图规则是最重要的，最棒的“切图”是 “设计师只需要导出SVG图标，前端就能直接用代码拼出整个界面”。

回到最初的问题：“切图怎么切？”

答案已经不再仅仅是“用切片工具在PS里咔咔裁”，真正的切图高手，懂得权衡设计精度、加载性能、开发成本三者的关系，他们可能写一行CSS渐变替代一张背景图，用一段SVG代码替代一个小图标文件，用一套严格的命名规范让协作变得透明。

切图的最高境界，不是“切”，而是“不切”——当你的设计、代码和思维融为一体时，你发现，你不再需要“切图”，你只是在一张无限大的画布上，优雅地搬运像素。