header_v1.7.40

10分钟搞定扁平风建筑小插画儿

158天前发布

原创文章 / 多领域 / 教程
JJJZ 原创,如需商业用途或转载请与JJJZ联系,谢谢配合。

读这个文章也要不了10分钟噢

这是我16年滴滴公交小程序开城的项目需求,现在过了蛮久也是时候翻出来沉淀一下了~


在版本迭代的项目中对于选择城市页我们想要体现热点城市,也想做些趣味,便决定增加插图的表达。在确定界面之后,要在1~2天内完成8个城市的插图(其中2个上线晚点),时间还是蛮紧张的,毕竟要去画之前脑子基本还是空的...所以我的核心策略是“流程可以快速复制并达意”…说到底就是要快。

@待填充插图的界面


前期准备工作消耗了一些时间,比如选择城市地标(确保识别性和差异性)、确定插画风格,这些过程我就淡淡略过了,善用搜索即可,就直接进入 HOW TO DO 啦。



| HOW TO DO


0.用什么画!



当时我选择用illustrator是因为ai画起来又快又轻松,高兴的画完了发现忘记预设的尺寸也忘记了小图图的像素对齐oh no,虽然ai也能完成像素对齐,以防不测我谨慎的选择挪到ps再来一遍,耽误了不少时间。现在看来用sketch直接画可能更方便。


总之工具什么的并不重要啦,重要的是要开心:blush:

@喜欢ai的素描模式!城市地标由左至右由上至下分别是:1.重庆-人民大礼堂/2.上海-东方明珠电视塔/3.北京-天坛/4.深圳-地王大厦/5.贵州-甲秀楼/6.南京-中山陵/7.成都-望江楼/8.天津-广播电视塔



1.几何搭建!


选择单纯几何图形搭建的原因:一方面是建筑本身的几何形态特征明显,提炼方便;另一方面就是几何化的插图更容易控制,确保风格统一。


总之这样就是好画。


@这些形状足够用了


在这个阶段需要关注形态的抽象化表达,到底要抽象到哪个层级,需要在画第一个建筑的时候就要留心,在完成多个建筑之后还需整体协调。


不同城市地标间的特色也想要凸显以加强区别,比如南明河上的甲秀楼和林中的望江楼,所处的环境特征就可以利用起来。

@甲秀楼-望江楼-天坛


形态简约、没有光影、减少风格化表达是我的核心思路,至于why我会在下面讲。



2.色彩选择!


插图体现的是热点城市,热点城市需要与一般城市拉开层次。拉开层次的方式有很多,字大字小、关键位置等等手段都能满足这个需要,我认为拉开层次的关键词是适可而止——图文对比的形式本身已经足以拉开热点&一般城市间的层级,若过于强调插图(饱和度和精细度)就有些喧宾夺主了。


毕竟插图在这里的作用不是吸睛增加点击率的,所以我倾向更简单的表达,并选择较高明度的性冷淡(maybe)颜色,确保插图在界面的呈现更加自然。

@要天色不同还要天色合理是蛮烦的


建筑的颜色是仅次于形态的识别要素,所以建筑本身颜色的选择还是要基于现实。对于用户来说读图在很多时候就是读色,色彩印象可以是不同城市区分的关键。所以我考虑以大面积的天空颜色作为区分城市的一个依据,加强不同城市色彩印象的区别。



3.画完啦!


加上小云朵就画完了!是不是超简单!


@是的,超简单


放到界面上看看~喔唷可以可以~


@阔以阔以



...............................................................................................................................


更多设计文章和有趣的设计师访谈在我的公众号里面噢!欢迎小伙伴关注与我直接交流~


扫一扫或搜索公众号 设计你好呀 


707

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功