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

你有没有过这样的困惑?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

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

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

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

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

Illustrator
(0)

相关推荐

  • 快速学习Office系列—Word使用技巧

    废话不多说,跟小编一起来看看,怎样使用Word来提高我们的办公效率 操作方法 01 Word中的常用快捷键 "字体"对话框 Ctrl+D 加粗 Ctrl+B 倾斜 Ctrl+I 下 ...

  • APP引导页怎样才能设计的高大上?

    一个优秀的App引导页,能够最迅速地抓住app用户的眼球,让他们快速了解App的价值和功能,起到很好地润滑和引导作用.俗话说的好,好的ui视觉界面可以造就App的点击率.点击率是啥--是钱呀!   请 ...

  • APP引导页设计经验分享

    小编:今天带来的是由fanfanfan9分享的APP引导页设计的那些事.详细了讲解了一个App引导页如何设计,归纳了一些常见的App引导页的分类,让刚刚接触UI设计或者刚好要做引导页 都可以看看或许能 ...

  • 细数那些精彩纷呈的引导页

    UI设计中的引导页就是一个APP的门面.而一个好的引导页不仅会让新用户很快能够上手你的APP,还能带来良好的用户体验,给用户留下深刻的印象,从而留住用户.但是怎么给自己的APP做一个好的引导页呢,今天 ...

  • 网站页脚设计小技巧

    编者按:评价一个网站好坏有众多因素,视觉设计.品牌一致性.网站易用性等,都会影响到访客的情绪,而今天我们要介绍的这个,是不起眼的网站页脚,然而正是这个很多设计师都忽略的部分,在网站中却有着至关重要的功 ...

  • 产品设计中「引导页」的相关思考

    早些年入行做交互的时候,会对任何类型的页面都做一些分析与总结,旨在提升自己的思考能力吧.所以当然也写过关于引导页的文章,但是比较浅,今天我想更深入的谈谈这个话题. 1. 引导页的类型 引导页定义比较广 ...

  • 优秀引导页设计案例解析!

    小编:这篇文章对引导页的解析非常透彻,对于引导页的表现方式从产品功能.设计载体.屏间交互方式以及扁平风四方面各自挑选了一组顶尖的案例来分析.如果你对引导页还不知如何下手,跟着这四个方面的步伐,绝对错不 ...

  • 掌握5个技巧设计出眼前一亮的APP引导页

    现在新手引导已经成手机客户端标配,但是通用的做法不见得是最有效的.这篇文章中我们将会看到为什么新手引导经常无效,以及如何借鉴游戏设计的原理来提高用户的参与度. 通过跟各种行业的移动团队沟通,发现这些添 ...

  • 线性插画引导页制作【做作业】

    小编:今天的作业是一个引导页的练习,展现的形式采用插画.难度为0 ,考验细心.耐心的时候到了. 各位童鞋可以用ai去制作哦! 注意: 1.排版布局: 2.插画制作: 3.色彩协调: 要求:提交的作业在 ...