上期我们聊到了最近比较流行的轻拟物风格,科普了基础概念,如果你还没读过,可以前往阅读:

本期展开轻拟物的具体技法讲解和演示。

轻拟物的核心知识

轻拟物本身也是拟物,所以它的核心基础和拟物设计师一致的,只是省略了更多复杂的细节。而对于整个拟物的体系来讲,最重要的东西实际上只有2个,形体、光影。

1. 形体表现

形体的表现,就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中,有写过面性图标进阶的设计中,可以包含更多的细节、内部元素,而不是仅仅只有外轮廓。

大厂都在用的轻拟物设计风格,本文教你四步完成!

轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上,即你要把这个图形的内容有明确的示意并画出来,而不是用抽象的图形做填充而已。

比如大众点评的快速入口图标,虽然看起来很复杂,但是那是配色上的复杂,而不是形体轮廓上的具象化。

大厂都在用的轻拟物设计风格,本文教你四步完成!

换句话说,拟物插画的图形基底,类似扁平插画风格图标,不能表现得太抽象,也不能增加过多的细节,需要一种恰到好处的平衡(玄学),这就非常考验设计师的判断和经验了。

并且,在描绘轮廓的时候,新手尽可能的采取正视图来进行绘制,而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面,这样难度会大幅度上升,比如下面这种情况。

大厂都在用的轻拟物设计风格,本文教你四步完成!

2. 光影表现

除了形体外,光影就是整个拟物的灵魂了。

当一个完整的图形完成填充色时,它是扁平图案,如果完成光影呈现的时候,它就是三维空间的立体图形,比如下面这个圆的案例:

大厂都在用的轻拟物设计风格,本文教你四步完成!

在拟物的设计中,我们对光影的定义是至关重要的,所以首先就是针对该图形确定光源的方向,是上方、前方、左上还右上,这对后续的设计有一连串的影响。

大厂都在用的轻拟物设计风格,本文教你四步完成!

如果对光影没有正确的解释,那么在制作细节的渐变角度、投影的使用上,就会产生错误的设计,造成光影视觉冲突和矛盾。

在创建了光源以后,物体受到光线的影响就会产生明暗面和投影,可以简单划分成4个部分,高光、亮部、暗部、投影。

大厂都在用的轻拟物设计风格,本文教你四步完成!

这和我们学习的素描有一定的差异,美术中对光影的表现还会包含明暗交界、反光面,这对于轻拟物的来说负担太重,所以我们要去掉它们,接下来重点讲讲高光和暗部。

高光是物体作为受光物对光源的直接反映,比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现,再或者一拳超人中男主光头上长期存在的高光配饰(多数动画的光头角色都有)……

大厂都在用的轻拟物设计风格,本文教你四步完成!

高光可以非常有效的增加画面的层次和对比性,让物体看上去更有冲击力和观赏性。

而暗部,则完全是为了正常表现物体结构和弧度增加的示意,因为不在受光面,所以颜色会变暗。在实际操作过程中,我们可以通过渐变的方式开控制明暗的表达,但尽量不要直接手动设置一个渐变色出来,而是为它叠加暗部或亮部的黑白透明度渐变。

大厂都在用的轻拟物设计风格,本文教你四步完成!

了解这几个特性以后,下面,我们就通过一个实例来讲解一下轻拟物设计的过程吧。

轻拟物实例演练

作为轻拟物的演示,直接画个图标讲一遍怎么操作是没什么用的,我们要从实际场景出发,用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页:

大厂都在用的轻拟物设计风格,本文教你四步完成!

总结它的问题,不难发现首页顶部业务功能太多了,顶部图标就包含30个(加滑动的),虽然每个模块图标单看都没有硬伤,但堆积到一起,就使得顶部缺乏足够的信息层级和对比性。

我们要做的,就是通过轻拟物的方式,调整快速入口最大的三个图标,凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始,讲解一下如何完成轻拟物化设计的升级。

第一步:确认轮廓造型

第一个操作,即确定图标本身的轮廓。根据原有图标的样式我做了一些改动,包括加粗车头,减少高度,增加车灯等。并对每一个模块进行纯色的填充,定义它们的色彩和做出区分。

形体的重要性在于要对图形本身有比较合理的呈现,不要让比例失调和图不达意。

大厂都在用的轻拟物设计风格,本文教你四步完成!

第二步:完善图形细节

这一步,就要在原有基础上,进行下一步的深入。包括对一些细节交代得更清楚一点,增加一些有趣的小元素等等,完善它的具体样式。

大厂都在用的轻拟物设计风格,本文教你四步完成!

第三步:增加基础的暗部表现

在这里,我们就要开始为图标增加高光了,高光从右上角打下来,那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现,让整体的立体感稍强。

这一步在软件中主要使用蒙版功能,通过蒙版在背景上方创建一个图层,然后添加深色的透明度渐变,就可以表现出对暗部和投影的效果。

大厂都在用的轻拟物设计风格,本文教你四步完成!

第四步:增加高光效果

接着,就是最后一步,将高光添加到画面中来,将整个图标的质感进行拉升。

大厂都在用的轻拟物设计风格,本文教你四步完成!

通过上面的演示,我们可以将整个拟物设计流程精简成:

  • 确定图形基本轮廓、外形比例、模块色彩
  • 丰富细节样式增加趣味性和适当的拟真感
  • 通过蒙版添加暗部来完善表现的明暗和层级关系
  • 添加高光元素作为图形的亮点,拉升层次感

然后,通过这样的步骤,再来完成后续的两个图形,拆解完的效果如下。

大厂都在用的轻拟物设计风格,本文教你四步完成!

大厂都在用的轻拟物设计风格,本文教你四步完成!

然后,再用这三个修改后图标套用进原来的页面,并做出对应的修改,再来看看前后对比:

大厂都在用的轻拟物设计风格,本文教你四步完成!

通过这个对比,我们就可以看出在这个复杂的首页头部中,轻拟物风格可以从一众平面中被凸显出来,且不会显得太突兀和复杂。

而这就是轻拟物在项目设计中的实际作用,当画面元素已经开始超负荷,且容易导致同质化的审美疲劳和主次不清时,就是轻拟物登场的时候了。

总结

最后的总结,学习轻拟物就是增加我们完成界面视觉输出的可能性,为视觉创意增加一些储备弹药,以应对越来越复杂的互联网产品和职业要求。

我们只在这篇罗列了制作的顺序和思路,并没有把软件的操作完全放出来,一方面是因为时间上来不及,另一方面是希望大家不会被软件的使用框住。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 还是 Affinity 等软件都可以做出来。

本次对于轻拟物的讲解也就写到这里,下次有机会再做个更 Hardcore 更 Old School 的拟物设计教学,带视频的那种!

欢迎关注作者的微信公众号:「超人的电话亭」

大厂都在用的轻拟物设计风格,本文教你四步完成!

点赞 36
收藏 124
继续阅读相关文章

发表评论 已发布 10

还可以输入 800 个字
 
 
载入中....
10 收藏