Kurztipp: Wie kann man iOS-Kartenindikatoren mit Grafikstilen erstellen?

In diesem Tutorial zeige ich Ihnen, wie Sie ein iOS-Kartenindikatorsymbol erstellen, das sich perfekt für den Import in Ihr nächstes kartenbasiertes App-Design eignet. Wir werden eine einzelne Form mit mehreren Erscheinungsattributen verwenden, um einen benutzerfreundlichen und bearbeitbaren Grafikstil in Adobe Illustrator zu erstellen.

Schritt 1

Beginnen wir mit der Vorbereitung unseres Dokuments. Öffnen Sie Illustrator und drücken Sie Befehlstaste + N, um ein neues Dokument zu erstellen. Geben Sie 500 in das Feld Breite und 500 in das Feld Höhe ein und klicken Sie auf die Schaltfläche Erweitert. Wählen Sie RGB, Bildschirm (72ppi) und stellen Sie sicher, dass das Kontrollkästchen Neue Objekte an Pixelraster ausrichten deaktiviert ist, bevor Sie auf OK klicken.

Wenn Sie mit auflösungsunabhängigen Geräten arbeiten, ist Pixelperfektion ein Muss. Um gestochen scharfe Formen zu erstellen, ist es einfacher, die Rasteransicht einzurichten und das Pixel-Snapping zu aktivieren. Das tun wir jetzt. Aktivieren Sie das Raster (Ansicht > Raster anzeigen) und dann am Raster ausrichten (Ansicht > Am Raster ausrichten). Nachdem diese aktiviert sind, benötigen Sie alle 1 Pixel ein Raster. Gehen Sie einfach zu Illustrator > Einstellungen > Hilfslinien und Raster, geben Sie 1 in das Feld Rasterlinie jedes und 1 in das Feld Unterteilungen ein. Stellen Sie nun die Maßeinheit unter Illustrator > Einstellungen > Einheit > Allgemein auf Pixel ein. Nach Fertigstellung sollte Ihr Dokument wie in den folgenden Bildern aussehen.

Schritt 2

Nachdem unser Dokument eingerichtet ist, erstellen wir zunächst unsere Kreisform für das Indikatorsymbol. Da wir für eine Retina-Anzeige erstellen, müssen wir mit der doppelten Größe des Objekts arbeiten, das wir erstellen möchten. Auf unserem Retina-Gerät soll der Indikator 16 x 16 Pixel groß sein. Wenn wir ihn also mit 2 multiplizieren, erhalten wir 32 Pixel. In diesem Sinne wählen wir unser Ellipsen-Werkzeug (L) aus und klicken dann auf eine beliebige Stelle auf der Leinwand. Wenn das Dialogfeld angezeigt wird, geben Sie 32px sowohl für die Breite als auch für die Höhe ein. Dadurch wird der perfekte Kreis für unseren Indikator erstellt.

Schritt 3

Mit unserer gezeichneten Form können wir zu den lustigen Sachen kommen. Öffnen Sie das Darstellung-Bedienfeld (wenn es nicht schon zu Fenster > Darstellung geht) und beginnen Sie mit der Erstellung unseres Symbols.

Für diese Form gibt es eine Reihe von Aussehensattributen. Um das Verfolgen zu vereinfachen, arbeiten wir im Aussehensfenster von unten nach oben.

Wählen Sie zunächst im Darstellung-Bedienfeld das untere Füllelement aus. Wir erstellen einen undurchsichtigen bis transparenten radialen Farbverlauf, wie im Bild unten dargestellt, und passen dann die Deckkraft auf 50% an. Wenn das Füllelement noch ausgewählt ist, klicken Sie unten im Bedienfeld „Darstellung“ auf die Schaltfläche „Neuen Effekt hinzufügen“ (es sieht aus wie die Buchstaben "fx"). Wählen Sie dann Pfad > Versatzpfad und geben Sie die unten aufgeführten Attribute ein. Wir müssen auch das Füllelement transformieren. Wählen Sie daher erneut die Schaltfläche Neuen Effekt hinzufügen, navigieren Sie zu Verzerren und Transformieren > Transformieren und geben Sie die Attribute wie unten gezeigt ein. Wenn Sie es noch nicht erraten haben, ist dies der Schatten für das Indikatorsymbol. Wir haben einen vollständig vektoriellen Schlagschatten erstellt, der unserer Hauptform einen leichten Heiligenschein verleiht und gerade genug nach unten gedrückt wird, um Tiefe zu verleihen. Es sieht jetzt nicht nach viel aus, aber die Dinge werden sich bald zusammenreißen.

