Skip to content

Files

Latest commit

09d3341 · Oct 14, 2016

History

History
84 lines (45 loc) · 3 KB

README_zh.md

File metadata and controls

84 lines (45 loc) · 3 KB

Coffee-Slice

logo

前端:我需要24x24的icon
UI:23.5x44可以吗……

  • 如何把手中那堆32x66、23.5x44...各种凌乱尺寸的icon全部变成规范储存于正方形画布的指定大小?
  • Sketch图形大小不把描边计算在内,如何让有描边属性的icon贴边切出?
  • 配适各种手机屏幕的@1x、@2x、@3x不同分辨率icon,靠复制?

切图这么简单的事,就不要人工做了呀~用Coffee Slice都可以一键搞定。

插件功能:

1.简单切图功能:根据用户给出的目标容器尺寸,自动计算icon的描边属性、宽度,对icon进行缩放、贴边处理。添加切图图层,自动生成基于@1x/@2x/@3x分辨率的成品切图。

2.一键保存功能:生成@1x/@2x/@3x分辨率的成品切图并一键保存到指定路径。

简单切图:

demo

一键保存:

demo

安装步骤

  1. 下载插件Coffee slice - v2.0.zip并解压
  2. 双击Coffee Slice.sketchplugin安装
  3. 如果第二步中没有安装成功,请在sketch界面中选择:'Plugins' -> 'Manage Plugins...' -> '左下角工具图标' -> 'Show Plugins Folder',将 Coffee Slice.sketchplugin 复制到该文件夹中

用法

简单切图

1.选择你想要切出的icon:

selection

2.运行插件:

点击插件栏中的 '🙉 Coffee Slice' -> 'Just Slice' 或使用快捷键 : ⌃ + ⇧ + K

3.告诉插件一个icon的目标尺寸

input size

4.搞定了!

已经自动生成基于@1x/@2x/@3x分辨率的成品切图(自动添加slice图层),使用Sketch的export功能将它保存下来吧~

readied

一键保存

1.选择你想要切出的icon:

autosave

2.选择你的设计稿的分辨率(1x或2x),并确定你所需要的icon文件类型(PNG或者SVG)

autosave

3.选择保存路径

autosave

4.你的图标已经保存在指定路径了~

autosave

反馈

如果你有什么疑问,或者有什么建议和意见, 请 提出issue 或者给我发电子邮件: oohmyv@gmail.com
知乎:@贰球

版权声明

The MIT License (MIT)