AI来绘制卡通风格的城市建筑插画

这篇教程教的AI学习者们使用AI来绘制一个简单的城市建筑插画。教程难度一般，很多操作都是重复性的，主要介绍的是AI比较实用的技巧和操作方法，希望能对大家有所帮助！

最终效果图：

具体的制作步骤如下：

第一步：打开ai, 新建1200 x 600 的画布（快捷键command n）

第二步：图层－ 分层

我们新建画布后，需要创建一堆图层（10个左右），这将有助于我们更好地控制我们的构建过程。

请转到"图层"面板，并使用以下名称进行设置：

第三步: 制作画面远景建筑

把图层设置好以后，我们将开始对每个图层创建内容，首先锁定未使用的图层，留下当前操作的图层。

步骤一：画远景建筑1

1.确保你在远景建筑的图层，使用矩形工具（M）画一个粉红色（#FFEBEB）132 x 194px矩形，变换面板定位的坐标数值：（X：156px；Y：459px）

2.现在需要调整它的左上锚点，向下移动24个像素。 可以这样做，用直接选择工具（A）选择它的左上锚点，然后执行对象>变换>移动。出现一个弹出框，水平输入0px，垂直输入24px；

得出图：

3. 使用矩形工具（M），创建另一个90 x 92px的，将其定位（X：147px，Y：338px），然后使用移动工具（A）使用相同的技巧，将其右上角锚点向下移38px。

选中这2个对象，使用路径查找器的联集将它们组合成一个形状。

4.接下来，我们要画顶部天线，通过创建一个4 x 48px的矩形，并使用这些坐标定位：

X：114px；Y：276px

5.要完成我们的第一个远景建筑，需要添加一些窗口。 使用矩形工具（M）创建一个10 x 10px的正方形（#FCDEDE），并将其位置如下：X：108px ;Y：404px

将这个窗口，复制四个［选中它然后按住Alt同时向左拖动四次］，复制好后，选中这5个正方形，按住alt键点选最左边的正方形（意思就是以最左边的正方形为操作对象），再将分布间距栏写14px，再点击水平分布间距（如图）

选择这5个窗口，按command G组合它们，然后用相同的方法复制五个副本，彼此相距约10px（用上面相同的方法制作）。

第六步 –添加最后的细节

步骤一：路灯

1.跳到路灯层，使用圆角矩形工具创建一个8 x 25px的形状，使用粉红色（＃FCC8D1），然后位于第二个房子前面。使用直接选择工具（A）通过选择和删除底部锚点，组合剩余的锚点（command J）。

添加一个4 x 122px的矩形（＃EDBCC5），然后中心底部对齐以前创建的形状。 通过在顶部添加一个12 x 12px的圆圈（＃FCC8D1），选择所有组件并将它们组合在一起（commandl G）。

创建一个路灯的副本，并将其放置在第四个建筑物的前面。

步骤二： 树木

1.首先建立基地，使用一个42 x 8px的矩形（＃BFB2B3）。 然后创建一个6 x 15px，角半径为3px的圆角矩形，并使用直接选择工具（A）中的技巧删除其底部锚点。 从它创建三个新的重复，并将它们彼此相距4 px。 将它们编组，然后将它们垂直居中到基座。

接下来，创建另一个26 x 4px（＃BFB2B3），它将位于先前创建的元素中间。

绘制一个10 x 100px的矩形（＃93616），将作为树的主体，确保将其放置在较宽的矩形顶部的小栅栏下。

然后使用钢笔工具（P）创建一个类似于我有一个形状和颜色为绿色（＃91DBA6）。 在树的绿色部分下添加一个微妙的阴影（＃704A4A），你就完成了。

将树和栅栏的所有元素组合在一起，然后创建一个副本， 放在最右边和最左边的房子前面。

步骤三：云朵

1.我们插图的最后一个细节，就是云啦。 使用圆角矩形工具创建一个32 x 10px，圆角6px的形状（#DEEBFF），然后添加一个较小的8 x 8px的圆，最后一个较大的14 x 14px的圆，并将它们放置在第一个创建的形状顶部， 确保圆圈的底部一半在基本形状内，然后选中3个形状，调出路经查找起，点击联集；

