不是很高级的教学课程,是自己在摸索中的小心得记录,希望可以帮助到大家,一起交流进步。
最近插画很火,自己也是被那优美的画面吸引,在日常的运营活动以及UI的界面中(空状态图、图标等),加入插画,会让我们的作品充满趣味。
在很多设计网站,也有很多零基础学插画的教程,想必很多人也很心动吧。
自己画插画算是自己摸索的过程,因为设计师很多都学过素描色彩的课程,其实转换为电脑产出,有些类似,关键点:就是多画多练习多产出!!!就是画!画!画!
以下是自己的插画练习,还在不断学习中。
一:为什么画插画
自己刚开始画插画,因为插画的色彩搭配很赞,自己的配色能力不是很好,觉得尝试一下,可以提高自己的色彩敏感性。
在运营以及Ui设计中,插画的运用越来越多,它会让我们的设计更出彩。
插画对于UI设计师是加分项,你可以看到很多招聘需求中,写着插画加分项。会一项技能(UI、动效、C4D)比只会UI的设计师更有竞争优势。
二:画画的工具
画画工具主要以下几种,我主要使用前两种,也许其他设计师也有其他的选择,大家也可以自行搜索下哈。
2-1:手绘板+电脑+PS
我用的是wacom和冠的手绘板,大概是600多,我觉得最小的就够用了;然后配合电脑中的ps的笔刷工具使用就可以了。
2-2:iPad+Procreate+手绘笔+PS后期
iPad推出的新软件,配合手绘笔,有种在纸上画画的感觉,感觉比手绘板自由很多,而且多图层,可以导出psd格式,在ps进一步修改,虽然和ps的功能相比,没那么强大,但是真的很好用。
这两种工具,我一般会配合使用。ipad起稿加上色,ps可以添加没有的材质,并整体调节氛围,这样整体效果会更赞。
2-3:AI+PS+手绘板+电脑
2-4:数位屏,土豪可以选择
三:画画进阶顺序
在开始画之前,我觉得一个合理的步骤,能够让你从0到1进步的更快,也能够培养你的自信心。这只是自己在画的过程中的心得,仅供参考哦。
3-1:先看插画
我刚开始画插画的时候,其实不知道如何下手,画成什么样子,什么风格。这样我们就可以先去站酷的插画选项去看那些精选的插画,我刚开始的时候看了站酷前100页的所有插画,然后把自己喜欢的风格收藏起来,然后整体了解下插画的风格,然后选择自己喜欢的风格练习,毕竟自己喜欢的,画着更容易出效果。
当然还有追波、behance、ins、微博、pin上也好多插画,很多外国的插画师也画的特别好,可以关注下,不断提高自己的审美。我的微博(一个考拉呀)和ins(zsherry666)上关注了很多插画师和博主,大家可以去关注这些优秀的插画师。
你看的多了,灵感也更多,创作技巧也更多,闭门造车无中生有还是很难的。
总结:在ins、微博、站酷、dribble、UI中国、Behance等设计网站去看插画作品。
3-2:临摹
闭门造车,不如站在巨人的肩膀上。
3-2-1:看教学视频
感觉任何的文字教程都不如视频教程手把手教学的来的快,去看一个完整的插画的绘图过程,会让你更加有自信些,然后也会让自己少走很多弯路,在站酷高高手以及B站上有很多视频。
自己最初画插画的时候,看了一个视频,主要展示一个完整的画画过程,感觉对自己有很多启发:https://www.gogoup.com/course/GMTc5/
3-2-2:手画,观察细节
在自己开始画的时候,很多效果真的连底稿都起不太好,然后自己就拿铅笔和速写本,在本子上画,一个是培养自己长久以来手绘的感觉。
而且在手绘的同时,你可以观察每一个细节的笔触以及色彩的转换。而且不同风格的插画,一些元素的处理方式不同。
3-2-3:临摹插画
临摹,尽量选择你喜欢的风格画,临摹自己喜欢的,画的更开心呀。站在巨人的肩膀上,让你进步更快。
临摹的时候我们临摹的是什么:构图、配色、细节的处理、肌理的表现手法、创意、风格…
3-3:创作
基于自己画画过程中的小经验,插画的难易程度都有一个顺序,从简单到复杂,让我们进步更快,也不会打架你的信心,我这里有一个建议画画的顺序。
四:心动不如行动
看别人的画,总会觉得很简单,有的时候对别人的还可以指点一二,但让你画的画,不一定画成什么鬼。眼高手低,语言上的巨人,行动上的矮子。只有画起来,你才能真正理解一幅画背后的好与坏,技能的高与低。
以下是自己在自己画画的过程中的小心得,一个建议的顺序。刚开始自己选择了直接自己创作一幅画,真的画了好久,很多东西不太会,很打击自己的信心。在不断学习的过程中,发现这样从简单到难,是一个相对合理的过程。当然只是个人观点,仅供参考哦。
4-1:矢量人物
应用场景:这种被应用在很多启动页、H5、banner等设计上,这种画出图比较快,配合明亮轻快的色彩,视觉效果也很棒。
绘图工具:Sketch+PS。
绘画流程:1.sketch起形+上色;这种话会使用很多渐变色,Sketch调渐变色会比AI更快捷,而且很多UI设计师,使用这个工具会更熟练。2.画完之后,可以根据需要导出到ps添加杂色,使画面质感更丰富。
练习项目:人物的造型、人物动态、场景的传递等
一幅画的练习分解
以自己画的一张图为例的画画步骤。
1.业务需求:业务经理向安全管家介绍一个App。
2.需求分析:安全管家的工作地点为安全车间,场景中的可能有安全帽、一些车间的吊车、工具之类的。
3.找参考图:安全车间、吊车、介绍的人物动态。我们找到参考图以后发现车间很大,那我们就加一个楼层,加一些栏杆,少画一点没必要的场景。那我们的参考图就找好了。
4.配色参考:我选用了冷色调来刻画环境,因为这样比较安静不杂乱。如果配色有困难,可以选一张画的比较好的图,参考建立一个色系。
5.大致勾画你的草图(当然我的草图很烂了),然后利用Sketch勾画,加入渐变色,选用一些明亮的渐变色刻画突出人物。当然如果你的sketch不太熟练的画(sketch操作教程:http://www.sketchcn.com/sketch-chinese-user-manual.html),你也可以用AI,但是我觉得sketch调渐变色更666。
6.画完之后,放入ps添加杂色。
其实在画的过程中会有很多修改和调整,不过开始是画的比较慢,要慢慢摸索,也会有飞机稿,后来会越来越来越快的。
绘画小Tips:
1.使用渐变色让画面更饱满;2.植物装饰;3.根据场景添加小元素;4.PS后期添加质感;5.与实际人物的比例不同,我们会调整人的比例,比如拉长腿的长度,缩小脑袋、手和脚。
练习项目:人物的造型、人物动态、场景的传递等
参考画图流程:https://mp.weixin.qq.com/s/MJyQ8qk-bKOySinLcowwUA
4-2:人物插画
这种比矢量人物更多小细节,光影和质感更丰富
应用场景:启动页、一些banner图
绘图工具:AI+PS
绘画流程:1.使用AI起形,上基本色(注意整体配色的协调),注意分图层;2.AI可以导出分层的psd文件,我们后续可以使用ps添加暗部和亮部,而且ps笔刷工具,会让插画更有质感。
绘画技巧:同一色系的使用,互补色的使用。
练习项目:噪点笔刷、人物造型、人物部分细节、人物动态
一幅画的练习分解
1.找相似的人物动态图。
在开始画的时候,我们可能都不太默写,达不到想画什么就画什么的境界。所以如果一下子画不出来很正常。尤其是人物动态的,其实蛮复杂的,尤其是手,脸的位置。
2.利用Ai,对照图形画形体动态
在开始的时候,我直接在参照图上画,后来画的多了就看着画,慢慢锻炼自己的上手能力。
3.上基本色,这个时候我们会上色块,顺便调整整体的配色。
如果自己画不好的话,可以找参照图吸色。因为你的配色可能会消耗你很久的时间,你也没有别人配的好,你在吸色的同时,也是一种学习,潜移默化中你的配色能力会越来越好。
我自己利用画插画练习配色的步骤:吸色—吸色+调整局部配色—看临摹插画配色—自己配色
4.调整整体的比例。为了凸显人物的苗条,我们会调整人的比例,比如拉长腿的长度,缩小脑袋、手和脚。
5.将AI文件导出PSD格式。
6.利用PS分层上色。(使用工具:手绘板)当然观看链接中的视频教程,可能更直观哦。
6-1:以给腿上色为例,我们选中腿的图层,锁定透明图层。
6-2::吸取基本色,选择深色区域画暗部,浅色区域画亮部。也可以选择相近色区域的颜色
6-3 :选择一个噪点笔刷。一般会调整透明度再上色,而不是100%,然后一层层叠加,创造丰富自然的渐变效果。
噪点笔刷的使用的详细教程:https://www.gogoup.com/course/GMjYx/;和这个教程不同的是,我会利用AI画,然后PS加明暗,我喜欢矢量明显的形体感觉。
6-4 :就这样逐步上色,整体调整敏感,效果图如下。
绘画小Tips:
AI画图过程中:快捷键P起形;快捷键A,可以调整节点;快捷键I,吸色。
人物面部其实不是很好画,比如侧脸,鼻子之类的,你可以找一些优秀的插画去练习。
人物的动态,可以没事多画速写寻找感觉。
肢体的链接处,比如脖子与脸部的处理、胳膊与身体的处理、头发与脸部,多注意观察这些小细节(通过观察你身边的人或者优秀画作的处理方式)。
4-3:简单场景画
画这类画,我主要练习的是自己的配色能力,我会选择一种主要色彩,比如蓝色、黄色等,再采用一些其他色彩去画一些小元素,比如说一些动态额人物去点缀整个场景。
因为在开始画插画,很多颜色的搭配,会有一点难度,我们选择一种色彩,通过变化明暗、纯度等,让整个画面有层次。
如果每一种色彩,你有了熟练的运用,那么多种色彩搭配的时候,你会更游刃有余。
绘图工具:ipad+ps,或者手绘板+ps
主要特点:相近色的运用、人物有动态无太多细节;在一幅画中,你可以运用一种笔刷,难度就相对降低。
练习项目:色彩、构图、笔刷练习、环境刻画的练习
其实画画步骤和前面的大同小异:
1.构思并勾勒草图
2.上大色块
3.笔刷画明暗+肌理
4.调整整体明暗
5.排版润色
一幅画的练习分解
以自己临摹的一张类似的画为例(工具:iPad+手绘笔+PS)
1.自己在pin上看到一幅很有感觉的画,选择来临摹。首先很喜欢这张画的蓝色调(你可以练习你蓝色系的配色能力);画好这张画可能要处理好树和水两个地方。
2.首先我们定一个画板,我选择了750x1624px的大小的画板,画草图(请忽略我的鬼畜版的草图)。
3.在画这幅画之前,我画过一个树主题的的画,因此这幅画主要是水画法的练习
树画的特点就是:形体:树干+树叶;
树干:基本色+纹理+明暗;转折处的处理
树叶:我会选用一个点墨的笔刷用不同深度的颜色,画出树叶繁密的效果,效果会很透气,即使暗部也有丰富的色彩变化。
用一张画,练习一类事物的画法,比如这张画主要练习树、这一张练习云、这一张练习草等,然后在下一张画出现同样的元素你就可以复盘利用。当你画负责的画,很多元素,你可以游刃有余,降低你画画的挫败感。
4.画水的时候,我们可以先分析它的画法:明暗关系+肌理的处理+与周围元素的关系处理
5.开始画:
5-1:上基本色:因为参考图的颜色比较脏,我选择了更纯净的蓝色,上基本色的时候就要区分大的明暗。
5-2:点缀暗部色:我们观察暗部的画,是一些圆形的颜色,我选用一种笔刷,吸取基本色中的深色。为了让画面赋予变化,我们可以根据整体明暗的变化,变化的选择深色。
5-3:画亮部的肌理:参考图的亮部的肌理是,线性(长短并用),并暗示了水流的方向,颜色选用的是基本色的亮色,并不同透明度叠加,让水更有深度。
5-4:为了让画面更有意思,让水显得更有层次,我添加了锦鲤,让蓝色的画面增加一些点缀,增强画面的动感。你可以画一个,然后粘贴复制调整。
5-5:画石头+画人:其实画的思路和水是一样的(我画的石头不是很好哈),观察别人怎么画,基本色+明暗部+细节处理+与其他元素的交融。
其实即使再小的元素,如果你添加了明暗变化,你的整体画面就会很赞,尽量不要画一个色块。
5-6:如果想让元素更加和谐,不同元素交界处的处理会比较重要。比如我们在画画的时候,经常提到环境色。
石头的地方:采用蒙版,锐化边缘,创造石头在水中的视觉效果。
树的地方:在水部分,加入树叶的倒影,以及树的颜色。
5-7:画完之后在ps调整细节、调整整体的视觉效果。
5-8:排版优化。
小Tips:
与矢量的插画不同,在画这些的时候,笔刷不断叠加,纹理更丰富,甚至看不到基本色的影子,画面更饱满。
整体明暗关系+个体明暗关系+肌理刻画
注意运用环境色
慢慢练习,进步是一个循序渐进的过程。哪怕一张画只练一种色彩、一个笔刷、一种事物的画法,积少成多,不要着急。
ps笔刷使用教程:https://www.gogoup.com/course/GMjEz/
4-4:自己创作
在上面我们从人物形态、人物动态,以及人物的细节,到环境的细节完成了一个小的逐步的进阶练习。
慢慢的我们就可以去自己创作,因为很多插画都是由环境+人物的组成。一开始可以选择简单的,慢慢的深入刻画,从量变到质变,最终成为大神。
从开始叠加图片画,参考优秀插画画,到自己有灵感创造,就是你不断进步的过程。也许你会被灵感砸中,然后去画一幅画,像看的人传达你的思想。
4-5:2.5D科技风的插画
这个插画主要通过AI去画。然后通过调整颜色,创造科技感的的视觉效果。这类的插画都是由几何形体变化的,即使你没有插画基础你也可以画。
一幅画的练习分解
1.我们先画一个正方形
2.利用Ai的一个功能,它可是比一个面一面的画简单很多
下面给大家分享一组自己研究的参数。
3.利用扩展外观工具,就可以将图形分解为面,这样每一个面就可以编辑了。
所有的2.5D图形,都是基于这个变化的,需要一定的耐心,还有你的idea。
2.5D的插画教程:https://www.zcool.com.cn/article/ZNTkwODAw.html
科技风插画教程:https://www.gogoup.com/course/GMjgz/
2.5D网格画法教程:https://www.ui.cn/detail/359900.html
五:坚持!坚持!坚持!
插画的形式变化多样,感觉是一个不断学习的过程,希望大家都可以在画画中找到快乐,慢慢不断解锁自己的能力。很多教学视频,以及优秀的插画,都能给我们学习的途径,很多时候在于我们有没有开始做。
目前和很多职业插画师还有很多差距,还有很多画法需要自己去摸索学习。关键还是不断的画!画!画!,不断进步中。
希望和大家一起进步,喜欢记得给我点赞哦 !!!