如何用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键拖拽上方的边―选择最上方三个点―单击上方工具栏“转换成尖角”―完成
插画在APP设计中的应用
现在APP的数量越来越多,制作也越来越精美,各种APP都想在设计上能够与其他APP区别开来,从而更好的吸引用户的注意,将插画运用在APP当中,无疑是一种好的选择,在iOS
11的App Store“Today”中就用了很多的插画,给用户带来了全新的体验。
一. 什么要在APP当中使用插画?
增加视觉冲击感,总结为两个字“惊艳”,例如“walk up”APP,当中的每一个页面都运用了插画,而且设计得极其精美。
增添趣味性,使页面不显得单调、乏味,一个明显的例子就是APP当中的空页面和错误页面,例如淘宝在无网状态下,显示一幅可爱的插画要比单纯的显示文字要给人的感觉好得多,也可以尽可能的减轻用户的焦虑。
承载更多的信息量,更加的直观,这一点在图标上显示的比较明显了,例如百度糯米的分类图标,采用了写实的风格,给人的感觉就更加的直观了。
满足用户的情感需求,情感化设计,这一点在keep当中得到了很好的体现,在刚刚过去的七夕节,keep把跑步路线变成了粉红色,还配上了一条狗,七夕节还在跑步的人,很有可能是单身狗啊,意思不言而喻。
二. 目前比较流行的几类插画及其特点
扁平插画
肌理插画
手绘插画
MBE插画(dribble一位大神创作了这种风格,因此被称为MBE风格插画)
渐变插画(有时也称微光插画)
立体插画(也叫2.5D插画)
描边插画
下面分别对各种插画进行举例,所有例子均来自dribble。
扁平插画:扁平插画的特点是扁平,简洁明了,扁平插画是现在很流行、也是最常用的风格
肌理插画:我觉得肌理插画也属于扁平插画的一种,但是在最后要增加颗粒感,肌理插画最明显的特点应该就是有质感,光影关系表现得比较好。
手绘插画:我认为这是难度最高的一种,也是对设计师的美术功底要求最高的。手绘风格的应用比较广,可以展现的东西很多。下面这位设计师的作品富有童趣,像梦境一样美好。
MBE插画:简洁、圆润、可爱。
渐变插画:一种很唯美的风格,在颜色的运用上一般采取近似色,颜色的种类不要过多。
立体插画:从名字就可以看出,这类插画最大的特点就是立体了,能够在二维的空间里表现出三维的事物。
描边插画:除了运用形状,还要运用描边,可以很好的对事物进行抽象化处理。
MBE插画:下厨房当中的图标,MBE风格很适合用来制作icon
渐变插画和立体插画:拉勾。把这两种放到一起来讲,是因为很多时候一幅插画是包含这两种风格的。(用在banner、专题)
描边插画:拼多多、网易云音乐(用在icon、启动页)
总结一下:插画适合用在APP当中的启动页、banner、专题、刷新、icon、弹框、背景图等等。
