掌握AI，打造沙滩风情——从人字拖到细腻沙粒的UI设计旅程

文章主题：AI人字拖, 模拟图标, UI设计

666AI工具大全，助力做AI时代先行者！

【学UI设计】AI人字拖拟物图标

注：此教程为英翻教程，软件操作不娴熟的小伙伴儿，谨慎尝试哦。翻译不足之处或者有错别字，自行脑补一下哦。

1.新建文档

文件”>“新建”以打开空白文档，如图设置。

2.创建图标的底部

🎨 使用矩形工具（🔥M🔥）绘制一个256×256的完美正方形，颜色选黑，笔触深邃。接下来，进入「效果」✨ → 「风格化」💫 → 滋润边缘，选择25px半径的圆角笔触，让设计更具层次感。想要放大这种艺术感？没问题！点击「对象」🔍 → 「扩展外观」然后一键取消分组（Shift+Ctrl+G），让每个像素都熠熠生辉。记得优化你的布局和关键词，让搜索引擎也能感受到你的优雅设计哦！💪

3.创建沙子纹理

步骤1

🎨🎨完成基础形状填色后，别忘了去👀“外观”面板哦！只需轻点底部的Duplicates Selected Item图标，你的画布上就会多出一抹新色彩——来自Swatch库里的 trebuie搜一搜：`USGS 17A沙尘暴`模式。记得给它换个温柔的拥抱，选择柔光混合模式，让视觉效果更细腻哦！✨

步骤2

🌟复制并粘贴第二个-fill属性，接下来轻松转换！🎨寻找”Stipple Fine”纹理，它就在”Basic Graphics_Textures”分类里哦～别忘了调整你的混合模式到”颜色减淡”，让效果更出色！👌

步骤3

🎨 优化你的设计！首先，复制关键属性，巧妙地将裸色过渡到棕色，这一步只需轻轻一滑。接下来，将这个新效果拖至面板底部，然后在「效果」菜单下的「扭曲与变形」中探索，选择「变形」选项激活它。惊喜吧！你会看到底座边缘自然染上迷人的棕色，提升整体视觉层次。记得让每个细节都散发艺术魅力哦！🎨

步骤4

🎉🎨将基础形状一键复制，轻松替换旧貌！👀删去冗余装饰，展现纯粹设计。🎨选择深棕色，瞬间唤起复古情怀。然后，前往”效果”藏着的秘密——”艺术”区域，点击”胶片颗粒”，解锁岁月痕迹的魔力。🔍调整到”混合模式叠加”，让每个像素都熠熠生辉，如画般精致。🔥你的作品将瞬间提升层次感，吸引眼球！SEO优化已完成，等待搜索引擎喜爱哦～💪

步骤5

🎨 使用上一步中的设计元素，继续创作。选中1pt的纯白画笔，为其加入🔥 Blending Mode – Soft Light，让色彩层次更丰富哦！记得调整到最佳视觉效果，照亮你的艺术之路💪 #绘画技巧 #色彩融合 #艺术灵感

步骤6

现在，转到外观面板，然后从弹出菜单中选择添加新填充。使用所示的线性渐变并将角度设置为-90度。在第一个填充和笔触之间移动此填充属性，然后将“混合模式”设置为“颜色加深”，并将“不透明度”减小为50％。

4.将详细信息添加到沙底

步骤1

现在，让我们改善沙滩外观，使其更逼真。为此，我们将使用Illustrator中提供的一些美术笔刷，并按照它们的顺序将它们一一拿下。

抓住钢笔工具（P），并在底座的左下角绘制一条如下所示的路径。给它一个2pt的棕色笔触（1）。另外，使用名为“ Dry Ink 2 ”的美术画笔在画笔库> Artistic> Artistic_Ink（2）中找到该路径。仍然选择此路径，转到“效果”>“模糊”>“径向模糊”，然后应用下一张图像（3）中显示的设置。将混合模式设置为叠加，并将不透明度降低到40％（4）。

在径向模糊窗口中选择Spin方法，良好的质量和数量的20。

步骤2

使用钢笔工具（P）绘制第二条路径，并为其绘制1pt的棕色笔划（1）。这次使用名为“粉笔”的美术画笔，您可以在“画笔库”>“ Artistic”>“ Artistic_ChalkCharcoalPencil ”中找到该画笔。双击“外观”面板中应用的画笔笔触以打开“笔触选项”窗口，然后选中“沿对象翻转”选项，然后单击“确定”（2）。使用相同的设置（3）再次应用“径向模糊”效果，然后将其设置为“颜色加深”（4）。

步骤3

让我们继续第三条路径，并给它2pt的棕色笔触（1）。再次使用“粉笔”艺术画笔对其进行描边（2），然后转到“效果”>“模糊”>“径向模糊”并应用下一张图像中显示的设置（3）。设置为混合模式叠加，并将不透明度降低到40％（4）。

在径向模糊窗口中选择缩放方法，良好的质量和数量的20。

步骤4

抓住钢笔工具（P），然后绘制另一个波浪形路径，如下所示。给它一个2pt的棕色笔触（1），然后再次使用“粉笔”美术笔刷对其进行笔触（2）。使用上面显示的设置应用“径向模糊”效果，然后将其设置为“颜色加深”并将不透明度降低到40％（3）。

步骤5

在底座的左下角绘制下一条路径，然后选择一个1pt的棕色笔触（1）。这次使用“ Dry Ink 2 ”美术画笔对其进行描边（2）。使用此步骤开始时显示的设置（4.1）应用“径向模糊”效果，然后将其设置为“颜色加深”（4）。

步骤6

您尚未完成。采取钢笔工具（P）并绘制下一条路径，然后选择一个2pt的棕色笔触（1）。使用“粉笔”美术笔刷对其进行描边（2），然后应用“径向模糊”效果（设置-4.1）。设置为混合模式颜色加深，并将此路径的不透明度降低到75％（3）。

步骤7

在底座的左上角绘制另一条路径，并为其绘制2pt的棕色笔划。使用“干墨2 ”美术画笔对其进行描边（2），然后应用“径向模糊”效果（设置-4.1）。设置为混合模式颜色加深（4）。

步骤8

最后，在右上角绘制最后一条路径，并为其绘制1pt的棕色笔划（1）。使用“粉笔”美术笔刷对其进行描边（2），然后应用“径向模糊”效果（设置-4.1）。将其设置为Blending Mode Overlay（4），即可完成此部分。

5.清理图标的边缘

步骤1

我们希望该图标的边缘干净，因此我们需要一个遮罩。首先，在基础形状的前面复制并粘贴（Control + F），然后删除所有现有外观（无笔触，无填充）。通过转到“对象”>“排列”>“置于最前面”，将此副本置于所有内容的最前面。选择此副本以及八个描边路径后，转到“对象”>“剪切蒙版”>“制作”（控制+ 7）。

步骤2

此时，图标的底部应如下所示：

6.向图标添加突出显示

步骤1

再次在基础形状中复制并粘贴（Ctrl + F）并删除所有现有外观。通过转到“对象”>“排列”>“置于最前面”，将其置于所有内容的前面，并使用任意颜色（1）对其进行1pt笔划。使用“添加锚点”工具（+），在左右边缘（2）上添加两个额外的点。接下来，抓住剪刀工具（C）并单击指示的四个点以将路径切成段（3）。删除不需要的路径，仅保留下面显示的两条路径（4）。

步骤2

使用混合艺术画笔在上一步中获得两条路径，我已经在我的霓虹艺术画笔教程中解释了如何进行创建。只是这不是200 x 5px，而是尺寸为100 x 3px。将“笔重”设置为0.75 pt，然后将“不透明度”降低到75％。

7.在图标下方添加阴影

抓住椭圆工具（L）并绘制具有所示尺寸的椭圆。将形状移动到图标的底部，然后通过转到“对象”>“排列”>“发送回”将其发送到所有内容的后面。选择黑色作为填充颜色，然后转到“效果”>“模糊”>“高斯模糊”并应用10半径。

8.绘制人字拖的形状

步骤1

使用椭圆工具（L）绘制具有所示尺寸的椭圆。使用直接选择工具（A）仅选择顶部和底部点，然后拖动其手柄以使其更长。接下来，从形状的中间选择两个点，然后拖动手柄以修改其位置，如图所示。

步骤2

抓住“添加锚点工具”（+），并使用它在鞋底形状的底部添加两个额外的点，并在需要时调整手柄。接下来，使用直接选择工具（A）选择最高点，然后如下所示修改控点的位置。使用添加锚点工具（+）在顶部添加其他两个点，并如下所示移动控点。

9.画出拖鞋的带子

步骤1

采取钢笔工具（P）并绘制如下两条路径，然后使用“锥形尖”美术画笔对其进行笔划，您可以在“画笔库”>“ Artistic”>“ Artistic_Ink ”中找到该画笔。将权重设置为0.3pt。从“对象”>“展开外观”，然后取消分组（Shift + Ctrl + G）两次，您将获得皮带形状。

步骤2

选择左绑带并转到“对象”>“路径”>“添加锚点”，然后选择右绑带并转到“对象”>“路径”>“添加锚点”两次。您将在每种形状上获得一些额外的点。现在，使用直接选择工具（A）仅选择以绿色突出显示的两个点并将它们向左移动一点。接下来，选择以蓝色突出显示的三个点并将它们向右移动。