Jetzt erstellen wir ein weiteres Füllelement über unserem Gradient-Füllungselement. Standardmäßig wird unser Schwarz zum transparenten Farbverlauf hinzugefügt, aber wir müssen diesen Gradient anstelle einer flachen Farbe entfernen. Lassen Sie uns fortfahren und eine schöne leuchtend rote Farbe für dieses Layer auswählen, wie unten beschrieben. An diesem Punkt mag es seltsam erscheinen, ein so leuchtendes Rot zu verwenden, aber alles wird in einem Moment Sinn machen. Dieses unterste Layer fungiert sowohl als Grundfarbe als auch als sekundäres Lichtfleck, sobald wir mit dem nächsten Schritt fortfahren.

Lassen Sie uns noch einmal ein weiteres Füllelement erstellen. Das ist standardmäßig die zuvor ausgewählte flache rote Farbe, aber wir möchten einen schönen radialen Gradient für dieses Element. Wählen Sie daher das Gradient-Bedienfeld aus und geben Sie die unten beschriebenen Attribute ein. Eine schöne Kombination aus Lila und Weiß, die auf Multiplizieren eingestellt ist und deren Opazität auf 50% gesunken ist, fügt dem Symbol eine schöne, vollmundige, abgerundete 3D-Form hinzu. Um den 3D-Effekt noch weiter zu verstärken, zoomen wir (Z) in unser Symbol, bis wir die einzelnen Pixelquadrate auf unserer Zeichenfläche sehen. Wenn dieses Gradientselement noch ausgewählt ist, wählen Sie im Werkzeug-Fenster Ihr Gradient-Werkzeug (G) aus. Daraufhin wird die Gradientsleiste über dem Symbol angezeigt. Wir werden diese Leiste anklicken und um etwa 2,5 Pixel nach oben ziehen, wobei wir unsere Zeichenfläche als Leitfaden verwenden, um sicherzustellen, dass die Leiste so zentriert wie möglich bleibt.

Jetzt beginnen wir mit der Erstellung unserer primären Lichtquelle. Bitte denken Sie daran, dass wir von unten nach oben arbeiten, sodass die Dinge möglicherweise erst dann Sinn machen, wenn wir mit den nächsten Schritten fertig sind.

Wenn wir bedenken, dass wir versuchen, einen hellen Glanz auf unserem Symbol zu erzeugen, liegt es nahe, dass dieser Glanz ein diffuses Licht auf unser Objekt wirft, also werden wir dies jetzt schaffen. Wieder werden wir eine neue Füllebene erstellen. Passen wir diesen Verlauf so an, dass er wie unten beschrieben undurchsichtig bis transparent ist, mit einer Gesamtopazität von 60%. Wählen Sie das Gradient-Werkzeug (G) und klicken Sie mit dem weißen Lenker mit der schwarzen Mitte auf der linken Seite des Gradientsrahmens auf den Mittelpunkt des Kreises, sodass er fast halb so groß ist wie ursprünglich. Klicken Sie dann auf den mittleren Gradientsleiste und Ziehen Sie es etwas nach oben und links. Behalten Sie dieses Layer im Auge, da Sie später möglicherweise darauf zurückkommen möchten, um sie später genau mit unserer Hauptschicht für weiße Lichtflecke auszurichten.

Jetzt, da wir etwas Diffusion haben, werden wir dem Lichtfleck selbst einen Glanz verleihen. Erstellen Sie ein weiteres Fülllayer und füllen Sie sie mit einem weißen bis transparenten Gradient, wie unten beschrieben. Beachten Sie bitte, dass die Gradientsposition mit dem darunter liegenden Layer übereinstimmt. Bevor Sie diesen Gradient anpassen, klicken Sie im Farbfeldbedienfeld auf das Farbfeld "Keine", um diese Füllung zu löschen. Fügen Sie dann die neue undurchsichtige Farbe zum transparenten Gradient hinzu, damit die Position zurückgesetzt wird . Wenn der Gradient vorhanden ist, möchten wir auch dieses Fülllayer versetzen und transformieren. Klicken Sie unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx"). Wählen Sie dann Pfad > Versatzpfad und geben Sie die unten aufgeführten Attribute ein. Wir müssen auch das Füllelement transformieren. Wählen Sie daher erneut die Schaltfläche Neuen Effekt hinzufügen, navigieren Sie zu Verzerren und Transformieren > Transformieren und geben Sie die Attribute wie unten gezeigt ein.

