新人小白快速学习引导页插画设计技巧
你有没有过这样的困惑?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
大多时候你就可以选择某种表现形式去设计自己的插画,把表现形式确定下来后,每一个元素确定下来,再对每一个元素进行勾勒,设计的过程就是把抽象变具象,把复杂变简单,只要我们用对了方法,一切都是有迹可循的。
总结:当你能抓到当下流行或某种设计趋势时候,万变不离其宗的就是抓住规律,这样做出来的东西总不会差到哪里去的……
新人学习,最重要的就是多看,多想,多练。不过,废话多了那么多,我还是不会做怎么办,那就多搜集素材吧,拼凑素材也是工作的一种办法。积累自己的素材库,总有一天会是你的法宝……(#^.^#)
最后献上例子中的完整版引导页插画,还有很多不足之处……