步骤3

使用直接选择工具（A）仅选择以绿色突出显示的点并将其向下移动一点，然后对以蓝色突出显示的四个点进行相同的操作。

步骤4

抓住直接选择工具（A）并拖动一个选择，如下所示，以仅选择该区域中的点并将其向下移动一点。最后，将两个点从顶部移到另一个，并准备好皮带。

步骤5

使用钢笔工具（P）从下方绘制形状，作为皮带的内部。

10.在鞋底上创建设图案

步骤1

现在我们已经具备了人字拖的基本形状，我们需要将其付诸实践。暂时隐藏皮带，并专注于鞋底。选择指示为填充颜色的粉红色阴影。接下来，使用钢笔工具（P）甚至铅笔工具（N）在鞋底上随机绘制一些波浪形路径。

步骤2

复制并粘贴到鞋底形状的前面（Ctrl + F），然后转到“对象”>“排列”>“置于最前面”，将其置于所有内容的前面。组（对照+ G）的所有波状路径然后选择鞋底的副本和组并按鸿沟在探路者面板。取消分组（Shift + Ctrl + G），然后从顶部和底部删除较大的形状。用指示的颜色填充条纹。

步骤3

再次复制并粘贴到鞋底形状的前面（Ctrl + F），然后将其放到前面。用黑色和灰色（40％黑色）所示的线性渐变填充它，并将角度设置为90度。将混合模式更改为叠加，并将不透明度降低到20％。

步骤4

接下来，使用钢笔工具（P）并绘制一个分段的漩涡，如图所示。当太阳光线在四周画出短路时。为所有路径选择一个1pt浅灰色笔触，然后按“笔触”面板中的“圆帽”选项。

11.给人字拖带子上色

步骤1

首先解开皮带。用指示的粉红色填充右边的皮带。转到“外观”面板，并选择此填充属性，然后按底部的“复制所选项目”图标。结果，您将在上方获得第二个填充。使用从白色到黑色的线性渐变，然后将其设置为“混合模式叠加”，并将不透明度降低到20％。对左皮带重复相同的操作。

步骤2

现在选择左内皮带，并用深粉红色填充它。像以前一样复制此填充属性，这次使用从白色到黑色的径向渐变。将其设置为“混合模式相乘”并将不透明度降低到20％。对右内带重复相同的操作。

步骤3

复制并粘贴在左背带（Ctrl + B）中，然后删除现有外观，然后选择明亮的粉红色作为填充颜色。仅使用“直接选择工具”（A）来选择形状后面指示的两个点，然后通过按一次键盘上的向左箭头键将它们向左移动1px。

接下来，在右皮带上复制并粘贴在背面（Control + B），并更改填充颜色。使用直接选择工具（A）仅选择指示的四个点，并将它们向左移动1px，以在背面显示一些粉红色的形状。

步骤4

复制并粘贴右边的内部背带（Ctrl + B），删除现有外观，然后选择指示为填充色的粉红色阴影。使用直接选择工具（A）仅选择突出显示的两个点，然后通过按一次键盘上的向上箭头键将它们向上移动1px。

接下来，复制并粘贴在左内部背带的背面（Ctrl + B）并更改填充颜色。这一次，通过按一次向右箭头键，将整个内部皮带（不是副本）向右移动。

12.创建脚趾栏

步骤1

抓住椭圆工具（L）并绘制出两个具有所示尺寸的小圆圈。像下面那样排列它们，并用所示的径向渐变填充它们。

步骤2

现在，如图所示，使用钢笔工具（P）在孔和皮带之间绘制一条路径。将“笔划重量”设置为4.5pt，然后在“笔划”面板中按“ Round Cap”选项。从“对象”>“展开并取消分组”，然后用深粉红色填充生成的形状。将脚趾移到皮带的后面。

步骤3

复制并粘贴在脚趾栏的前面（Ctrl + F）并将其缩放一点。将填充颜色替换为所示的渐变，然后将其设置为“混合模式”，然后将不透明度降低到75％。

步骤4

使用内部皮带底部的椭圆工具（L）绘制两个椭圆，并用指示的颜色填充它们。

13.在皮带上添加亮点

步骤1

抓住钢笔工具（P），并沿着皮带的边缘绘制两条路径，如下图所示。使用先前使用的“混合美术画笔”描边这些路径，然后将权重设置为0.25pt，将“混合模式”设置为“覆盖”。

步骤2

沿着皮带的边缘绘制其他两条路径，并使用相同的“混合美术画笔”对其进行描边。将权重设置为0.25pt并将不透明度降低到75％。

