学习用脚本提高设计效率

自译外文 分类: 教程 版权: 原作者: Ian Silber
4205 25 8 5
2014-12-27
0.0

做为一名设计师,我们每天浪费了很多的时间在琐碎的零活上。以前我们Instagram中的设计师,需要很多时间来查找素材,去完善一个PSD或Sketch文件。

你可能也经常处理上图界面中的头像:首先在Photoshop中创建一个图形(上图是一个圆形形状),然后访问一些比较好的素材网站(我们一般都访问自己的instagram.com),找到你想使用的照片,将它拖到Photoshop里,然后还要调整大小并移动到合适的位置。

如果再制作上面这个更复杂的照片墙呢?至少要还循环刚才的步骤5次,但是如果更多的图片怎么办?

 

现在我们创建了一些工具,能简化上面的流程:

  • 1、我们抽取一些信息完善的评论者(帅哥或者美女之类)的照片共享的Dropbox文件夹中,同时使用IFTTT【注1】把这些优质内容放到都能设计组的共享盘里,方便我们可以快速访问。 

  • 2、在Photoshop中我们创建了一些脚本,选择一个或多个图层,然后使用快捷键(需要在ps中自定义)从我们的共享盘的文件夹中随机图片来替换。如果想要一组三栏照片怎么办呢?绘制你想要的三个相等大小的矩形,选择图层,按下快捷键,立刻图片就显示出来了。 

  • 3、我们有类似的背景照片脚本。保持设计组的背景图片都在一个文件夹中,这样就可以随时使用它们来填充内容。 

  • 4、最好的那个脚本可以让我们查询包括标签,用户名或地理位置,然后通过计算将我们想要的结果填充到图层。现在只需几秒钟,就可以打造出了一个模拟真实用户的配置文件,而不是浪费15-20分钟的时间来做这样的事。(很遗憾这个脚本我并没有找到)


使用这些工具很重要的因素不仅仅是因为速度。使用模拟真实的数据,会让我们的设计看起来更像软件实际使用时的样子。在不影响我们的工作进度的情况下,我们可以在几分钟内不停的刷新测试各种各样的模拟数据,来达到我们想要的效果。这使我们的团队专注于像素和产品本身,而不必浪费在重复无用的工作上。

 

如果你发现自己在做同样的事情,我会鼓励你想想如何自动化任务。消除大量的重复工作,可以把更多的时间花费在设计创意上。


【注1】:ifttt的本意是 if this then that,它将Facebook、Twitter等各个网站或应用通过API衔接成一个跨互联网的自动机器,像多米诺骨牌一样完成种种不可思议的任务。但与if … then …语句不同的是,ifttt.com呈现给用户的不再是代码,而是现成的服务,从而让编程变得不再重要,每个人都可以成为整个互联网的不用编程的“程序员”。


ifec译者:larens 

审核人:MartinRGB

原文地址:https://medium.com/@iansilber/design-tools-at-instagram-4f5867afa4f4


------------------------------------------------------------------------------------

译者编辑的安装及使用教程:

插件的安装:

1. 下载【ig-design-tools-master】:文章底部下载

2. 复制解压文件夹下的2个jsx,到Photoshop的脚本文件夹。

OS X: /Applications/[Photoshop]/Presets/Scripts/

Windows: C:[Program Files]Adobe[Photoshop]PresetsScripts

3. 重启Photoshop,点击【文件】菜单 – 【脚本】中如果有显示,表示安装成功了,如下图。

4.定义快捷键,点击【编辑】- 【键盘快捷键】,展开【文件】层级,滚动界面找到2个脚本,点击一下后,按键盘上的键位就可以设置自己的快捷键了,译者在这里设置的是 {Ctrl/Command +shift+1 & 0 }

5.如果是其他插件到第4步就完成了,本插件需要调用本地的文件,所以需要童鞋们再耐心的再创建一下自己的个人图片收藏夹(译者在压缩包里有images的文件夹,粘贴到你熟悉的路径,可以做测试使用)

找到刚才复制到Scripts里的2个文件,使用编辑软件打开,编辑第一句中双引号里的路径。


插件的使用:

It's ok,到这里插件就可以使用了,找到一个素材,创建一个圆形形状

然后按下我设置好的快捷键【Ctrl/Command +shift+1】,大家就可以看到下面的效果了~


如果要批量处理,选择多个形状或图层,按下快捷键就可以实现神奇效果啦~


其他注意事项:

1.作者的插件在使用中还有一些小问题,例如:已经生成的图像需要删除掉蒙版才能刷新,否则蒙版图层的效果会消失,也许作者是考虑到生成太多头像图层,会影响photoshop的文件大小和响应速度。

2.可以把插件命名为中文,并设定不同的路径,这样可以放入多样的素材,用来快捷生成各种场景,如:模糊背景,头像,新闻缩略图,照片墙等。

larens

Live the life you've imagined.

1453粉丝/37关注

助人为乐
浅谈设计版本的那些事iOS人机界面指南-3D Touch

larens

larens

Live the life you've imagined.

助人为乐

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN