本文概述
- 重新创建著名的太空图。
- 重新创建srcmini博客插图样式
- 重新创建灵感来自纪念碑谷游戏的插图
- 结论
在当今有74%的社交媒体和B2B营销人员在促销活动中使用视觉效果的世界中, 如何在视觉效果上与众不同至关重要。
如果你的品牌多产, 人们将学习与你的品牌相关的视觉语言。一旦他们看到与另一种产品相关的相同的插图, 你的品牌标识就会减弱。
通过自定义插图, 品牌标识的要素可以围绕共同的观点和个性融合在一起。他们以直观的方式与客户沟通, 并帮助品牌以持久的方式讲述他们的故事。
但是, 许多设计师担心自己没有绘图技能, 因此回避担任插画家。我们在这里向你展示任何设计师如何能够绘制精美的插图, 而无需绘制图纸。
我们将介绍三种流行的插画风格, 并采用非常简单的步骤从头开始制作你自己的艺术品。你可以继续学习并运用所学知识, 为下一个项目创作精美的作品。
重新创建著名的太空图。

文章图片
资料来源:Nina Georgieva
设计师兼插画家Nina Georgieva是这款臭名昭著的Dribbble作品的开拓者, 如今, 其风格已成为一种潮流。
窃取Georgieva的灵感, 我们将按照几个简单的步骤创建自己的空间插图。
这就是最终的结果。

文章图片
1.从星星开始。

文章图片
使用Illustrator的” 星形工具” , 创建一个四点星形。然后将其设为75%透明。
选中后, 按Ctrl + C, 然后按Ctrl + F将其复制到位。
缩小前面的形状。
接下来, 添加发光效果;选择更大的形状;并从” 外观” 面板中应用” 高斯模糊” 效果。
最后, 你可以将你的星形存储在” 符号” 面板中, 以便稍后在合成中使用。
2.创建云的形状。

文章图片
【无需任何绘图技能即可设计自定义插图的分步指南】将各种宽度的矩形堆叠在一起。
将它们与” 路径查找器” 面板合并。
通过为整个形状赋予较高的” 角半径” 值来完成。
3.从云层中获取行星的质感

文章图片
从云的形状开始, 创建如上所示的行星纹理效果。
将许多云形状堆叠在一起, 并确保你具有连续的向外和向内曲线以创建波浪形图案。
4.调整纹理。

文章图片
将波浪图案应用于行星形状之前, 先对其进行简化。
去除纹理一侧的多余点并将其展平。
5.创建一个纹理星球。

文章图片
将波浪图案与圆圈重叠, 然后使用” 路径查找器” 面板中的” 划分” 选项创建划分。
删除在圆之外创建的多余形状, 并通过对行星的每一侧应用不同的灰度值来创建照明效果。
6.为地球增添气氛。

文章图片
创建两个较大的圆, 并先按Ctrl + X, 再按Ctrl + B, 将其粘贴到行星后面。
正确对齐它们。
在新圆圈中添加透明度, 并在第三个圆圈中添加模糊效果(在” 外观” 面板中)。
分组(Ctrl + G), 并将结果存储在” 符号” 面板中。
7.复制行星并为其着色。

文章图片
从” 符号” 面板中复制几个行星形状, 然后为每侧使用两种不同的颜色为其重新着色。
使用” 直接选择工具(A)” 进行选择, 然后使用” 吸管工具(I)” 进行选择并应用颜色。
8.缩放并定位你的行星

文章图片
使用” 选择工具(V)” 将行星移动到不同的位置, 并通过拖动选择时出现的白色角为行星提供各种尺寸(保持” Shift” 键以进行比例缩放)。
9.添加戒指。

文章图片
在行星周围画一些直线, 以形成圆环。
要将较小的行星粘贴到圆环的前面, 请选择它们, 然后按Ctrl + X(剪切)和Ctrl + F(粘贴在前面)。
10.在天空中添加一些云朵和星星。

文章图片
试一下比例尺, 位置和颜色, 使其真正成为你自己的。
添加一些字体, 瞧, 你将拥有一个新的自定义桌面背景。

文章图片
资料来源:srcmini博客
srcmini博客是来自世界各地的顶尖人才创造的见解和灵感的宝贵来源。就像你现在正在阅读的文章一样, 大多数文章都带有插图来支持内容。我们使用简单的几何形状和鲜艳的色彩来描绘对象。
让我们看看如何应用这种风格来创建自己的一些食物插图。
这就是最终的结果。

文章图片
1.画一个简单的鱼苗。

文章图片
要创建油炸物, 请从一个长矩形开始, 然后使用” 笔工具(P)” 在边缘上添加多个点。
通过使用” 直接选择工具(A)” 移动点来调整形状。
2.创建蛋黄酱容器。