组合云的所有组成元素，然后在这里和那里洒几个副本。

到这里我们的教程就结束啦！

希望你喜欢这个教程，并学习到一些新的沿着知识与技巧。

感谢您的耐心，因为本教程是我做过的最漫长的一个，也是收获很大的一个教程呢。

步骤三： 第三所房子

1.完成了第二个房子后，打开图层面板，选中第三个房子的图层，创建一个144 x 160px的矩形（＃D46363），并将其放在我们之前创建的房子的右侧，确保底部对齐。 将三个阴影段添加到顶部，左侧和右侧，保持6px的宽度。

2.移动到屋顶部分，创建一个144 x 56像素的矩形，我们将使用更暗的阴影（＃914444）。 通过向内部移动24px来调整顶部锚点［选中右(左)上角的锚点>对象>变换>移动，并在"水平"字段中输入值24（－24），将垂直值保留为零;］

3.通过创建七个144 x 4px较深的矩形（＃7A3939）它们每个相距4px，将它们（command g）编组，然后将它们垂直水平对齐到屋顶，从而为屋顶添加一些复杂性。

正如你已经注意到的，线条实际上是在我们的小屋顶外面，这是我们不希望的。解决这个问题，只需复制（Ctrl C）并粘贴（Ctrl F）顶部，然后选择刚复制的和一组线条，右键单击>创建剪贴蒙版

效果图

4.接下来，让我们在三个不同大小的矩形的帮助下建立我们的小烟囱：第一个矩形：w：18px / h：8px / color：＃C7BABA 第二个矩形：w：18px / h：4px / color：＃B3A6A6 第三个矩形：w：22px / h：6px / color：#EADADB

将它们定位如下图所示

5.在顶部添加几个不同大小的圆（＃F0F0F0）以创建烟雾。

快速提示：如你所见，我的一个圈子的底部锚点被删除，你也可以通过使用直接选择工具（A）选择锚点并按下Del键，使用command g将其余部分编组在一起。

6.为了创建我们的小窗口，我们实际上从第一个房子层复制一个副本，因为它有我们需要的确切的大小和颜色，然后使用这些坐标：

X：597px Y：438px

添加一些细节，使其脱颖而出创建更轻的（＃D6E5FC）20 x 24px部分的玻璃和六个20 x 2px矩形（＃F0F6FF）位于2px彼此，在窗户内部水平剧中对齐； 也复制窗框并移动到顶部，入图

新窗户就制作完成了，将其所有元素（command g）编组，然后通过选中该窗户再按住Alt的同时向右拖动来创建副本。 将副本距离原始位置30px。 使用相同的过程创建另一个副本，但这次将它放在原来的26px,入图

7.现在我们需要移动到屋顶上，创建中间窗口。 首先复制我们已经有的一个，并使用以下坐标定位它：

X：632px Y：360px 通过删除顶部较宽的部分，添加一个保持相同宽度但不同高度的三角形，以及下面的32 x 3px阴影来调整其外观。修改下面看到的颜色值，

8.最后，还有门要创建，首先复制第一个房子的门，去掉门槛，并且调整两个矩形的宽度和高度，使门与窗户同宽，与下面的窗户同高；

步骤四： 第四所房子

1.移动到第四个房子的图层，创建一个100 x 180px（＃E96D6E）矩形，将其完全放置在之前创建的房子的右侧。

2.添加一个108 x 6px的部分（＃A55559），然后是一个100 x 50px（＃D46363）高，一个辅助108 x 6px，然后创建一个三角形，如roof（＃7A3939）宽度为100px 和高度22px。

在屋顶的顶部下面创建一个微妙的阴影，通过绘制一个100×4px的矩形，并使用＃BD5859着色。

3.接下来，我们需要创建窗口。 抓住椭圆工具（L），创建一个30 x 30像素稍深的有色框（＃A55559），将其垂直和水平对齐到其下方的矩形。

