我是如何进行『创作』的

[ichord]

我是如何进行『创作』的

前几天在对自己进行反省的时候发现了一件有趣的事情，就是我自己是如何进行『创作』的。
打双引好是因为我认为我这其实不是真正的创作，但确实是做出了一个新东西。

这基本是我制作了一个 Sketch 插件，sketch-divine-proportions，的过程。
然后再想想时，其实这跟我当时制作 At.js 套路基本上是一样的。

PS. 内容略长….

动心

首先，要找到一个目标，或者说你想要『创作』的东西。我的选择参考如下，按权重排序：

• 还没有人实现
• 有意思
• 很有用

这其实是我回顾总结出来的自己的选择策略，但事实上就是那一瞬间让我感到兴奋的东西，根本不会一条一条去考虑。

这个心动一刻会让我克服『创作』过程中遇到的困难并坚持下去。

关于 还没有人实现 这条，在 刚刚兴起 的事物里比较容易找到。

因为用 Sketch 画了一些东西后，觉得它很赞，一直想要为它能逆袭 Photoshop 成功而做些贡献。

有一天在 ui.cn 上看到翻译过来的介绍时，我想着这么酷的东西 Sketch 不能没有！
当然了还没有人实现，毕竟多是设计师。

Steal

嗯，我不想引用什么名言，比如乔布斯说的什么。主要就是 steal 这些:

• 创意
• 想法
• 逻辑

这个插件基本上是个平台移植，逻辑可以说是『临摹』过来的。
其实如果已经有人做得好了的话，我会选择 Copy & Paste，我也就不想去做了。

当我看到是老外做到插件的时候，我就预感到了有可能项目会托管在 github 上]。
但 ui.cn 上的那片介绍没有给出原作者的信息，当时在原文地址里也没找着。
于是我直接去 google 了一下，果然在 github 上找到它了。

它是开源的，我能看到插件的实现逻辑。
它用的是一种后缀为 .jsx 的文件，当时没太在意那是什么脚本语言，反正大概能看懂是什么意思就行了。
后来好奇才去了解了一下 .jsx 是什么东西，语法上基本就是 javascript。
我去查找了 Photoshop 的插件怎么写，里面用到的方法是什么意思。找不到，这类资料太少了。
当时看完也只是知道了大概是怎么画线而已，是个非常模糊的东西。
而且，Sketch 插件要如何实现或者能不能实现类似的操作我是完全不知道的，一片空白。
但至少有了个参照的东西，和一些有用的信息。所以不急着完全看懂，也看不懂，先开始尝试在 Sketch 上去实现。

基本在整个『创作』的过程中，我会反复的回来 steal 这个项目的东西。

学习

有了大概的方向和想法后，接着就是去学习并尝试掌握需要的东西。一般来说，这个是整个『创作』过程中最耗时间的一环。
一般情况下你可以先去 阅读相关书本 或者比较 好的教程 入门。但是当这些都没有话，只有去寻找这类资源：

• 查阅文档
• 阅读别人代码

嗯，第二条是重要和有效的做法。你不会是第一个去做一类事情的人，总会有先驱。如果你是第一人，那恭喜你。

编写 Sketch plugin 没有教程和相关文章，更别说书本了。但有官方的文档， Sketch 官方的文档写的很简陋，开头简单的介绍了下「插件系统」所使用的语言 ( CocoaScript )，然后举了一个历遍 Selection 的例子。剩下的就非常简单的介绍了一些主要/常用类，基本就只是列出来而已，没有例子。带着前面的想法和问题，我过了一遍文档后只是对几个主要的类有个初步的认识而已。

但是，文档的最后一页给出了更多的线索。别人写的插件，还有可以将 Sketch 所有类的 头文件 全都导出来的工具，里面没有任何注释。

首先当然是去阅读现有的插件，看看先驱们是怎么做的，里面可以看到大量实用的代码和信息。
挑选一些合适的插件项目尽量细读，挑选意味着要去将列出来的插件的代码过一遍，知道里面有没有和你要解决的问题相符合，或者看上去有关系的内容。当然不是要看所有，可以根据项目名字的相关性过滤掉一些。

在翻阅了4，5 个项目后，我首先选了 sketch-measures 进行细读。注意， 不需要一次就读完和看懂 ，因为其实很多内容对我的『创作』暂时是没有什么用的。在 sketch-measures 这个项目里，我知道了怎么编写和组织一个 Sketch plugin ，还有几个主要的类的用法和关系。更多的是文档里面没有的东西，比如如何添加图层、画矩形、创建图层组和如何使用 CocoaScript。而其它的如何测量图层具体，如何添加颜色，还有一些工具方法我也只是过过眼而已。

CocoaScript 说是用的 javascript 的语法，但基本是和 Objective-C 的混合。
有些插件的代码看上去就不伦不类，一会 js, 一会 oc。而我则尽量使用 js 的语法，这样会让代码更容易阅读一些，但这也耗费了我不少时间。

然后，就是 尝试使用 学到的知识，而这个学习的过程也是需要 反复进行的 。

实践

这是学习的一部分，但是在没有书本，教程的情况下，应该拿出来单独说说。这部分才是真正耗时的环节。我总结的是两个方法：

• 猜测
• 实验

先回到我要『创作』的内容：画出各种黄静比例曲线。我先从画出一个黄金比例的矩形开始。
如何使用 Cocoascript 在 Sketch 里画出一个矩形？为了解决这个问题我把前面学到的知识全都挖了一遍。

如何画出一个矩形？如何设定宽高？如何给边框（Border) 加上样式？如何填充颜色？
我在 measures 项目里找到了相关代码，官方文档没有。当然了，我没有复制粘贴，我必须理解代码，这些依然是基础知识。所以我又翻阅了一边官方文档，去熟悉那些使用到的类和方法的用途和关系。

另外一个需要熟悉的是，CocoaScript 的使用。刚开始它使我很困惑，而其它插件都混用了很多 OC 语法。
我坚持全都使用 javascript 的语法，所以我反复调整执行代码查看结果去熟悉它。最后一节我会举两个代码的例子。
折腾了 CocoaScript 并画出了第一个矩形后，之前学习到的东西都掌握了。

接着我要先画出一条曲线。这个既无文档，又无『先驱』。 而 Sketch 这个名字在这个时候是个悲剧，google 都帮不到了我，只能靠自己了。
我只能导出头文件自己找了，里面有近百个文件。。。

那么，我们来开始 猜 谜游戏，在这堆头文件里找到想要的解决方法。
通过阅读官方文档，可以知道类的命名规则和一点点的『设计套路』。画出第一个矩形的过程对我进行猜测非常有帮助，因为我已经熟悉了。

先根据我要要的东西 猜类名 ，比如 MSCurve 之类的。然后是 猜函数名 ，感觉猜对了就猜 调用方法 开始进行实验。实验就是执行代码，看看结果是否符合，失败后就继续找。
因为缺乏搜索用的关键字，我开始在猜好类之后查阅整个类的函数列表，想在其中找到蛛丝马迹以获得新的关键字。
大部分实验都是不断的在报错，比如参数类型不对、找不到方法、参数给的类不对。虽然 OC 是静态语言，但是很多都用的是 id 类型，也就是不知道指向哪里的指针… 只能通过参数名猜相关的类。
唯一成功的画出来确实两个点，直线都不是。

后来我找到了一条重要的线索，先是找到了 MSBezierPath , BezierPath 是什么东西？我不知道… 没有曲线的意思阿。原来它是一种绘制曲线的方法的名字，或者就是一种曲线，其实是个人名，具体请看 wikipedia。
另一个是 NSBezierPath ，NS 开头的类是 Cocoa Framework 类名的统一前缀，是苹果官方的类！苹果文档对 NSBezierPath 做了详细的说明，感觉突然回到了文明世界。

即使我知道了 NSBezierPath 怎么使用，我还是不知道怎么把它画到 Sketch 的画板上，只能回去继续猜测了。
在尝试了很久之后依然没有找到方法，但是觉得很靠近了。
于是我停下来了，我想着去 github 碰碰运气，直接搜索我之前找到的一个新类名 BCBezierPath 。
我在 AEFlowchart 这个 sketch plugin 项目里找到了如何将曲线画到画板上的方法了。其实关键就差个 MSShapeGroup 类, 这一举解决了我想要实现的一个效果：合并图层，这个很重要。

msPath = BCBezierPath.bezierPathWithNSBezierPath(bzPath)
layer = MSShapeGroup.shapeWithBezierPath(msPath)
// …
parentLayer.addLayer(layer)

当成功画出第一条曲线后，欢呼吧！这时候可以开始将那个 PS 神器搬过来了。
也就是说真正的工作才刚刚开始，前面都是前奏，呵呵！
曲线的绘制逻辑基本上跟那个 PS 神器里的一样，花些时间『临摹』下来就可以了。不过临摹的过程中我顺便去了解了下各种曲线，还有 PS 里使用到的一些常量。

对了，经过这一战役，我发现一个好的类名或者函数名是非常重要的！
后来发现原来我很不幸地忽略了一些社区，原来有个 sketch 插件开发者的邮件列表，直接去那里问应该会快很多，不用走那么多弯路。

交互

在一阵混乱过后，我掌握了『创作』所需要的一切。接下来就是要让这个混乱的世界变得有条理，和更好。
在前面几个阶段里，因为我是在不断做 实践 的，如何使用的问题就突出了。
基本上我是想做到：

• 易于使用
• 整洁的代码

因为画出来的曲线是分段不连贯的，我需要把它们合并成 单个图层 。
因为是一条曲线，非常难被选中。我需要用图层组将它包住，然后就可以 轻松的选中整个图形 了，而且于是『透明』的。
图层组（容器）的大小需要根据曲线大小调整。
需要 锁定比例 ，这样调整大小才不会让图形变形。
还有，根据选中图片或者画布 画出相应大小的曲线 。

简单的说就是：动态生成，容易操作，可自定义（颜色，粗细，大小）。

另外一个就是整理代码和重构，用更好的实现方法。前面漂亮，后面也要漂亮，其实都是要给人看的。这就是为什么我要坚持尽可能全都使用 javascript 语法的原因：容易阅读。

当这一切完成后，『创作』基本上是完成了三分之二。这个想要给人用的，需要让别人知道和使用，然后『创作』才算完成。

包装

所谓包装就是让你的『创作』显得逼格很高。我从这几方面入手：

• 『像样』的项目
• Logo
• 动画操作演示

Github 是个首选的项目托管平台，原因是什么就不多说了。现在很多图形类的资源都也放在上面了，虽然虽然不如技术类的，但是这个平台给人可靠的感觉。凡是在上面找到的项目给人感觉都是挺靠谱的甚至是优秀的，就好像 Stackflow 找问题一样。
最基本的，加上 README 文件介绍安装和使用方法后放到 Github 上。
容易阅读的代码也对一个好项目是重要的，所以就如我前面提到的一样，要统一使用 js 语法使其更容易阅读。
项目主页对于一个『像样』的项目的重要性我就不多说了。我直接使用了 github pages（就是 README 的内容）, 并顺便加上了 google analytics。当然最好就是能自己设计一个项目首页，但是我知道这个又是一个费时间的工作，权衡之下还是算了而且当时也急着发布出去。

对于 Logo, 我发现很多比较好的技术类开源项目都会附上漂亮的 Logo, 比如 Devise, AFNetworking 和我上面提到的 sketch-measures 项目等等。也许就是因为 sketch-measures 有个漂亮的 Logo 我才选择做精读的学习项目。
一个有 Logo 和没有 Logo 的项目比较起来，逼格会差很远。如果 Logo 越好看，那项目给人的感觉自然就会更好，图给人的感觉会亲近很多。想研究 Logo 的请看设计类书籍。
所以我也给项目加上了一个 Logo ，虽然没有太用心设计，但一眼能看出项目是做什么的就好了。

动画操作演示，复杂点的可以使用视频。但是我觉得要动用视频的去做演示都是比较复杂的交互了，一般一个剪短的 gif 动画图片演示完最好。
这个的作用就好比 Logo，写 500 字的说明文档还不如一个小动画，而且是瞬间国际化，没有语言障碍。
这个我当时没有给项目用上，而是用了三行字。当时看着就很不舒服了，但是就偷了懒。
后来在一个新项目 simditor-dropzone 里我就用上了 gif 做演示，看上去好太多了。

