恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
插画-从入门到进阶的小心得
0.0°
2019-06-25 原创文章 教程 举报 3677 99 71 5

不是很高级的教学课程,是自己在摸索中的小心得记录,希望可以帮助到大家,一起交流进步。

Image title


最近插画很火,自己也是被那优美的画面吸引,在日常的运营活动以及UI的界面中(空状态图、图标等),加入插画,会让我们的作品充满趣味。

在很多设计网站,也有很多零基础学插画的教程,想必很多人也很心动吧。

自己画插画算是自己摸索的过程,因为设计师很多都学过素描色彩的课程,其实转换为电脑产出,有些类似,关键点:就是多画多练习多产出!!!就是画!画!画!

以下是自己的插画练习,还在不断学习中。

Image title

一:为什么画插画

自己刚开始画插画,因为插画的色彩搭配很赞,自己的配色能力不是很好,觉得尝试一下,可以提高自己的色彩敏感性。

在运营以及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:创作

基于自己画画过程中的小经验,插画的难易程度都有一个顺序,从简单到复杂,让我们进步更快,也不会打架你的信心,我这里有一个建议画画的顺序。

Image title

四:心动不如行动

看别人的画,总会觉得很简单,有的时候对别人的还可以指点一二,但让你画的画,不一定画成什么鬼。眼高手低,语言上的巨人,行动上的矮子。只有画起来,你才能真正理解一幅画背后的好与坏,技能的高与低。

以下是自己在自己画画的过程中的小心得,一个建议的顺序。刚开始自己选择了直接自己创作一幅画,真的画了好久,很多东西不太会,很打击自己的信心。在不断学习的过程中,发现这样从简单到难,是一个相对合理的过程。当然只是个人观点,仅供参考哦。


4-1:矢量人物

应用场景:这种被应用在很多启动页、H5、banner等设计上,这种画出图比较快,配合明亮轻快的色彩,视觉效果也很棒。

绘图工具:Sketch+PS。

绘画流程:1.sketch起形+上色;这种话会使用很多渐变色,Sketch调渐变色会比AI更快捷,而且很多UI设计师,使用这个工具会更熟练。2.画完之后,可以根据需要导出到ps添加杂色,使画面质感更丰富。

练习项目:人物的造型、人物动态、场景的传递等

Image title


一幅画的练习分解

以自己画的一张图为例的画画步骤。

1.业务需求:业务经理向安全管家介绍一个App。

2.需求分析:安全管家的工作地点为安全车间,场景中的可能有安全帽、一些车间的吊车、工具之类的。

3.找参考图:安全车间、吊车、介绍的人物动态。我们找到参考图以后发现车间很大,那我们就加一个楼层,加一些栏杆,少画一点没必要的场景。那我们的参考图就找好了。

Image title


4.配色参考:我选用了冷色调来刻画环境,因为这样比较安静不杂乱。如果配色有困难,可以选一张画的比较好的图,参考建立一个色系。

Image title


