你有没有过这样的困惑?UI设计的门槛越来越高,手绘(包括插画)的重要性也被日益重视起来。我只是个刚入行的新手,我不会手绘怎么办?我熟悉PS、AI软件操作但我就是不知道怎么去下手设计插画?

画好插画难不难?答案是–不难。今天我分享的是APP引导页插画的设计思路和创作技巧(“投机取巧〞),希望能帮到有需要的朋友(O(∩_∩)~)

 

 

 

先来了解一下插画都有哪些风格吧,这关系到后期设计参考,看的多了,以后自己找参考的时候就会有方向,不至于像个无头苍蝇不知道如何下手。

一:扁平化的插画设计风格特点:

扁平化是近几年逐渐流行起来的一种设计以及绘画风格,因其去除复杂的事物结构、阴影特征、纹理等,用简单线条或者色块概括的外部轮廓,绘制出“平”的感觉。

 

 

二:肌理型插画

特点:肌理插画是在扁平插画的基础上,增加了颗粒感,将光影关系表现出来,比扁平插画更有质感。一般是运用各种材质笔刷处理或者是滤镜。

 

三:纯手绘型插画

特点:手绘插画对于设计师功底要求比较高,其风格应用的范围也很广,所以手绘可以展现出的面比其他风格的都要多。

 

 

纯手绘插画不太适合新手上手插画设计,一般是以简单的扁平插画开始学习。

 

四:MBE型的插画设计风格

特点:简洁、圆润、可爱。风靡了很久的MBE图标,也是简单易上手的哦~

 

 

 

 

现在就一起来学习如何一步一步进行插画创作吧~

 

(1)准确理解文案需求(大标题+小标题)

① 理解文案表达的意思,它到底要给用户传达什么内容?它是指引用户的引导类型文案,还是介绍产品型。

② 提取关键词,一般是提取主语、形容词/副词,例如:大标题是“免费乐享沟通”,小标题是“随时随地聊一聊”。我们可以提取到的关键词就是:免费、聊天沟通、随时随地,ok~把关键词记下来。

 

(2)把文字描述想象成一个场景

任何文字描述都可以转换成一个场景,而每一个场景都是由多个元素组成的。

同样选用上面的文案作为例子,“免费乐享沟通,随时随地聊一聊”,你可以想象一个场景:小明拿着手机在聊天。如果把场景再具象化:小明在公园里休闲地躺着,还拿着一部手机在跟朋友聊天。ok~把这句描述记下来,这相当于在搭建插画表达的大框架。

 

(3)分解场景元素

脑海里浮现出你描述的场景,再想一想,这里面有什么:是谁,在哪里,在做什么,怎么样等等。这便是经典的5W2H分析法,回归到插画设计的话,我提取了它的部分元素,归纳为主体元素细分+周围环境场景细分。

栗子来了~,描述语句是小明在公园里休闲地躺着,还拿着一部手机在跟朋友聊天。能提取的元素有:主人公小明(包括人物动态,发型,衣着,动作) ,手机,草地地面,天空,树木鲜花,小路,你所能想到的小装饰,语音,视频等icon等。

 

 

(1)确定人物动态,找参考。(推荐用花瓣,dribble,behance找参考)

栗子日常~,我要找一个手拿手机的人物参考,参考图如下,(有人说我找不到素材怎么办?emmm….怎么可能找不到呢?平时每天花10分钟去采集各种插画素材,等你积累到足够的时候很快就能调用了)尽量找多一些不同角度的素材。

 

(2)人物重塑

①先选择一个人物动态,你可以先把该人物的发型,脸部,身体,衣服鞋子用钢笔工具分别勾出来,用锚点选择工具对人物的脸部,发型等部位进行调整。

 

参考图                                                                  调整后的图

 

 

②改变人物的衣服穿搭颜色,重新塑造新的氛围和格调,比如活跃的,亮丽的,严肃的等等。颜色的搭配同样可以从网上找参考,直接吸取颜色就好,注意用色比例

③创建自己的元素,即是说,把代表你产品特征的元素加进去。比如文字描述,图标指示等。

④添加细节。你可以加点小装饰,加点小背景,或者给人物加些阴影。

 

设计构思后新创作的图

 

总结:当我们没有任何任何想法时候,找相似的参考是最便捷的途径。我们要会分解元素,重组元素,使之变为自己的东西。

 

 

(3)表现形式创作

也许亲爱的你是一个喜欢逛花瓣逛逛站酷或dribble的人,那么恭喜你,你对流行的设计趋势肯定是比较敏感的。当我们毫无思路时候,可以采集某一种表现形式的设计,找到其中的共性再自己加以创新,也是完成创作的一个过程。

举个例子,以下四张插画虽然是来自不同的产品,但是细心的你可以发现,人物必须是看着手机(物品)的,或者还有一定的交互动作。这其实就是人物与我们的产品建立起了联系。

参考图1                                              参考图2                                      参考图3                                 参考图4

 

大多时候你就可以选择某种表现形式去设计自己的插画,把表现形式确定下来后,每一个元素确定下来,再对每一个元素进行勾勒,设计的过程就是把抽象变具象,把复杂变简单,只要我们用对了方法,一切都是有迹可循的。

总结:当你能抓到当下流行或某种设计趋势时候,万变不离其宗的就是抓住规律,这样做出来的东西总不会差到哪里去的……

 

 

 

 

新人学习,最重要的就是多看,多想,多练。不过,废话多了那么多,我还是不会做怎么办,那就多搜集素材吧,拼凑素材也是工作的一种办法。积累自己的素材库,总有一天会是你的法宝……(#^.^#)

最后献上例子中的完整版引导页插画,还有很多不足之处……

 

 

转载请注明:学UI网 » 新人小白快速学习引导页插画设计技巧

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
追波风原创插画【ps教程】追波风原创插画【ps教程】
Atlassian 设计体系元老的经验分享Atlassian 设计体系元老的经验分享
设计修图,为什么如此实用?设计修图,为什么如此实用?
成为一枚设计师该有的心态成为一枚设计师该有的心态
Designer 教程Designer 教程
理性地定义视觉风格 - 情绪板理性地定义视觉风格 – 情绪板
如何让设计团队的工作效率提升50%?如何让设计团队的工作效率提升50%?
数据化设计思维的养成数据化设计思维的养成
如何打破设计边界,驱动业务数据增长?如何打破设计边界,驱动业务数据增长?
基于后台产品的设计思考基于后台产品的设计思考