伪 3D 的 JS 立体渲染引擎 Zdog

日期:2019 年 5 月 30 日设计工具
最近两年伪 3D 的效果在世界范围内都好流行(我实在是很不情愿叫 2.5D),这两天有个「萌萌哒」的国外作者 David DeSandro 开发了一个伪 3D 引擎 Zdog。说他「萌萌哒」是因为这个引擎的官网设计、简介以及 Zdog 这个名字的由来都非常有意思~ 作者对 Zdog 的定义同样非常精简干练:

Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
圆头圆脑、纯平质感、对设计师友好的 canvas + SVG 伪 3D 引擎


被官网范例所吸引去尝试了一下,确实如作者所说这个引擎的效果还是非常初阶的,因为 Zdog 是完全用 2D 对象投射到 3D 物体所在位置来渲染,所以 Z 轴层叠问题基本无解(当然官网也介绍了一些方法来缓解 Z-fighting)。但毕竟这就是一个未压缩也只有 28KB、不追求精确但求好玩的 JS 库,还要啥自行车呢~

我把我台另外两位主播的头像作为范例进行了简单尝试,效果如下~


  See the Pen
  Yuki + Leon
by JJ Ying (@jjying)
  on CodePen.



试用下来觉得确实还算对设计师友好,位移旋转变形基本上像是在写 CSS 和 SVG,绑定父对象、建组、动画之类的基础功能也都有,虽然支持的形状略少,建复杂模型不方便但还是值得玩一玩~

Zdog 官网https://zzz.dog/

Adobe XD CC 简体中文版发布

日期:2018 年 8 月 7 日设计工具
最近很多朋友向我问起为啥这两天 Adobe XD 的新闻一下子多起来了,事实上在七月底 Adobe 正式宣布推出 Adobe XD CC 的简体中文版起步计划(Adobe XD Starter plan)。之前宣布免费的 XD 现在终于进入中国给本地用户免费使用了,而且这次的简体中文版也直接包括了 macOS 和 Windows 双平台。

之前在节目和本博都介绍了最近国外的原型设计工作真的是风起云涌,几乎是唯一一家大厂的 Adobe 显然也坐不住了,比起其他竞品,XD 虽然还不是最通用的选择,但毕竟背靠大树,比起从 DrawIt 进化而来的 Sketch、调转过好几次船头的 Framer,以及基于 web 技术的 Figma 和 InVision Studio,Adobe XD 的底层更加纯粹,性能的潜力很大而且能和自家的其他软件更好地配合。其实早在正式入华之前,我相信也有很多朋友跟我一样,公司里的通用项目用着 Sketch,每天骂完这画板咋这么卡的时候在自己的 side projects 里用用 XD 的英文版。

友台主播小安采访了 Adobe 设计副总裁 Jamie Myrold,她表示:

体验设计是设计行业发展最快的领域之一。帮助设计师将他们的想法与设计同步、尽可能减少他们在设计中遇到的阻碍,是 Adobe 推出 XD 的主要原因。我们相信 Adobe XD 的核心功能、重新定义的工作流程、质量和性能都会为他们带来愉悦的使用体验。

数据可视化工具 Flourish

日期:2018 年 7 月 11 日设计工具
今天发现了一个还不错的制作数据可视化的工具 Flourish,今年二月才开始公测,目前还标着大大的「beta」字样,但体验了一下觉得值得推荐~

Flourish 目前支持的数据图表类型其实还不算特别丰富,颜值上肯定也不如 Airtable 这种「巨擎」高,但他胜在免费版限制比较少,交互性也不错,还能直接 iframe 内嵌,比如下面这个简单的图表,记录了我台以及一众「敌台」最近两个月在网易云音乐上的单周订阅增长数变化(数据是我自己手动扒的):

Sketch 的 Isometric 视图生成插件

日期:2018 年 2 月 3 日设计工具
很巧,这一期 Anyway.FM 里正好提到了「isometric」,也就是熟透了的正交视图「风格」。之前有很多教程介绍这种风格怎么做,比如这一篇,还有这一篇。最近看到一个 Sketch 插件名字就叫「Sketch Isometric Plugin」,提供了快速生成 isometric 视图的途径,配合 Magic Mirror 还是可以生成一个简单的立体形状(说白了其实就是按照你设定的厚度生成一个立方体对着你的两面)。

详细用法大家看这个动图就能理解了,需要的朋友可以去 GitHub 上下载试用:
makeurl('https://github.com/sureskumar/sketch-isometric')

9 句话看懂 Photoshop CC 2017 新功能

日期:2016 年 11 月 3 日设计工具
图片载入中...

