设计师快捷效率工具推荐(一)

2016年9月20日

在工作中会遇到这样那样的问题,比如找素材,计算比例,颜色搭配等等,当你遇到的时候灾区百度google势必会耽搁很多时间精力。

临时抱佛脚,不如平时多烧香,平时多多积累素材,在以后的工作中将会事半功倍。同时也有很多能够大大提升工作效率的小工具,可以为我们节省很多时间~下面我就为大家推荐一些:

一. 长宽比换算工具(16:9, 21:9, 4:3, 2:1)

使用这个工具可以方便设计师快速换算种常用标准比例,包含16:9, 21:9, 4:3 和 2:1等多个标准比例换算。

长宽比

网站名称:Aspect
网站地址1:http://www.shejidaren.com/examples/tools/aspect/index.html
网站地址2:http://aspects.design/ (可能需要 VPN 打开)

二.黄金比例在线计算工具

黄金比例(黄金分割)这个专业名词我想设计师不会陌生,现今很多工业产品、电子产品、建筑物或艺术品均普遍应用黄金分割,展现其功能性与美观性。此外在LOGO 设计、APP UI 设计、网页设计等方面也同样适用,尤其是黄金比例=1:1.618使用最为流行。

除了黄金比(Golden Ratio)外,其实还有白银比例(Silver Ratio)、铂金比例(Platinum Ratio)、青铜比例(Bronze Ratio)这些都具有严格的比例性、艺术性、和谐性,并蕴藏着丰富的美学价值,好好利用,将会使你的作品变得更多高大上。

这些比例的计算是比较复杂而且花时间,所以使用今天设计达人网小编分享的「黄金比在线计算工具」就可以轻松计算出对应的比例数值!

黄金比

网址名称:Golden Ratio
网址地址: http://www.shejidaren.com/examples/tools/golden-ratio/index.html

三.Sketch 快捷键速记表

Sketch 是一款好用快捷的设计软件,很多做UI设计的同学开始从 PHOTOSHOP 转向 SKETCH,使用它不仅可以做 WEB 和 APP UI,也可以用它来制作高保真原型或交互稿。

如果你刚接触这款软件,那么熟记他的快捷键会大大提高你的作业效率,下面是最新的 Sketch 快捷键一览表,可以让大家快捷查询或记忆 Sketch 的快键,目前有网页版和图像版,建议收藏以备日后使用。

网站名称:Sketch 快捷键速记表
网页版:http://www.shejidaren.com/examples/tools/sketch-shortcuts/index.html

四.Colorfavs 抓取图像颜色搭配的在线工具

Colorfavs,主要用于上传图像并获取图像颜色,功能和 pictaculous、color hunter 配色工具类似,但小编觉得它的体验还是不错的,比如界面设计简洁,可以浏览优秀颜色搭配、收藏配色方案功能、拖拽上传图像抓取颜色配色等等,都是不错的功能。

上传图像获取配色方案

Colorfavs 工具界面简洁,不需要教学就知道怎么用啦,如果要上传图像,直接拖动到窗口 Upload 区域不能上传,很方便哦!

众多漂亮配色方案

汇聚众多的漂亮配色方案,看到喜欢的可以点击「Add to Collection」收藏它。

除了以上,还有很多细节的小功能,大家可以去体验下哦!

网站名称:Colorfavs
网站地址:http://www.colorfavs.com

 

五.屏幕尺寸大全(含智能手表、手机、imac、平板电脑等设备分辨率)

随着技术的发展,目前多了很多智能设备或更新换代,对于UI设计的来说,这些设备的屏幕尺寸必须考虑到,为了方便UI设计师查看,这里给大家分享一个屏幕尺寸大全在线参考手册,让设计师们可以选择最合适的尺寸去设计。

这个尺寸参考表包括大部分热门、常用的设备,如iPad, iMac 5k,iPhone Plus,Apple Watch, Natus系列等,足够应常用需求。

使用TIPS

在使用时,用户可以选中某设备,在右侧可以查看更新详细的信息,比如屏幕横向、纵向数值、物理密度以及其它详细信息。

屏幕尺寸

工具名称:屏幕尺寸大全
网站地址:屏幕尺寸大全

六.CSS动画集合 可直接生成动画代码 – AniCollection

