神器两连发!阿里设计师开发的切图神器+谷歌的免费中文字体 - 优设网 - UISDC

神器两连发!阿里设计师开发的切图神器+谷歌的免费中文字体

2016/10/10 12137评论区

coffee-slice-google-noto-fonts-1

编者按:今天推荐两个设计神器,一个是阿里设计师开发的切图神器,可以自动切图,一键保存,非常方便。另外是谷歌刚开放的字型Noto ,现在可以免费下载,一起来收!

前端:我需要24×24的 icon

UI:23.5×44可以吗……

如何把手中那堆32×66、23.5×44…各种凌乱尺寸的icon全部变成规范储存于正方形画布的指定大小?

Sketch图形大小不把描边计算在内,如何让有描边属性的icon贴边切出?

配适各种手机屏幕的@1x、@2x、@3x不同分辨率icon,靠复制?

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

Coffee Slice

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

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

下载插件 Coffee slice – v2.0.zip 并解压

双击Coffee Slice.sketchplugin安装。

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

uisdc-kuzhan-201610108

2. 运行插件:

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

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

uisdc-kuzhan-201610101

4. 搞定了!

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

uisdc-kuzhan-201610109

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

uisdc-kuzhan-201610102

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

uisdc-kuzhan-201610103

3. 选择保存路径

uisdc-kuzhan-201610104

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

uisdc-kuzhan-201610105

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

Google Noto Fonts

昨天 Google 终于官方宣布「An Open source font system for everyone」,在五年后正式向全世界推出免费开放原始码字型   !这命名也很有趣,Noto 其实就是—“No more tofu” 的缩写,「豆腐」是当遇到网页或系统上有无法显示的字符,会显示为一个中间空白符号「⯐」,看起来就很像豆腐,Noto 致力于解决跨系统、语系无法正确显示部分字符的问题。

Google 在网站里提到「Noto 字体系列一共涵盖 800 种语言及 110,000 个字符」,势必会让 Android 及 ChromeOS 更加方便。实现这套字型还要感谢 Monotype 及 Adobe 和无数志工的参与。Google 在网站上开放这套免费字型下载,完整字型集、字重和样式打包后大小为 470.5 MB(包含繁体中文、简体中文),也可以依照需求来下载特定语系。

STEP 1

Google Noto Fonts 网站已重新改版设计,如同 Google Fonts 前段时间大更新,采用更为简洁干净且一致性的设计风格。从网站上方可以找到下载完整字型集的链结,目前档案大小为 470.5 MB ,如果不需要所有语系,利用搜寻找到适合你使用的免费字型。

uisdc-kuzhan-201610106

STEP 2

例如繁体中文 Noto Sans CJK TC、简体中文 Noto Sans CJK SC,也能在 Noto 网站中找到各种字重的样式预览。右上角就有对应的下载按钮「Download」,点击后下载、解压缩,将它安装到系统里就能使用 Google 的 Noto 开源字型。

如果不知道如何安装新字型,Noto 网站也提供简易教学。

uisdc-kuzhan-201610107

Noto 字型不仅能在许多语系下正常显示,更重要的是维持设计一贯性,也因此不会有无法显示时就跑出不同字型、拼凑而成的奇怪样式,阅读上眼睛也更为舒适。Noto 除开放在网络下载,也在 GitHub 释出设计原始档。

「优设酷站22连发!」

  1. 免费图库+导航收集站:《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索:《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较:《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图:《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载:《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色:《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色:《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色:《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐:《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色:《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景:《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:free.com.tw

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/coffee-slice-google-noto-fonts

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 职场 版式设计 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里