14.创建光泽外观

步骤1

如图所示，以矩形工具（M）并在右皮带上绘制一个矩形。用所示的线性渐变填充它，然后将其设置为“混合模式”变亮并将不透明度降低到60％。

步骤2

在顶部绘制一个较小的矩形，然后选择白色作为填充颜色。将其设置为“混合模式叠加”，并将不透明度降低到50％。

步骤3

将右皮带复制并粘贴在正面（Ctrl + F）并删除所有现有外观。通过转到“对象”>“排列”>“置于最前面”，将其置于所有内容的前面。现在，选择两个矩形和皮带的副本，然后转到“对象”>“剪贴蒙版”>“制作”。

步骤4

左侧也会发生类似的情况。首先，绘制矩形并用相同的渐变填充。调整角度，然后将其设置为“混合模式”变亮并将不透明度降低到40％。复制左皮带，并像之前一样将其拉到前面。现在，选择矩形以及皮带的副本，然后转到“对象”>“剪贴蒙版”>“制作”。

15.添加阴影

步骤1

选择内部皮带后面的两个形状，然后将它们复制并粘贴到背面（Ctrl + B）中。给他们黑色填充，然后进入效果>模糊>高斯模糊并应用4px半径。

步骤2

我们不希望在某些区域看到模糊，因此我们将使用遮罩修复此问题。首先，复制并粘贴在鞋底形状的前面（Ctrl + F），然后删除所有现有外观。选择应用了模糊处理的两个形状以及鞋底的副本（应该在它们的前面），然后转到“对象”>“剪贴蒙版”>“制作”。

步骤3

复制并粘贴左背带（Ctrl + B），将其填充为黑色，然后向右移动。使用钢笔工具（P）绘制我们需要的其他两种形状，一种在左内皮带后面，另一种在脚趾杆后面。

步骤4

创建鞋底的另一个副本（无笔触，无填充），然后对第二个和第三个黑色形状进行分组（Ctrl + G）。选择该组和鞋底的副本，然后在“路径查找器”面板中按“相交” 。您将获得复合路径，但转到“对象”>“复合路径”，然后选择“发布”。现在，您应该具有三个形状，可以使用这些形状为内部皮带，左侧皮带和脚趾杆创建阴影。

步骤5

用所示的线性渐变填充这三个形状，并根据每个形状的位置调整角度。将它们设置为“混合模式相乘”（白色变为透明）并将不透明度降低到35％。

16.创建拖鞋底

步骤1

将鞋底形状（鞋垫）复制并粘贴到背面（Ctrl + B），并用指示的颜色填充它。如图中所示，将此形状稍微向下和向右移动。这将是外底。

步骤2

再次复制并粘贴在鞋垫的背面（Ctrl + B）。选择一个0.5pt的白色笔触，删除现有的填充颜色，并将“不透明度”设置为75％。向右下方稍微移动此形状，直到它位于鞋底中间。接下来，复制并粘贴在前面（Ctrl + F），将外底设置为“ none”，将笔触设置为“ none”。选择白色路径和外底的副本，然后转到“对象”>“剪贴蒙版”>“制作”。

17.组合图标

步骤1

人字拖现已准备就绪，您可以创建它的一对。第一组（Ctrl + G）组成右人字拖的所有形状，然后转到“对象”>“变换”>“反射”。选中“垂直”，然后点击“复制”，您将获得左人字拖。将沙滩人字拖布置在您创建的用于组成图标的底座上方。

步骤2

选择合适的外底，然后转到“效果”>“风格化”>“阴影”。应用显示的设置，然后单击“确定”。使用左外底为另一个人字拖做同样的事情

步骤3

此时，海滩图标已准备就绪。如果需要，可以创建其他尺寸，但首先请确保扩展每个画笔和应用的效果。

18.尝试不同的设计和组合

步骤1

您可以使用人字拖的副本来创建各种类型的沙滩人字拖。首先更换鞋垫和外底的颜色对于这次的鞋垫设计，我使用了很多彩色圆圈，然后使用鞋底的副本进行遮罩。另外，请使用指示的绿色阴影为皮带和脚趾杆重新着色。如果需要更多信息，可以使用参考插图文件。

步骤2

完成正确的人字拖操作后，请像以前一样进行反射。这次，我将左侧人字拖的外底移到了右侧，以改变外观。最后应用“阴影”效果。

步骤3

这是另一个例子。下面列出了我使用的颜色，但是，当然，您可以随意使用所需的任何颜色。在设计时，我使用了由矩形和椭圆形组成的覆盖区。

步骤4

现在，您可以使用任何沙滩拖鞋来组成一个新图标：

至此就完成啦！

返回搜狐，查看更多

责任编辑：