Lassen Sie uns mit diesem Glühen aus dem Weg unseren eigentlichen Lichtfleck hinzufügen. Klicken Sie erneut auf die Schaltfläche Neue Füllung hinzufügen und füllen Sie sie mit einer flachen weißen Farbe. Wählen Sie dann die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") unten im Darstellung-Bedienfeld , wählen Sie dann Pfad > Versatzpfad und geben Sie die angegebenen Attribute ein unten. Wir müssen auch das Füllelement transformieren. Wählen Sie daher erneut die Schaltfläche Neuen Effekt hinzufügen, navigieren Sie zu Verzerren und Transformieren > Transformieren und geben Sie die Attribute wie unten gezeigt ein.

Zu diesem Zeitpunkt können Sie zur roten Gradientendiffusionslayer zurückkehren, die wir einige Schritte zurück gemacht haben, und den Mittelpunkt des Gradienten so einstellen, dass er direkt unter der weißen Markierung liegt.

Jetzt passen wir den schwarzen Rand an, der uns die ganze Zeit angestarrt hat. Wir setzen es mit einem Strichgewicht von 2px und der unten angegebenen Farbe nach außen.

Die Anzeige selbst ist jetzt vollständig, aber gehen wir noch einen Schritt weiter und erstellen auch den GPS-Radiusring. Klicken Sie erneut auf die Schaltfläche Neue Füllung hinzufügen, füllen Sie sie wie unten beschrieben mit einem roten bis transparenten Gradient und senken Sie die Opazität auf 25%. Wählen Sie dann die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") unten im Darstellung-Bedienfeld aus. Wählen Sie dann Pfad > Versatzpfad und geben Sie die unten aufgeführten Attribute ein.

Für das letzte Stück des Symbols fügen wir den Rand um den GPS-Radiusring hinzu. Klicken Sie unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Strich hinzufügen und wählen Sie ein 2 Pixel großes rotes Strichgewicht auf der Innenseite der Form aus. Versetzen wir nun den Pfad, indem Sie unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") klicken. Wählen Sie dann Pfad > Pfad versetzen und geben Sie die unten aufgeführten Attribute ein. Und schließlich fügen wir diesem Strich ein äußeres Leuchten hinzu. Klicken Sie dazu unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") und wählen Sie dann Stilisieren > Äußeres Leuchten

Zu diesem Zeitpunkt können Sie bei gedrückter Umschalttaste + Klicken Sie auf die beiden GPS-Radiusringelemente, um beide im Darstellung-Bedienfeld auszuwählen, und ziehen Sie sie dann an den unteren Rand dieser Liste, sodass das tatsächliche Anzeigesymbol oben angezeigt wird.

Schritt 4

Wenn der Indikator nicht im Weg ist, wird nun das Namens-Popup erstellt. Wählen Sie das Werkzeug Abgerundetes Rechteck aus, klicken Sie auf die Seite und geben Sie die im Bild unten gezeigten Informationen ein. Denken Sie daran, dass die Breite alles sein kann, was Sie möchten, solange der Name, den Sie später wählen, passt. Für den Zweck dieses Tutorials verwenden wir diese festgelegte Breite.

Schritt 5

Wir müssen auch noch einmal mit dem abgerundeten Rechteck klicken, um den Pfeil unten zu erstellen. Dafür muss es perfekt quadratisch sein und wir werden den Radius wie unten angegeben verringern. Wenn die Form gemacht ist, drehen wir sie um 45 Grad. Wir müssen auch noch einmal mit dem abgerundeten Rechteck klicken, um den Pfeil unten zu erstellen. Dafür muss es perfekt quadratisch sein und wir werden den Radius wie unten angegeben verringern. Wenn die Form gemacht ist, drehen wir sie um 45 Grad.

Schritt 6

