大前端求人不如求己系列工具：如何PSD文件自动标注切图和真机预览

解忧杂货铺Q

已于 2022-05-16 12:09:29 修改

阅读量5.7k

点赞数

分类专栏：大前端文章标签： web

于 2019-11-01 14:44:13 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_26003101/article/details/102857293

版权

大前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

前言

在很多时候，UI会给一部分切图，当你使用一个新的技术，需要的不再是png而是webp或者SVG时候，沟通变得异常复杂，沟通成本急剧增加。

很多时候在想，是否有一些工具，可以帮助我们解决这个尴尬的问题，也可以减少沟通成本；

当然很多公司专业的UI会通过专业工具Stetch帮你生成一套完成的UI备注文件。

可惜，有些时候，并没有。

所以，经过一些摸索，发现了一些比较不错的工具，来提高我们工作的效率；

废话不多说，开始介绍。

蓝湖工具

如上所有，如果没有UI帮你做或者没时间做UI备注，我们就采取其他的在线模式；

在线工具就是蓝湖

注册账号

注册一个免费账号

下载插件

ps应用商店下载蓝湖插件

Adobe Photoshop 插件下载

在这里插入图片描述

ps中点击蓝湖工具，然后登陆
在这里插入图片描述

自动备注

当我们只需要获取自动备注的时候，点击上传面板

在这里插入图片描述

点击去web端查看按钮，可以跳转到蓝湖网页版

在这里插入图片描述

右边的各种备注信息一览无余，很是方便。

切图

当你需要生成切图时候，如下图一步步操作

在这里插入图片描述

双击psd源文件，选中ICON图层，点击标记为切图

在这里插入图片描述

在这里插入图片描述

手机预览psd源文件

当你之前都已经把PSD文件上传到蓝湖后，appstore下载蓝湖APP，之后就可以直接预览psd文件了

在这里插入图片描述

Design Mirror

在这里插入图片描述

首先下载 photoshop 插件, 然后下载 app，然后在ps里面登录注册好的账号，通过wifi或者USB，就可以app里面预览

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这个预览和上一个蓝湖预览最大的不同就是这个完全是本地预览，不需要上传，比较方便。

在这里插入图片描述

甚至还可以点击上传图片，把手机上的图片同步到photoshop, 这个挺不错的

解忧杂货铺Q

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
大前端求人不如求己系列工具：如何PSD文件自动标注切图和真机预览

前言在很多时候，UI会给一部分切图，当你使用一个新的技术，需要的不再是png而是webp或者SVG时候，沟通变得异常复杂，沟通成本急剧增加。很多时候在想，是否有一些工具，可以帮助我们解决这个尴尬的问题，也可以减少沟通成本；当然很多公司专业的UI会通过专业工具Stetch帮你生成一套完成的UI备注文件。可惜，有些时候，并没有。所以，经过一些摸索，发现了一些比较不错的工具，来提高我们工作的效...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。