文章图片
从后到前创建三个尺寸逐渐减小的圆。
外部的圆圈是容器, 中间的圆圈(白色)是蛋黄酱, 内部的较小圆圈(带有彩色笔划)用于照明效果。
将内圆切成两半, 并确保” 笔画” 面板中的” 帽” 和” 角” 是圆形的。
3.制作番茄酱和芥末酱。

文章图片
复制蛋黄酱杯以制成芥末和番茄酱。
如上所述, 只需将不同的颜色施加到酱汁和清淡的食物上即可。
4.加入波浪形的生菜。

文章图片
使用” 笔工具(P)” 绘制一条直线, 并在其上添加几个点。
通过” 对齐” 面板分配它们的水平间距。
向下拖动变更点, 然后将每个角四舍五入到最大, 直到完全平滑为止。
5.创建一个面包切片。

文章图片
创建一个长椭圆形;将其与波形重叠, 然后使用” 路径查找器” 面板中的” 分隔” 选项创建分隔。
从” 分割” 工具中删除多余的形状, 然后为面包切片重新着色。
6.制作汉堡面包。

文章图片
垂直镜像面包切片, 并在顶层添加一个转折点。
将边缘弄圆以制成光滑的汉堡面包。
7.完成汉堡。

文章图片
将生菜涂成绿色。
然后分别使用棕色, 黄色和红色为肉, 奶酪和西红柿创建不同的” 圆角矩形” 。
随处移动东西, 以使汉堡正确分层。
8.用汉堡制作一个热狗。

文章图片
从汉堡插图开始, 取出西红柿和奶酪, 将生菜重新涂成蛋黄酱和芥末酱, 然后将下部面包复制为更对称的热狗。
9.设计比萨饼形状。

文章图片
从汉堡的顶层开始, 将较低的点向下移动, 并使它们靠得更近。
复制三角形形状, 按比例缩小尺寸, 并使其黄色, 以获得俗气的底感。
10.添加西红柿形状。

文章图片
将一个大的红色圆圈与一个较小的内部圆圈重叠, 然后使用” 路径查找器” 面板中的” 减负” 选项。
将多个不同大小和位置的番茄片放在比萨饼形状上。
11.制作一些肉片。

文章图片
使用” 笔工具(P)” 绘制一个有机的棕色形状, 将其复制并缩放到比萨饼的顶部。
12.添加额外的浇头。

文章图片
在空白处添加较小的, 彩色的, 圆形的笔触, 以完成比萨的浇头。
13.制作吸管。

文章图片
带有白色长矩形的星形。
使用” 笔工具(P)” 添加两个点, 然后移动顶部边缘以弯曲吸管。
复制中间点并将其粘贴到右边缘, 然后应用红色笔触, 并且对其不进行填充。
将红线移到白色矩形的中间。
14.创建汽水罐形状。

文章图片
画一个八边形的多边形;加罐向上移动前四个点;并向外缩放(S)上下边缘, 使其看起来更像罐子。
在顶部和底部添加圆角矩形以创建边框。
15.调整罐子的形状, 并缩放吸管。

文章图片
移动点以调整形状, 然后将罐头和稻草按比例缩放到相关比例。
16.完成罐上的波浪设计。

文章图片
在罐上为设计绘制有机且波浪形的形状。
然后使用” 路径查找器” 面板创建一个分区, 并删除多余的外部形状。
这是最终结果。

文章图片
重新创建灵感来自纪念碑谷游戏的插图

文章图片
资料来源:纪念碑谷
纪念碑谷是由UsTwo工作室创作的最畅销的游戏。它赢得了数十个奖项, 包括2014年苹果最佳iPad游戏, 其插画风格受到了埃舍尔(Escher)美丽的几何图形作品的启发。
现在, 你将学习如何轻松创造出使这款游戏大获成功的相同视觉风格。
这就是最终的结果。

文章图片
你仅将平面和立方体用作整个插图的构建基块。
调色板具有用于水, 草, 木材和建筑的四种颜色-每种颜色都有三种阴影以模拟自然光。
1.创建一个等轴测平面。

文章图片
从正方形开始, 然后按照以下三个步骤创建等距形状。请注意, 因为每次需要其他等距形状时都会重复此过程。
我们将其称为” 等距效应” :
转到效果> 3D> 拉伸和斜角在出现的选项面板中的” 位置” 下拉列表中选择” 等轴测顶部” 。在” 拉伸和倾斜” 的第一个选项下, 将” 拉伸深度” 设置为零。
你现在有了一个等轴测平面。
为了更好地使用形状, 请转到” 对象” > ” 扩展外观” 。
这样你就可以更改飞机的颜色并自由移动点。
我们将其称为” 扩展效果” 。
2.跟踪岛的面孔。

