蓝湖:你们要的“自动切图”功能来了!

一般本湖君出来吆喝,必然是要搞大事情~

继“自动标注”功能后,蓝湖再次解锁重量级功能——“自动切图”!

小伙伴们,惊喜不惊喜?

?

?延续“蓝湖”老规矩,本“自动切图”功能:

①同时支持Mac和Windows双系统

②同时支持PS和Sketch

③免费!

话不多说,我们来看看如何在【蓝湖】上使用“自动切图”功能吧~

1.Photoshop用户

第一步:通过蓝湖插件在PS中标记你需要生成的切图

?

第二步:通过蓝湖插件将页面上传至蓝湖

?

第三步:在蓝湖Web端,双击设计图查看标注和切图

在这里,你家的工程师可以:

①查看所有元素的尺寸、字号、距离等信息,并可直接复制相应代码

?

②一键下载切图文件

?

?2.Sketch用户

第一步: 通过蓝湖插件在Sketch中标记你需要生成的切图

方法①: 用export标记切图 (忽略透明区域)

?

方法② :用切刀工具(slice)切图(保留透明区域)

?

第二步:通过蓝湖插件将页面上传至蓝湖

?

第三步: 在蓝湖Web端,双击设计图查看标注和切图

在这个页面,你家的工程师可以:

①查看任意元素的大小、字号、距离等信息,并直接复制该信息对应的代码;

②一键下载切图文件。

(注:蓝湖暂时无法识别出对symbol进行的切图哦)

?

?这样一来,“标记”“切图”这两件事都可以让工程师们去自助,设计师们可以更加专注于“设计”本身了~

“蓝湖”产品设计协作平台,让产品设计更加高效,我们一直都在努力!

免费使用:LanhuApp.com

蓝湖PS插件下载:LanhuApp.com/ps

蓝湖sketch插件下载:LanhuApp.com/mac

「蓝湖」,支持自动标注的产品设计协作平台。微信公众号:lanhu_app

时间: 2024-10-03 22:47:16

蓝湖:你们要的“自动切图”功能来了!的相关文章

利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了

今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-photoshop-cc-fd.html, 同时还会引用到一个三方脚本  http://hackingui.com/design/export-photoshop-layer-to-svg/ , 三方脚本的一篇文章 http://www.ui.cn/detail/53284.html. 最终找到了解决办法,

photoshop自动切图

自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 初始设置 当然首先还是要进行一些首选项设置 [1]在编辑 -> 首选项 -> 增效工具中,选中启用生成器 [2]重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源 [注意]只有在photoshop中有文件打开的情况下,该项才可以点击

前端工程师技能之photoshop巧用系列扩展篇——自动切图

× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 初始设置 当然首先还是要进行一些首选项设置 [1]在编辑 -> 首选项 -> 增效工具中,选中启用生成器 [2]重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源 [注意]只有在photoshop中有文

Photoshop如何实现UI自动切图?

Photoshop如何实现UI自动切图? 切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程.切图是衔接UI设计和应用程序的桥梁,是一种将设计师的“理想”转化为“现实”的工作. 由于不同人的实现方法不同,可能对切图的需求也存在一定的差异.作为前端工程师,掌握切图将为提升自己的竞争力带来一臂之力. 一般来说,photoshop可以通过手动进行切图,这样比较好控制,但是对于复杂的

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

第144天:PS切图方法总结

一.切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方面,CC版本可通过脚本执行全自动切图,这样完全解放了切图人员的

蓝湖云PS插件使用

蓝湖云特性: 自动标注.共享切图.同步更新 1.https://lanhuapp.com 注册用户,进入,创建项目 2.下载插件 3.安装(windows下直接双击exe,mac版本进手动安装包安装) 4.打开photoshop ,窗口,扩展功能,蓝湖 输入用户名,密码,选择团队,项目 5.打卡psd文件,上传文件 6.如果想要在蓝湖上下载切图 需要先在psd里切片后上传 在蓝湖里选择切片下载即可 原文地址:https://www.cnblogs.com/zhaogaojian/p/122631

切图神器

解决问题: 1. 解决ios的@2x.png的分辩率问题 2. 解决android的多分辩率的问题 3. 解决web下也需要导出图片的问题 4. 自动切图 - 注意是切图,不是生成html.根据一些简单规则自动切好图片放到相应的文件夹里 三条规则,非常简单: 1. 要输出图的单位以图层文件夹(组)为单位, 文件夹命名末尾加『@』为结束符.并且,自动切除边界外透明的像素. 2. 以『#』名字命名的图层可以认为是选择图片输出的边界.例输出背景图:组命名为『[email protected]』,组里有

推荐一款UI设计师的标注切图的利器

有请PxCook 像素大厨闪亮登场!!! PxCook 像素大厨可以将标注和切图完美的结合起来,一起搞定! 也许你知道这款软件,但是肯定有不知道的小伙伴们,那么下面就让我给大家介绍下: 1.手动标注:PxCook支持多种图像格式(psd,png,bmp,jpg等)的读取,并可手动创建距离.区域.颜色.文本.坐标点等标注. 2.智能标注:提供PSD文件解析与Sketch插件支持,自动识别各图层尺寸及文本样式等,标注更快捷! 3.自动吸附:标注过程中可以针对图像内突出颜色进行自动吸附. 4.软件设置