在设计需要以多种尺寸交付的图标时,您是从较小的尺寸开始,然后扩大到较大的尺寸吗?还是你从大开始并缩小规模?
两者都有几个优点。我正在尝试改进我的工作流程,因此其他人的输入会有所帮助。假设我们正在设计一个 Mac 或 Windows 图标,它们的大小相关——它们大多是精确的倍数。
- 16×16、32×32、128×128、256×256、512×512和1024×1024。
- 16x16、32x32、48x48、64x64 和 256x256。
- 29x29、48x48、57x57、58x58、72x72、96x96、114x114、144x144、512x512 和 1024x1024。
- 36x36、48x48、72x72、96x96 和 512x512。
对于 iOS 和 Android,图标大小比较随意,并且比例也没有关联,因此对设计网格的聪明程度不那么重要,因为您不太可能找到触及多个尺寸的像素边界的坐标。
方法一:缩小
使用矢量和生成的效果(如图层样式)以最大尺寸(通常为 1024×1024)设计图标。
复制并缩小文档以创建更小的尺寸。
进行任何必要的调整并保存最终图像。
这很好,但错过了元素与适用于多种尺寸的网格对齐的机会。使用粗网格捕捉似乎有点帮助。例如,具有 16px 网格的 1024×1024 文档意味着捕捉点将为您提供像素捕捉边缘到 64×64 大小。这个想法是设计细节,但捕捉到较小尺寸的网格,这样你就可以击中那些重要的位置。
方法 2:扩大规模
使用矢量和生成的效果(如图层样式)以最小或最小尺寸之一(通常为 32×32 或 64×64)设计图标。16×16 通常没有足够的细节来使用它作为起点。
复制并放大文档以创建更大的尺寸,并缩小以创建小尺寸。
进行任何必要的调整并保存最终图像。
这往往会导致图标过于简单,细节不多,所以我不喜欢这样工作。
方法3:先放大再缩小
使用矢量和生成的效果(如图层样式)以较小的尺寸(通常为 32×32 或 64×64)创建粗略设计。
将文档放大到最大尺寸并添加细节。这是图标被打磨并添加了大部分细节的地方。
复制并缩小所有较小尺寸的文档。
进行任何必要的调整并保存最终图像。
这似乎是最好的方法,其他方法各有利弊。作为一个稍微相关的一点,这也意味着我通常将 iOS 图标设计为 912×912,因为这恰好是 iPhone 的非 Retina 图标大小 57×57 的 16 倍。
有没有更好的方法来设计需要以多种尺寸交付的图标?
目标是用最少的努力获得最好的结果。