日常临摹如何用到项目里去?这个案例说明白!

Recommand
深圳/UX设计师/4年前/1053浏览
日常临摹如何用到项目里去?这个案例说明白!Recommand
彩云Sky

实用且通俗易懂的干货分享,值得收藏。

上次我在文章《我多年来快速学习的秘诀,都在这里了!》中有说到我的学习方法,在文章结尾有说下一篇会分享如何将临摹作品用到实际项目中?正好最近有不少同学在问,我就赶紧给大家安排上了!


不同的阶段,临摹的目的不尽相同。一般来说,前期临摹更多的是练习软件、技法,后期练习别人的风格表达,综合运用。所以,我把临摹分为技法临摹、半原创到原创3个阶段,每一个阶段没有绝对的界限,都是在积累创意,完全是可以用到自己的项目中去的。


今天会分享一个我当年做临摹练习并融入实际项目中的小案例。


1、临摹


大概是在15年左右,在网上看到锤子设计师设计的一个图标,觉得非常惊艳,当时就想把它临摹下来,这是当时临摹的一个效果。


undefined

原作

undefined

这是我当时临摹的图


我在临摹这张图的时候,想达到的目标是能根据自己的logo色及文字,做一个半原创的设计。


然后实际练习中,不断观察原作发现有一些细节值得学习:


undefined


1)图标分为水上和水下,2个层级,在水下的图形因为折射的关系,会发生扭曲


2)水下会有深浅的颜色变化


3)真实的水会流动,所以在水下会画出带明暗细节的水纹线条


4)水下会有气泡,且气泡的产生符合真实场景,气泡的大小由小变大


5)水面的边缘因为透光而产生边缘反射


6)投影因为红色盒子的影响,会偏红色色相,并且有近实远虚的关系


7)盒子的边缘会有1px的高光和反光


8)背景为了增加图标的展示效果,也做了单独的设计,把四周压暗,然后加上杂色,使得整体的质感更加强烈



当时,对我来说,在练习的过程中有一个难点就是关于第3个细节水的纹理执行有些难度,因为其中包括了粗细变化、虚实变化、明暗变化等等,单纯的用图层样式或者矢量去画的话,难度都比较大。这个细节当时耗费了我不少时间,后面突然想到其实也可以用合成的办法来实现,然后我去找了真实水纹的图片进行叠加,很快就搞定了。所以,只要能达到效果,不能太过于局限某一种思路。


undefined

分析并完成这些细节后,就是你在做这个练习中学到的点,尝试把它们学以致用。



2、运用


记得当时在360时需要设计一套关于摩洛哥蓝色小镇的官方定制版主题图标。从搜集的当地代表性的图片中发现,多彩颜料是当地的一大特征,所以决定以染料为关键词去画一个图标,又因为颜料本身自带多彩的特点,所以以它为主题图标就很合适了。


undefined


然后在思考这个图标的时候,首先会应用参考图中的配色,并结合染缸的造型做出了第一版的效果。 

undefined

这个效果虽然是表达了那个意思,但缺乏亮点,联想之前练习过水的技法表达(临摹中第3点细节运用),正好可以利用水的纹理做下强化,这样就优化出了第二版。 

undefined

嗯,看起来感觉有了一些特点,但感觉缺乏细节,接着思考水除了有纹理高光,应该还会有边缘高光(结合临摹中第5点细节),所以在边缘尝试加了高光,增加体积感,做出水要漫出来的感觉。 

undefined

如果只有这一层高光的话,细节度感觉还是不大够,在之前的文章《如何从优秀作品中偷师,用一个游戏案例教你思路》我有分享到在UI大佬的作品中能学到他们对于1px高光的使用(临摹作用中的第7点),这里因为是液体的材质表现,所以增加一个高光点增加水的通透感。


undefined

undefined

到目前为止,似乎看起来已经差不多了,但考虑到现实世界中,溢出的彩色液体在透光性很好的情况下,也会对周围环境产生影响,所以我在颜料设计的四周,配上对应的四种颜色的模糊投影(临摹练习中的第6点)。 

undefined

在思考下,在临摹的图标中为了使得图标更加自然,作品中其实结合了很多真实世界中会发生的情况,比如水的折射,气泡的比例,深浅等等,那对于染料来说,会有怎样的真实情况发生呢?我当时想到一点是,染料在用的过程中其实很容易洒出来,所以图标背板上现在太过于干净了,增加一些细节能够使得背板能够跟主体物产生关联,也更加自然。嗯,又是一个小细节。 

undefined

最后,我们对比下第一版和最终版的效果,细节确实丰富了很多。

一张动态图可以更加清晰的看到变化。

undefined


3、总结

这次图标的优化过程,我觉得有几个要点对我来说印象深刻的:


1)图标的风格可以是扁平的,但想要增加自然舒服的细节,一样可以像画写实风格那样仿照现实。你需要留心观察这个世界,就算是一张照片中也能有非常多可以利用的细节。所以,我会在社群的早起打卡中让大家除了早起外,还能额外配一张图片,也是希望能在早起的同时额外提升一些观察力和收获。


2)碰到难做出来的细节,多想想有没有更效率的办法。比如在做水纹理的时候,一开始就想着完全靠鼠绘画出来,结果效果一直不大好,然后利用PS合成的方法,很快就能把效果做出来。


3)对于图标来说,要注意其整体性。比如图标中的主体物不要跟背景脱离,不要让图标背板只是作为一个容器,而要让背板也成为图标本身的一部分,这样图标的整体性会更好。


4)临摹的过程中,一定要多分析,多记录自己觉得是细节的点。每一次记录,都可能是将来设计时提升细节的灵感来源。


以上内容只是我在日常练习中应用到实际项目中的一个小案例,其实还有非常多的灵感想法都来自于你平时做的练习,关键是要多动手,多总结,才能增强自己对细节的把握能力。


39
阅读原文
|
Report
|
31
Share
相关推荐
教程
教程
教程
教程
作品收藏夹
Apple Vision OS最全设计规范
Homepage recommendation
文章
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
扬州IP·扬小玉
Homepage recommendation
相关收藏夹
教程
教程
教程
教程
作品收藏夹
设计
设计
设计
设计
作品收藏夹
练习
练习
练习
练习
作品收藏夹
方法论
方法论
方法论
方法论
作品收藏夹
大家都在看
Log in