Jetzt richten wir diese Objekte so aus, dass sie miteinander zentriert sind. Klicken Sie mit dem Auswahlwerkzeug (V) in der Hand auf beide Objekte, damit beide gleichzeitig ausgewählt werden. Wir navigieren jetzt zum Ausrichtungsbedienfeld (Fenster > Ausrichten) und wählen die zweite Option unter der Überschrift Objekte ausrichten mit dem Namen Horizontal Align Center. Klicken Sie dann auf die letzte Option unter derselben Überschrift namens Vertical Align Bottom.

Klicken Sie bei aktiviertem Auswahlwerkzeug (V) auf die kleinere Rautenform, damit nur noch das Objekt ausgewählt wird. Halten Sie die Umschalttaste auf der Tastatur gedrückt und drücken Sie einmal den Abwärtspfeil auf Ihrer Tastatur. Lassen Sie die Umschalttaste los und drücken Sie den Abwärtspfeil auf Ihrer Tastatur noch dreimal, um den Diamanten in die perfekte Position zu bringen.

Klicken Sie bei gedrückter Umschalttaste auf die größere abgerundete Form, damit beide Objekte erneut ausgewählt werden. Navigieren Sie zum Pathfinder-Bedienfeld (Fenster > Pathfinder) und klicken Sie dann auf die erste Option unter der Überschrift Formmodi mit dem Titel Vereinigen. Beide Objekte sollten nun zu einem verbunden werden.

Schritt 7

Mit unserem Popup. Die jetzt erstellte Form wird wir bearbeiten. Navigieren Sie bei ausgewählter Form zum Darstellung-Bedienfeld (Fenster > Darstellung) und wählen Sie den Strich aus. Wir behalten dies als grundlegendes Schwarz bei, aber lassen Sie es mit einem Strichgewicht von 2 Pixel außerhalb der Form einstellen.

Wählen Sie als Nächstes die Option Füllung aus, und wir füllen diese mit einem halbtransparenten 90-Grad-Gradient in Graustufen, wie unten beschrieben.

Zuletzt fügen wir diesem Objekt einen Schlagschatteneffekt hinzu. Klicken Sie unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx"). Wählen Sie dann Stilisieren > Schlagschatten und geben Sie die im folgenden Screenshot beschriebenen Optionen ein.

Schritt 8

Lassen Sie uns diesem Objekt oben einen schönen Lichtfleck geben. Wenn das Objekt ausgewählt ist, kopieren wir (Befehl + C) und fügen dann vorne ein (Befehl + F). Lassen Sie uns schnell auf den Standardstil zurücksetzen, indem Sie "D" auf Ihrer Tastatur drücken. Dadurch werden die zuvor hinzugefügten Effekte entfernt und die Form mit einem schwarzen Strich auf das Grundweiß zurückgesetzt. Für diesen Lichtfleck benötigen wir keinen Strich. Navigieren Sie daher zu Ihrem Werkzeugbedienfeld und klicken Sie auf die Strichfülloption unten, um sie auszuwählen. Klicken Sie dann auf das weiße Quadrat mit der diagonalen roten Linie, um den Strich vollständig zu entfernen. Wenn der Strich weg ist, kopieren wir ihn (Befehl + C) und fügen ihn erneut ein (Befehl + F), sodass wir jetzt zwei einfache weiße Formen übereinander haben. Drücken Sie dann, während die oberste Form ausgewählt und das Auswahlwerkzeug (V) aktiviert ist, zweimal auf den Abwärtspfeil auf Ihrer Tastatur, um das Objekt nach unten zu bewegen. Klicken Sie nach dem Anstoßen auf das einfache Objekt dahinter, um beide gleichzeitig auszuwählen. Während beide Objekte ausgewählt sind, navigieren Sie zum Pathfinder-Bedienfeld (Fenster > Pathfinder) und wählen Sie die zweite Option unter der Überschrift "Formmodi" mit dem Titel "Minus Front". Sie sollten jetzt ganz oben ein kleines Stückchen der ursprünglichen Form haben. Wenn dieses Faserband ausgewählt ist, verringern wir die Opazität im Darstellung-Bedienfeld (Fenster > Darstellung) auf 25%.

Schritt 9

Jetzt erstellen wir den Text für dieses Popup. Wählen Sie im Werkzeuge-Bedienfeld das Textwerkzeug (T) aus, klicken Sie auf die Zeichenfläche und geben Sie den gewünschten Namen ein. Klicken Sie im Bedienfeld Extras auf die Füllfarbe und ändern Sie sie in Weiß. Navigieren Sie nun zum Zeichenbedienfeld (Typ > Typ > Zeichen) und passen Sie die Größe und den Schrifttyp wie unten beschrieben an.

