• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用实战案例告诉你,一幅插图是怎么画出来的?

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

作者:Jenny黄静雯 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含插画,插画设计,经验分享,设计思路,设计流程等相关知识,Jenny黄静雯希望在学习及工作中可以帮助到您

@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黄静雯」

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

  • 《如何画出自己的原创作品?来看高手的完整流程总结!》
  • 《如何绘制系列插图?收下这份超详细的高手思路总结》
  • 《超全面!为什么越来越多的移动App 使用插画设计?》
  • 《用这个简单实用的设计技巧,轻松做出有趣的插画类设计》

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

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

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

优设大课堂

您可能想查找下面的文章:

  • 如何画好一张描边插画?来看这份超全面的总结!
  • 为网站定制插画有哪些可供借鉴的方法?
  • 超全面!创意图形中的实用小套路进阶指南
  • 未来就在这里! 一组AR 和VR 相关的图标合集免费打包下载
  • 扁平插画绘制进阶指南!新手遇到的六种常见问题解答
  • 零基础必备:详解十种常见的水彩基本技法+问题总结
  • 设计师没原创灵感?试试这个方法!
  • 超实用!多色彩渐变插画的核心技巧总结
  • 结合实例,总结画线稿时容易出现的几个常见问题
  • 描边风设计中,最容易犯的8种问题分析

相关文章

  • 2018-08-23为什么39%的设计工作可能被人工智能取代?
  • 2018-08-23腾讯实战案例!设计师如何从零开始做一款H5?
  • 2018-08-23水彩自学第二集:水彩纸常见问题及测评
  • 2018-08-23零基础做字体?巧用字库做出你的第一款字体设计!
  • 2017-08-06新手建站入门教程初期总结篇
  • 2018-08-23即使是最靠下的网站页脚,设计上同样很讲究
  • 2018-08-23从微信「朋友圈三天可见」,分析背后隐含的设计原因
  • 2017-08-06移动互联网时代:响应式网页设计已成为大势所趋
  • 2018-08-23如何制作一份优秀的答辩PPT?来看高手的方法!
  • 2018-08-23总监经验!视觉设计师必须知道的交互设计模式

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 搜索引擎免费收录网站入口小集
    • 怎样设计网页?怎样制作网页?
    • 亚马逊语音交互设计规范(二)用户说的内容
    • 想让产品更受欢迎?来看这5个增加设计趣味性的方法
    • 为什么做版式设计你总是没有思路?
    • 25条div+css编程提醒及小技巧整理
    • 超全面!降低用户成本的产品设计方法总结
    • 网易资深高手:交互设计师必备的9种能力
    • 交互设计师为什么需要具备产品思维?
    • table td 图片水平垂直居中实现代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有