搬砖心得 ——icon绘制

出于提高自己设计能力的目标,这两个月老老实实用sketch画了上百个icon,有outline的,有拟物的,也有扁平的。这样折腾下来也有许多经验以及教训,希望写下来与诸位读者分享。

本文主要写给那些希望提高自己设计能力的程序员和交互设计师,资深的设计师请绕道关闭窗口。

ps 本文提供的经验可能仅仅适用于sketch。



#图层管理

画icon尤其是拟物icon最重要的一点就是叠图层。无论是复杂的钻石图案,还是有着复杂的光影效果的相机镜头,最终都是一层层图层堆叠而成。对付这样层层叠叠而且样式众多的物品,最好从底层到顶层,一层层绘制,并且不断根据不同的作用以及类型及时命名分组(建议使用sketch插件 rename it)加快这个过程。sketch支持在同一shape上叠加多种效果,建议善于利用这种特性,尽可能减少不必要的图像堆叠和mask。巧妙利用不同类型的fill,可以减少图层的数量也方便日后维护与修改。

图层管理的另外一个侧面就是绘制各种图形使用布尔运算后,需要谨慎合并(flatten)图层。可以尝试先复制一份当前内容flatten试试看,因为flatten后就没有回头路了。根据日后修改的可能性进行一定flatten也能减少图层堆叠,提高效率。



#类型区分

要学习icon绘制首先要区分不同类型的icon以及不同类型icon的难点逐步攻破。我的学习方法就是针对不同类型的icon以及对应的技巧,练习相关技巧。首先去寻找那些一步一步带着做的教程,其次慢慢对着sketch源文件模仿。模仿本身也有很多步骤,除了可以对着源文件学习图层排列,效果处理的技巧,也可以直接复制某个图层针对性模仿(自己在上面覆盖个半透明的shape),后来逐渐就能观察他人的图形思考如何绘制类似效果,以及自行把握每个图形和图层的大小形状。

既然每一种图标都有各自的特性,那么针对性的练习尤为重要。临摹拟物图标的时候我会更多思考光影关系,临摹扁平化图标我会思考不同大小的图标要承载怎么样的细节以及如何提炼出物品的要点,临摹outline图标我会更多思考图形如何拼合这样效果更佳纯净简单,而且更认真的考虑整套图标的比例问题。我个人倾向于交错练习不同类型的图标,其一减少疲倦感与重复感,其二很容易发现自己在同类型图标上的进步从而有更多成就感和信心。



#针对性的技巧练习

因为我希望更快入门,所以我并没有过多纠结与某一种技能本身的掌握(比如画很多个相机镜头学习光影表现)。我会有意识的练习不同类型,不同视觉效果,运用不同技巧的icon。比如有些icon强调曲线的绘制,有些强调阴影的运用,也有些强调多个相同的path组合而成,这些都需要寻找运用了对应类型的图标进行学习和临摹。

对于新手而言,很重要的一点在于循序渐进,一开始就上来描绘那些华丽的icon并无太多意义。关键是从简单的形状开始描绘并且组合,并且满满熟悉软件的各种功能,也开始用symbol以及share style管理自己的图标的样式。碰到某些图形比较难绘制,可以尝试用ps和ai的关键词搜索相关教程(要灵活变通,sketch效果并没有这么多),我有时候也会咨询一下同事关于他们绘制特定图标的技巧和经验。



#善于观察
多多观察那些优秀设计师他们如何进行设计的,比如他们为什么不直接拉个渐变色彩而要纯色的底色加上透明的简便效果等等。很多东西或许有同样的效果,但是却有着不同的维护性或是输出的时候更干净没有缝隙等等。在这个过程中能逐渐学会对同一物品不同的绘制方法。在这个时候,就要努力让自己使用的方法更科学一点,比如更多利用图形拼合,利用几何关系,学习使用不同渲染方式等等,力求自己做出来的图标比例合适细节处理也到位。(这个过程很漫长= =!)



#小tips
逐步养成使用快捷键的进行工作,这样能提升很多效率
使用插件辅助工作
不要回头,如其绘制某个图标很多次不如坚持画新的画下去,回过头来就会发现轻而易举。
有空就探索下sketch本身自带的功能,多动手实验。

不要指望sketch和ps那样有很多很多的功能。 

评论

此博客中的热门博文

关于产品设计 #这是个巨大的坑

书单 披着用户研究的皮却有着一颗好奇心(更新20140919

设计工具吐槽 之 protopie