自动切图神器Layer Cake:设计师们必备利器

文章描述:设计师的切图神器SLICY(LAYER CAKE)!.

自动切图工具「Slicy」Mac OS版(Layer Cake),真正解放设计师的神器!
为切图黯然销魂的设计师们必备利器!推荐人:abo 阿里巴巴UI设计师

  • @zhuhuizero:这个软件我用了快半年了,之前叫LayerCake,半年更新了3次修复了一些bug,真的相当好用。让切图变的极为轻松,并且强迫你做好清晰合理的图层命名,帮你养成良好的工作习惯,官方有试用版,推荐设计师都用用这个。
  • @aboXabo:链接提供的Slicy(原名Layer Cake)是免费试用版,可能切出来的图有红线水印。正式版是需要钱的,但对于提高工作效率来说,191人民币不算多。中国网民的智慧是无穷的,但不鼓励使用盗版!

客户端UI设计和手机UI设计最烦的不是设计界面和设计图标,而是切图。Slicy就是来解救讨厌切图的设计师们。(暂无法生成安卓的.9.png)
这款软件操作十分简单,只要将PSD拖进去Slicy的窗口,就能自动生成.jpg和.png等格式的切图文件,瞬间减少了很多工作量。
当然,前提是,你得养成良好的PSD图层管理。

将上面的有4个五角星的界面拖进去Slicy窗口,瞬间生成4个png切图,点击save保存文件,可以选择同步PSD或者不同步
(如果同步PSD,只要你的PSD做出修改,相应的切图PNG也会立刻修改生效,不需要再次保存PNG切图)

图层命名说明(可参考下载文件里的Slicy示例)

图标切图:只需要把图片图层内容,放置在图层文件夹里,并命名:图标名称.icns就可以自动生成.icns格式的图标文件

把你想切图的部分,放在文件夹里,并命名切图名称.png(或者.jpg)。就能自动把想切图的部分生成。

假如你想切图的部分跟图层大小并不是一致的。(五角星是图层,红色遮罩是你想切出来的图片大小)
你只要加上一层遮罩,并把遮罩的图层命名成@bounds。
这样,切出来的图片大小,会跟@bounds图层的大小一直。
注意:两个图层要一起放在一个图层文件夹里,并命名“切图名称.png”

除了普通的切图,Slicy还能自动把图层放大2倍,生成@2X的切图。
@2X切图是用在iPhone Retina屏幕上的切图。命名方式见示例里的图层命名方式。

只要你养成好的图层命名规则,这款软件可以方便快速生成切图,帮你省掉一半的工作时间。

下载地址

时间: 2024-08-03 22:19:10

自动切图神器Layer Cake:设计师们必备利器的相关文章

MAC下的SLICY切图神器怎么用

  MAC下的SLICY切图神器怎么用 切图方便,简单的拖放即可,傻瓜式操作2. 培养为图片资源合理命名的好习惯 自动生成@2x两套图片,极大方便IOS开发者 二.软件使用 1.PSD文件的预处理 这一步可以由设计师来处理,不过个人推荐程序员亲自完成这一步骤,因为这里涉及到图片的命名,我们自己来对图片进行命名可以更好的使之符合整个项目的命名规则,方便在项目中对对应图片资源进行调用和管理. 首先用PhotoShop打开设计师给你的PSD文件,如下图: 图中的绿色状态图标即为本次需要切出的素材图片

省时省力的切图神器SLICY

  如何使用 Slicy 切图? 1. PS 图层依规则命名. 2. 把档案丢进 Slicy 里. 3. 好了. 够简单无脑了吧? 图层命名方式 为了要无脑切图,得稍微记一下 slicy 图层命名的格式,官网提供的 Examples 里面有 5 个文件夹. Basic Tagging 基本标签 图层或组名的字尾打上.png就好了. Explicit Sizing 设定切图尺寸 如果切图为特定尺寸,可以用这3种方式设定: 1. 使用矩型工具(形状图层)画出欲裁切的尺寸,将图层名称设为「@bound

SLICY MAC下的切图神器!

  软件特性: 切图方便,简单的拖放即可,傻瓜式操作2. 培养为图片资源合理命名的好习惯 自动生成@2x两套图片,极大方便IOS开发者 一.软件使用 1.PSD文件的预处理 这一步可以由设计师来处理,不过个人推荐程序员亲自完成这一步骤,因为这里涉及到图片的命名,我们自己来对图片进行命名可以更好的使之符合整个项目的命名规则,方便在项目中对对应图片资源进行调用和管理. 首先用PhotoShop打开设计师给你的PSD文件,如下图: 图中的绿色状态图标即为本次需要切出的素材图片 在右侧分组面板中,选中对

UI设计师工作必备的七个设计神器

  今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版.配色.切图到标注.预览,都有对应的良心神器推荐,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧. <七种武器>为著名武侠小说家古龙著名作品代表作之一,共分为:长生剑.孔雀翎.碧玉刀.多情环.离别钩.霸王枪.拳头,七种武器非一般江湖武器,件件精妙绝伦. 在UI设计中一样存在这样的七种武器,如果能拥有这七种武器,必定能让你设计如同"开挂"一般事半功倍! 长生

聊聊原生APP切图那些事儿

  如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640×1136啦,当然也可以用iphone4或4s的640×960,因为宽度都是640px,他们切图的标准是一样的.显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切

iPhone 6 plus 适配切图方法分享

  网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketch自动导出多套尺寸切图和SVG矢量格式,表示没钱买MAC 2. 有人说用切图神器cutman,表示用CC以上版本PS不支持 3. 另-不喜欢/用不惯/不会用ps自带切图工具的 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的"降采样"(Downsampling)(1080-1920)

一款APP从设计稿到切图过程全方位揭秘

  我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧. 页面篇幅比较长,

超全面的切图规范指南

设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适.精准的切图可以最大限度的还原设计图,起到事半功倍的效果. 如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力. 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求. 其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量. 最后,输出的切

网站制作的切图技巧

一般的网站制作步骤大体上为:设计效果图–>切图+制作静态html模板–>嵌套至CMS,其中,切图虽然是很简单的一个步骤,但其中也有很多技巧,以下是我个人总结出来的几点. 总体上,把握一个原则,能用css写的,坚决不要用图片.经验告诉我们,首页图片很多的网站打开会很慢,一是因为图片多,需要下载的文件体积就增大,二是每一个图片下载都会对服务器有一个请求,增大了浏览器与服务端的交互次数,如果能把纯色的部分用css来写,而不因为省事直接切图,就会极大提高网站的运行效率,我最早开始学习制作网站时,就想当