Bester Workflow für das Icon-Design: Groß oder klein anfangen?

Beginnen Sie beim Entwerfen von Symbolen, die in mehreren Größen geliefert werden müssen, mit der kleineren Größe und skalieren Sie dann auf die größeren Größen? Oder fängst du groß an und verkleinerst?

Beides hat mehrere Vorteile. Ich versuche, meinen Workflow zu verfeinern, daher wären Beiträge von anderen hilfreich. Nehmen wir an, wir entwerfen ein Mac- oder Windows-Symbol, dessen Größe sich auf ein Vielfaches bezieht.

Für OS X gelten folgende Standardgrößen für App-Symbole :

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 und 1024 × 1024.

Für Windows 7 gelten folgende Standardgrößen für App-Symbole :

• 16x16, 32x32, 48x48, 64x64 und 256x256.

Für iOS sind die Standardgrößen für App-Symbole :

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 und 1024x1024.

Für Android sind die Standardgrößen für App-Symbole :

• 36 x 36, 48 x 48, 72 x 72, 96 x 96 und 512 x 512.

Für iOS und Android sind die Symbolgrößen etwas zufälliger und die Skalierungen hängen nicht so gut zusammen. Daher ist es weniger wichtig, klug mit dem Designraster umzugehen, da Sie weniger wahrscheinlich Koordinaten finden, die Pixelgrenzen für mehrere Größen überschreiten.

Methode 1: Verkleinern

1. Entwerfen Sie das Symbol in der größten Größe (häufig 1024 × 1024), indem Sie Vektoren und generierte Effekte wie Ebenenstile verwenden.

2. Duplizieren und verkleinern Sie das Dokument, um kleinere Formate zu erstellen.

3. Nehmen Sie die erforderlichen Änderungen vor und speichern Sie das endgültige Bild.

Das ist großartig, bietet aber keine Möglichkeit, Elemente an einem Raster auszurichten, das für mehrere Größen geeignet ist. Die Verwendung eines groben Rasters zum Einrasten scheint ein wenig zu helfen. Beispielsweise bedeutet ein 1024 × 1024-Dokument mit einem 16-Pixel-Raster, dass die Fangpunkte Pixel-Fangkanten bis zur Größe 64 × 64 ergeben. Die Idee ist, mit Details zu entwerfen, aber an den kleineren Rastern zu rasten, damit Sie diese wichtigen Positionen erreichen.

Methode 2: Skalieren

1. Entwerfen Sie das Symbol in der kleinsten oder einer der kleinsten Größen (häufig 32 × 32 oder 64 × 64), indem Sie Vektoren und generierte Effekte wie Ebenenstile verwenden. In 16 × 16 sind in der Regel nicht genügend Details vorhanden, um als Ausgangspunkt verwendet zu werden.

2. Duplizieren und skalieren Sie das Dokument nach oben, um die größeren Formate zu erstellen, und nach unten, um die kleinen Formate zu erstellen.

3. Nehmen Sie die erforderlichen Änderungen vor und speichern Sie das endgültige Bild.

Dies führt dazu, dass einfache Symbole nicht sehr detailliert dargestellt werden, weshalb ich nicht gerne so arbeite.

Methode 3: Vergrößern und verkleinern

1. Erstellen Sie ein grobes Design mit einer kleineren Größe (häufig 32 × 32 oder 64 × 64), indem Sie Vektoren und generierte Effekte wie Ebenenstile verwenden.

2. Skalieren Sie das Dokument auf die größte Größe und fügen Sie Details hinzu. Dies ist der Punkt, an dem das Symbol poliert und die meisten Details hinzugefügt werden.

3. Duplizieren und verkleinern Sie das Dokument für alle kleineren Formate.

4. Nehmen Sie die erforderlichen Änderungen vor und speichern Sie das endgültige Bild.

Dies scheint die beste Methode zu sein, mit den Vor- und Nachteilen der anderen Methoden. Als etwas verwandter Punkt bedeutet dies auch, dass ich normalerweise iOS-Symbole im Format 912 × 912 entwerfe, da dies genau das 16-fache der Größe der Nicht-Retina-Symbole des iPhones von 57 × 57 ist.

Gibt es eine bessere Methode zum Entwerfen von Symbolen, die in verschiedenen Größen geliefert werden müssen?

Ziel ist es, mit geringstem Aufwand das bestmögliche Ergebnis zu erzielen.