一觉醒来看到朋友圈有 po 不少 Adobe Max 现场的图,羡慕之余只能赶紧更新一下新版、看看官方的更新通告,似乎没啥值得大书特书的,所以就按照官方 What's New 随便列一些吧:

  1. In-app search:综合性的应用内搜索,除了不太常用的功能可以用关键词搜索调起之外还能直接搜 Adobe Stock 图库里的照片,所以你可以理解为他们主要是为了再多加个入口卖照片。

  2. Tighter integration with Adobe XD:能一键粘贴到 Adobe XD 里,也许你会问,以 SVG 格式复制的话,那我是不是能直接粘贴到 Sketch 里呢?Naive,我试了不行,剪贴板里的数据是完整的 SVG 代码,粘出来的就是文字,Sketch 那头简单更新一下倒是可以实现直接粘贴,但是 PS 里还是只能单一图层「复制为 SVG」,所以一键从 PS 到 Sketch 暂时还是不现实,还得靠其他软件或者……人肉。

  3. Get started faster:全新的「新建」窗口功能功能更多更强了,但是「faster」是放屁,老子的 Mid-2015 的 rMBP 开个「新建」窗口卡成屎,只好暂时换成原来的模式(在设置首页里的左侧列表倒数第二个选项)。

  4. Stock templates, 3D objects, and search:同 1,虽然现在广告很多,铜臭味很厉害,但假如花得起钱,这种系统级的一键搜索、置入各种 stocks  的体验还是不错的,然后做点简单的海报啥的,依然有免费的的模板可供选择。

  5. Enhanced Properties panel:小改动,请跳过。

  6. Support for SVG color fonts:这个世界已经被 Emoji 入侵了啊啊啊啊啊,为了强推这个,字体列表醒目位置就是 Apple Color Emoji。

  7. New Creative Cloud Libraries capabilities:还是为了卖东西卖东西。

  8. Creative Cloud Assets improvements:同上。

  9. Introducing Typekit Marketplace:简单说就是 Typekit 现在有更多第三方字体厂商的字体可供选择,偶不,可供购买了。


其实细节更新还挺多的,完整条目参见官方页面:makeurl('https://helpx.adobe.com/photoshop/using/whats-new.html')

Photoshop CC 2015.5 更新

日期:2016 年 6 月 23 日设计工具
图片载入中...

看起来是个「比较大」的版本号,但其实更新内容不多,尤其对于设计师来说值得一提的更少。大部分都是关于照片处理,比如更智能的图片裁切(旋转或者缩放之后画面缺少的部分会自动填充)、更方便和先进的扣图工具以及专为网红设计的为人脸优化过的液化功能

和 UI 设计师们强相关的重点更新似乎只有字体方面的一些改进和跟 Adobe XD 之间更好的配合,整体感觉唯一让我眼前一亮的功能是「Match Font」,顾名思义就是和 WhatTheFont 以及求字体这样类似的在图片中寻找文字所用字体的功能,官方演示视频里也可以看出功能还不算很完善,比如就没法直接显示选中的那些字方便预览和比较,而且亲测在字体选用比较大路的时候还算准确,但其余的时候以及字比较小的时候就没法用了。鉴于这个只能搜 Adobe 自家 Typekit 支持的那些字体,对中文字体支持也几乎为 0,所以……请权当我这篇博文完全没写吧~

Adobe XD,就是这么 XD

日期:2016 年 3 月 15 日设计工具
最近这几年国外交互原型设计工具的竞争简直让我想起了滴滴和快的打起来的那段时光,大家都拼了命地出新品,今天 inVision 的 Craft 出了 2.0 的预告视频,让大家期待已久的 Adobe Project Comet 也正式公开发布了预览版下载,与去年 Adobe MAX 大会前后放出的预览视频一对比就发现细节功能有很多缩水,也许正式版会有提高但也看得出 Adobe 为了抢占市场是有多猴急。毕竟是大厂的产品,之前也有朋友拿到了内测版本,所以现在市面上的评测已经有了不少,有兴趣的朋友可以点这里,或直接下载体验,不高兴看的话我来总结一下三大特点 :1. 操作逻辑顺滑对接 Sketch(貌似是在黑……)2. 可方便地多平台预览 3. 填充内容比较智能

看到这儿大家一定要吐槽了,既然不准备写详细的评测还说个毛球啊,好吧,其实我真的是来说毛球的,我就是想来又吐槽一下 Adobe 的命名的,哈哈哈哈哈,咦,我为什么要加个「」字。去年刚公布的时候临时起得项目名字叫做 Project Comet(我猜项目组里没有中国人,不然一定有人提醒他们这个词在中国也叫「扫把星」),今天正式公布的名字叫做 Adobe Experience Design,官方缩写是 XD,你没看错,就是一个颜文字,不熟悉的用户第一次装 Adobe 全家桶一定以为 XD 这个名字叫出来是因为正统字母都用完了,以后要是见到 Adobe >.< 或者 Adobe :D 也请不要觉得奇怪~

不过想想也是,不叫 XD 难道还叫 ED 么,不但跟 Adobe Edge 系列容易搞混,而且和某种男性疾病同名……最后,我看到有朋友在吐槽 Adobe XD 的 Windows 版本为啥要等 2016 晚些时候才推出,我只想说……鉴于 XD 瞄准的那些竞品,Adobe 能想着推出 Windows 版已经是天地良心了……

Adobe Experience Design 官网:makeurl('http://www.adobe.com/products/experience-design.html')
Page 1 of 5       下一页 »
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash