Share
In diesem kurzen Tutorial werde ich Ihnen zeigen, wie Sie mit Adobe XD eine SVG-fähige Pfeilgrafik erstellen.
Ich verwende ein Website-Design, das Teil eines neuen Kurses namens "Code Friendly Design With Adobe XD" ist. Der Hauptinhaltsbereich befindet sich bereits oben auf der Seite. Jetzt möchte ich eine Schaltfläche mit einem Pfeil hinzufügen, mit der die Benutzer nach unten scrollen können, um mehr Inhalt anzuzeigen.
Adobe XD ist kein vollwertiges Vektorbearbeitungsprogramm, aber es gibt noch einiges zu tun. Wenn Sie die Vektorwerkzeuge von XD verwenden, wo immer Sie können, können Sie anstelle von flachen Bitmaps (wie JPG, PNG usw.), wenn Sie das Design einem Entwickler übergeben, diese Vektorgrafiken direkt in SVG-Code umwandeln.
Wir fangen mit dem an Ellipse Werkzeug und verwenden Sie es, um einen Kreis von ca. 85px Breite zu zeichnen. Wir entfernen den Rand, indem Sie die Einstellungen in der rechten Hand ändern Eigenschaften Panel, dann ändern Sie die Füllung auf etwas geeignetes.
Wir benutzen dann die Rechteck Werkzeug zum Erstellen einer Form, die den oberen Rand des Kreises überlappt. Wenn Sie die Größe ändern, werden Sie feststellen, dass sie an der Hälfte des Kreises anliegt. Wir können dann beide Formen auswählen und mit der Boolesche Operatoren in dem Eigenschaften Panel können wir die obere Hälfte des Kreises abziehen.
Um den Pfeil zu erstellen, ziehen wir ihn ab Ein weiterer Form aus diesem Halbkreis. Es wird ein wenig schwächer sein als bisher, da Adobe XD als Prototyping-Anwendung konzipiert wurde, nicht als dediziertes Vektor-Design-Programm. Wir können jedoch sicherlich mit dem arbeiten, was wir haben. Ich entscheide mich für die Stift Werkzeug in Kombination mit dem Rechteck Werkzeug.
Erhalten Sie mehr Kontrolle über die Pfade in Ihren Formen, indem Sie mit der rechten Maustaste auf die Form klicken, die Sie bearbeiten möchten, und dann auf gehen Pfad> In Pfad konvertieren. Dadurch wird das Objekt von einer vordefinierten Form in einen funktionsfähigen Satz von Pfaden geändert. Um die Knoten in diesem Pfad zu bearbeiten, doppelklicken Sie auf das Objekt.
Es liegt an Ihnen, wie Sie Ihr Pfeilsymbol erstellen, aber wenn Sie fertig sind, platzieren Sie es auf dem Halbkreisobjekt, wählen Sie beide aus und ziehen Sie den Pfeil mit der Taste ab Boolean Werkzeuge wie früher. Du solltest am Ende so etwas haben:
Sie haben jetzt das SVG-Ready-Pfeilsymbol mit einfachen Tools in Adobe XD fertiggestellt! Um zu erfahren, was Sie als nächstes damit machen können, halten Sie Ihre Augen für den kommenden Kurs offen.
Accentsconagua