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

2024-05-07 09:09:52

前言

在很多时候，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, 这个挺不错的

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

微信小程序在开发者工具和预览下边跳转都好好的真机预览就找不到页面，报错 {“errMsg“:“navigateTo:fail page \“***\“ is not found“}
微信小程序开发有这么一种情况: 在开发者工具里边随便点随便跳转,页面都能找到点击预览,手机扫码来回点来回跳,页面都能找到点击真机预览,来回点来回跳,偶尔页面就找不到了报错:(in promise ...
像素大厨PxCook for Mac(自动标注切图工具)中文免费版
PxCook(像素大厨)是面向设计师的一款免费.交互流畅.全平台支持的标注切图工具软件.它支持对PS.Sketch设计元素尺寸.元素距离.文本样式.颜色的智能标注,支持智能切图.每个UI设计师都在用的 ...
uniapp开发微信小程序，开发者工具、真机预览都没问题，唯独预览、体验版在手机上列表顺序错乱，用的localeCompare做的中文排序，终于找到问题并解决掉了，记录一下子
中文转拼音资源地址:https://download.csdn.net/download/qq_38652871/10906193 排序方法记录地址:https://blog.csdn.net/qq_ ...
5款前端切图工具大比拼：谁是最强切图神器
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...
像素大厨生成html文件,PxCook 像素大厨 - 标注切图一起搞定
PxCook是新一代的UI界面设计标注切图工具.自动智能分析PSD文档信息,只需通过简单的点.滑操作即可生成标注.同时实时检测PSD,一旦PSD更新,标注自动更新,无需再次标注.切图工具无需安装插件, ...
如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
前端标注切图利器-像素大厨（PxCook）
2019独角兽企业重金招聘Python工程师标准>>> 之前一直用ps自带的智能切图,由于ps智能切图不能切固定大小的图,在网上找到了一个比较好的前端神器像素大厨 PxCook,不光 ...
大前端学习2-1__脚手架工具
脚手架工具脚手架工具脚手架工具介绍常用的及脚手架工具 Yeoman Sub Generator 常用的Yeoman使用步骤自定义Generator 根据模板生成文件接收用户输入 vue Ge ...
好程序员HTML5大前端分享常用开发工具大集合
HTML5作为当前最为流行的编程语言,广为适用.语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上.随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占据了制高点.接 ...

最新文章

热门文章