在网上有一些平面风格地图设计的奇妙例子,用基本形状和平面颜色的超简化插图来描绘一个城市或国家。我真的很想亲自试一试这种风格,所以我想,“为什么不做一个教程来和其他人分享我的过程呢?”!按照今天的指南,学习如何用树构建一个具有创造性的矢量图,道路,在Adobe Illustrator中使用一系列工具的山区和城镇。在平面设计样式中工作涉及到将对象简化为其最基本的形式,因此,Illustrator的各种矢量形状构建工具非常适合制作插图。

如何在Adobe Illustrator中创建平面样式矢量图

我将在本教程中制作的艺术品包括一系列对象和地标,这些对象和地标都由基本形状描述,但仍可以识别。以平面样式创建设计的关键是找出如何只用圆来说明某些东西,矩形和平滑线条。为每个对象的填充选择一种或两种颜色,没有任何阴影或渐变,以实现卡通般的外观。

打开Adobe Illustrator并创建新文档。我用的是1000x1000像素的尺寸和RGB颜色模式。

画一个长方形来盖住画板。清除其默认的笔画样式,并将白色填充物切换为沙褐色(DDC19F)。抓起笔工具,用黑色笔画将其设置好。按住SHIFT键,同时单击点以形成从左到右交替的路径。

头部到效果>样式化>圆角并选中预览选项。增加“半径”设置,使所有角变为平滑路径。

将笔划权重增加到90磅左右,并将默认的黑色填充替换为灰色(44434b),以形成道路的基础。

复制(编辑>复制)并粘贴在前面(cmd+f)道路路径的副本。将笔画颜色从灰色调到白色,然后用圆盖将笔画设置更改为2pt。检查虚线选项,并添加一个带20pt间隙的10pt虚线,以形成中央道路标记。

取消选择道路并将笔划颜色重置为黑色。按住SHIFT键,用横跨艺术板的钢笔工具画一条直线。转到“效果>扭曲和变换>之字形”,然后将设置更改为“平滑”,每段5个脊线。改变大小形成一系列山脉。

转到“对象>展开外观”(Object>Expand Appearance)以永久应用“之字形”(Zig-zag)效果并使路径可编辑。

选择笔工具并单击锯齿线一端的打开点以继续其路径。按住SHIFT同时向下伸展,然后穿过艺术板,向上,在对面的一点上连接道路。

清除此山形状的笔画,并添加浅绿色填充颜色(97B18F)。画一个覆盖山下半部分的矩形,并给它一个稍深的绿色填充(539773)。

按住SHIFT键以同时选择山脉和矩形,然后使用“形状生成器”工具冲出不需要的部分。按住Alt键,同时单击这些区域以删除它们。

