Share
In diesem Tutorial zeige ich Ihnen, wie Sie ein iOS-Symbol für den Kartenindikator erstellen, das sich perfekt für den Import in Ihr nächstes auf Karten basierendes App-Design eignet. Wir verwenden eine einzelne Form mit mehreren Aussehensattributen, um in Adobe Illustrator einen einfach zu verwendenden und zu bearbeitenden Grafikstil zu erstellen.
Beginnen wir mit der Vorbereitung unseres Dokuments. Öffnen Sie Illustrator und drücken Sie die Befehlstaste + N, um ein neues Dokument zu erstellen. Geben Sie 500 in das Breitenfeld und 500 in das Höhenfeld ein, und klicken Sie auf die Schaltfläche Erweitert. Wählen Sie RGB, Bildschirm (72ppi) und vergewissern Sie sich, dass das Kontrollkästchen Neue Objekte am Pixelraster ausrichten deaktiviert ist, bevor Sie auf OK klicken.
Wenn Sie mit auflösungsunabhängigen Geräten arbeiten, ist die Pixel-Perfektion ein Muss. Um gestochen scharfe Formen zu erstellen, wäre es einfacher, die Rasteransicht einzurichten und das Pixel-Snapping zu aktivieren. Wir machen das jetzt. Lassen Sie uns das Raster aktivieren (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> Voreinstellungen> Hilfslinien & Raster, geben Sie jeweils 1 in das Feld Rasterlinie und 1 in das Feld Unterteilungen ein. Jetzt setzen wir die Maßeinheit in Illustrator> Voreinstellungen> Einheit> Allgemein auf Pixel. Sobald das Dokument fertiggestellt ist, sollte es wie die folgenden Bilder aussehen.
Nun, da unser Dokument eingerichtet ist, erstellen wir zunächst unsere Kreisform, die für das Indikatorsymbol verwendet wird. Da wir für ein Retina-Display erstellen, müssen wir mit der doppelten Größe des Objekts, das wir erstellen möchten, arbeiten. Auf unserem Retina-Gerät wollen wir, dass der Indikator 16px mal 16px erscheint. Wenn wir das also mit 2 multiplizieren, erreichen wir 32px. Wählen Sie dazu unser Ellipse-Werkzeug (L) und klicken Sie irgendwo auf die Leinwand. Wenn das Dialogfeld angezeigt wird, geben Sie 32px sowohl für die Breite als auch für die Höhe ein. Dies schafft den perfekten Kreis, der für unseren Indikator benötigt wird.
Spitze: Drücken Sie auf Ihrer Tastatur den Buchstaben "D", um die Farben für "Fill" und "Stroke" auf die Standardeinstellungen zurückzusetzen.
Mit unserer gezeichneten Form können wir zu den lustigen Sachen gelangen. Öffnen Sie das Fenster "Erscheinungsbild" (falls nicht bereits "Fenster"> "Erscheinungsbild"), und beginnen Sie mit der Erstellung unseres Symbols.
Es gibt eine Reihe von Aussehensattributen für diese Form. Um das Nachvollziehen zu erleichtern, werden wir im Erscheinungsbildbedienfeld von unten nach oben arbeiten.
Um zu beginnen, wählen Sie im Aussehenbedienfeld das untere Ausfüllelement aus. Wir erstellen einen transparenten bis transparenten radialen Verlauf, wie im Bild unten dargestellt, und passen die Opazität auf 50% an. Wenn das Füllelement immer noch ausgewählt ist, klicken Sie auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") im unteren Bereich des Erscheinungsfensters. Wählen Sie dann Pfad> Versatzpfad aus und geben Sie die unten angegebenen Attribute ein. Wir müssen auch das Füllelement umwandeln, klicken Sie dann erneut auf die Schaltfläche "Neuen Effekt hinzufügen" und navigieren Sie zu Verzerrung und Transformation> Transformation. Geben Sie die Attribute wie unten gezeigt ein. Wenn Sie noch nicht ahnen, wird dies der Schatten für das Indikatorsymbol sein. Wir haben also einen vollständig vektoriellen Schatten erzeugt, der unserer Hauptform einen leichten Halo verleiht und der gerade genug nach unten gedrückt wird, um Tiefe zu vermitteln. Es sieht jetzt nicht nach viel aus, aber die Dinge beginnen sich bald zusammenzureißen.
Lassen Sie uns nun ein weiteres Füllelement über dem Verlaufselement "Füllelement" erstellen. In der Standardeinstellung wird unser Schwarz zu einem transparenten Farbverlauf hinzugefügt, aber wir müssen diesen Farbverlauf anstelle einer flachen Farbe entfernen. Lassen Sie uns fortfahren und wählen Sie eine schöne helle rote Farbe für diese Ebene aus (siehe unten). An diesem Punkt mag es merkwürdig erscheinen, solch ein leuchtendes Rot zu verwenden, aber es wird alles in einem Moment sinnvoll sein. Diese unterste Ebene wird sowohl als Grundfarbe als auch als sekundäres Highlight verwendet, wenn wir zum nächsten Schritt übergehen.
Lassen Sie uns noch einmal ein weiteres Füllelement erstellen. Standardmäßig wird die flache rote Farbe verwendet, die wir zuvor ausgewählt haben. Wir möchten jedoch einen schönen radialen Verlauf für dieses Element. Wählen Sie also das Verlaufsbedienfeld aus und geben Sie die unten beschriebenen Attribute ein. Eine schöne violett-weiße Kombination, die auf "Multiplizieren" und die Deckkraft auf 50% eingestellt ist, fügt dem Symbol eine schöne, abgerundete 3D-Form hinzu. Um den 3D-Effekt noch weiter zu verstärken, zoomen Sie (Z) in unser Symbol, bis wir die einzelnen Pixelquadrate auf unserer Zeichenfläche sehen. Wenn dieses Verlaufselement noch ausgewählt ist, wählen Sie im Werkzeugbedienfeld das Verlaufswerkzeug (G) aus. Daraufhin wird die Verlaufsleiste über dem Symbol angezeigt. Klicken Sie auf diese Leiste und ziehen Sie sie um etwa 2,5 Pixel nach oben. Verwenden Sie dazu unsere Zeichenfläche, 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, so dass die Dinge nicht sinnvoll sind, bis wir mit den nächsten Schritten fertig sind.
Wenn wir daran denken, dass wir versuchen, einen hellen Glanz auf unserem Symbol zu erzeugen, ist es naheliegend, dass dieser Schein etwas diffuses Licht auf unser Objekt wirft, so dass wir dies jetzt schaffen werden. Wieder erstellen wir eine neue Füllebene. Lassen Sie uns diesen Farbverlauf so anpassen, dass er wie unten beschrieben mit einer Gesamtdeckkraft von 60% undurchsichtig bis transparent ist. Wählen Sie das Verlaufswerkzeug (G) und verwenden Sie den weißen Griff mit der schwarzen Mitte auf der linken Seite des Verlaufsrahmens. Klicken Sie auf den Griff, und ziehen Sie ihn in Richtung Mittelpunkt des Kreises, so dass er fast die Hälfte der ursprünglichen Größe hat. Klicken Sie dann auf den mittleren Verlaufsbalken und ziehe es ein wenig nach oben und rüber. Behalten Sie ein Auge auf dieser Ebene, da Sie später vielleicht darauf zurückgreifen möchten, um sie genau mit unserer weißen Hauptebenenebene auszurichten.
Nun, da wir etwas Diffusion haben, wird das Highlight selbst beleuchtet. Erstellen Sie eine weitere Füllebene und füllen Sie sie wie unten beschrieben mit einem weißen bis transparenten Farbverlauf. Bitte beachten Sie, dass der Verlauf des Farbverlaufs mit der darunter liegenden Ebene übereinstimmt. Bevor Sie diesen Farbverlauf anpassen, klicken Sie im Farbfeldbedienfeld auf das Feld "Keine", um diese Füllung zu löschen. Fügen Sie dann den neuen undurchsichtigen Farbverlauf hinzu, damit die Position zurückgesetzt wird . Wenn der Farbverlauf vorhanden ist, möchten wir diese Füllebene auch versetzen und transformieren. Klicken Sie unten im Fenster "Darstellung" auf die Schaltfläche "Neuen Effekt hinzufügen" (es sieht aus wie die Buchstaben "fx"), wählen Sie dann Pfad> Versatzpfad aus und geben Sie die unten angegebenen Attribute ein. Wir müssen auch das Füllelement umwandeln, klicken Sie dann erneut auf die Schaltfläche "Neuen Effekt hinzufügen" und navigieren Sie zu Verzerrung und Transformation> Transformation. Geben Sie die Attribute wie unten gezeigt ein.
Mit diesem Licht aus dem Weg möchten wir unser aktuelles Highlight 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 aus. Wählen Sie dann unten im Bedienfeld "Darstellung" die Schaltfläche "Neuen Effekt hinzufügen" (es sieht aus wie die Buchstaben "fx"), wählen Sie dann Pfad> Versatzpfad aus und geben Sie die umrissenen Attribute ein unten. Wir müssen auch das Füllelement umwandeln, klicken Sie dann erneut auf die Schaltfläche "Neuen Effekt hinzufügen" und navigieren Sie zu Verzerrung und Transformation> Transformation. Geben Sie die Attribute wie unten gezeigt ein.
Zu diesem Zeitpunkt können Sie zur roten Gradientendiffusionsschicht zurückkehren, die wir einige Schritte zurück gemacht haben, und den Mittelpunkt des Farbverlaufs 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 Stroke-Gewicht von 2px und der unten angegebenen Farbe nach außen.
Der Indikator 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 Farbverlauf und setzen Sie die Deckkraft auf 25%. Wählen Sie dann die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") im unteren Bereich des Erscheinungsfensters. Wählen Sie dann Pfad> Versatzpfad aus und geben Sie die unten angegebenen Attribute ein.
Für den letzten Teil des Symbols fügen wir den Rand um den GPS-Radiusring ein. Klicken Sie auf die Schaltfläche „Neuen Strich hinzufügen“ am unteren Rand des Bedienfelds „Erscheinungsbild“ und wählen Sie ein rotes Strichgewicht von 2px auf der Innenseite der Form. Lassen Sie uns nun den Pfad verschieben, indem Sie auf die Schaltfläche Neuen Effekt hinzufügen klicken (es sieht aus wie die Buchstaben "fx"), und wählen Sie Pfad> Versatzpfad aus. Geben Sie anschließend die unten angegebenen Attribute ein. Und schließlich fügen wir diesem Schlaganfall ein äußeres Glühen hinzu. Klicken Sie dazu auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") im unteren Bereich des Bedienfelds "Erscheinungsbild" und wählen Sie "Stilisieren"> "Äußeres Glühen"
An dieser Stelle können Sie die Umschalttaste + Klicken Sie auf die beiden Elemente des GPS-Radiusrings, um beide im Erscheinungsbildfenster auszuwählen, und ziehen Sie sie an das Ende der Liste, sodass das eigentliche Indikatorsymbol oben angezeigt wird.
Wenn der Indikator aus dem Weg ist, erstellen wir jetzt den Namen. Wählen Sie das abgerundete Rechteck aus, klicken Sie auf die Seite, und geben Sie die Informationen ein, die im Bild unten angegeben sind. Beachten Sie, dass die Breite beliebig sein kann, solange der Name, den Sie später auswählen, passt, aber für die Zwecke dieses Lernprogramms werden wir diese festgelegte Breite verwenden.
Außerdem müssen Sie noch einmal mit dem Werkzeug "Abgerundetes Rechteck" klicken, um den Pfeil unten zu erstellen. Dafür brauchen wir es, um perfekt quadratisch zu sein, und wir werden den Radius wie unten angegeben fallen lassen. Wenn die Form gemacht ist, drehen wir sie um 45 Grad. Wählen Sie dazu das Auswahlwerkzeug (V), positionieren Sie Ihre Maus in der Nähe einer Ecke des Quadrats und ziehen Sie die Form bei gedrückter Umschalttaste in eine beliebige Richtung, bis sie wie in der Abbildung unten wie eine Raute aussieht.
Jetzt richten wir diese Objekte so aus, dass sie miteinander zentriert sind. Klicken Sie mit dem Auswahl-Werkzeug (V) in der Handschaltung auf beide Objekte, damit beide gleichzeitig ausgewählt werden. Wir navigieren nun zum Ausrichtungsfenster (Fenster> Ausrichten) und wählen die zweite Option unter der Überschrift "Objekte ausrichten" namens "Horizontales Ausrichtungszentrum" aus. Klicken Sie dann auf die letzte Option unter derselben Kopfzeile mit der Bezeichnung Vertical Align Bottom.
Klicken Sie bei aktiviertem Auswahlwerkzeug (V) auf die kleinere Rautenform, sodass es das einzige ausgewählte Objekt ist. Halten Sie die Umschalttaste auf der Tastatur gedrückt, und drücken Sie einmal den Abwärtspfeil auf der Tastatur. Lassen Sie die Umschalttaste los und drücken Sie noch dreimal den Abwärtspfeil auf Ihrer Tastatur, um die Raute in die perfekte Position zu bringen.
Klicken Sie bei gedrückter Umschalttaste auf die größere abgerundete Form, sodass beide Objekte erneut ausgewählt werden, und navigieren Sie zum Pathfinder-Bedienfeld ("Fenster"> "Pathfinder"). Klicken Sie dann auf die erste Option unter der Überschrift "Formmodi" mit dem Titel "Unite". Beide Objekte sollten jetzt zu einem zusammengefügt werden.
Mit unserem Pop Up. Jetzt erstellen Shape arbeiten wir daran, es zu gestalten. Wenn die Form ausgewählt ist, navigieren Sie zum Bereich Aussehen (Fenster> Aussehen) und wählen Sie den Strich aus. Wir behalten dies als grundlegendes Schwarz bei, aber stellen Sie es mit einem Stroke-Gewicht von 2px außerhalb der Form ein.
Wählen Sie als Nächstes die Füllung aus, und wir füllen diese mit einem halbtransparenten Graustufen-90-Grad-Verlauf (siehe unten).
Zuletzt fügen wir diesem Objekt einen Schatteneffekt hinzu. Klicken Sie auf die Schaltfläche Neuen Effekt hinzufügen (es sieht aus wie die Buchstaben "fx") am unteren Rand des Bedienfelds "Erscheinungsbild". Wählen Sie dann "Stilisieren"> "Schlagschatten" und geben Sie die Optionen ein, die in der nachstehenden Abbildung beschrieben sind.
Lassen Sie uns dieses Objekt an der Spitze ein schönes Highlight geben. Wenn das Objekt ausgewählt ist, kopieren wir (Befehl + C) und dann Einfügen in Front (Befehl + F). Lassen Sie uns schnell auf den Standardstil zurücksetzen, indem Sie auf Ihrer Tastatur "D" drücken. Dadurch werden die zuvor hinzugefügten Effekte entfernt und die Form wird mit einem schwarzen Strich wieder in Basisweiß angezeigt. Um dieses Highlight hervorzuheben, benötigen wir keinen Strich. Navigieren Sie daher zu Ihrem Werkzeugfenster und klicken Sie auf die Option zum Ausfüllen des Strichs unten. 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 (Befehlstaste + C) und dann wieder Einfügen vorn (Befehlstaste + F), so dass wir jetzt zwei einfache weiße Formen übereinander haben. Wenn die oberste Form ausgewählt und das Auswahlwerkzeug (V) aktiviert ist, drücken Sie zweimal auf den Abwärtspfeil auf Ihrer Tastatur, um das Objekt nach unten zu verschieben. Klicken Sie nach dem Schieben auf das einfache Objekt dahinter, um beide gleichzeitig auszuwählen. Wenn beide Objekte ausgewählt sind, navigieren Sie zum Pathfinder-Fenster (Fenster> Pathfinder) und wählen Sie die zweite Option unter der Überschrift "Shape-Modi" mit der Bezeichnung "Minus Front" aus. Sie sollten jetzt ganz oben ein kleines Stück der ursprünglichen Form belassen. Wenn dieser Splitter ausgewählt ist, verringern wir die Deckkraft im Erscheinungsbildfenster auf 25% (Fenster> Erscheinungsbild)..
Jetzt erstellen wir den Text für dieses Popup. Wählen Sie im Werkzeugfenster das Textwerkzeug (T) und klicken Sie auf die Zeichenfläche, und geben Sie den gewünschten Namen ein. Klicken Sie im Bedienfeld Werkzeuge auf die Füllfarbe und ändern Sie sie in Weiß. Navigieren Sie nun zum Zeichenfenster (Typ> Typ> Zeichen) und passen Sie die Größe und den Schrifttyp wie unten beschrieben an.
Wenn der Text ausgewählt ist, navigieren Sie zum Bedienfeld „Erscheinungsbild“ („Fenster“> „Erscheinungsbild“) und klicken Sie auf die Schaltfläche „Neuen Effekt hinzufügen“ (es sieht aus wie die Buchstaben „fx“) unten im Anzeigefeld „Erscheinungsbild“. Wählen Sie dann „Stilisieren“> „Schlagschatten“ und geben Sie die Optionen ein der Screenshot unten. Wir können das Auswahlwerkzeug (V) auch verwenden, um den Text an die gewünschte Stelle in der Blasenform zu ziehen. Da Smart Guides und Ausrichten am Gitter aktiviert sind, sollte dies leicht zu finden sein.
Wenn der Text nicht im Weg ist, erstellen wir das Pfeilsymbol. Wählen Sie das abgerundete Rechteck aus, klicken Sie auf die Zeichenfläche und fügen Sie diese Optionen ein.
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 dann Einfügen in Front (Befehl + F). Lassen Sie uns nun dieses neue Objekt um 90 Grad drehen. Jetzt richten wir diese Objekte aus, um eine L-Form nach hinten zu bilden. Klicken Sie mit dem Auswahl-Werkzeug (V) in der Handschaltung auf beide Objekte, damit beide gleichzeitig ausgewählt werden. Wir navigieren nun zum Ausrichtungsfenster (Fenster> Ausrichten) und wählen die dritte Option unter der Überschrift "Objekte ausrichten" mit der Bezeichnung "Horizontal ausrichten" aus. Klicken Sie dann auf die letzte Option unter derselben Kopfzeile mit der Bezeichnung Vertical Align Bottom.
Wenn beide Objekte noch ausgewählt sind, navigieren Sie zum Pathfinder-Bedienfeld ("Fenster"> "Pathfinder") und klicken Sie dann auf die erste Option unter der Überschrift "Formmodi" mit dem Titel "Unite". Beide Objekte sollten jetzt zu einem zusammengefügt werden. Wenn das Auswahlwerkzeug (V) noch ausgewählt ist, drehen wir die Form um 45 Grad. Wählen Sie dazu das Auswahlwerkzeug (V), positionieren Sie Ihre Maus in der Nähe einer Ecke des Quadrats und ziehen Sie bei gedrückter Umschalttaste auf der Tastatur eine Ecke rechts vom Begrenzungsrahmen nach oben, bis sie wie ein Pfeil erscheint, der auf das Symbol zeigt Recht.
Wenn der Pfeil ausgewählt ist, navigieren Sie zum Fenster "Erscheinungsbild" ("Fenster"> "Erscheinungsbild") und klicken Sie auf die Schaltfläche "Neuen Effekt hinzufügen" (es sieht aus wie die Buchstaben "fx") unten im Fenster "Erscheinungsbild". Wählen Sie dann "Stilisieren"> "Schlagschatten" und geben Sie die 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.
Mit dem Popup. Abschnitt abgeschlossen, aktivieren Sie das Auswahlwerkzeug (V) und ziehen Sie eine Auswahl über das gesamte Popup-Fenster. Objekte, um sie alle gleichzeitig auszuwählen. Gehen Sie nun im Menübereich zu Objekt> Gruppe (Befehlstaste + G), um diese Objekte zu gruppieren. Wir können diese Gruppe dann über das Indikatorsymbol ziehen und zentrieren, so dass es wie in der Abbildung unten aussieht. Und damit sind wir fertig!
Ich hoffe, ich konnte Ihnen zeigen, wie Sie mit dem Appearance-Bedienfeld komplexe Effekte erstellen können, ohne dass zusätzliche Ebenen erforderlich sind. Fühlen Sie sich frei mit verschiedenen Farben zu spielen, wie Sie es für richtig halten. Mit so vielen auflösungsunabhängigen Geräten, die heutzutage umherfliegen, ist es wirklich großartig, unendlich skalierbare Objekte verwenden zu können, die in Ihren App-Designs verwendet und wiederverwendet werden können.
Accentsconagua