蓝湖 PS 插件切图流程
在前端开发中，与 UI 设计师协作时经常收到未切图的 PSD/Sketch/Figma 设计稿。本节介绍如何使用蓝湖（Lanhu）配合 Photoshop 进行设计稿上传、标注查看和切图导出，以及 Cutman 等替代工具。
工具准备
| 工具 | 用途 | 获取方式 |
|---|---|---|
| Photoshop | 打开 PSD 文件 | Adobe 官网 |
| 蓝湖 Photoshop 插件 | 上传设计稿 + 切图 | 蓝湖官网下载 |
| Cutman | PS 切图工具（替代方案） | 网络搜索下载 |
蓝湖插件安装
下载插件
- 访问蓝湖官网
- 找到"下载" → 选择 Photoshop 插件
- 选择对应 PS 版本下载
安装插件
- macOS：使用安装工具（如 Anastasiy's Extension Manager）安装
.zxp格式插件 - Windows：双击安装包直接安装
安装成功后，在 Photoshop 的"增效工具"菜单中可以看到"蓝湖"选项。
切图流程
步骤一：标记切图元素
- 在 Photoshop 中打开 PSD 文件
- 使用左侧选择工具选中需要切图的元素
- 在蓝湖插件面板中点击"紧贴元素切图"
- 元素周围会出现切图标记
步骤二：上传设计稿
- 在蓝湖插件中选择"上传"
- 选择项目类型：
- iOS（移动端项目推荐）
- Web 1920 或 Web 1440（Web 端项目）
- 选择目标项目和分组
- 点击上传
上传过程中，插件会自动完成两件事：
- 标注所有元素的尺寸和位置信息
- 导出标记的切图元素
步骤三：下载切图
- 上传完成后点击"查看设计"
- 在蓝湖后台打开设计稿
- 切图元素上会显示虚线标记
- 点击虚线 → 右侧出现"下载切图"按钮
- 选择格式（JPG 或 PNG）和平台（iOS 会切 1x/2x/3x 三种分辨率）
- 点击下载
注意事项
- 蓝湖目前不支持 SVG 格式导出
- iOS 模式会导出三种分辨率的图片
- 切图前确保元素已正确标记
替代工具：Cutman
Cutman 是另一个常用的 PS 切图工具，操作流程类似：
- 安装 Cutman PS 插件
- 选中需要切图的图层
- 点击导出
- 选择输出格式和分辨率
设计稿协作建议
| 场景 | 推荐方案 |
|---|---|
| PSD → 切图 | 蓝湖 PS 插件 |
| Sketch → 切图 | 蓝湖 Sketch 插件 |
| Figma → 切图 | Figma 内置导出 |
| 快速标注查看 | 蓝湖在线查看 |
| 批量切图 | Cutman |
↑