跳过导航
Header image featuring three icons designed by Yannick Lung.
#MadeWithSketch

通用语言:Yannick Lung 如何使用 Sketch 设计其精美的图标

“Sketch 最棒的地方在于它能帮助我完成整个图标设计流程。”

设计出色且易于理解的图标是一项真正的技能。您需要将大量关键信息压缩到一张小而清晰的图像中 — 当然,它还必须看起来很吸引人。我们与图标设计师 Yannick Lung 坐下来,了解他在设计许多应用程序图标和图标包时面临的挑战 — 以及他为何使用 Sketch 来完成这些设计。

您能告诉我们一些关于您如何开始图标设计的故事吗?

我记得非常清楚。大约 13 岁时,我喜欢使用 iWeb 构建网站,它是 Apple iLife 套件的一部分。我当时正在进行网站重新设计,并萌生了在侧边栏中使用小象形图的想法。我真的很想使用自己设计的图标,所以我开始在 16 × 16 的画布上绘制小矩形。

大约在同一时间,我被我的 iPod Touch 主屏幕上精美的应用程序图标所吸引。这种兴奋驱使我自己设计应用程序图标。

当我第一次打开 Sketch 时,一切对我来说都立刻显得完全合理。我从第一秒就爱上了它。

当时,没有哪种设计工具能真正说服我。要使用任何东西,你都必须观看没完没了的教程。作为一种临时解决方案 — 现在听起来可能有点令人惊讶 — 我使用了 Keynote。大约在 2011 年年中,我浏览了 Mac App Store,Sketch 引起了我的注意。当我第一次打开它时,一切对我来说都立刻显得完全合理。界面类似于 Keynote,有一个单独的图层列,最棒的是,我可以应用内阴影!我从第一秒就爱上了它。

是什么让 Sketch 如此适合图标设计?

Sketch 最棒的地方在于它能帮助我完成整个图标设计流程,所以它真的很容易使用。我喜欢我能以多快的速度工作。我甚至不是指技术性能,而是指你可以移动多快,以及思考起来有多容易。

在开始一个项目时,我总是从基本形状开始,没有颜色、光线和阴影。然后我一点一点 — 或者更确切地说,一个画板一个画板 — 迭代地向前推进。由此,最终结果越来越清晰,直到它感觉“正确”为止。

由于所有对象都是矢量,我可以轻松地放大、缩小或扭曲它们,而不会变得模糊。此功能与“缩放”功能相结合,可以对图层进行出色的操作。

An icon design for the Almighty app featuring a big thunderbolt in the middle of a Sketch canvas.

这里的操作不仅包括变形图层,还包括应用更复杂的图层效果。我经常被问到我是如何创建这些 3D 效果的。事实是,它主要只是各种阴影、混合模式和模糊效果的混合。

Sketch 最棒的地方在于它能帮助我完成整个图标设计流程,所以它真的很容易使用。我喜欢我能以多快的速度工作。

我总是测试图标在真实环境中的效果,或者查看它们的实际大小。这对于评估最终结果的对比度是否足够非常重要 — Sketch 也能在这方面帮助我。使用符号,我可以编辑主要对象,并在各种模型中实时查看我的更改 — 例如 macOS Dock 或 App Store 产品页面。它允许我对图标进行微调,使其闪耀。

一旦图标准备就绪,由于导出预设,我可以轻松地以 Xcode 所需的不同尺寸渲染它。

开发这些图标涉及哪些挑战?

与其他设计领域相比,图标设计发生在非常不同的沟通层面。作为一名图标设计师,你的目标是以一种通用的语言来描绘事物,让世界各地的每个人都能理解。此外,图标是应用程序的第一个接触点,并会给人留下最初的印象。

最大的挑战之一是了解图标完成后的显示尺寸。在 27 英寸屏幕上全屏显示效果良好的东西不一定能转化为 64 × 64 像素。即使在 Retina 显示器或 5K 显示器上,图标在小尺寸下也可能看起来模糊,并且简直是“错误的”。为了解决这个问题,我会在整个过程中不断测试和查看小尺寸下的图标。

作为一名图标设计师,你的目标是以一种通用的语言来描绘事物,让世界各地的每个人都能理解。

