Welche der folgenden Vorgehensweisen sollte ich verwenden, um Symbole in vielen Auflösungen zu entwerfen?
Folgende Faktoren möchte ich berücksichtigen:
Der Anwendungsfall sind Startsymbole für eine Android-App :
Launcher-Symbole auf einem Mobilgerät müssen 48 x 48 dp groß sein (Pixeldichte unabhängig: 1 dp ist ein Pixel auf einem 160-dpi-Bildschirm), daher sind 3 Größen erforderlich
Launcher-Symbole für die Anzeige bei Google Play müssen 512 x 512 Pixel groß sein. Das ist die vierte Größe
Die besten Symbolbibliotheken, die ich gesehen habe, verwenden einen hybriden Ansatz:
Für die meisten Größen haben Sie eine Vektorgrafik, die für die gewünschte Auflösung gerendert wird
Für die wirklich winzige Version (16 x 16 Pixel) erstellen Sie ein separates, von Hand abgestimmtes Bitmap, das oft nicht einmal dasselbe Bild ist.
Vektorgrafiken sind besonders nützlich, da Sie heute über Systeme verfügen, die Vektorgrafiken, hochauflösende Displays und Symbolanforderungen mit seltsamen Größen nativ rendern können (Webseitensymbole müssen nicht den Symbolgrößen entsprechen, die in Desktop-Apps verwendet werden).
Ich persönlich würde zum Vektor gehen.
Sie können endlos skalieren und die Größe auf die gewünschten Abmessungen ändern. In der Vergangenheit wäre Bitmap vielleicht besser gewesen, weil Sie für Qualitätssymbole pixelgenaue Symbole wünschen würden, aber jetzt mit Illustrators „An Pixelraster ausrichten“ ist es einfacher, pixelgenau zu werden.
Illustrator spart Ihnen auch Zeit, da Sie das Symbol einmal erstellen und die Größe beliebig ändern können, während Sie bei Bitmap entweder ein Symbol groß machen und verkleinern, aber die Qualität kann manchmal etwas komisch sein (abhängig davon, wie Sie heruntersampeln) oder Sie müssen nehmen die Zeit, um das Symbol mit den jeweils erforderlichen Abmessungen zu entwerfen, z. B. denken Sie vielleicht, dass Sie ein 32x32-Symbol benötigen, sehen es aber auf der Website oder in der App und möchten es dann aus irgendeinem Grund ändern.
Aber am Ende des Tages würde ich sagen, es kommt darauf an, mit welcher Software Sie sich wohler fühlen. Wenn Sie beispielsweise Photoshop kennen, weiß ich nicht, wie einfach oder schwierig es für Sie wäre, auf Illustrator umzusteigen.
Microsoft hat einen Best-Practice-Leitfaden für Aero Glass Icons veröffentlicht , der hier angebracht sein könnte. Obwohl der Aero-Icon-Stil ziemlich ausführlich behandelt wird, bleiben die Techniken zum Erstellen eines guten Satzes skalierter Icons gleich, und gegen Ende des Artikels werden verschiedene Ansätze diskutiert. Ihre Empfehlung ist, dass es davon abhängt, was die Ausgabe ist.
Wenn Sie nach vollständig skalierbaren, einfach zu verwendenden und wiederverwendbaren Symbolen suchen, ist es am besten, Ihre eigenen benutzerdefinierten Schriftpakete unter Verwendung der Symbole zu erstellen, sie in einer privaten (oder Kunden-)Datenbank zu hosten und sie in Ihren Designs zu verwenden. Sie werden nicht nur die Ladezeiten verkürzen, sondern auch schöne, gestochen scharfe Symbole haben, egal wie groß sie sind!
Schauen Sie sich das an: http://icomoon.io/ Ich fand es sehr hilfreich, diese Art von Paketen schnell zu erstellen, sie haben auch vorgefertigte bearbeitbare Symbole für die Basisarbeit.
Stellen Sie sicher, dass Sie sie als Vektor in Illustrator erstellen, um sie einfach in .svg-Form exportieren / importieren zu können!
Erstellen Sie sie in Vektoren, auch wenn es vielleicht nicht so viel Spaß macht, sie zu erstellen. Sie sollten Raster nur dann verwenden, wenn Sie absolut sicher sind, dass Sie sie nie größer brauchen werden. Was passiert, wenn jemand Ihre Icons zum Drucken kaufen möchte und 300ppi benötigt? Vector passt die Größe auch schärfer und genauer an, selbst wenn Sie Ihre Bilder verkleinern.
Mit SVG können Sie die Grafiken im Web skalieren. Dies ist wichtig für responsive Websites, da Sie Ihr Bild einfach auf 100 % seines Container-Elements einstellen können und es immer optimal aussieht.
Denken Sie auch an Retina-Displays. Rastergrafiken müssen derzeit doppelt so groß sein, damit Retina-Bildschirme in maximaler Qualität angezeigt werden können, was zu längeren Downloadzeiten führt.
Raster ist sehr einschränkend, während Vektor immer am besten aussieht, sogar an der Seite eines Gebäudes.
Der wichtigste Indikator ist wahrscheinlich, welche grafischen Elemente Sie für Ihre Symbole verwenden möchten? Formen und Schriftarten (Vektor) oder Teile eines Fotos (Bitmap).
Der zweite Indikator ist das Format des Endprodukts, in Ihrem Fall Bitmap.
Software für jeden Typ hat unterschiedliche Fähigkeiten (z. B. Filter) ... Wie der Benutzer Nir sagte, könnten Sie einen hybriden Ansatz verwenden ...
Im Allgemeinen können Vektorgrafiken Inhalte besser skalieren, aber wenn Sie mit einer Größe entwerfen, bei der eine Linie eine Breite von 5 Pixeln hat und dann z.
Für eine Android-App würde ich persönlich Bitmap-Grafiken verwenden. Gemäß diesem Dokument ist es am besten, mit einer Zeichenfläche von 864 x 864 zu beginnen und dann auf 96, 72, 48 und 36 Pixel zu skalieren.
PS Sie können Inkscape für Vektoren und Gimp für Bitmap-Grafiken verwenden.