莫b
原创逻辑我在两年前用插画分析过: 设计师没原创灵感?试试这个方法(含AI附件) 。这次用图标作为例子,分析的步骤也写得更详细,将原创方法从1.0迭代到2.0~希望能带给你启发。
文末有毛玻璃拟态和渐变描边的图标源文件,欢迎自取~

文章主路径如下:

  • 找到优秀作品准备临摹
  • 分析作者设计语言拆分变量
  • 临摹过程与思考
  • 延展半原创图标
  • 修改变量得到原创图标

 

找到优秀作品准备临摹

这组图标非常有活力和创意,色彩很活泼,原作者是菜心。我也常用微渐变来做图标,但是没有尝试过加上描边,并且这种强烈的对比色也在我习惯用色外。临摹这组图标可以突破我的用色习惯。

 

分析作者设计语言拆分变量

我们先逐步拆分,再进行总结。
第一步,分析原作品的结构。
图标可以拆分为线、面和小元素。我在sketch做的,形状的线面转换比较简单。线跟面的图层要分开,因为面图层带有反光,而线图层没有。

 

第二步,确定光源的方向。
从作者的表现来看,光源在左上角,因此所有的图标应该遵循同一光源方向的原则。光源的表现会因为材质的不同而不同。比如「LIKE灯牌」带有自发光、「铃铛」带有高光。所有物体的反光比受光面要亮一点,让人感觉很通透。

 

第三步,分析原作的颜色。
不要吸色,先自己调色。刚开始会有点难,但是这种练习会帮助我们提高眼睛辨色的能力,提高色感。对比自己和原作的颜色,发现我调色不够准确,没有做到不同颜色饱和度一致,渐变色跳跃比较大。这表示我还没有理解原作的用色,后续临摹的时候需要修正。

 

第四步,总结作者的设计语言。

 

临摹过程与思考

分析完以后开始临摹。
先说一下体量感的问题,因为有很多设计师在做图标的时候会忽略这一点。常见的方法是拿图标框来限定,但是问题又来了,有的人限定得太死板,不会根据实际情况来微调。针对这种情况,可以拿别人的整套图标作品做反推,在临摹的时候,留意别人对体量感的把握。
定义了大概的体量之后,我会观察图标大致的形状和角度,凭印象先把造型做出来。过程中没有把原作品放在旁边,最多在忘记的时候去看一眼。这样做的好处是,可以发现自己观察的时候漏了什么(这个方法是跟菜心学的)。下图就是第一次临摹的草稿,orz…铃铛最不好画了。
拿着草稿来对比原图,把自己错漏的地方找出来。
统计错漏的地方,重新调整图标,达到90%以上的相似度后,给图标上色。

 

延展半原创图标

做完这一步后,大概理解了作者做这套图标时的逻辑以及方法。我们可以开始做半原创的设计,在原作的基础上延展几个图标。我选择电商主题的「充值、签到 、赚钱、砍价」这四个图标来做。
我们先找参考素材。不管画图标、做界面,还是画插画,学会找参考非常重要。参考不是照抄,而是给我们提供灵感来源,切记不要凭空想象。有一天,团队的设计师跟我说她不会画衣服的褶皱,画起来总是怪怪的。我叫她上网找相似衣服的图片,看一下别人的褶皱和光影,她就茅塞顿开了。因为她总是用“原创”局限自己,没有找实物参考。
原创绝不是凭空想象,而是有源设计的融合。
结合作者的设计语言做延展图标,放在原作里面也不违和的话,就成功一大半啦。
undefined

 

修改变量得到原创图标

接下来是原创时间~我们将作者的设计语言其中一些变量改变,会得出不同的结果。
undefined
undefined
最后是源文件的链接:
 https://pan.baidu.com/s/1PWHFqx1ZwMDc-2XKs1iniw  密码: 5niw

 

原文地址:站酷
作者:牙线y2x

转载请注明:学UI网 » 原创图标方法论2.0(含源文件)

登录收藏
 
你可能喜欢的:
如何强化图标设计的细节?我总结了12个关键点!如何强化图标设计的细节?我总结了12个关键点!
如何设计精美的应用图标?如何设计精美的应用图标?
出色的图标是如何一步步设计出来的?来学学这些实操方法!出色的图标是如何一步步设计出来的?来学学这些实操方法!
详解|图标设计,精致的体力活儿!详解|图标设计,精致的体力活儿!
图标中的辅助图形,如何设计才有亮点?我总结了这5条实用经验图标中的辅助图形,如何设计才有亮点?我总结了这5条实用经验
为什么我临摹的时候还行,但让我原创就不行呢为什么我临摹的时候还行,但让我原创就不行呢
为什么一个这么小的需求,我却做了这么久,因为....为什么一个这么小的需求,我却做了这么久,因为….
8个实用小技巧,提升icon设计的细节8个实用小技巧,提升icon设计的细节
我做出了违背祖训的决定,把这篇五步图标设计大法传授你们我做出了违背祖训的决定,把这篇五步图标设计大法传授你们
有人问我,日常做临摹练习,怎样才能用到项目里去呢?这个案例就能说明白有人问我,日常做临摹练习,怎样才能用到项目里去呢?这个案例就能说明白