Das Erstellen von Produktsymbolen ist nicht so schwierig, wie es auf den ersten Blick erscheinen mag. Erfahren Sie mehr darüber, wie Sie Ihr erstes Android-App-Symbol von Grund auf entwerfen!
Unabhängig davon, über welchen Marktplatz oder Dienst eine App vertrieben wird, ist das App-Symbol das Erste, was einem potenziellen Benutzer auffällt. Der erste Eindruck ist von größter Bedeutung, wenn es darum geht, neue Benutzer zu gewinnen. Deshalb sind Symbole Schlüsselbestandteile jeder Anwendung. Und unabhängig von der Absicht der App sollte die Erstellung eines schönen Anwendungssymbols ein wichtiger Teil der Entwicklungsphase jeder App sein. Obwohl viele Entwickler technischer Anwendungen die Grafik engagierten Designern überlassen, ist das Verständnis der Die Grundlagen des Designs zu erlernen und sie anzuwenden, ist etwas, das jeder tun kann, wenn er ein Händchen für Experimente und Experimente hat Analyse. App-Symbole sind keine Ausnahme!
In diesem Leitfaden wird die Erstellung eines adaptiven Symbols für eine Beispiel-Android-App mithilfe von Open-Source-Software beschrieben. Auch wenn das Endergebnis möglicherweise nicht das von Ihnen benötigte Format aufweist, gelten viele der hier besprochenen Designtipps für mehrere Plattformen.
Nach der Veröffentlichung von „adaptiven Symbolen“ mit Android Oreo kann ein App-Symbol aus drei grundlegenden Ebenen bestehen: einer undurchsichtige Hintergrundebene, eine Vordergrundebene mit Transparenzunterstützung, und ein Maske das die Form des Symbols definiert. Alle diese Ebenen haben eine Größe von 108 x 108 dp, wobei für den Benutzer nur die inneren 72 x 72 dp sichtbar sind; Der andere Bereich, der von der Maske oben abgeschnitten wird, wird für Spezialeffekte innerhalb der Benutzeroberfläche verwendet, um dem Symbol ein dynamisches Aussehen zu verleihen. Für die Uneingeweihten, dp oder Anzeigeunabhängiges Pixel steht als Maßeinheit für die gesamte Android-Benutzeroberfläche und ist definiert als gleich der Größe von ein Pixel auf einem 160-Punkte-pro-Zoll-Display.)
Nick Butcher von Google spricht von einem 66-dp-Kreis In der Mitte des Symbols befindet sich ein Bereich, den keine Maske abschneiden kann und der als „sichere Zone“ bezeichnet wird. Hier werden später die Hauptelemente unseres Icon-Designs platziert, wenn wir mit dem eigentlichen Design beginnen. Alles, was über diesen 33-dp-Radius hinausgeht, ist im Symbol möglicherweise nicht sichtbar, solange eine Formmaske aktiviert ist.
Da Symbole aufgrund der Skalierung der Benutzeroberfläche besser als Vektorbilder geeignet sind, benötigen wir einen Vektorgrafik-Editor, um unser Symbol zu erstellen. Inkscape ist Open Source und eine großartige Alternative zu teurerer Software, daher wird es für die Zwecke dieses Tutorials unsere Wahl sein. Ich habe auch eine Projektdatei entworfen hier verfügbar Darin sind die sichere Zone und die Google-eigene Design-Schlüssellinie markiert sowie eine raffinierte Ebenenmaske, mit der wir eine Vorschau der Form des Symbols anzeigen können.
Mit der in Inkscape geöffneten Projektdatei und dem Füllen und streichen (Umschalt+Strg+F), PNG-Bild exportieren (Umschalt+Strg+E) und Lagen (Umschalt+Strg+L) Panels öffnen sich, wir können loslegen. Im Bedienfeld „Ebenen“ befindet sich der Kern des Projekts Vordergrund Und Hintergrund Schichten, die ihre Titelkomponenten beherbergen sollen, und Richtlinien Und Maske sollen als Referenz ein- und ausgeschaltet werden (durch Klicken auf das kleine Augensymbol daneben).
Ein Symbol ist ein Ausdruck der Identität einer App. Daher muss es sowohl den Charakter der App als auch plattformspezifische Designrichtlinien wie die von Android berücksichtigen Materialdesignsprache zu bieten hat. Nehmen wir zu Demonstrationszwecken an, dass wir an einer Wetter-App arbeiten, die Materialelemente verwendet. Wir könnten das klassische Sonne-und-Wolken-Motiv verwenden, um einen Benutzer über den Zweck der App zu informieren und ein wenig zu sagen Verfeinern Sie dieses grundlegende Design mit Schlagschatten und Geometrie, damit es sich gut in die Android-Umgebung einfügt.
Hintergrund
Beginnen wir mit der Einrichtung des Hintergrunds, der aus einem blauen Himmel und einer gelben Sonne in der Mitte besteht. Drehen Maske Unsichtbar, ich wähle das aus und mache es sichtbar Hintergrundebene, füllen Sie die gesamte Leinwand mit dem Erstellen Sie Rechtecke und Quadrate Werkzeug (F4) und legen Sie die Füllfarbe des Rechtecks fest Füllen und streichen bis 64B5F6FF (hellblau) gemäß der Materialfarbpalette. Ich wähle dann die aus Erstellen Sie Kreise, Ellipsen und Bögen (F5) und halten Sie die Umschalt- und Strg-Taste gedrückt, zeichnen Sie einen Kreis von der Mitte der Schlüssellinie bis zum zweitgrößten Kreis und stellen Sie seine Farbe auf FFEE58FF ein, was uns eine warme kleine Sonne verleiht. Es ist immer gut, sich bei jeder Art von Design an die grundlegende Geometrie zu halten, und insbesondere die Designsprache von Android fördert die Einfachheit. Um den Materialrichtlinien zu entsprechen, gebe ich der Sonne auch einen dezenten Schlagschatten Filter → Schatten und Lichter → Schlagschatten.
Vordergrund
Kommt zu Vordergrund, Ich zeichne eine Gruppe von Wolken um die Sonne, indem ich Kreise aus den Umfängen anderer Kreise zeichne und ihnen allen die Füllfarbe EEEEEEFF gebe. Anschließend gruppiere ich die Kreise entsprechend, indem ich mit der rechten Maustaste auf mehrere Objekte klicke und sie auswähle Gruppe, und führe den Schlagschattengenerator auf die beiden endgültigen Formen aus, die ich am Ende erhalte. Drehen Richtlinien unsichtbar und umschaltbar Vordergrund Und Hintergrund Alternativ sind die einzelnen Ebenen des Symbols unserer Wetter-App zu sehen. Wenn das Symbol der App jemals über einen Startbildschirm gezogen wird, fallen die Wolken gegen eine stillstehende Sonne!
Ergebnis
Maske kann jetzt sichtbar gemacht und optimiert werden Bearbeiten Sie Pfade nach Knoten (F2), um verschiedene Formmasken zu simulieren. Außerdem können die beiden Ebenen separat exportiert werden PNG-Bild exportieren Panel zur Nutzung in Android Studio, und zusammen für a Google Play-Symbol.
Beim Erstellen eines Produktsymbols empfiehlt es sich immer, den Zweck einer Anwendung zu erfassen, ihn in seine abstrakteste visuelle Form zu bringen und diese mithilfe einfacher Geometrie darzustellen. Je einfacher eine Komponente im Design ist, desto besser und zuverlässiger funktioniert sie in der Regel, und das gilt auch im Grafikdesign. Für die meisten Zwecke ist eine Objektform im Vordergrund und eine Volltonfarbe oder ein Muster im Hintergrund (bzw umgekehrt) funktioniert einwandfrei, aber wie in unserem Beispielfall kann eine andere Objektschicht aus Filz verwendet werden notwendig; Zu viel Stapelung oder die Verwendung von Schlagschatten erschweren nur das Design des Symbols.
Weitere Informationen zum Icon-Design finden Sie unter Materialschnittstellen auf der offiziellen Seite Material-Website, und holen Sie sich kostenlose Systemsymbole zur Verwendung im Symboldesign von die gleiche Website.