文章图片
要创建岛形的三个面, 请创建一个正方形和两个拉长的矩形。
对每个重复” 等距效应” 。
对于第二步, 分别应用” 等轴测顶部” , “ 等轴测左侧” 和” 等轴测右侧” 。
3.完成并为岛基着色。

文章图片
应用” 扩展效果” , 并用不同的绿色阴影为每个面孔上色, 最亮的始终在最上面。
4.在透视图中创建立方体面。

文章图片
在三个正方形上应用” 等距效果” , 并在第二步上等距向左, 向上和向右。这样, 你就可以获得获得等距立方体的三个面。
请注意, 插图中的每个对象将仅使用三个面。这就是等轴测透视图的优点。
5.组成一个立方体。

文章图片
使用” 扩展效果” 释放形状, 将面孔放在一起, 并应用三种灰色阴影以模拟照明。
提示:最浅的阴影始终在顶部;最暗的, 在右边;和中间音调, 在左侧将其应用于插图中的每个形状都将产生自然光的印象。
6.启动树基。

文章图片
遵循与等距立方体相同的步骤, 这一次, 在连接整体之前, 拉长左右面。
然后应用三种深浅的棕色代表木材。
7.完成树。

文章图片
缩小树皮;复制一个立方体;并像绿色的土地形状一样着色其面孔。
8.使用多维数据集创建构建基块

文章图片
复制一个立方体, 并用粉红色将其着色为建筑材料。
玩规模;将较低的点向下移动以创建塔基;并缩小规模以创建支柱。
9.组装塔。

文章图片
将塔架基座和粉红色立方体对齐。
在它们之间留一些空间, 并在该间隙中放置三个支柱。
为了实现完美对齐, 请确保在” 视图” 菜单选项中设置” 对齐到点” 和” 智能参考线” 。
10.桥接塔。

文章图片
从顶部平面中选择顶部和右侧点, 然后捕捉到双塔中具有等效平面的点。
只需复制右侧平面并调整其大小即可为塔桥创建边缘。
11.创建楼梯。

文章图片
从塔中复制并粘贴三个面;对齐边缘以创建块;然后移动较低的点以创建一个阶梯。
复制并定位步骤几次。
12.关闭楼梯。

文章图片
将左侧的点对齐以缩小与楼梯之间的间隙。
13.翻转楼梯。

文章图片
选择已完成的楼梯, 然后使用” 反射工具(O)” 创建一个向左的第二块。
确保更改左右两面的颜色以尊重照明效果-右侧的阴影较深, 左侧的阴影为中间, 顶部的阴影较浅。
14.链接楼梯。

文章图片
将一些立方体连接到楼梯上以创建垫脚石, 然后将其与塔连接起来。
15.创建水深效果。

文章图片
复制并缩小浅蓝色表面。
将其放置在各个位置, 然后添加更深的蓝色阴影以完成海深效果。
16.使用现有飞机启动甲板

文章图片
就像楼梯和塔桥一样, 从现有的面孔开始, 然后正确对齐点以封闭形状, 最后应用棕色木质阴影完成。
17.在甲板上增加支柱。

文章图片
选择树皮, 然后复制, 缩小并定位以创建甲板支柱。
这是最终结果。

文章图片
你可以在海上添加较大的暗点, 或在岛平面上添加较小的彩色等距正方形, 以模拟草和花朵。
总体而言, 请使用刚刚学习的简单构建块, 尽情玩乐, 四处移动并建造一些凉爽的塔楼。
结论 正如我们在这三本指南中所看到的那样, 你不需要太多的绘画技巧就能制作出精美的插图。
你需要记住的仅是以下3条原则:
- 首先要有一个清晰的想法或概念-你在描绘什么?
- 从现有的艺术品和风格中获得启发-像艺术家一样偷窃。
- 观察复杂的元素并将其转换为可以使用的基本几何形状-保持简单。
? ? ?
在srcmini设计博客上进一步阅读:
- 电子商务UX –最佳做法概述(带有信息图)
- 以人为本的设计在产品设计中的重要性
- 最佳UX设计器产品组合–启发性的案例研究和示例
- 移动接口的启发式原理
- 预期设计:如何创建神奇的用户体验
推荐阅读
- 选择字体时的提示和注意事项(图解)
- 使用Figma简化协作设计
- 轻松原型设计– InVision Studio教程
- 笔的力量–手刻字教程
- 熟悉Sketch插件开发
- 如何创建自定义字体(7个步骤和3个案例研究)
- AWS API网关SDK,与Android的问题
- 使用Back4app-Cli部署本地解析服务器。
- Apps Script