健康知识网

5步快速制作2.5D插画

更新时间:2019-04-24 16:11:15    来源:上海达内科技    手机版

5步快速制作2.5D插画

上海达内科技 2019-04-24 16:11

现在不光是C4D火,2.5D插画也很流行。很多创意插画都采用了这种方式来表现,相比于扁平化的风格,2.5D风格在视觉表现力上更加立体炫酷,使得这种风格的插画活跃在banner、海报、APP和网页设计中。

比如,让人印象最深的“微信跳一跳”的小游戏了,天天守在手机前的动力,除了与朋友圈晒成就感的原因外,也跟简约新奇的 2.5D 风格有关。

那么这种插画如何去着手制作呢?今天,我们就教给大家5步快速制作2.5D插画的方法。

1.构思

首先我们不需要考虑要如何下手,或者如何用工具来实现这个插画效果。先构思一下整一个框架或者小建筑的一些细节,一些有趣的点,用草稿画一下。如果要画一个很大场景的同学就务必要先画草稿再下手,否则你的场景会很混乱。

2.画参考线

2.5D插画最重要的步骤便是骨骼线网格的搭建,再复杂的图形都要乖乖臣服于它的框架之下,可以说解决了骨骼线,你就搞定了2.5D风格的精髓,我们后续的设计创作都是基于骨骼线网格去完成的,那么如何搭建这个骨骼线网格呢。

3.确定光源

为了让物体更加立体,我们需要区分他的受光面和背光面,不同的光源会产生不同的阴影。

4.制作零件,搭积木

有了骨骼线网格我们便可以参考网格线绘制出每一个面,一定要严格按照网格线去绘制,不能有丝毫误差,否则面与面之间的衔接会出现难看的缝隙。将几个大的模块依次拆分慢慢画出来,不要着急。

拆分示例:

其实并不复杂对不对,这样把每一个部分都单独做出来,很快就可以完成小房子的搭建了~

拓展:

1.切斜工具。重复有规律排列的组件,我们用到AI中的“再次变换”“切斜工具”。例如下图中的窗户,绘制一个矩形,复制一个,菜单-对象-变换-再次变化(Ctrl+D)得到另外3个相同矩形,最后全选,使用倾斜工具,倾斜30度。

2.3D字体。打上文字(字体选择一些较为方正的无衬线体效果会好一些),选择效果-3d-凸出和斜角,根据自己的需求选择位置、厚度等参数。通过“对象-拓展外观”,将文本拓展一下外观,变成零碎的个体,以便修改颜色。

5.ps润色,绘制细节

新建空白图层,想对哪些元素加细节,就给他新建一个空白图层,并做个蒙板。

空白图层的模式改为叠加,透明度调整到50%左右,这个看自己喜好,但不建议很高。

用画笔绘制高光,阴影,渐变(渐变可用图层样式)

这样,一个生动的2.5D小插画就诞生了,最后可以自由发挥加些小效果。

当然,一幅插画的诞生,并不像描述的那么轻松,可能需要在你设计的过程中不断的推倒重来或者改变方向,当作品最后呈现在你眼前的时候,你会充满欣喜,就像是自己的孩子一样,共勉~

如果你还想用UI做更多有趣好玩的,下面这个机会你不容错过。

达内4月免费训练营正在报名中,入门高薪互联网行业,全程大咖级讲师亲授,为你解析行业发展趋势,就业前景,帮你了解技术,轻松入门,来达内,更快一步实现月薪过万!



文章转载自网络,作者观点不代表本网站立场,如需处理请联系客服

上海达内科技其它文章

漫威英雄加入互联网公司,会做什么岗位?

漫威英雄加入互联网公司,会做什么岗位?

漫威英雄加入互联网公司,会做什么岗位? 上海达内科技 2019-04-29 16:44 ...

2019-04-29 16:44:35
知名UI设计师都是如何成长起来的?

知名UI设计师都是如何成长起来的?

知名UI设计师都是如何成长起来的? 上海达内科技 2019-04-28 16:55 ...

2019-04-28 16:55:43
有房、有对象、工资高!2019程序员生存报告,看你在哪个档次!

有房、有对象、工资高!2019程序员生存报告,看你在哪个档次!

有房、有对象、工资高!2019程序员生存报告,看你在哪个档次! 上海达内科技 2019-04-25 16:25 ...

2019-04-25 16:25:10
5步快速制作2.5D插画

5步快速制作2.5D插画

5步快速制作2.5D插画 上海达内科技 2019-04-24 16:11 ...

2019-04-24 16:11:15
未来十年,中国互联网将围绕哪些“关键词”展开?

未来十年,中国互联网将围绕哪些“关键词”展开?

未来十年,中国互联网将围绕哪些“关键词”展开? 上海达内科技 2019-04-22 15:48 ...

2019-04-22 15:48:24
阿里工作5年,百度工作2年,面试一个小公司竟然给挂了…

阿里工作5年,百度工作2年,面试一个小公司竟然给挂了…

阿里工作5年,百度工作2年,面试一个小公司竟然给挂了… 上海达内科技 2019-04-19 16:08 ...

2019-04-19 16:08:41
2019腾讯、阿里、网易等各大厂实习生薪资曝光,羡慕嫉妒恨!

2019腾讯、阿里、网易等各大厂实习生薪资曝光,羡慕嫉妒恨!

2019腾讯、阿里、网易等各大厂实习生薪资曝光,羡慕嫉妒恨! 上海达内科技 2019-04-09 14:06 ...

2019-04-09 14:06:04
UI、平面、网页设计傻傻分不清?这篇文拯救你

UI、平面、网页设计傻傻分不清?这篇文拯救你

UI、平面、网页设计傻傻分不清?这篇文拯救你 上海达内科技 2019-03-27 16:33 ...

2019-03-27 16:33:32
2019年学UI设计就业前景如何?

2019年学UI设计就业前景如何?

2019年学UI设计就业前景如何? 上海达内科技 2019-03-25 16:05 ...

2019-03-25 16:05:24
找 Bug 赚了 100 万美元,这位00后怎么做到?

找 Bug 赚了 100 万美元,这位00后怎么做到?

找 Bug 赚了 100 万美元,这位00后怎么做到? 上海达内科技 2019-03-14 16:56 ...

2019-03-14 16:56:40
上海达内科技
上海达内科技

最新文章