使用 Adobe XD 将一些简单形状拼接成您可以在 App 或 Web 设计中使用的图标。
双手拿着手机的特写,手机屏幕上显示一个食品订单跟踪 App,标题为“Track your order”(跟踪您的订单),下面是“Your order is received”(您的订单已收到)。

我们要创建一个记事本图标和一个铅笔图标。您可以下载练习文件跟着一起操作,或者使用这些知识来设计您自己的图标。首先创建记事本的基本形状:一个正方形,里面有一条线。铅笔的基本形状是一个长方形。

左侧为 XD 工具栏,绿色的矩形界面中有一个小正方形和一个长方形,军为深灰色边框和白色填充,正方形内有 1 条线

看一下那些元素可以复制,比如记事本中的线条。使用重复网格可以轻松将这些线条分隔开来。

左侧为 XD 工具栏,左边正方形中的重复网格内有 5 条线,属性查看器中“Repeat Grid”(重复网格)高亮显示

添加圆角来进一步细化某个形状,例如这里铅笔尾部的橡皮擦。双击某个形状将其转换为路径。然后,添加一些点来创建新的形状,例如这里的铅笔尖。我们还添加了线条,让铅笔细节更丰富。记得要将元素组合,以便于移动。

左边为里面有直线的正方形,右边在绘制一支铅笔,铅笔橡皮擦两边的边界半径均设置为 4

一切准备就绪后,我们进行最后的润色。旋转铅笔并将其移动到记事本上的合适位置。然后确定叠放顺序,确保铅笔放在记事本前面。最后,应用颜色,“Border”(边框)为白色,“Fill”(填充)为绿色,这样就可以了。

铅笔被旋转并移动到包含直线的正方形上方,所有线条均为白色,绿色填充,边界宽度为 2

我们来看看新的图标放在 App 中效果如何。

添加到手机应用程序模型中,用于显示“Received”(已接收)状态,铅笔位于正方形上方的图标,下面还有两个状态,分别为“Being prepared”(正在准备)和“On its way”(送货中)

现在就试着运用这些技巧来为您的 App 和 Web 设计各种图标吧!

07/29/2020

教程作者:Serge Vasil

Adobe Stock 教程作者:Pixel-Shot

此页面是否有帮助?