用实战案例告诉你,一幅插图是怎么画出来的? - 优设-UISDC

用实战案例告诉你,一幅插图是怎么画出来的?

2018/02/23 17813评论区

@Jenny黄静雯 :记录绘制插图的详细过程,分享插画的绘制思路,文末附笔刷及安装方法。

文章大纲:

  • 主题积累和构思
  • 草图
  • 上色绘制
  • 笔刷及安装方法

一. 主题的积累和构思

养成把平时的想法记录下来的好习惯。将合适的想法拿出来,赋予这个想法更丰富的文案描述,同时可以适当构思画面。

△ 主题的积累和构思

此次选择的主题为《有光的地方就能开出花来》,以女孩和植物作为设计对象,展开设计。

这个主题源于:虽然生活中有很多不尽人意的地方,但,换个角度,也能发现其美妙之处。我提取女孩生活中经常发生的事情,选择较有代表性、易于表现的动作画面场景为绘制内容。

二. 草图

​《有光的地方就能开出花来》选择的场景包括:中午吃饭的场景,收拾行李的场景,雨天的场景,整理柜子的场景,厨房里榨水果的场景,外出的场景。涉及的道具包括:饭盒,行李箱,伞,柜子,榨汁机,挎包等等。

将上述场景进行了纸上绘制(草图比较丑,见谅),画草图的主要目的是将头脑中的想法比较快的落实到实地,以便更好更快的调整画面,甚至是方案方向。

对于同一个场景描述可以做多个草图尝试,最后选择画面效果最合适的一个方案。

△ 部分草图

三. 上色绘制

因为我除了画插图之外,还是一名设计师,对于画风的选择更倾向能同时应用到界面的设计里,于是选择了一种风格清新、视觉表现比较轻的画风,在界面的空状态、弹窗、闪屏、活动运营时可以轻松使用。

上色的过程包括:

  • 线稿
  • 上色
  • 画&贴材质
  • 画面的完整度调整
  • 添加GIF小动画(不一定需要)

下面以其中比较有代表性的一幅图为例讲解。

1. 线稿

整理草图,将草图中的细节全部明确。

△ 线稿整理

​2. 上色

画面刻画,调整画面中的形象表达。如下图,将线稿中的正面人物调整为侧面,人物看向画面里,手伸向空中,仿佛在接着雨滴,或者落叶?总之侧面的人物可以使画面更有空间感,更有想象力。上色使用了粉笔笔刷。

​3. 画&贴材质

增加画面的细节表现力。材质使用了肌理刮刀笔刷,适度使用,不要太多。此处用得有点多,所以在第四步的时候又删减了一些材质。

△ 上色、画&贴材质

4. 画面的完整度调整

上色完成后,发现人物和字体在画面里无法紧密结合,于是添加了一个背景,将二者更好的融合在一起,同时深色的背景也有助于突出人物主体,整个画面也更整体统一。此时发现抬起的手臂让人物没有专注于伞这个主要的道具,于是改为两只手都拿伞,也给标题文字留出放置的空间。

△ 画面调整完成

下面是整个画面绘制的过程,这里放的是行李箱的绘制过程,伞的没有录。但是表达的意思是一样的,相信机智的你肯定懂的。

视频地址:https://m.weibo.cn/3273385474/4169625157231154

最后,去掉了飘散在地面的花草,使画面的内容保持在「女孩—道具—文字—背景」这样比较统一的状态。

△ 内容构成

6幅插图的画面总览。

△ 6幅插画的画面

​5. 为画面添加GIF

因为主题为《有光的地方就能开出花来》,一开始的设计是为花草添加花草成长的GIF小动画。但考虑到设计成本比较(tai)高(lan),于是改为花草的抖动及字体的抖动效果,目的是吸引观众的视线到花草及主题文字上。

△ GIF动效的测试

设计完后,发现花草的抖动并没有逻辑,因为榨汁机是没有动的,所以取消了花草的抖动效果。如果想做花草的动画,只能选择逐帧手绘花草从无到有的生长过程,设计成本有点(tai)高(lan),所以最后只保留了文字的抖动效果,吸引观众的视线。​

​下面展示《有光的地方就能开出花来》系列插画最终效果。

伞,

能遮阳避雨,

也能开出花朵抚慰受伤的心灵。

​心里有光,

榨水果的榨汁机,

也能开出花来。

行李箱,

除了能装满你的衣物和梦想,

也能开出花朵给你惊喜。

​走在路上,

发着呆,

挎包里开出了一朵粉色的花。

中午点的外卖,

心里有光,

打开饭盒也能开出花来。

柜子的抽屉里放的不是杂物,

打开抽屉,

里面长出了一簇向往光的花。

最后来一张道具们的合辑。

△ 道具合辑

加个画框也不错。

△ 放在画框里的道具们

《有光的地方就能开出花来》系列至此就告一段落。

四. 笔刷及安装方法

有需要笔刷的同学可以到这里下载,《有光的地方就能开出花来》使用的是粉笔笔刷。材质使用了肌理刮刀笔刷。

链接: https://pan.baidu.com/s/1i5U5pyt 密码: pp9f

安装方法如下,安装好就可以愉快的画画了。

△ 安装方法

欢迎关注作者的微信公众号:「Jenny黄静雯」

「简单实用的插画设计技巧」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/draw-illustration-case

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里