如何用AI绘制2.5D插画
我们都知道,现在很多Banner广告等都会采用2.5D等距插画来进行绘制,这种插画看起来十分舒服,并且能够根据设计师的技巧来进行各种搭配,下面教你如何用AI来绘制2.5D插画。
工具/材料
Adobe illustrator
01
打开电脑中的AI软件,按ctrl+n新建一张画布,画布的高宽随意。
02
创建完成之后,我们在左侧工具栏中选择“矩形工具”,以2.5D矩形绘制为例。
03
选择矩形工具之后,在画布中绘制一个矩形,按住shift可绘制正方形。
04
矩形绘制完成之后,在上方选项中点击“效果-3D-凸出和斜角”
05
进入3D面板,在位置选项中我们能够看到多种可进行选择的角度,一般来说我们都是选择等角,上下左右根据需求来选择。
06
例如我们选择等角-上方,选择之后勾选预览即可查看效果,调整凸出厚度,点击“确定”即可。
07
确定之后我们就快速绘制了一个2.5D基础形状,这个时候要进行扩展,选择“对象-扩展外观”
08
扩展外观之后,右键点击形状,点击“取消编组”,一直取消到没有编组存在即可。
09
编组完全取消之后,我们就能够针对形状的不同面进行调整处理,然后根据自己的想象,利用基础2.5D形状就能够来组合了。
用AI绘制2.5D插画
1.纪念碑谷风格原理:2.5D+悖论空间
2.2.5D与3D的区别:
没有近大远小的透视关系
3.悖论空间:视错觉的一种(正负形也是视错觉的一种),如不可能三角
4.AI中实现2.5D的方法:
(1)图形绘制(2)效果—3D效果
一、 图形绘制的方法
1. 制作辅助线
方法一:画一条垂直直线,复制—复制—……—水平分布对齐—新建“辅助线图层1.0”—Ctrl+G所有辅助线编组—双击旋转按钮—输入角度60°—勾选“预览”—点击复制—选择复制出的辅助线—再次旋转60°—点击复制—锁定辅助线图层,新建图形绘制图层—选择钢笔工具—在辅助线的交点上单击即可绘制图形
方法二:新建图层“辅助线图层2.0”—选择多边形工具—绘制一个正三角形—选择镜像工具(位于旋转工具下方)—单击三角形最上方的顶点—按住Alt+Shift键拖拽复制出一个镜像的三角形—使用钢笔工具在两个三角形之间画一条水平直线—三角形设置无填充—全选所有形状—按住Shift键旋转90°—Ctrl/Command+Y调整交点完全对齐—无法对齐时:选择“变换”工具(位于右侧,或从窗口打开)—不勾选“对齐像素网格”— Ctrl/Command+Y—编组—缩小后拖拽至色板面板中使其变图案—删除绘制图形—插入矩形—填充选择色板中的图案—Ctrl/Command+K—不勾选“变换图案拼贴”(改变矩形大小时:内部图案大小不变,数量增减)—调整矩形大小(依据所要绘制的图形大小调整)—Ctrl/Command+K—勾选“变换图案拼贴”(改变矩形大小时:内部图案数量不变,大小增减)—缩小网格(使编辑区域变小,占用内存较小)
2. 绘制2.5D图形
方法一:借助辅助网格绘制
实时上色工具:类似PS中的油漆桶,但只针对路径和路径之间的空间使用(位于形状生成器工具下方)
(1) 全选“辅助线图层1.0”中的所有辅助线—选择实时上色工具—选择一种填色—单击/拖拉给网格之间的间隙上色
(2) 全选“辅助线图层2.0”中的所有辅助线—对象—扩展(×2)—取消编组(×2)—右键—释放剪切蒙版—全选所有辅助线—视图—隐藏边缘—选择实时上色工具—选择一种填色—单击/拖拉给网格之间的间隙上色
(3) 只选择上色后的图形的方法:选择网格—对象—扩展—视图—显示边缘—取消编组(×2)—拖拽出上色后的图形—选择“变换”工具(位于右侧,或从窗口打开)—不勾选“对齐像素网格”—选择形状生成工具—连接同一面上的所有小三角形—分别填充颜色—选择“变换”工具(位于右侧,或从窗口打开)—不勾选“使新建像素网格变换对齐”
方法二:使用3D效果绘制(考验空间把握能力)
新建形状—效果—3D—凸出和斜角—位置选择“等角上方”—设置凸出厚度—修改颜色的方法:对象—扩展外观—取消编组(×2)—视图—显示边缘—用白箭头把多余的线删掉
*画尖顶门的方法:画一个矩形—选择钢笔工具—按住Alt键拖拽上方的边—选择最上方三个点—单击上方工具栏“转换成尖角”—完成
2.5D插画流行最初是因为纪念碑谷吗?
不是,说纪念碑谷是2.5D出现后的产品还差不多。2.5D出现的时间应该比纪念碑谷早的多。
最早怎么火起来,几乎不可能有人知道的,网上只是综合所有信息给出的参考而已。
2.5D火起来是必然的,因为他结合了2D3D的所有优点,而且十分适合一些解密游戏的制作。比起2D,他加入空间元素,比起3D他的画风更加轻松愉悦。
插画的7种风格
特点-扁平、流行、常用的风格、简洁明了
扁平插画简单来讲就是把复杂的关系简约化,让画面更加清爽整洁,也是现在比较常用的风格了,很多商务工具类的APP会选择使用这种风格。比如说拉勾、钉钉...
特点-扁平插画的变种、增加颗粒感、有质感、光影关系好
肌理插画顾名思义就是给插画加上了些肌理质感(比如杂色)和光感,本质也和扁平插画差不多,一些想体现质感的页面会用到这种风格。以下是一些设计师的作品。
特点-美术功底要求最高、应用广、展现内容丰富 。手绘风格的插画运用的也比较广,常见的有一些插画绘本,故事场景设计等。下面这些是摘自 插画师-顾心 的作品。
特点-简洁、圆润、可爱、断点
MBE插画(dribbble的一位设计师创作了这种风格),它主要的特点就是圆润、可爱、呆萌、简洁。在APP中的引导页、启动页和缺省页运用也比较广泛。
特点-唯美、颜色的采取近似色、颜色明亮鲜艳。
渐变插画有点类似日本漫画场景的感觉,风格特别唯美浪漫。光感比较强,所以也称为微光插画。颜色一般采用相近色,颜色种类不要太多。
特点-2.5d插画、立体感强、视觉冲击强。
立体插画也称为2.5D插画,也就是在二维的空间里表现三维的事物。所以现在越来越多的设计师去学习C4D这个软件,虽然AI和PS也能做,但会麻烦一些。很多电商类的APP会选择使用这种风格。比如说京东...
特点-形状、描边、抽象画处理
描边插画除了运用形状,还在它的外轮廓都运用了描边,可以很清晰的表达抽象事物。经常运用在一些图标icon上,比如闲鱼、转转...
Ai教程,2.5D摄像头插画教程
来个干货!2.5D摄像头插画教程。
在使用【椭圆工具】绘制一个圆在选择【3D凸出和斜角】,【位置】选择【等角-上方】。
选中凸出的柱体,选择【对象】-【扩展对象】,在将侧面所有的面进行合并,在对颜色进行调整。
选中圆柱按住【Alt】键移动在复制两个,在对大小和厚度进行调整。
在对圆柱体的侧面的颜色进行加深作为投影的部分。
在使用【文本工具】输入数字,在对文字进行转曲,在选择【对象】-【封套扭曲】-【用网格建立】,将列数选择2,在使用【直接选择工具】对锚点进行调整
在使用【矩形工具】在数字的上方在绘制一个小的矩形作为指针,在复制一层圆柱在调整大小和厚度。
在复制两层圆柱分别调整大小和侧面的颜色。
在复制一个侧面的弧面,在使用【矩形工具】绘制长条矩形,一个白色一个黑色连在一起。
在使用【魔棒工具】选中白色的矩形填充上黄色的渐变色
在将所有的矩形编组,在使用侧面的弧面和矩形全选右键选择【建立剪切蒙版】。
(ctrl+shift+】 ctrl+7)
在将做好的次轮放在圆柱的侧面,在复制圆柱的形状在调整大小和厚度。
在复制一层圆柱调整大小在将顶部的面删除,在给底面和侧面填充上深一点的颜色。
在复制底面和侧面在一层一层的缩写,在将颜色一层一层的加深。
2.5D插画教程
今天就分享到这啦!
还有后续哦 !下次机身制作分享!
流行的2.5D风格,PPT一键生成
2.5D俗称“伪3D",介于2D与3D之间,是当下最流行的一种设计风格之一,无论是在平面海报设计、Banner,还是UI、网页设计等都十分常见。
APP启动界面👇
2.5D插画👇
技术架构图👇
当然这些案例作品网上还有很多,大家只要在百度或者花瓣、站酷上输入关键词“2.5D”进行搜索,就可以找到一大堆2.5D风格的各种作品。
其实,大家只要认真观察,上面的几个作品,就会发现这一类作品都具有两个共同点:
在PPT中刚好有对应的三个三维旋转预设对应以上倾斜的角度以及三个面。
利用这三个预设,我们就可以一键生成当下流行的2.5D。
像以上这个技术架构图,利用这三个预设,我们也是可以一键生成的。我们可以看到这个技术架构图是由底座、承载信息的容器、文字组成。
然后改变底座的颜色即可得到以上三个底座
利用同样的原理,就可以得到底层三个大的底座👇
像下面这三个承载信息的容器同样也是利用三个三维旋转预设完成的👇
然后改变颜色即可得到三个不同颜色的容器👇
最后贴上文字即可👇
根据上面的步骤和原理,那么第三个底座,也可以一键生成👇
最后复制粘贴,再替换文字内容即可,具体请看动图演示👇
当然做2.5D插画也是完全OK的,比如下面这张2.5D插画👇
我们来看看动图的拼接过程,就知道这个过程是多么的行云流水,仅仅只是这三个预设即可一键生成。
好了,各位,本期的分享就到这里了~