CSS动画实现比JS简单很多,但是对于新手来说还是很多代码的,而且还要不停的刷新来计算动画效果,不过没关系,今天设计达人网小编为大家分享一个可以在线生成CSS动画的工具:AniCollection,而且他们的动画数量很多,能满足一般需要求了。

CSS动画集合 可直接生成动画代码 - AniCollection

目前AniCollection上有很多不错的动画特效,比较适用于鼠标HOVER或点击事件,当然最主要的是能直接在线生成,太方便了。

前端工具名称:AniCollection
官方网站:http://anicollection.github.io

七.Bootstrap Layout 布局神器

”Shoelace” Bootstrap 布局神器可以轻松实现HTML布局了。

PS: 类似工具还有Layout it,功能很强大哦!

Shoelace: Bootstrap Layout 布局神器

Shoelace 工具介绍:

拖拽式绘制布局,视觉效果友好,感觉操作比 Layout it 简单点。如下图,就这么拖拽几下,布局就出来了。

Shoelace bootstrap layout tools

点击左边的面板还可以分别改变不现设备平台的布局。

Shoelace bootstrap layout tools

创建布局确实很快,点几下鼠标就出来了,喜欢的可以尝试尝试哦!但总体来说比 layout it 的功能少很多,但如果仅用于布局,我觉得 shoelace 更好用。

工具名称 :shoelace
网站地址:http://shoelace.io/

 

八.免费的移动设备Mockup在线生成工具

关于Mockup素材我们分享过很多,但这些当然是越新越多越好了,今天和大家分享一个免费的移动设备Mockup在线生成工具 – Dunnnk,该在线工具可以将你设计的效果图嵌入到iPhone、iPad、Android、Macbook、iMac设备上,效果图逼真好看,并能展示给客户浏览,获得更真实展现。

UI Mockup生成器

使用方法

过程十分Easy啊,准备一张和手机分辨率差不多的图像,点击需要生成的设备就行了。

下面是小编使用的是Google Nexus 5 的分辨率:720 * 1280px 图像生成iPhone手机模型效果图:

iPhone 5s效果图

怎么样,是不是很简单呢?目前数量不多,但因为是新站,估计作者会很快更新更多的Mockup设备效果图出来。收藏起来吧,以便做UI设计时,给客户看效果图时加上这个Mockup会很不错哦!

Dunnnk网站地址:http://dunnnk.com

九.可制作简单设计规范文档的Photoshop扩展插件 – INK

该插件快速生成图形图层的相关信息(如下图)。扩展是免费使用的,目前只兼容Photoshop CS6/CC版本。

photoshop-ink-plugin-demo

上图显示了我创建的图形对应的信息、大小、颜色等信息。

Ink扩展插件的特点

Ink可以记录每个图层对应在图形的相关信息,如:颜色、形状、尺寸、渐变、阴影等等。如果做网页设计,有了这个可以让设计师方便的输出一个规范文档,这样就不会因缺乏规范而导致不准确的前端输出。

ink-plugin

当然也可以作为简单的风格指南来制作。

安装Ink扩展

首先下载Ink扩展,下载地址:INK
ink-download
安装:

  1. 解压下载的文件,进入对应版本文件夹,双击内的”Ink.zxp”。
  2. 双击后将会自动启动Adobe扩展管理器,并按照说明进行安装。(没启动Adobe扩展管理器的,可能你是使用绿色版,没有自带管理器,可去官网下载。)
  3. 重启Photoshop。
  4. 主菜单选择”窗口” – “扩展功能” – “Ink”

ink-ok

图:Photoshop Ink扩展界面

Ink扩展使用教程

下面通过一个简单的例子来使用INK,打开PS,新建一个画布,创建两个图层,并作简单排版,如下图:

ink-01

选择要生成的图层(也可以同时选择多个图层),打开Ink扩展面板,并点击黄色按钮。

ink-02

完成!生成图形的信息如下图 ,如果信息重叠了,可以对应调整下图层位置。

photoshop-ink-plugin-demo

过程十分简单和轻松,喜欢的设计师们,赶快下载收藏吧。

版权:免费使用
下载地址(1.79MB):微盘下载 | 国外下载页
工具可以使效率提高,但同时也容易使人懒惰~建议适当使用
以上资源来自“设计达人网”非常感谢设计达人网的编辑。

Leave a Comment