目录

• 一、蓝湖简介
• • 1.产品经理轻松表达需求
  • 2.设计师更快交付设计图
  • 3.工程师快速省心开发
• 二、注册账号
• 三、下载并安装蓝湖 Photoshop 插件
• 四、Photoshop 上操作

---

一、蓝湖简介

蓝湖官网：https://lanhuapp/，以下为官网的介绍。

1.产品经理轻松表达需求

在线展示文档，团队查看更方便

支持在线评审，更新通知，自动备份

一个地方展现所有资源

汇总文档和设计，理解更轻松

按页面逻辑连线，展现逻辑更清晰

快速生成交互原型

强调产品交互的说明和备注

产品经理可以基于设计图发表意见

2.设计师更快交付设计图

自动标注设计图，从此不再低效手工

一键生成标注和切图，自动共享给同事

设计图管理

清晰展现设计图不同状态

设计图批注

打点标记进行评论, @相关成员可实时通知

自动保存历史版本

随时查看历史版本，支持自动备份源文件

3.工程师快速省心开发

查看标注

点击任意元素，即可查看标注信息

切图下载

一键下载，支持 JPG、PNG、SVG、WebP

自动生成代码

自动生成 CSS、iOS 和 Android 代码

二、注册账号

点击官网首页【免费注册】按钮：

三、下载并安装蓝湖 Photoshop 插件

下载地址：https://lanhuapp/ps?formHeader=ps

四、Photoshop 上操作

重启 Photoshop，进入 “窗口” -> “扩展” -> “蓝湖”：

默认打开了设计图转代码功能：

输入蓝湖账号密码登录：

选择设计图画板宽度：

Android 手机建议选 xxhdpi，Web 建议选 Web-1x。

标记为切图：

上传设计图：