Navigieren Sie bei ausgewähltem Text zum Darstellung-Bedienfeld (Fenster > Darstellung) und klicken Sie unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben „fx“). Wählen Sie dann Stilisieren > Schlagschatten und geben Sie die unter beschriebenen Optionen ein der Screenshot unten. Wir können den Text auch mit dem Auswahlwerkzeug (V) an die gewünschte Stelle in der Blasenform ziehen. Da Smart Guides und Snap to Grid aktiviert sind, sollte dies leicht zu finden sein.

Schritt 10

Wenn der Text nicht im Weg ist, erstellen wir das Pfeilsymbol. Wählen Sie das Werkzeug Abgerundetes Rechteck aus, klicken Sie auf die Zeichenfläche und schließen Sie diese Optionen an.

Wählen Sie nun das Auswahlwerkzeug (V) und klicken Sie auf das neu erstellte Rechteck. Wenn das Objekt ausgewählt ist, kopieren wir (Befehl + C) und fügen dann vorne ein (Befehl + F). Drehen wir nun dieses neue Objekt um 90 Grad. Jetzt richten wir diese Objekte aus, um eine rückwärts gerichtete L-Form zu bilden. Klicken Sie mit dem Auswahlwerkzeug (V) in der Hand auf beide Objekte, damit beide gleichzeitig ausgewählt werden. Wir navigieren nun zum Ausrichten-Bedienfeld (Fenster > Ausrichten) und wählen die dritte Option unter der Überschrift Objekte ausrichten mit der Bezeichnung Horizontal rechts ausrichten. Klicken Sie dann auf die letzte Option unter derselben Überschrift namens Vertical Align Bottom.

Wenn beide Objekte noch ausgewählt sind, navigieren Sie zum Pathfinder-Bedienfeld (Fenster > Pathfinder) und klicken Sie auf die erste Option unter der Überschrift Formmodi mit dem Titel Vereinigen. Beide Objekte sollten nun zu einem verbunden werden. Wenn das Auswahlwerkzeug (V) noch ausgewählt ist, drehen wir die Form um 45 Grad. Wählen Sie dazu das Auswahlwerkzeug (V) und positionieren Sie die Maus in der Nähe einer Ecke des Quadrats. Ziehen Sie bei gedrückter Umschalttaste auf Ihrer Tastatur eine Ecke rechts vom Begrenzungsrahmen nach oben, bis sie wie ein Pfeil aussieht, der auf das zeigt richtig.

Navigieren Sie mit dem ausgewählten Pfeil zum Darstellung-Bedienfeld (Fenster > Darstellung) und klicken Sie unten im Darstellung-Bedienfeld auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben „fx“). Wählen Sie dann Stilisieren > Schlagschatten und geben Sie die unter beschriebenen Optionen ein der Screenshot unten. Wir können auch das Auswahlwerkzeug (V) verwenden, um die Pfeilform an die gewünschte Stelle in der Blasenform zu ziehen.

Schritt 11

Mit dem Popup. Abschnitt abgeschlossen Aktivieren Sie das Auswahlwerkzeug (V) und ziehen Sie eine Auswahl über das gesamte Popup. Objekte, um sie alle gleichzeitig auszuwählen. Gehen Sie nun im Menübereich zu Objekt > Gruppieren (Befehl + G), um diese Objekte zu gruppieren. Wir können diese Gruppe dann über das Indikatorsymbol ziehen und zentrieren, sodass es wie im folgenden Screenshot aussieht. Und damit sind wir fertig!

Schlussfolgerung

Ich hoffe, ich konnte Ihnen zeigen, wie Sie mit dem Darstellung-Bedienfeld komplexe Effekte erstellen können, ohne dass zusätzliche Layers erforderlich sind. Fühlen Sie sich frei, mit verschiedenen Farben zu spielen, wie Sie es für richtig halten. Bei so vielen auflösungsunabhängigen Geräten, die heutzutage im Umlauf sind, ist es wirklich großartig, unendlich skalierbare Objekte verwenden zu können, die in Ihren App-Designs verwendet und wiederverwendet werden können.