恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
学习用脚本提高设计效率
0.0°
2014-12-27 自译外文 教程 原作者: Ian Silber 举报 5509 27 10 5

做为一名设计师,我们每天浪费了很多的时间在琐碎的零活上。以前我们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.可以把插件命名为中文,并设定不同的路径,这样可以放入多样的素材,用来快捷生成各种场景,如:模糊背景,头像,新闻缩略图,照片墙等。

更新:2014-12-27

下载
收藏

27人已收藏

larens

Live the life you've imagined.

  • 37

    作品

  • 1511

    粉丝

  • 40

    关注

  • 防控疫情,如何远程团队协作
  • 姗姗未来的WeUI「深色模式」
  • 浅谈设计版本的那些事
  • iOS人机界面指南-3D Touch

    猜你喜欢

      2014-12-27 自译外文 教程 原作者: Ian Silber 举报 5509 27 10 5

      学习用脚本提高设计效率

      0.0°

      你确定要举报学习用脚本提高设计效率

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年12月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      27
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录