蓝湖+PS 实现自动化切图

官方教程

Photoshop 插件

安装插件

点击首页右上角的【下载】图标，打开后，即可下载蓝湖 Photoshop 插件
安装成功后，请重启 Photoshop
★ 注：蓝湖 Ps 插件仅支持 Photoshop CC 2015 及以上版本
（下载蓝湖 Photoshop 插件地址）

插件下载页

登录

打开 Photoshop【窗口】→【扩展功能】→【 蓝湖】

image.png

输入蓝湖帐号、密码登录

登录页面

选择设计图要上传的团队与项目，点击【确定】

选择团队和项目

选择设计对象（类型）

插件内 “当前设计” 是指当前设计图的大小，根据设计图大小选择对应倍数
确定当前设计基于的设备是 iOS、 安卓 还是 Web
再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数
◆ 分类：
iPhone、iPad、iWatch 这三种设备的界面设计 属于—— iOS
安卓系统的界面设计 属于 —— Android
网页类型的界面设计 属于 —— Web

选择设计类别

◆ 例如：
375 x 667，属于 iOS 1x
750 x 1334，属于 iOS 2x
1920 x 1080, (是手机界面还是网页 )手机建议选 Android-xxhdpi
网页选 Web-1x
◆ Web 类型：
1x,是常用尺寸，大家做的网页一般都是选 1x
2x 是指为特定的屏幕（4k 屏）设计的尺寸，通常该尺寸会是正常网页的 2 倍

设置切图

选中切图的图层，或图层组，点击【标为切图】即可

标记为切图

数值是可选的，如果不填数值，默认使用当前图标内容的大小；
如果大小不是自己想要的，可自定义修改

image

PS：不勾选“显示切图区域”即可隐藏切图区域，该切图区域隐藏后，不影响切图的上传
设置切图的图层或组，不可重复嵌套（切图之间是平级关系，存在嵌套的话只会将父级图层或者图层组标记为切图文件）

上传设计图

选中要上传的画板，也可选择全部画板（无画板选全部画板），点击【上传】即可

上传设计图

设置好的切图，会跟随页面一同上传至蓝湖 Web 端，可看标注，并下载切图。

注意：
1.蓝湖推荐使用 Ps 画板工具，可同时上传多个页面。（没有设置画板需要上传全部画板）
不建议使用 一个 psd 文件通过隐藏显示文件夹来区分不同页面，这样会导致上传的多张设计图成为设计图的历史版本，不便于以后的修改更新。
2.智能对象等同于位图，不会有标注内容和 SVG 格式切图

生成 SVG

切图生成 SVG 格式需要被切图层是矢量的图层, 如形状图层和文本图层，但是图片图层、智能对象不能生成 SVG。
在打开“快速上传模式”之后，才能生成 SVG

快速上传模式
快速上传模式是 v2.38 版新增的上传模式, 开启后可以更快的上传, 并且支持矢量图层生成 SVG 格式的切图,还能避免切图不对应等意外情况发生。

开启快速上传模式

注意：
v2.38 之前的版本不能通过插件内自动更新来获得快速上传功能,只能 重新安装插件
快速上传模式只能在 Photoshop CC 2017 以上版本使用.

● 打开: Photoshop 首选项-增效工具-启用生成器
● 在插件右上角的菜单中勾选"启用快速上传"
● 如果你有上传 SVG 的需求, 可以开启"导出 SVG", 如果不需要, 可以关闭它来提升上传速度

打开首选项页面

开启快速上传模式

蓝湖插件启用快速上传

启用快速上传