切图从入门到实操全流程指南，全图切法详解
这份指南围绕切图展开，覆盖从入门到实操的全流程，先明确切图核心是提取设计稿中独立元素或截取完整画面，入门阶段讲解工具选择（如PS、Figma等）及基础操作；实操部分细化全图截取的规范步骤，也拆解元素切图的要点，帮助学习者掌握切图方法。
在UI设计与前端开发的衔接环节,切图是决定设计稿能否精准落地的关键一步，很多刚接触设计的新手常困惑：“切图怎么切才能既符合开发需求，又保证视觉效果？”其实切图并非复杂的技术难题，只要理清逻辑、掌握工具方法，就能高效完成，以下从切图的核心逻辑、前期准备、具体操作到注意事项，全面解析“切图怎么切”的问题。
切图前：先想清楚“为什么切”
在动手之前,必须明确切图的核心目的——为前端开发提供可直接使用的视觉资源，同时还原设计稿的细节、比例和质感，切图不是简单的“导出图片”，而是要兼顾开发的易用性和设计的准确性，这决定了后续切图的范围和标准。
切图怎么切？分步骤拆解操作
目前主流的切图工具是Figma（跨平台协作性强）和Photoshop（PS，传统设计工具），两者操作逻辑略有差异，但核心步骤一致，以下分别说明：
（一）用Figma切图：高效协作的首选
Figma的切图功能天然适配团队协作,步骤更简洁：
- 整理设计稿，标记切图范围 先检查设计稿的图层：确保需要切图的元素（如按钮、图标、背景图、装饰图形）都在独立图层，且命名清晰（btn-primary-normal”“icon-search”），如果是多个元素组成的组件（如带文字的按钮），需确认是否要整体切图，还是拆分元素由前端用代码实现（文字通常无需切图，由前端写代码控制）。
- 启用“切图”功能，设置参数
选中需要切图的图层，在右侧属性栏找到“Export”（导出）选项，点击“+”添加导出规则：
- 格式：根据需求选PNG（透明背景、细节丰富，适合图标、按钮）、JPG（不透明背景，适合照片类背景）、SVG（矢量格式，放大不失真，适合简单图标、图形）；
- 尺寸：若设计稿是@2x（常见的移动端设计尺寸，比如iPhone 12的设计稿宽度为375px，@2x即750px），导出时可设置“1x”“2x”“3x”（适配不同分辨率的设备），Figma会自动按比例生成对应尺寸的图片；
- 命名：保持和图层名一致，方便前端对应。
- 批量导出，整理文件 选中多个需要切图的图层，点击“Export”下的“Export Selected”，即可批量导出，导出后按“图标”“按钮”“背景”等分类整理文件夹，避免混乱。
（二）用PS切图：传统工具的精准操作
PS的切图功能更适合需要精细调整的场景,步骤稍繁琐：
- 预处理设计稿，规范图层 打开PS设计稿，先合并或整理图层：将需要切图的元素单独放在一个图层（若多个元素需一起切，可选中后按Ctrl+G编组，再右键“合并组”），同时隐藏暂时不需要的图层，避免干扰。
- 用“切片工具”划定范围 选择左侧工具栏的“切片工具”（或按快捷键C），在画布上拖动鼠标，框选需要切图的元素，如果是规则元素（如正方形图标），可按住Shift键绘制正切片；若需要精准匹配元素大小，可右键切片选择“切片选项”，设置切片的宽高和位置。
- 设置导出参数，保存切图
点击顶部菜单栏“文件”→“导出”→“存储为Web所用格式（旧版）”（快捷键Ctrl+Shift+S），在弹出的窗口中：
- 选择切片：点击“切片选择工具”（窗口左侧），选中需要导出的切片，设置格式（PNG-24适合透明背景，JPG适合照片）；
- 调整品质：JPG格式可通过“品质”参数平衡清晰度和文件大小（通常设为60-80即可）；
- 保存：点击“存储”，选择保存路径，在“格式”中选“仅限图像”，“切片”选“选中的切片”，确认后即可导出。
切图怎么切才“合格”？关键注意事项
- 区分“需切图”和“无需切图”的元素 并非所有设计元素都要切图：文字、纯色背景、简单的几何图形（如矩形、圆形）可由前端用代码实现，无需切图；只有复杂图形（如渐变按钮、带纹理的装饰、特殊字体的艺术字）、图标、照片类背景才需要切图，这样能减少前端的资源加载压力。
- 保证尺寸和比例精准 切图的尺寸必须和设计稿中的元素完全一致，避免前端还原时出现拉伸或错位，比如设计稿中按钮的宽度是200px、高度是50px，切图的宽高必须严格匹配，不能有偏差。
- 控制文件大小 切图的文件大小会影响页面加载速度，因此要在保证清晰度的前提下压缩体积：SVG格式优先用于简单图标，可大幅减小体积；PNG格式可通过工具（如TinyPNG）进一步压缩；JPG格式避免过高的品质参数。
- 命名规范，方便协作 切图的命名要清晰、统一，比如用“模块-元素-状态”的格式（如“home-banner-active”“user-avatar-default”），避免用“无标题1”“图层2”这类模糊的名称，让前端能快速找到对应的资源。
切图怎么切”的核心，是站在“设计还原”和“开发高效”的双重角度思考——既要保证视觉效果不打折扣，又要让前端能顺利对接，只要熟练掌握工具操作，理清切图的逻辑和注意事项，就能快速上手，让设计稿的落地更顺畅。