同样,找到正确的颜色调色板也并非易事。在许多情况下,人们将图标放置在彩色背景上,这已经是一种挑战。最好在不同的背景下简单地测试不同的颜色组合。通过这种方式,您可以快速评估哪些颜色更适合。正确的颜色对比度也在这里起着重要作用。如果图标中的所有对象都在蓝色范围内,则它们有可能在小尺寸下相互融合。互补色是一个不错的选择,因为它们提供了很大的对比度。

Four different variation of the Fastival icon with different color schemes to find the right contrast.

另一个挑战是找到正确的平衡点。如果对象太少,则图标可能会显得太空或过于通用。如果元素太多,它会显得杂乱无章且令人不安。这种情况发生的速度比您想象的要快,尤其是在您尝试使图层看起来更具塑料感时。突然间,设计看起来太像一张真实的照片。

因此,艺术在于找到恰到好处的程度来制作一个好的图标。有时多一点,有时少一点,而且通常差异仅在于几个像素。

您还用 Sketch 设计过什么?

我几乎设计了我可以用 Sketch 设计的一切。无论项目有多大,我都认为它是生成设计的最可靠的工具。从插图到组件库,再到广泛的用户界面,在过去的几年里,我已经在 Sketch 中创建了许多项目。

interface designs in Sketch for a flight tracker with a social element

例如,就在几天前,我们发布了一个全新的 Mileways 版本 — 这是一个具有社交功能的航班跟踪器。我在 Sketch 中在几个页面上用数百个画板绘制了整个界面。

我几乎设计了我可以用 Sketch 设计的一切。无论项目有多大,我都认为它是生成设计的最可靠的工具。

您的创意过程是怎样的?

在开发新应用程序图标的过程中,我通常从模拟开始。这意味着我首先考虑潜在的主题并进行一些研究。一旦最初的想法出现,我就在带有点网格的记事本中非常粗略地将其草绘下来,只是为了防止我意外忘记。

An iPad with sketches for icons drawn on Linea, also featuring an Apple Pen

然后我继续在 iPad 上使用 ‘数字纸’ 来捕捉想法。 为此,我使用 Apple Pencil 和 Linea Sketch — 来自 Iconfactory 的才华横溢的人们。 我可以更快、更详细地研究想法,从而更深刻地理解形式和构图。 另一个有用的功能是包含预装应用图标网格的模板。

如果某些物体特别难以可视化,我有时会使用 Cinema 4D 来研究光线在材质上的表现。 曝光和光线场景可以对图像产生巨大影响。 它还可以帮助我快速定位对象,从而更好地感受基本构图。

您会与 Sketch 的新手分享哪一个插件、库或技巧?

近年来,渐变已成为每个设计领域中流行的风格设备。 但是它们有时会感觉有点单调,尤其是在仅使用两种颜色点时。 您可以通过缓动来防止这种情况,它可以创建更柔和、更自然的色彩效果。

手动执行此操作可能有点复杂和乏味。 在某个时候,我偶然发现了 Easing Gradient 插件,现在我几乎每天都在使用它。 我强烈推荐给任何喜欢使用渐变的人。

最后,您对有抱负的图标设计师有什么建议?

我认为最重要的是要有尝试新事物的好奇心。 如果有什么让你兴奋,那就尝试一下。 许多人(包括我自己)都未能尝试新想法,尤其是在开始时。 为了帮助我入门,我过去常常复制其他图标,因为我想知道如何创作类似的艺术作品。

An alternative design to the Nuage icon featuring a cassette inspired icon design.

观察现实世界中的事物并摆弄它们也很有帮助。 谁还记得磁带的感觉? 如果不了解磁带的细节,我可能不会想到 Nuage App Icon 的替代版本。

我认为最重要的是要有尝试新事物的好奇心。 如果有什么让你兴奋,那就尝试一下。

最后,我建议研究操作系统的设计指南(例如,Apple 的人机界面指南)。 它们通常会解释基本属性,这可以帮助您了解什么是重要的。 您还可以找到更多帮助,例如您可以遵循的模板或网格。

您可能还喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都会让您在几分钟内完成设置,并准备好做到最好。

免费开始
免费开始