在中间添加一个蓝色的18 x 18px的圆形(#cce1ff)，在其顶部对齐两个4 x 28px的矩形,入图：

要完成这栋房子的顶部，添加一些更暗的有色砖（＃C25B5B），宽度为16px，高度为8px。

4.聚焦在建筑物的下部，我们需要创建堆叠的水平线。 要做到这一点，创建两个100 x 2px形状，使用较浅的阴影＃EF787E颜色，并将其位置如下：

第一行：

X：754px Y：380px 第二行：

X：754px Y：553px 一旦你把它们锁在位，我们需要创建一个混合28步之间的两个。

首先选择两行，转到对象>混合>混合选项，并更改间距到指定的步骤，在值字段中输入28 ,然后去对象>混合>使实际创建混合。

现在让我们创建中间窗口。 抓取矩形工具（M）并绘制一个50 x 44px的深色形状（＃A55559），我们将使用这些坐标定位：

X：754px Y：420px

5.接下来使用以下值创建三个（＃CCE1FF）矩形：

左侧顶部矩形 宽：5px / 高：28px 左侧底部矩形 宽：5px /高：6px 右边矩形 宽：10px /高：38px 我们将对齐每个段彼此的距离为4px，左边矩形创建好，我们将拖动重复相同的一个放在的右边。

最后，复制和粘贴第二个房子窗台的底部较宽的部分，并加宽直到每一边在窗框外面约4px,。

6.对于门的制作，只需复制第三个房子的，并调整其宽度，直到框架具有38px和内部较暗部分26px。 然后使用以下坐标定位：

X：754px Y：506px

7.一旦有了门，我们需要创建楼梯和栏杆。

从基础开始，创建三个矩形（＃fcc8d1），其值如下堆叠：

第一个矩形 宽：56px / 高：6px 第二个矩形 宽：50px / 高：6px 第三个矩形 宽：44px /高： 6px 然后，我们需要创建四个4 x 14px的矩形（＃fcc8d1），我们将彼此相距6px，然后对它们进行分组（Ctrl G），将它们对齐到楼梯底部。

轨道的最后一块将是一个更宽的34 x 4px矩形（＃fcc8d1），放置到位于先前创建的对象的顶部。 颜色＃FCC8D1中的所有元素编组，以便他们不会丢失。

编好组后左对齐到门放置好；

步骤五： 第五所房子

1.移动到第五个房子的图层上进行制作，我们将开始创建一个216 x 160px的矩形（＃D46363），并将其放在第四个建筑的右侧。然后添加两个阴影（＃C25B5B），一个在左边，一个在顶部，保持6px的恒定宽度。

在矩形的顶部添加一个较暗的220 x 8px形状（＃914444），然后再画另一个较高的二楼194 x 100px（＃D46363），将它们垂直对齐。

我们的二楼需要添加一个阴影，以及通过绘制一个194 x 6px的矩形（＃C25B5B）当作阴影和一个屋顶部分 202 x 8px形状（＃914444）入图：

2.接下来，我们将从第二个房子中复制水箱，并将其放置在我们的屋顶的右侧，调整水箱的宽度，以便它更宽 。

3.我们还要创造屋顶的扶手。 我们将创建一个42 x 30px较暗的对象（＃C7BABA），画一组四个6 x 24px的矩形，彼此距离为6px。 要完成扶手，只需在先前创建的形状的顶部添加一个48 x 6px的矩形。

组合扶手的所有组成元素，并将它们朝向屋顶的左侧。

4.我们的下一步是创建窗口。 为了使事情更容易，我们将从第三个房子中复制，并使用以下坐标定位：

X：852px Y：338px

我们调整的小窗口，通过删除水平线和第二个蓝色矩形，然后我们将内框架部分向下移动几个像素，并将我们的蓝色的色调更改为＃D6E5FC。

现在我们需要做的是创建两个副本在右侧，彼此相距20px的距离，确保组合这三个（Ctrl G）。

我们有第一行窗口，只需拖动并创建两个副本朝向我们的房子的底部，保持彼此之间的距离20px，确保删除第二行的中间一个。

5.在顶行窗口中添加一个电视天线，创建一个20 x 20px的圆形，使用#EADADB对其进行着色，然后添加一些细节，如下图所示。

效果图：

6.最后，我们需要添加门来完成我们的小房子。 因为它与第三个房子有着一样的尺寸和颜色，我们将复制（command C）和放置（command F）它在我们最后一个建筑，确保垂直中心。

现在我们完成了所有的房子（好棒呀），将添加一些细节来完成我们的插图。