图标设计的最佳工作流程:从大处开始,还是从小处着手?

平面设计 图标 工作流程
2022-01-25 15:17:47

在设计需要以多种尺寸交付的图标时,您是从较小的尺寸开始,然后扩大到较大的尺寸吗?还是你从大开始并缩小规模?

两者都有几个优点。我正在尝试改进我的工作流程,因此其他人的输入会有所帮助。假设我们正在设计一个 Mac 或 Windows 图标,它们的大小相关——它们大多是精确的倍数。

对于 OS X,标准应用程序图标大小为:

  • 16×16、32×32、128×128、256×256、512×512和1024×1024。

对于 Windows 7,标准应用程序图标大小为:

  • 16x16、32x32、48x48、64x64 和 256x256。

对于 iOS,标准应用程序图标大小为:

  • 29x29、48x48、57x57、58x58、72x72、96x96、114x114、144x144、512x512 和 1024x1024。

对于 Android,标准应用图标大小为:

  • 36x36、48x48、72x72、96x96 和 512x512。

对于 iOS 和 Android,图标大小比较随意,并且比例也没有关联,因此对设计网格的聪明程度不那么重要,因为您不太可能找到触及多个尺寸的像素边界的坐标。


方法一:缩小

  1. 使用矢量和生成的效果(如图层样式)以最大尺寸(通常为 1024×1024)设计图标。

  2. 复制并缩小文档以创建更小的尺寸。

  3. 进行任何必要的调整并保存最终图像。

这很好,但错过了元素与适用于多种尺寸的网格对齐的机会。使用粗网格捕捉似乎有点帮助。例如,具有 16px 网格的 1024×1024 文档意味着捕捉点将为您提供像素捕捉边缘到 64×64 大小。这个想法是设计细节,但捕捉到较小尺寸的网格,这样你就可以击中那些重要的位置。


方法 2:扩大规模

  1. 使用矢量和生成的效果(如图层样式)以最小或最小尺寸之一(通常为 32×32 或 64×64)设计图标。16×16 通常没有足够的细节来使用它作为起点。

  2. 复制并放大文档以创建更大的尺寸,并缩小以创建小尺寸。

  3. 进行任何必要的调整并保存最终图像。

这往往会导致图标过于简单,细节不多,所以我不喜欢这样工作。


方法3:先放大再缩小

  1. 使用矢量和生成的效果(如图层样式)以较小的尺寸(通常为 32×32 或 64×64)创建粗略设计。

  2. 将文档放大到最大尺寸并添加细节。这是图标被打磨并添加了大部分细节的地方。

  3. 复制并缩小所有较小尺寸的文档。

  4. 进行任何必要的调整并保存最终图像。

这似乎是最好的方法,其他方法各有利弊。作为一个稍微相关的一点,这也意味着我通常将 iOS 图标设计为 912×912,因为这恰好是 iPhone 的非 Retina 图标大小 57×57 的 16 倍。


有没有更好的方法来设计需要以多种尺寸交付的图标?

目标是用最少的努力获得最好的结果。

3个回答

稍微修正您的假设:虽然 Windows 和 Mac 确实使用 16 的倍数,但它们的扩展速度不同。Vista/7 标准尺寸为 16 2、32 2、48 2、256 2OS X 是 16 2 , 32 2 , 128 2 , 512 2(+HiDPI 版本)。更复杂的是,Windows Vista/7 默认缩放级别似乎是 16 2、 48 2、 96 2、 256 2,并且会很高兴地以小至 2px 的增量进行缩放。这应该不会对您的工作流程产生巨大影响,只是它无需关注所有缩放级别的特定像素网格。

我的工作流程与您的工作流程不同,因为我没有做太多的调整大小。为每个尺寸级别创建一个新图像,我不会尝试回收完全相同的布局。

我开始的大小是由平台决定的。如果为 Windows 设计,我从 48x48 开始。(我对此没有任何科学依据,但默认的 Windows 7 缩放级别是“Medium”,即 48x48。Vista、OS X、iPhone、iPad 和 Android 图标也足够接近这个尺寸,所以它很方便而且自在。)

完全完成的图标以这种大小完成,并且是该系列中其他图标的参考。如果做一个桌面应用程序,我会制作 16x、96x 和 256x 的其他版本以匹配 Windows 的默认级别(当然,除非它是用于 Mac 的)。96x 通常与 48x 非常相似。

256x 版本将是一个全新的创作。更多细节(即使是像纹理背景元素这样的小东西)。所有我无法适应较小版本的细节都被添加了。如果有人将他们的屏幕调到巨大的图标上,他们应该对他们所看到的感到满意。

16x版本也是新作。非常少的细节。使用与较大版本相同的调色板识别徽标或非常简单的图标。在这个尺寸上,我不会试图让任何东西变得漂亮——只是立即被认出来。

所以,至少对我来说,这不是为了获得相同的图像或在所有尺寸下使用相同的基本布局而放大或缩小的问题。我认为它就像开车进入一个城市——在远处它只是一个很小但可识别的天际线。您靠近并开始挑选建筑物。然后你就置身其中,感受所有的细节和维度。从每个距离看,它看起来都不一样,但从大小到大小都有一个平滑的过渡,所以整个家庭都不会感到脱节。

绝对从大开始并按比例缩小。每当我让设计师为我的软件设计图标时,我更喜欢查看更大尺寸的图标会是什么样子,然后我可以决定在更小的尺寸中删除或强调哪些功能。在删除小元素之前,您需要知道图标中的内容。glyfx 图标有一些很好的例子来说明如何解释相同设计的大图标和小图标。

好吧,我更喜欢将所有东西都制作成最小的密度并按比例放大。如果您正在为应用程序设计整个布局,那么使用网格会更容易,并且可以为您省去很多麻烦,因为您在较小的网格中移动对象。

所以我的工作流程如下: 1. 我在 Photoshop 中以最小 dpi 比例制作布局,并在 Illustrator 中继续制作图标,因为矢量图像在放大时没有问题。2. 当我制作每个图标/对象等时,我会同时创建所有放大版本(当然,当我认为它在布局中看起来不错时)并将最终的 png 交给程序员。

我必须注意,我首先从 iOS 开始。