アイコンデザインの最適なワークフロー：大きく始めるか、小さく始めるか

いくつかのサイズで配信する必要があるアイコンを設計するとき、小さいサイズから始めて、大きいサイズに拡大しますか？または、大きく始めて縮小しますか？

両方にいくつかの利点があります。私は自分のワークフローを改善しようとしているので、他の人からの入力が役立つでしょう。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：スケールダウン

1. レイヤースタイルなどのベクトルと生成された効果を使用して、アイコンを最大サイズ（多くの場合1024×1024）で設計します。

2. ドキュメントを複製および縮小して、より小さいサイズを作成します。

3. 必要な調整を行い、最終画像を保存します。

それは素晴らしいことですが、要素が複数のサイズで機能するグリッドに合わせる機会を逃します。粗いグリッドを使用してスナップすることは少し役立つようです。たとえば、16pxグリッドの1024x1024ドキュメントは、スナップポイントが64x64サイズまでのピクセルスナップエッジを与えることを意味します。アイデアは詳細に設計することですが、小さいサイズのグリッドにスナップするので、それらの重要な位置にヒットします。

方法2：スケールアップ

1. レイヤースタイルなどのベクトルと生成された効果を使用して、アイコンを最小サイズ、または最小サイズ（多くの場合32×32または64×64）で設計します。通常、16×16には開始点として使用するのに十分な詳細がありません。

2. ドキュメントを複製して拡大し、大きなサイズを作成し、小さなサイズを作成します。

3. 必要な調整を行い、最終画像を保存します。

これは、あまり詳細ではないシンプルなアイコンにつながる傾向があるため、このように作業するのは好きではありません。

方法3：拡大縮小

1. レイヤースタイルなどのベクトルと生成された効果を使用して、より小さなサイズ（多くの場合32×32または64×64）で大まかなデザインを作成します。

2. ドキュメントを最大サイズに拡大し、詳細を追加します。これは、アイコンが洗練され、ほとんどの詳細が追加されるポイントです。

3. すべての小さいサイズのドキュメントを複製して縮小します。

4. 必要な調整を行い、最終画像を保存します。

これは、他の方法の長所と短所がある最良の方法のようです。少し関連する点として、iOSのアイコンを912x912で設計するのが普通であることも意味します。これは、iPhoneの非Retinaアイコンサイズである57x57のちょうど16倍だからです。

いくつかのサイズで配信する必要があるアイコンを設計するためのより良い方法はありますか？

目標は、最小限の労力で可能な限り最高の結果を達成することです。

仮定のわずかな修正：WindowsとMacは16の倍数を使用しますが、同じ速度でスケーリングすることはありません。ビスタ/ 7標準サイズは16である²、32 ²、48 ²、256 ²。OS Xは16 ²、32 ²、128 ²、512 ²（+ HiDPIバージョン）。さらに複雑なものに、Windows Vistaは、/ 7デフォルトのズームレベルが16であるように見える²、48 ²、96 ²、256 ²と喜んで2ピクセルほどの小さな単位でスケールします。これにより、すべてのズームレベルで特定のピクセルグリッドを考慮する必要がなくなることを除いて、ワークフローに大きな違いはありません。

私のワークフローは、サイズ変更をあまり行わないという点であなたのものとは異なります。サイズレベルごとに新しい画像が作成されますが、まったく同じレイアウトをリサイクルしようとはしません。

開始するサイズはプラットフォームによって決まります。Windows用に設計する場合、48x48から始めます。（これに関する科学的根拠はありませんが、Windows 7のデフォルトのズームレベルは48x48の「中」です。Vista、OS X、iPhone、iPad、およびAndroidアイコンもこのサイズに十分近いので便利です。快適。）

完全に完成したアイコンはこのサイズで完了し、ファミリー内の他のアイコンの参照になります。デスクトップアプリを実行する場合は、Windowsのデフォルトレベルに合わせて16x、96x、および256xで他のバージョンを作成します（Macの場合を除き、当然）。通常、96xは48xと非常によく似ています。

256xバージョンは完全に新しいものになります。さらに詳細（背景要素のテクスチャリングのような小さなものであっても）。小さいバージョンには収まらないすべての詳細が追加されます。誰かが巨大なアイコンのために画面をダイアルアップした場合、彼らは彼らが見るものに満足すべきです。

16xバージョンも新しく作成されました。非常に詳細。大きなバージョンと同じカラーパレットでロゴまたは非常にシンプルな図像を識別する。このサイズでは、美しいものを作ろうとはしません-すぐに認識できます。

そのため、少なくとも私にとっては、同じ画像を使用したり、すべてのサイズで同じ基本レイアウトを使用したりすることを期待して、拡大または縮小することは問題ではありません。私はそれを都市に車で行くようなものだと思います-遠くでは、それはほんの小さな、しかし識別可能なスカイラインです。あなたは近づき、建物を選び始めます。その後、あなたはそこにいて、細部と次元のすべてを感じています。それぞれの距離から見た目は異なりますが、サイズからサイズへのスムーズな移行があるため、家族全員がバラバラに感じることはありません。

間違いなく大規模に開始し、縮小します。デザイナーにソフトウェアのアイコンをデザインしてもらうたびに、アイコンが大きいサイズでどのように見えるかを確認し、小さいサイズで削除または強調する機能を決定できます。スモールの要素を削除する前に、アイコンの内容を知る必要があります。glyfxアイコンには、同じデザインの大きなアイコンと小さなアイコンを解釈する方法の良い例がいくつかあります。

まあ、私はすべてを最小密度で作成し、スケールアップすることを好みます。アプリのレイアウト全体を設計する場合、グリッドの操作ははるかに簡単であり、オブジェクトを小さなグリッドで移動するため、頭痛の種が大幅に軽減されます。

したがって、ワークフローは次のようになります。1. Photoshopで最小dpiスケールでレイアウトを作成し、Illustratorでアイコンを作成し続けます。ベクトル画像は拡大に問題がないためです。2.各アイコン/オブジェクトなどを作成するとき、すべてのスケールアップバージョンを同時に作成し（もちろんレイアウトで見栄えが良いと判断したとき）、最終的なpngをプログラマに渡します。

最初にiOSから始めたことに注意する必要があります。