Eine leichte Korrektur Ihrer Vermutungen: Windows und Mac verwenden zwar ein Vielfaches von 16, skalieren jedoch nicht mit derselben Rate. Vista / 7-Standardgrößen sind 16 ² , 32 ² , 48 ² , 256 ² . OS X ist 16 ² , 32 ² , 128 ² , 512 ² (+ HiDPI-Versionen). Um die Sache noch weiter zu verkomplizieren, scheinen die Standardzoomstufen von Windows Vista / 7 16 ² , 48 ² , 96 ² , 256 ^{2 zu sein} und werden gerne in Schritten von nur ² Pixel skaliert. Dies sollte keinen großen Unterschied für Ihren Workflow bedeuten, außer dass Sie sich nicht um bestimmte Pixelraster in allen Zoomstufen kümmern müssen.

Mein Workflow unterscheidet sich von Ihrem, da ich die Größe nicht sehr stark verändere. Für jede Größenstufe wird ein neues Bild erstellt, und ich versuche nicht, genau dasselbe Layout zu recyceln.

Die Größe, mit der ich beginne, wird von der Plattform bestimmt. Wenn ich für Windows entwerfe, beginne ich mit 48x48. (Ich habe keine wissenschaftliche Grundlage dafür, aber die Standard-Zoomstufe für Windows 7 ist "Mittel" (48 x 48). Vista, OS X, iPhone, iPad und Android-Symbole kommen dieser Größe ebenfalls nahe, sodass sie praktisch und praktisch sind gemütlich.)

Das fertige Symbol wird in dieser Größe erstellt und ist die Referenz für andere Symbole in der Familie. Wenn Sie eine Desktop-App erstellen, werden andere Versionen mit 16x, 96x und 256x erstellt, um den Standardstufen von Windows zu entsprechen (es sei denn, es ist natürlich für Mac). Das 96x ist normalerweise dem 48x sehr ähnlich.

Die 256x-Version wird eine völlig neue Kreation sein. Viel mehr Details (auch wenn es sich um kleine Dinge wie das Strukturieren von Hintergrundelementen handelt). Alle Details, die ich in den kleineren Versionen nicht einfügen konnte, werden hinzugefügt. Wenn jemand seinen Bildschirm für riesige Symbole angewählt hat, sollte er mit dem, was er sieht, zufrieden sein.

Die 16x-Version ist ebenfalls eine neue Kreation. Sehr kleines Detail. Identifizieren von Logos oder sehr einfachen Symbolen mit derselben Farbpalette wie die größeren Versionen. Bei dieser Größe versuche ich nichts Schönes zu machen - nur sofort erkennbar.

Zumindest für mich geht es also nicht darum, das Bild zu vergrößern oder zu verkleinern, in der Hoffnung, ein identisches Bild zu haben oder dasselbe Basislayout für alle Größen zu verwenden. Ich denke, es ist wie in eine Stadt zu fahren - in der Ferne ist es nur eine winzige, aber identifizierbare Skyline. Sie nähern sich und beginnen, Gebäude auszusuchen. Dann bist du in sie und alle Details und Dimension zu fühlen. Aus jeder Entfernung sieht es anders aus, aber es gibt einen fließenden Übergang von Größe zu Größe, sodass sich die ganze Familie nie unzusammenhängend fühlt.

Auf jeden Fall groß anfangen und verkleinern. Immer wenn Designer Symbole für meine Software entwerfen, möchte ich lieber sehen, wie das Symbol bei einer größeren Größe aussieht, und dann kann ich entscheiden, welche Features in kleineren Größen entfernt oder hervorgehoben werden sollen. Sie müssen wissen, was im Symbol enthalten ist, bevor Sie Elemente im kleinen Element entfernen. In glyfx icons finden Sie einige gute Beispiele für die Interpretation großer und kleiner Symbole desselben Designs.

Nun, ich bevorzuge es, alles für die kleinste Dichte zu machen und es zu vergrößern. Wenn Sie das gesamte Layout für eine App entwerfen, ist die Arbeit mit dem Raster viel einfacher und erspart Ihnen viel Kopfzerbrechen, da Sie die Objekte in einem kleineren Raster verschieben.

So sieht mein Arbeitsablauf aus: 1. Ich erstelle in Photoshop ein Layout im kleinsten dpi-Maßstab und erstelle weiterhin die Symbole in Illustrator, da Vektorgrafiken problemlos skaliert werden können. 2. Wenn ich jedes Symbol / Objekt usw. erstelle, erstelle ich alle vergrößerten Versionen gleichzeitig (wenn ich feststelle, dass es im Layout natürlich gut aussieht) und übergebe die endgültigen PNGs an den Programmierer.

Ich muss beachten, dass ich zuerst mit iOS angefangen habe.