新人小白快速学习引导页插画设计技巧

  你有没有过这样的困惑?UI设计(Design)的门槛越来越高,艺术手绘(包括插画)的重要性也被日益重视起来。我只是个刚入行的新手,我不会手绘怎么办?我熟悉P

S、AI软件操作但我就是不知道怎么去下手设计插画?

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

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

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

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

二:肌理型插画

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

三:纯手绘型插画

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

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

四:MBE型的插画设计风格(style)

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

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

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

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

② 提取关键词,一般是提取主语、形容词/副词,例如:大标题是“免费乐享沟通”,小标题是“随时随地聊一聊”。UI设计教程具体还包括:可用性分析、GUI(Graphic User Interface即图形用户界面)设计、用户测试等。好的UI设计不只是让软件变得有个性有品味而已,更重要的是让软件的操作变得舒适、简单、易用,并且充分体现软件的定位和特点。我们可以提取到的关键词就是:免费、聊天沟通、随时随地,ok~把关键词记下来。

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

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

同样选用上面的文案作为例子,“免费乐享沟通,随时随地聊一聊”,你可以想象一个场景:小明拿着手机在聊天。UI视觉设计一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究,UI设计的好坏只能凭借设计师的经验或者领导的审美来评判,这样就会给企业带来极大的风险。如果把场景再具象化:小明在公园里休闲地躺着,还拿着一部手机在跟朋友聊天。ok~把这句描述记下来,这相当于在搭建(指搭盖、建立)插画表达的大框架。

(3)分解场景元素

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

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

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

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

(2)人物重塑

①先选择一个人物动态,你可以先把该人物的发型,脸部,身体,衣服鞋子用钢笔工具分别勾出来,用锚点选择工具对人物的脸部,发型等部位进行调整。UI设计学习UI设计师的涉及范围包括高级网页设计、移动应用界面设计,是目前中国信息产业中最为抢手的人才之一。

参考图 调整后的图

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

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

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

设计(Design)构思后新创作的图

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

(3)表现形式创作

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

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

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

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

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

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

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

0
分享到:

评论0

请先

社交账号快速登录

 
QQ在线咨询