为什么要切图？
切图的核心目的是为了实现网页的视觉效果,主要有以下几个原因：
（图片来源网络，侵删）
- 实现复杂图形：设计稿中有很多效果（如渐变、阴影、圆角、复杂背景）是无法用纯 CSS 完美复制的,必须用图片来实现。
- 保证跨平台一致性：字体在不同操作系统和浏览器上显示效果可能不同，对于 Logo 或特殊字体,通常会切图来确保所有用户看到的效果完全一样。
- 优化性能：通过将一张大图切成多张小图（CSS Sprites / 雪碧图），可以减少 HTTP 请求次数,从而加快页面加载速度。
- 适配不同屏幕：为了实现响应式设计，需要为不同分辨率（如 1x, 2x, 3x）准备不同尺寸的图片。
切图的核心流程
一个完整的切图流程通常包括以下几个步骤：
步骤 1：获取设计稿
你需要从设计师那里拿到最终的设计稿,常见的设计稿格式有：
- PSD：Adobe Photoshop 文件,最传统和常见。
- AI：Adobe Illustrator 文件，常用于 Logo 和矢量图形。
- Sketch：macOS 平台流行的设计工具。
- Figma：基于浏览器的协作设计工具,是目前的主流。
步骤 2：分析设计稿，规划切图
在动手之前，先仔细分析设计稿，决定哪些元素需要切图，哪些可以用 CSS 实现。
需要切图的元素：
（图片来源网络，侵删）
- Logo：通常为 PNG 透明背景图。
- 图标：小而复杂的图形,或需要特殊效果的图标。
- 背景图：带有复杂纹理、渐变或图案的背景。
- 按钮的特殊状态：如悬停、点击时的复杂光影效果。
- 复杂的装饰性元素：如分割线、边框等。
可以用 CSS 实现的元素（优先考虑）：
- 纯色块：用
background-color。 - 简单的几何图形：用
border创建三角形，border-radius创建圆角。 - 阴影：用
box-shadow。 - 文字：用 HTML 和 CSS 渲染。
- 渐变：用
linear-gradient或radial-gradient。
规划切图时，还要考虑：
- 响应式：是否需要切不同分辨率的版本？
- 格式：PNG（支持透明）、JPG（照片类）、SVG（矢量图标）？
- 合并：哪些小图标可以合并成一张雪碧图？
步骤 3：使用工具进行切图
这是“切图”这个动作的核心环节，根据你的需求和熟练度,可以选择不同的工具。
步骤 4：交付给开发人员
切图完成后，你需要整理好文件,并清晰地告知开发人员：
（图片来源网络，侵删）
- 图片文件名和路径。
- 图片在页面中的位置和尺寸。
- 是否使用了 CSS Sprites，如果是,需要提供坐标。
- 图片的用途（如背景图、替换元素等）。
常用切图工具推荐
Photoshop (PS) - 经典专业工具
这是最传统、功能最强大的切图工具。
- 优点：功能全面，几乎所有设计师和前端开发者都会用，支持图层样式,导出选项丰富。
- 缺点：软件较重，操作相对复杂,非设计背景的人上手有门槛。
- 核心功能：
- 图层导出：右键点击图层，选择“导出” -> “快速导出为PNG”。
- 切片工具：手动绘制切片区域，然后通过
文件->导出->存储为Web所用格式进行批量导出和优化。 - 图层样式：可以直接导出带有阴影、渐变等效果的图层。
Sketch - macOS 平台利器
在 Mac 设计领域非常流行，插件生态强大,切图效率极高。
- 优点：界面简洁，操作直观，专为 UI 设计优化,切图和标注功能非常方便。
- 缺点：仅限 macOS。
- 核心功能：
- 自动切图：选中一个图层或 Artboard（画板），在右侧检查器中点击“导出”按钮，即可导出，它会自动根据图层名（如
@2x）生成不同分辨率的图片。 - 插件：安装
Sketch Measure、Zeplin（已停止服务，但理念影响深远）等插件,可以一键生成标注和切图资源包。
- 自动切图：选中一个图层或 Artboard（画板），在右侧检查器中点击“导出”按钮，即可导出，它会自动根据图层名（如
Figma - 现代化在线协作工具
目前的主流设计工具，基于浏览器，无需安装,协作方便。
- 优点：跨平台，实时协作，组件化设计强大,开发交付功能非常出色。
- 缺点：对于超大文件或复杂特效,性能可能不如桌面软件。
- 核心功能：
- 导出：选中图层，点击右下角的“Export”按钮，或使用快捷键
Ctrl/Cmd + E，可以直接导出 PNG、JPG、SVG,并选择导出倍数。 - 开发模式：Figma 有一个专门的“开发模式”，开发者可以直接查看所有元素的代码、尺寸、颜色和导出的切图,无需设计师手动交付。
- 导出：选中图层，点击右下角的“Export”按钮，或使用快捷键
在线切图工具
如果你没有设计稿文件，只有一张图片，需要从中抠出某个元素,可以使用在线工具。
- Remove.bg：一键智能抠图，去除图片背景,效果惊人。
- Photopea：一个在线版的 Photoshop，功能强大,无需安装。
- CSS Sprites Generator：将多张小图自动合并成一张雪碧图，并生成对应的 CSS 代码。
现代前端开发中的“切图”理念
随着技术的发展，传统的“手动切图”在很多场景下正在被更高效的方式取代。
矢量图 - SVG
对于图标、Logo、插画等，SVG 是最佳选择。
- 优点：
- 无损缩放：无论放大多少倍都不会失真。
- 体积小：代码形式，文件体积通常比 PNG 小。
- 可编程：可以用 CSS 修改颜色、大小，甚至用 JS 动画。
- 如何获取：
- 设计师直接提供 SVG 文件。
- 在 Figma/Sketch 中直接导出为 SVG。
- 使用工具将 PNG 转换为 SVG。
自动化工具 - Webpack / Vite 插件
现代前端项目（如使用 Vue, React, Svelte 的项目）可以通过构建工具自动处理图片。
- 图片压缩：使用
image-webpack-loader或vite-plugin-image-optimizer等插件，在项目构建时自动压缩图片,减小文件体积。 - 雪碧图自动生成：使用
webpack-spritesmith等插件，在构建时自动将你需要的图标合并成一张雪碧图，并生成对应的 CSS。 - Base64 内联：对于非常小的图片（小于 5KB），构建工具可以将其转换为 Base64 字符串直接内联到 CSS 或 HTML 中，减少一次 HTTP 请求。
字体图标 - Icon Font / Iconfont
将多个图标打包成一个字体文件，通过 CSS 类来使用。
- 优点：所有图标在一个文件里，切换方便（改颜色只需改 CSS）。
- 缺点：不支持多色图标，控制精度不如 SVG。
- 代表：阿里巴巴的 iconfont.cn 是国内最流行的图标字体库。
总结与最佳实践
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| Logo / 简单图标 | SVG | 无损缩放，可编程，最佳选择。 |
| 复杂图标 / 带有特效的按钮 | PNG | 能完美呈现设计师的复杂视觉效果。 |
| 照片 / 大图背景 | JPG | 在保证视觉质量的前提下，文件体积最小。 |
| 需要大量小图标 | CSS Sprites 或 Icon Font | 减少网络请求，提升性能。 |
| 响应式图片 | 使用 srcset 属性 |
为不同分辨率的屏幕提供不同尺寸的图片。 |
| 现代化开发流程 | 让设计师直接从 Figma/Sketch 导出 | 使用开发交付功能，减少沟通成本和手动操作。 |
给设计师的建议：
- 在设计时规范命名（如
icon-home@2x.png）,方便工具识别。 - 尽量使用矢量工具（如 Figma 的 Pen Tool）绘制图形，方便导出 SVG。
- 养成使用组件的习惯,方便开发者复用。
给开发者的建议：
- 主动和设计师沟通，了解设计规范，争取获得 Figma/Sketch 的访问权限。
- 积极拥抱自动化工具,将重复的切图工作交给构建流程。
- 优先使用 CSS 和 SVG 实现效果,只在必要时使用位图。
希望这份详细的指南能帮助你理解网页切图的方方面面！