画一个覆盖整个山区的矩形,延伸到艺术板的顶部和侧面。给它一个浅蓝色的填充物(ceff2ee)。然后反复按Cmd+[向后发送快捷键,直到它坐在山下代表天空。

选择形成道路的两条路径。最简单的方法是拖动一个同时捕获天空和背景矩形的选择,然后按住SHIFT并拖动一个新的选择以取消选择这些形状,离开这两条路。转到“对象>展开外观”,然后是“对象>展开”将其转换为轮廓形状。

将深绿色的山脉形状添加到选择中,然后使用“形状生成器”删除构成道路延伸到天空的部分的形状。

在艺术板的其他地方,用椭圆工具画一系列小圆圈来表示云。

用一个矩形填充底部区域,使其成为一条直线。然后选择所有形状,单击Pathfinder面板中的Unite按钮将它们合并在一起。

复制并粘贴一系列云,然后调整大小并在天空中定位它们。

选择笔工具,大致绘制一条沿着道路的路径,然后通过艺术板边缘继续回到起点。

将填充颜色替换为稍浅的棕黄色(f2e0af)。平面设计风格不使用渐变,但是,将两种颜色相同的色调混合在一起,有助于增加插图的视觉效果。

使用笔工具绘制一系列带蓝色填充(59ABC1)的直尺。这将代表一个湖,但为了符合平面风格,它被简化为最大!

另一种绕过形状角点的技术是抓住直接选择工具并拖动显示在CC版本的AdobeIllustrator形状上的活动角点小部件。

我们不希望艺术板边缘的两个角是圆形的,因此,使用直接选择工具单击这些单独的点,然后将活动角小部件拖回原位,再次拉直它们。

在艺术板的其他地方,用椭圆工具画一个小圆圈,并给它一个浅蓝色的笔画(92CDDD)。将笔画设置更改为2pt(圆盖端)。

使用直接选择工具选择并删除圆路径的顶部和左侧点,形成四分之一圆。然后按住alt键,同时将其拖到一边以复制。

转到“对象>变换>反射”,然后选择垂直轴翻转形状,然后将其位置捕捉到原始位置。

同时选择两个形状并拖动重复项以形成一系列两个和三个形状。视图菜单下的智能辅助线使您可以轻松地将这些形状并排放置。

把这些形状分成两组和三组,然后复制并定位它们穿过蓝湖,描绘出一系列风格化的波浪。

在画板上的某个地方画一个正方形,然后使用智能辅助线工具提示查找上边缘的中心,并使用笔工具添加点。使用直接选择工具向上拖动此点以创建房屋形状。

给形状一个浅红色填充(e07373),然后复制(cmd+c)并粘贴到后面(cmd+b)一个副本。用深红色(ee483c)填充新形状,然后向上向左移动。使用笔工具填充下边缘点之间的间隙。

选择这个临时形状和深红色形状,并将它们与“探路者”合并。然后使用cmd+[快捷键更改堆叠顺序,使浅粉色的房屋形状再次位于顶部。

绘制一个小矩形来表示一个窗口,然后在按住Alt和Shift键的同时拖动副本。使用快捷键Cmd+D再次转换以添加第三个形状,然后全选并拖动副本以添加另一行。

复制整个房屋图形,然后更改填充颜色并重新创建新的窗口布局。为了增加多样性,使用直接选择工具拖动形状的下边缘以延伸房屋。

将您的房子放置在艺术板内,在地图设计中形成一个小城镇。

画一个圆来画一棵简化的树,从山上采样深绿色的填充物,然后复制并粘贴在前面(cmd+f)一个副本,并赋予它较浅的绿色。画一个覆盖半个圆的临时矩形,然后选择顶圆和矩形,单击“探路者”面板上的“前减”按钮,将其修剪成半圆形。

画一个长的,加一个棕色的树干,矩形矩形,然后用一个小的灰色阴影椭圆工具来完成树的图形。选定所有形状后,单击“符号”面板中的新图标。

从工具栏中选择符号喷洒器工具,然后单击并拖动整个艺术板以快速绘制一系列树图形。

将工具选择切换到符号尺寸工具,然后单击并拖动树以更改其大小。按住Alt键,同时单击使其变小。

使用符号移动工具移动周围的树木,以确保它们都位于艺术板内,并且湖外没有树木生长。房屋或道路。

如何在Adobe Illustrator中创建平面样式矢量图

最后的结果是一个可爱的地图设计,描绘了一系列的地标在一个平面说明风格。我在本教程中的目标是涵盖一系列技术,您可以使用这些技术来构建可能需要包含在您自己的景观设计中的任何内容的插图。通过将对象简化为基本形状,你可以用几个圆圈来说明任何事情,矩形和矢量路径!

访问此下载

一百九十五
分享
在Pinterest上共享
22评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

22评论

  1. 很好的教程。一个注意事项:白色中心线不需要复制灰色道路。在第一个90磅宽的灰色笔画之后,您可以使用“外观”面板将白色中心线添加到同一个斯托克:只需向现有线添加一条新线,并使其为白色虚线和2磅宽。如果你愿意的话,你还可以添加第三行。当然,在将线展开到对象之后,这就不再可能了。
    喜欢你的教程,继续努力!

  2. 喜欢这个教程!我想知道你为什么不在小镇的房子里使用3D效果。我听从你的指示,我无法从这个角度看问题。你的照片也不太对劲,但我能找到如何在线创建3D对象。你认为你会在任何时候制作一个关于这些效果的教程吗?

    - 4
  3. 很好的教程,克里斯,荒谬的及时。但在白色虚线部分,应该贴在前面,不回来。可能会让一些人困惑。干杯!

    - 3
  4. 非常感谢你的指导。我们中的一些人逐步学习起来更容易。视频往往太快,真的不够清晰,要回溯太多会很麻烦。

    - 3

评论现已关闭