Beginnen Sie beim Entwerfen von Symbolen, die in mehreren Größen geliefert werden müssen, mit der kleineren Größe und skalieren dann auf die größeren Größen? Oder fangen Sie groß an und skalieren nach unten?
Beides hat mehrere Vorteile. Ich versuche, meinen Workflow zu verfeinern, also wäre Input von anderen hilfreich. Nehmen wir an, wir entwerfen ein Mac- oder Windows-Symbol, bei dem sich die Größen beziehen – sie sind meistens exakte Vielfache.
Für OS X sind die Standardgrößen für App-Symbole :
Für Windows 7 sind die Standardgrößen für App-Symbole :
Für iOS sind die Standardgrößen für App-Symbole :
Für Android sind die Standard-App-Icon-Größen :
Bei iOS und Android sind die Symbolgrößen etwas willkürlicher und die Skalen beziehen sich nicht so gut, daher ist es weniger wichtig, mit dem Designraster klug umzugehen, da Sie weniger wahrscheinlich Koordinaten finden, die Pixelgrenzen für mehrere Größen treffen.
Methode 1: Herunterskalieren
Entwerfen Sie das Symbol in der größten Größe (oft 1024 × 1024) mit Vektoren und generierten Effekten wie Ebenenstilen.
Duplizieren und verkleinern Sie das Dokument, um die kleineren Größen zu erstellen.
Nehmen Sie alle erforderlichen Anpassungen vor und speichern Sie das endgültige Bild.
Das ist großartig, verpasst aber Möglichkeiten für Elemente, sich an einem Raster auszurichten, das für mehrere Größen funktioniert. Die Verwendung eines groben Rasters zum Einrasten scheint ein wenig zu helfen. Zum Beispiel bedeutet ein 1024×1024-Dokument mit einem 16px-Gitter, dass die Einrastpunkte Ihnen pixelgerastete Kanten bis zu einer Größe von 64×64 geben. Die Idee ist, mit Details zu entwerfen, aber an den kleineren Rastern zu rasten, damit Sie diese wichtigen Positionen treffen.
Methode 2: Hochskalieren
Entwerfen Sie das Symbol in der kleinsten oder einer der kleinsten Größen (oft 32 × 32 oder 64 × 64) mit Vektoren und generierten Effekten wie Ebenenstilen. Es gibt normalerweise nicht genug Details in 16×16, um es als Ausgangspunkt zu verwenden.
Duplizieren und skalieren Sie das Dokument nach oben, um die größeren Größen zu erstellen, und nach unten, um die kleinen Größen zu erstellen.
Nehmen Sie alle erforderlichen Anpassungen vor und speichern Sie das endgültige Bild.
Dies führt tendenziell zu übereinfachen Symbolen mit wenig Details, daher arbeite ich nicht gerne so.
Methode 3: Skalierung nach oben und dann nach unten
Erstellen Sie ein grobes Design in einer kleineren Größe (oft 32 × 32 oder 64 × 64) mit Vektoren und generierten Effekten wie Ebenenstilen.
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 Größen.
Nehmen Sie alle erforderlichen Anpassungen 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 iOS-Symbole normalerweise mit 912 × 912 entwerfe, da dies genau das 16-fache der Nicht-Retina-Symbolgröße des iPhones von 57 × 57 ist.
Gibt es eine bessere Methode zum Entwerfen von Symbolen, die in mehreren Größen geliefert werden müssen?
Ziel ist es, mit möglichst wenig Aufwand das bestmögliche Ergebnis zu erzielen.
Eine leichte Korrektur Ihrer Annahmen: Während Windows und Mac Vielfache von 16 verwenden, skalieren sie nicht mit der gleichen Rate. Vista/7-Standardgrößen sind 16 2 , 32 2 , 48 2 , 256 2 . OS X ist 16 2 , 32 2 , 128 2 , 512 2 (+HiDPI-Versionen). Um die Dinge noch komplizierter zu machen, scheinen die Standard-Zoomstufen von Windows Vista/7 16 2 , 48 2 , 96 2 , 256 2 zu sein und werden gerne in kleinen Schritten von 2px skaliert. Dies sollte keinen großen Unterschied für Ihren Arbeitsablauf machen, außer dass es die Notwendigkeit überflüssig macht, sich bei allen Zoomstufen mit bestimmten Pixelgittern zu befassen.
Mein Arbeitsablauf unterscheidet sich von Ihrem darin, dass 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 anfange, wird von der Plattform bestimmt. Wenn ich für Windows entwerfe, fange ich bei 48 x 48 an. (Ich habe keine wissenschaftliche Grundlage dafür, aber die Standard-Zoomstufe von Windows 7 ist „Mittel“, was 48 x 48 entspricht. Vista-, OS X-, iPhone-, iPad- und Android-Symbole fallen ebenfalls nahe genug an diese Größe heran, sodass es praktisch ist und gemütlich.)
Das fertige Symbol wird in dieser Größe erstellt und ist die Referenz für andere Symbole in der Familie. Wenn ich eine Desktop-App mache, erstelle ich andere Versionen mit 16x, 96x und 256x, 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 Kleinigkeiten wie das Texturieren von Hintergrundelementen handelt). Alle Details, die ich in den kleineren Versionen nicht unterbringen konnte, werden hinzugefügt. Wenn jemand seinen Bildschirm für riesige Symbole eingestellt hat, sollte er mit dem, was er sieht, zufrieden sein.
Auch die 16x-Version ist eine Neuschöpfung. Sehr wenig Detail. Identifizierendes Logo oder sehr einfache Ikonografie mit der gleichen Farbpalette wie die größeren Versionen. Bei dieser Größe versuche ich nicht, etwas Schönes zu machen - nur sofort erkennbar.
Zumindest für mich geht es also nicht darum, in der Hoffnung, ein identisches Bild zu haben, nach oben oder unten zu skalieren oder das gleiche Grundlayout für alle Größen zu verwenden. Ich stelle mir das so vor, als würde man in eine Stadt hineinfahren – in der Ferne ist es nur eine winzige, aber erkennbare Skyline. Du kommst näher und beginnst, Gebäude auszusuchen. Dann bist du drin und spürst alle Details und Dimensionen. 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.
Beginnen Sie auf jeden Fall groß und skalieren Sie nach unten. Wann immer ich Designer Icons für meine Software entwerfen lasse, ziehe ich es vor, zu sehen, wie das Icon in einer größeren Größe aussieht, und dann kann ich entscheiden, welche Funktionen in kleineren Größen entfernt oder hervorgehoben werden sollen. Sie müssen wissen, was in dem Symbol enthalten ist, bevor Sie Elemente im Kleinen entfernen. glyfx icons hat einige gute Beispiele, wie man große und kleine Icons des gleichen Designs interpretieren kann.
Nun, ich ziehe es vor, 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 viele Kopfschmerzen, da Sie die Objekte in einem kleineren Raster verschieben.
Mein Arbeitsablauf sieht also so aus: 1. Ich erstelle ein Layout in einer kleinsten dpi-Skala in Photoshop und erstelle weiterhin die Symbole in Illustrator, weil Vektorbilder kein Problem mit dem Hochskalieren haben. 2. Wenn ich jedes Symbol/Objekt usw. erstelle, erstelle ich alle vergrößerten Versionen gleichzeitig (wenn ich entscheide, dass es im Layout natürlich gut aussieht) und übergebe die endgültigen PNGs an den Programmierer.
Ich muss anmerken, dass ich zuerst mit iOS angefangen habe.
Alan Gilbertson
Marc Edwards
Marc Edwards
Farray