5.大致勾画你的草图(当然我的草图很烂了),然后利用Sketch勾画,加入渐变色,选用一些明亮的渐变色刻画突出人物。当然如果你的sketch不太熟练的画(sketch操作教程:http://www.sketchcn.com/sketch-chinese-user-manual.html),你也可以用AI,但是我觉得sketch调渐变色更666。

6.画完之后,放入ps添加杂色。

其实在画的过程中会有很多修改和调整,不过开始是画的比较慢,要慢慢摸索,也会有飞机稿,后来会越来越来越快的。

Image title


绘画小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,对照图形画形体动态

在开始的时候,我直接在参照图上画,后来画的多了就看着画,慢慢锻炼自己的上手能力。

Image title


3.上基本色,这个时候我们会上色块,顺便调整整体的配色。

如果自己画不好的话,可以找参照图吸色。因为你的配色可能会消耗你很久的时间,你也没有别人配的好,你在吸色的同时,也是一种学习,潜移默化中你的配色能力会越来越好。

我自己利用画插画练习配色的步骤:吸色—吸色+调整局部配色—看临摹插画配色—自己配色

4.调整整体的比例。为了凸显人物的苗条,我们会调整人的比例,比如拉长腿的长度,缩小脑袋、手和脚。

Image title


5.将AI文件导出PSD格式。Image title

6.利用PS分层上色。(使用工具:手绘板)当然观看链接中的视频教程,可能更直观哦。

   6-1:以给腿上色为例,我们选中腿的图层,锁定透明图层。

   6-2::吸取基本色,选择深色区域画暗部,浅色区域画亮部。也可以选择相近色区域的颜色

   6-3 :选择一个噪点笔刷。一般会调整透明度再上色,而不是100%,然后一层层叠加,创造丰富自然的渐变效果。

Image title


噪点笔刷的使用的详细教程:https://www.gogoup.com/course/GMjYx/;和这个教程不同的是,我会利用AI画,然后PS加明暗,我喜欢矢量明显的形体感觉。

   6-4 :就这样逐步上色,整体调整敏感,效果图如下。

Image title


绘画小Tips:

AI画图过程中:快捷键P起形;快捷键A,可以调整节点;快捷键I,吸色。

人物面部其实不是很好画,比如侧脸,鼻子之类的,你可以找一些优秀的插画去练习。

人物的动态,可以没事多画速写寻找感觉。

肢体的链接处,比如脖子与脸部的处理、胳膊与身体的处理、头发与脸部,多注意观察这些小细节(通过观察你身边的人或者优秀画作的处理方式)。

Image title


4-3:简单场景画

画这类画,我主要练习的是自己的配色能力,我会选择一种主要色彩,比如蓝色、黄色等,再采用一些其他色彩去画一些小元素,比如说一些动态额人物去点缀整个场景。

因为在开始画插画,很多颜色的搭配,会有一点难度,我们选择一种色彩,通过变化明暗、纯度等,让整个画面有层次。

如果每一种色彩,你有了熟练的运用,那么多种色彩搭配的时候,你会更游刃有余。

绘图工具:ipad+ps,或者手绘板+ps

主要特点:相近色的运用、人物有动态无太多细节;在一幅画中,你可以运用一种笔刷,难度就相对降低。

练习项目:色彩、构图、笔刷练习、环境刻画的练习

其实画画步骤和前面的大同小异:

1.构思并勾勒草图

2.上大色块

3.笔刷画明暗+肌理

4.调整整体明暗

5.排版润色


一幅画的练习分解

以自己临摹的一张类似的画为例(工具:iPad+手绘笔+PS)

1.自己在pin上看到一幅很有感觉的画,选择来临摹。首先很喜欢这张画的蓝色调(你可以练习你蓝色系的配色能力);画好这张画可能要处理好树和水两个地方。

2.首先我们定一个画板,我选择了750x1624px的大小的画板,画草图(请忽略我的鬼畜版的草图)。

Image title


3.在画这幅画之前,我画过一个树主题的的画,因此这幅画主要是水画法的练习

树画的特点就是:形体:树干+树叶;

树干:基本色+纹理+明暗;转折处的处理

树叶:我会选用一个点墨的笔刷用不同深度的颜色,画出树叶繁密的效果,效果会很透气,即使暗部也有丰富的色彩变化。

用一张画,练习一类事物的画法,比如这张画主要练习树、这一张练习云、这一张练习草等,然后在下一张画出现同样的元素你就可以复盘利用。当你画负责的画,很多元素,你可以游刃有余,降低你画画的挫败感。

Image title


4.画水的时候,我们可以先分析它的画法:明暗关系+肌理的处理+与周围元素的关系处理

Image title


5.开始画:

5-1:上基本色:因为参考图的颜色比较脏,我选择了更纯净的蓝色,上基本色的时候就要区分大的明暗。

5-2:点缀暗部色:我们观察暗部的画,是一些圆形的颜色,我选用一种笔刷,吸取基本色中的深色。为了让画面赋予变化,我们可以根据整体明暗的变化,变化的选择深色。

5-3:画亮部的肌理:参考图的亮部的肌理是,线性(长短并用),并暗示了水流的方向,颜色选用的是基本色的亮色,并不同透明度叠加,让水更有深度。

5-4:为了让画面更有意思,让水显得更有层次,我添加了锦鲤,让蓝色的画面增加一些点缀,增强画面的动感。你可以画一个,然后粘贴复制调整。

Image title


5-5:画石头+画人:其实画的思路和水是一样的(我画的石头不是很好哈),观察别人怎么画,基本色+明暗部+细节处理+与其他元素的交融。

其实即使再小的元素,如果你添加了明暗变化,你的整体画面就会很赞,尽量不要画一个色块。

Image title


5-6:如果想让元素更加和谐,不同元素交界处的处理会比较重要。比如我们在画画的时候,经常提到环境色。

石头的地方:采用蒙版,锐化边缘,创造石头在水中的视觉效果。

树的地方:在水部分,加入树叶的倒影,以及树的颜色。

Image title


5-7:画完之后在ps调整细节、调整整体的视觉效果。

Image title


5-8:排版优化。

Image title


小Tips:

与矢量的插画不同,在画这些的时候,笔刷不断叠加,纹理更丰富,甚至看不到基本色的影子,画面更饱满。

整体明暗关系+个体明暗关系+肌理刻画

注意运用环境色

慢慢练习,进步是一个循序渐进的过程。哪怕一张画只练一种色彩、一个笔刷、一种事物的画法,积少成多,不要着急。

ps笔刷使用教程:https://www.gogoup.com/course/GMjEz/


4-4:自己创作

在上面我们从人物形态、人物动态,以及人物的细节,到环境的细节完成了一个小的逐步的进阶练习。

慢慢的我们就可以去自己创作,因为很多插画都是由环境+人物的组成。一开始可以选择简单的,慢慢的深入刻画,从量变到质变,最终成为大神。

从开始叠加图片画,参考优秀插画画,到自己有灵感创造,就是你不断进步的过程。也许你会被灵感砸中,然后去画一幅画,像看的人传达你的思想。


4-5:2.5D科技风的插画

这个插画主要通过AI去画。然后通过调整颜色,创造科技感的的视觉效果。这类的插画都是由几何形体变化的,即使你没有插画基础你也可以画。


一幅画的练习分解

1.我们先画一个正方形

2.利用Ai的一个功能,它可是比一个面一面的画简单很多

Image title


下面给大家分享一组自己研究的参数。

Image title


3.利用扩展外观工具,就可以将图形分解为面,这样每一个面就可以编辑了。

Image title


所有的2.5D图形,都是基于这个变化的,需要一定的耐心,还有你的idea。

Image title



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


五:坚持!坚持!坚持!

插画的形式变化多样,感觉是一个不断学习的过程,希望大家都可以在画画中找到快乐,慢慢不断解锁自己的能力。很多教学视频,以及优秀的插画,都能给我们学习的途径,很多时候在于我们有没有开始做。

目前和很多职业插画师还有很多差距,还有很多画法需要自己去摸索学习。关键还是不断的画!画!画!,不断进步中。


希望和大家一起进步,喜欢记得给我点赞哦 !!!

Image title


更新:2019-06-25

收藏

99人已收藏

  • 14

    作品

  • 95

    粉丝

  • 40

    关注

  • 免费的插画素材网站,大概都在这里
  • 想吃什么画什么
  • 网页无障碍设计:色彩对比度
  • B端/后台设计之输入框&选择器
相关标签
教程插画

    猜你喜欢

      2019-06-25 原创文章 教程 举报 3677 99 71 5

      插画-从入门到进阶的小心得

      0.0°

      你确定要举报插画-从入门到进阶的小心得

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年06月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      71
      99
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录