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
Entwerfen Sie das Symbol in der größten Größe (häufig 1024 × 1024), indem Sie Vektoren und generierte Effekte wie Ebenenstile verwenden.
Duplizieren und verkleinern Sie das Dokument, um kleinere Formate zu erstellen.
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
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.
Duplizieren und skalieren Sie das Dokument nach oben, um die größeren Formate zu erstellen, und nach unten, um die kleinen Formate zu erstellen.
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
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.
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.
Duplizieren und verkleinern Sie das Dokument für alle kleineren Formate.
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.
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.
quelle
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.
quelle