推广

包装好后，就要进行推广。让更多人知道，这个比较简单，我做了这两个事情：

• 教程 （ui.cn)
• 各个相关社区发布。

因为这个工具的定位是 ui 设计类的，所以要找相关社区去发文章。工具类的自然是用使用教程了。
因为我 steal 的那个 PS 神器实在 ui.cn 上发现的，所以先在上面发了。然后在那个帖子的回复里贴上我发的教程和介绍的连接，因为那个帖子被推荐到首页了了， 去沾点光。

另外一个上去就是 Sketch 的各类国内社区发布在 ui.cn 的文章，国外社区就直接上 github 项目和简单的介绍。
国内的我去了 v2ex.com, sketchcn.com, 还有意外的发到了 rubychina 社区。
国外的我在 designcode.io Facebook 群组里、Google+ 的Sketch+ 社区、还有 sketchresources.com 上发布了 github 地址和介绍。后来又去了 Twitter 上 tweet 了一下。

这个时候 Logo 就起了大作用了。另外放在 Github 上的好处也凸显出来， 因为在 Google+、Facebook 和 Twitter 上发布 github 的链接都会自动生成项目简介卡。

我这里要特别提一下两个地方：

sketchresources.com 是一个 sketch 的免费资源站，发布插件要审核的。这个网站的流量相对来说应该是很高的，基本使用 sketch 的人都会去，因为 sketch 的资源相对来说还非常少，大部分应该都集中在这里。

另一个是 designcode.io，这是一个教设计师写 APP 的书，主要工具就是使用 sketch。我自己认为它的读者水平应该都是不错的。另外，作者每周会收集一些优秀的 sketch 和 ios 的资源然后给读者发周报。按照作者说的，购买书本的读者已经超过了 6000 。结果就是，我的这个工具被作者收录在 designcode.io/learn 里并发了周报，也就是说 6000 个学习/使用 sketch 的设计师会看到我这个插件。

而在 google analytics 里记录的浏览记录中有一个陌生地址，占了很多的流量。
blog.templatemonster.com 里面对我这个工具的介绍是

Here’s a one of the best free design Sketch plugins

呵呵呵呵呵呵….
我刚又去看了下，50% 来自 sketchresources.com 。

跟踪

发布后我会紧紧地盯着看看效果如何，其实这是很自然的事情，因为我很关心我做出来的东西是否和预期一样有用，并从中获得成就感和喜悦。
我现在时不时还会去看下这个工具的情况。
在这个过程中也能发现到不少有意思的东西，然后我就产生了写这篇分享的念头。

然后

以上就是我『创作』这个 sketch-divine-proportions 工具的过程。完成后就是满满的满足感，有意思又好玩。自己翻代码寻求解决方法的那段时间最困难，常常进入死胡同而且会钻牛角尖。最后还是在 github 上找到了解决方法，github 实在是太赞了。

虽然是个小小的工具项目经验，但是我觉得挺有意思的。希望这个分享对大家有用。
以上愚见请笑纳。:)

其它

这里举两个关于 CocoaScript 中，oc 和 js 对应的语法例子。

一般的调用:

oc:

[[layer frame] setHeight: 200]
[[layer frame] setWidth: 200]

js:

layer.frame().height = 200
layer.frame().width = 200

多参数函数：

这个也是我在调试插件的时候发现的。搜索过如何对应，但是没有搜到。

oc:

[MSColor colorWithHex:"979797" alpha:1.0]

js:

MSColor.colorWithHex_alpha(“979797”, 1.0)

[loading]

似乎有点用，先顶后阅，感谢分享！

[walkingway]

就为你写这么多给个赞

[ichord]

@walkingway 哈哈哈，谢谢

[ichord]

@loading 慢慢来。:)

[sogood]

結果固然重要，摸索的過程很有意思，感謝分享。

[tumutanzi]

你这篇这么长，挺创作的。

[ichord]

@sogood 其实我觉得方向对了，过程好了，结果也不会差。

[zeroday]

vim有类似的插件吗？

[zeroday]

@zeroday 不好意思，发错了。