Share
Was Sie erstellen werdenIn diesem Tutorial werden wir uns in die Stimmung der Saison begeben, indem Sie eine SVG-Weihnachtsbaumillustration erstellen, die Sie auf jeder Website verwenden können. Wir erstellen die Illustration in Affinity Designer und nutzen dann die webspezifischen SVG-Exportfunktionen des Programms.
Hinweis: Die folgenden Schritte setzen voraus, dass Sie mit Affinity Designer vertraut sind. Wenn nicht, können Sie mit unserem Kurs Affinity Designer Quick Start den Ball ins Rollen bringen.
Das Erstellen von SVG-Grafiken in Affinity Designer ist eine ziemlich direkte Angelegenheit, mit nur ein paar "Gotchas", die zu vermeiden sind. Insbesondere sollten Sie sicherstellen, dass Sie an keiner Stelle in Ihrem Dokument andere Mischmodi als "Normal" verwenden. Wenn Sie dies tun, wird Ihr Bild teilweise gerastert, wodurch der gesamte Zweck der SVG-Grafik nicht erreicht wird (das "S" steht für "Scalable"). Das heißt, Sie können zwar keine unterschiedlichen Mischmodi verwenden, jedoch unterschiedliche Deckkrafteinstellungen.
Eine andere Sache, die Sie beachten sollten, ist der Versuch, Ihre Formen so einfach wie möglich zu halten, damit die Dateigröße minimiert wird. Die Verwendung ausgefallener Strichtypen oder Texturierung führt beispielsweise zu einer enormen Dateigröße. Wir behalten unsere Illustrationstechniken in diesem Tutorial bei, um so SVG-freundlich wie möglich zu sein.
Lass uns anfangen!
Erstellen Sie ein neues Dokument und wählen Sie Netz von dem Art Dropdown im Dialogfeld zur Dokumenterstellung. Stellen Sie beide ein Seitenbreite und Seitenhöhe 1024px sein.
Als nächstes wollen wir unser isometrisches Gitter einrichten. Im Menü am oberen Rand von Affinity Designer gehen Sie zu Ansicht> Raster- und Achsenmanager Daraufhin wird ein Feld für die Rastereinstellungen angezeigt. Ändern Sie diese Einstellungen:
Accentsconagua
64px 8 
Isometrisches Gitter im Affinity DesignerIn diesem Lernprogramm platzieren wir Pfadknoten auf dem isometrischen Raster, um die Formen zu erstellen und anzupassen, die unseren Weihnachtsbaum bilden werden. Daher definieren wir einige Begriffe, um unser Raster zu beschreiben. Wenn ich die Größe einer Form oder die Entfernung eines Knotens im Raster spezifiziere, wissen Sie, worüber ich spreche.
Wenn Sie das Raster betrachten, sehen Sie, dass es mehrere dickere Linien hat, die große Diamanten bilden, und innerhalb dieser Diamanten gibt es dünnere Linien, die kleinere Diamanten bilden. Wir bezeichnen die Diamanten, die durch dickere Linien im Raster gebildet werden, als große Gitter Diamanten, und ihre kleineren Kollegen als kleine Gitter Diamanten. Wenn wir uns auf eine einzelne Seite eines dieser großen Diamanten beziehen, verwenden wir die Phrasierung große Rastereinheit oder große Gitterlinie. Wir werden verwenden kleine Rastereinheit oder kleine Rasterlinie für die kleinste netzmessung.
Beachten Sie, dass Sie beim Arbeiten mit dem isometrischen Gitter zum genauen Platzieren von Knoten darauf achten müssen, dass das Ausrichten aktiv ist, indem Sie das Magnetsymbol in der oberen Symbolleiste von Affinity Designer drücken.
Wie Sie im Vorschaubild unseres fertigen Baums zu Beginn dieses Lernprogramms sehen können, besteht der Blattbereich aus vier verschiedenen grünen Bereichen. Wir beginnen mit dem Zeichnen des obersten Abschnitts des Baums, der auch der kleinste ist.
Verwenden Sie die Rechteckwerkzeug, (Tastenkürzel M), um ein Rechteck von etwa der im unteren Bild angezeigten Größe zu zeichnen. Dies kann ziemlich grob erfolgen, da wir den Formknoten für Knoten ändern werden. Wählen Sie das Rechteck aus und klicken Sie auf, um die Knoten des Rechtecks zu ändern In Kurve konvertieren Diese Schaltfläche wird in der Kontext-Symbolleiste über Ihrer Leinwand angezeigt.
Stellen Sie sicher, dass das Rechteck keinen Rand hat, und legen Sie die Füllfarbe auf fest # 2F5628.
Um Hex-Farbcodes einfügen zu können, benötigen Sie das RGB-Hex Farbwähler aktiv im Farbe Studio Panel. Dieses Fenster sollte standardmäßig geöffnet und auf der rechten Seite der Benutzeroberfläche sein. Wenn nicht, können Sie es öffnen, indem Sie zu gehen Ansicht> Studio> Farbe. Klicken Sie auf das kleine Dropdown-Menü rechts oben Farbe Panel, wählen Sie Schieberegler, dann in der Dropdown-Liste im Panel auswählen RGB-Hex.
Beachten Sie, dass Sie beim Bearbeiten von Formen die Arbeit in der Gliederungsansicht möglicherweise einfacher finden, sodass Sie Ihre Knoten und Pfade besser sehen können. Um dies zu aktivieren, gehe zu Ansicht> Ansichtsmodus> Gliederung. Um zur normalen Ansicht zurückzukehren, wählen Sie Vektor unter dem gleichen Menü.
Mit dem Knotenwerkzeug (Tastenkombination) EIN), wählen Sie einen der beiden obersten Knoten des Rechtecks aus. Dieser Knoten wird der oberste Knoten unseres ersten Baumabschnitts. Ziehen Sie es an einen Schnittpunkt zwischen großen Gitterdiamanten etwa auf halber Höhe der Leinwand und dreieinhalb großen Gitterdiamanten von oben auf der Leinwand.
Wählen Sie als Nächstes den gegenüberliegenden Knoten aus, den Sie gerade verschoben haben. Dies wird zum unteren Knoten des Baumabschnitts. Ziehen Sie den ausgewählten Knoten so, dass er sich vertikal unterhalb des oberen Knotens befindet, aber zwei große Rasterdiamanten.
Sehen Sie sich nun diesen unteren Knoten an und folgen Sie der großen Gitterlinie, die sich oben und links von einer großen Gittereinheit befindet. Bewegen Sie den linken Knoten an diesen Punkt. Machen Sie dasselbe auf der rechten Seite für den rechten Knoten. Sie sollten mit der unten abgebildeten Form enden. Achten Sie darauf, wo die Knoten auf das Raster fallen, und stellen Sie sicher, dass Ihre Form gleich aussieht.
Überprüfen Sie, ob das Dokument relativ zur oberen linken Ecke des Dokuments positioniert ist:
Jetzt fügen wir auf der rechten Seite dieses Baumabschnitts eine Hervorhebungsfarbe hinzu, um den Eindruck zu erwecken, als würde das Licht darauf treffen. Wählen Sie Ihre vorhandene Form aus und aktivieren Sie die Einfügen in die Auswahl Schaltfläche rechts neben der oberen Symbolleiste. Ziehen Sie dann ein Rechteck ohne Rand in einer Größe heraus, die die rechte Hälfte des Baumabschnitts abdeckt, und setzen Sie die Füllfarbe auf # 386925. Das Rechteck sollte innerhalb der Struktur des Baumabschnitts verschachtelt sein, wie Sie in sehen können Schichten Panel des Bildes unten:
Um diesen Baumabschnitt fertig zu stellen, fügen wir am unteren Rand ein wenig Schnee hinzu. Verwenden Sie das Zeichenstift-Werkzeug, um eine Form zu zeichnen, die eine einzelne kleine Rastereinheit hoch ist und entlang der unteren linken Seite des Abschnitts verläuft. Es sollte innerhalb des Baumabschnitts verschachtelt sein, damit der Überlauf abgeschnitten wird. Fülle es mit der Farbe # A8BCA7.
Beachten Sie, dass die Schneebestimmung hellgrün und nicht ganz weiß ist, sodass sie nicht mit einem weißen Hintergrund verschmilzt, auf dem sie platziert werden kann.
Fügen Sie der oberen Linie der Schneegestaltungsform einige zusätzliche Knoten hinzu, und ziehen Sie sie etwas nach oben oder unten, um Kurven hinzuzufügen. Möglicherweise müssen Sie das Ausrichten vorübergehend deaktivieren, indem Sie auf das Magnetsymbol in der oberen Symbolleiste von Affinity Designer klicken.
Duplizieren Sie nun diese Schneezierform und drehen Sie sie horizontal, was Sie tun können, indem Sie auf klicken Horizontal spiegeln Schaltfläche in der oberen Symbolleiste. Positionieren Sie es in einer gespiegelten Position auf der rechten Seite der drei. Wählen Sie dann beide Formen aus und drücken Sie die Hinzufügen Schaltfläche in der oberen Symbolleiste, um sie zu einer einzigen Form zusammenzufassen.
Der oberste Baumabschnitt ist jetzt fertig, sodass wir ihn duplizieren und einige kleine Änderungen vornehmen können, um die anderen drei Abschnitte zu erstellen. Duplizieren Sie den Abschnitt und verschieben Sie ihn um eineinhalb große Gitterdiamanten. Vergewissern Sie sich, dass er sich hinter dem oberen Abschnitt des Ebenenfensters befindet.
Jetzt bearbeiten wir die Knoten dieses zweiten Baumabschnitts, um ihn größer als den ersten Abschnitt zu machen. Ziehen Sie zuerst den obersten Knoten nach oben, so dass sich eine halbe große Rastereinheit unterhalb des obersten Knotens des ersten Baumabschnitts befindet. Ziehen Sie dann den linken Knoten nach oben und nach links entlang der bereits vorhandenen Gitterlinie, bis Sie auf die nächste sich kreuzende große Gitterlinie treffen. Machen Sie dasselbe auch für den richtigen Knoten.
Zeigt den zweiten Baumabschnitt im Ansichtsmodus "Gliederung" anDie Kanten des zweiten Baumabschnitts sollten im selben Winkel wie der erste Abschnitt verlaufen. Sie können überprüfen, ob dies der Fall ist, indem Sie überprüfen, ob die Linie alle zwei kleinen Gitteldiamanten durch einen Gitterschnittpunkt geht.
GitterschnittpunkteVergewissern Sie sich, dass Ihr verschachteltes Rechteck mit hellerer Farbe immer noch die rechte Seite vollständig bedeckt. Andernfalls müssen Sie es möglicherweise etwas vergrößern. Passen Sie die Schneeverhältnisse an den unteren Rand des zweiten Baumabschnitts an, indem Sie die äußersten Knoten an die Kanten der Form ziehen und dann der Form weitere Knoten hinzufügen, um zusätzliche Kurven einzufügen.
Wiederholen Sie den Vorgang noch zweimal, um den dritten und vierten Baumabschnitt zu erstellen. Jedes Mal sollten Sie:
Die Hauptform des Blattabschnitts unseres Baums ist jetzt fertig, sodass wir mit dem Erstellen des Stamms fortfahren können. Zeichnen Sie mit dem Stiftwerkzeug ein Rechteck, das ein halbes großes Gitteldiamant breit ist, etwa eineinhalb große Gitteldiamanten hoch, horizontal relativ zum Baum zentriert und hinter allen anderen vorhandenen Formen positioniert.
Fügen Sie an der untersten Kante einen zusätzlichen Knoten hinzu, den Sie zum Erstellen eines spitzen Bodens verwenden können. Dieser untere Knoten sollte ein großes Gitternetz unter dem tiefsten Punkt des Baums platziert werden, und die beiden unteren Kanten der Stammform sollten entlang der Gitterlinien verlaufen. Stellen Sie die Füllfarbe des Stammes auf # 322B1E. Erstellen Sie schließlich ein innerhalb der Stammform verschachteltes Rechteck, um die rechte Hälfte mit einer Füllfarbe von zu bedecken # 41351E.
Ihr Endergebnis sollte so aussehen:
Als Nächstes erstellen wir Schatten, die auf jeden Baumabschnitt sowie auf den Stamm durch den darüber liegenden Baumabschnitt geworfen werden.
Verwenden Sie auf der linken Seite des Baums mit dem Zeichenstift-Werkzeug drei schräge Rechtecke, eines unter jedem der oberen drei Baumabschnitte. Diese Rechtecke sollten zwei kleine Gitterdiamanten sein, die entlang ihrer Länge hoch und mit der Farbe gefüllt sind # 203F1A. Duplizieren Sie die Formen, drehen Sie sie horizontal und positionieren Sie sie in einer Spiegelposition auf der rechten Seite. Ändern Sie die Füllfarbe dieser Formen in # 12510E.
Dies sollte Ihnen Schatten unter jedem Baumabschnitt wie folgt geben:
Erstellen Sie auf dieselbe Weise zwei schräge Rechteckformen im Stamm, die jeweils eineinhalb kleine Rastereinheiten hoch sind. Die am weitesten links stehende Form sollte farbig sein # 231D13 und die rechte Form # 302511.
Hinweis Ich habe die Farben, die hier als Schatten richtig aussehen würden, ursprünglich festgelegt, indem ich die Formen auf dieselbe Füllfarbe wie die Seite des Baums gesetzt habe, auf der sie sich befanden, und dann auf den Mischmodus setzen Multiplizieren. Wie bereits erwähnt, können wir jedoch nicht verwenden Multiplizieren in einem SVG-Bild. Um dies zu umgehen, probierte ich mit der Farbauswahl die Farbe der Schatten aus. Ich änderte dann die Füllfarbe der Schattenformen in diese abgetastete Farbe und stellte den Mischmodus wieder auf Normal, am Ende das gleiche Aussehen erzielen, aber auf SVG-freundliche Weise.
Nun zu dem Schatten, den der Baum auf den Boden wirft. Erstellen Sie unter allen anderen Formen einen Diamanten in der gleichen Breite wie der unterste Baumabschnitt. Seine Kanten sollten alle entlang der Gitterlinien liegen und sollten sowohl horizontal als auch vertikal relativ zum Rumpf zentriert sein. Machen Sie die Farbe schwarz und setzen Sie sie auf 20% Opazität. Auch wenn wir nicht verwenden können Multiplizieren Um Schatten in unserer SVG-Abbildung zu erzeugen, können wir Deckkraft sicher verwenden.
Die gesamte Baumform ist nun fertig und wir können sie schmücken. Um dies zu erreichen, erstellen wir eine Kugelform, die wir für die Oberseite der Baumdekoration und für kleinere Dekorationen um den Baum anpassen können. Wir werden es zunächst in doppelter Größe erstellen, so dass es einfacher ist, das Raster zum Ausrichten aller Formen zu verwenden, aus denen sich der Globus zusammensetzt.
Achten Sie beim Erstellen der folgenden Formen genau darauf, wo die Knoten auf das Raster fallen.
Erstellen Sie zunächst eine Rautenform mit der Füllfarbe, die ein Viertel so groß ist wie ein großer Gitterdiamant # FFEF00. Dies wird die flache Oberseite der Welt bilden.
Fügen Sie diese beiden Formen hinzu, um die Kurve unterhalb des Globus zu erstellen - die Farbe der linken Form ist # F1C906 und die Farbe der richtigen Form ist # FFE300.
Erstellen Sie mit diesen Formen die Seiten des Globus - die linke Seite ist farbig # E9BE1F und die rechte Seite ist farbig # FFDB1F.
Fügen Sie die unteren Kurven mit diesen beiden farbigen Formen hinzu # DCAF2E links und # ECCA3C zur Rechten.
Verwenden Sie schließlich das Stiftwerkzeug, um eine einzelne Form zu zeichnen, die der Form der gesamten Kugel entspricht. Gib ihr die Füllfarbe # FFDB1F dann setzen Sie es hinter alle anderen Formen. Dadurch wird sichergestellt, dass keine Hintergrundfarben in winzigen Lücken zwischen den Formen des Globus angezeigt werden.
Jetzt ist Ihr Globus fertig und Sie können die Größe ändern, um ihn auf Ihrem Baum zu platzieren. Wählen Sie alle Formen aus und gruppieren Sie sie für eine einfache Größenänderung. Sie können ein Duplikat dieser Gruppe erstellen, bevor Sie die Größe ändern, wenn Sie sie als Sicherung behalten möchten.
Wir möchten den Globus auf die Hälfte reduzieren, also wählen Sie die Gruppe aus, die Sie gerade erstellt haben, und suchen Sie den Globus aus Verwandeln auf der rechten Seite der Affinity Designer-Oberfläche. Wenn es nicht bereits geöffnet ist, gehen Sie zu Ansicht> Studio> Transform. Im Transform-Panel W (Breite) Feldtyp / 2 Am Ende des aktuellen Werts drücken Sie dann EINGEBEN. Dadurch wird die aktuelle Breite halbiert.
Machen Sie dasselbe in der H (Höhe) Feld, um die Höhe zu halbieren.
Ihr halbgroßer Globus ist einsatzbereit, zentrieren Sie ihn so auf dem Baum.
Duplizieren Sie die Dekoration, die Sie gerade auf die Baumspitze gesetzt haben, und halbieren Sie sie erneut, indem Sie dieselbe Methode verwenden / 2 bis zum Ende der Verwandeln Panel H und W Felder. Jetzt haben wir eine kleinere gelbe Kugel, die wir auf den Hauptkörper unseres Baums setzen können, und alles, was wir brauchen, sind ein paar zusätzliche Farben, um unsere Deko lebendiger zu machen. Machen Sie drei zusätzliche Duplikate der kleineren Kugel, damit wir sie in eine blaue, violette und rote Version umwandeln können.
Ändere die Farben von drei neuen Globen, damit du Folgendes bekommst:
Die blaue Kugel verwendet diese Farben:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C Die lila Kugel verwendet diese Farben:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C Die rote Kugel verwendet diese Farben:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Wenn diese kleineren Kugeln nun fertig sind, können Sie sie um Ihren Baum herum platzieren und so schmücken:
Jetzt fügen wir einige kleinere Dekorationen hinzu, um zusätzliche Details zu erhalten. Verwenden Sie das Stiftwerkzeug, um diese Form mit der Füllfarbe zu zeichnen # FFDB1F:
Beachten Sie, dass seine Kanten dem gleichen Winkel wie die äußeren Kanten der Baumabschnitte folgen.
Wie wir es mit unserem Globus gemacht haben, ist diese Form in doppelter Größe gezeichnet, was wiederum das Platzieren von Knoten im Raster vereinfacht. Verwenden Sie die Verwandeln Panel zu halbieren wie zuvor durch Hinzufügen / 2 bis zum Ende der H und W Felder. Die oberen und unteren Kanten der Form sollten jetzt eine kleine Rastereinheit sein.
Machen Sie drei Duplikate der Form und färben Sie sie # 1E98B0 für blau, # 721EB0 für lila und # 831C1A für rot. Duplizieren Sie alle vier Formen und drehen Sie sie horizontal. Sie sollten jetzt insgesamt acht Formen haben.
Nehmen Sie diese Formen und streuen Sie sie um Ihren Baum. Verwenden Sie Formen, deren Winkel mit der äußeren Kante der Baumseite übereinstimmen, auf der Sie sie platzieren.
Und das ist es! Unser Weihnachtsbaumbild ist fertig.
Jetzt ist unser Design fertig und wir werden es als SVG für die Verwendung im Web vorbereiten.
Als Erstes müssen wir das Dokument in die gleichen Dimensionen wie unser Baum ändern, also in unsere SVGs Viewbox Der Parameter wird auf die richtige Größe eingestellt. Wenn wir jetzt die exportierten Viewbox würde auf 1024x1024 gesetzt werden, was bedeutet, dass Sie überall, wo Sie den SVG-Weihnachtsbaum verwendet haben, große Lücken haben werden, die beide so groß sind wie unser Dokument.
Stellen Sie sicher, dass auf der Leinwand nichts ausgewählt ist. Sehen Sie sich dann die Kontext-Symbolleiste am oberen Rand der Affinity Designer-Benutzeroberfläche an Dokument einrichten Taste. Wenn Sie darauf klicken, wird ein Feld angezeigt, in dem Sie die Dokumentmaße ändern können. einstellen 280px für die Breite und 568px für die Höhe Solange Sie Ihre Formen sorgfältig abgelegt haben, sollten diese Dokumentmaße für Sie funktionieren. Stell sicher dass du hast Anker zu Seite ausgewählt und nicht Rescale, dann drücken OK.
Unmittelbar nach der Neuskalierung wird Ihr Baum wahrscheinlich nicht zentriert. Um dies zu beheben, wählen Sie alles im Dokument mit aus STRG + A, gruppiere es mit STRG + G, Wählen Sie diese Gruppe aus und ziehen Sie sie in eine zentrierte Position.
Gehen Sie jetzt zu Datei> Exportieren und in dem sich öffnenden Feld wählen Sie SVG Tab. Stellen Sie sicher, dass die Voreinstellung SVG (für Web) ist ausgewählt.
Stellen Sie außerdem sicher, dass Sie die Nachricht sehen (Nichts wird gerastert). Wenn stattdessen die Nachricht etwas sagt werden Seien Sie gerastert, gehen Sie durch Ihre Arbeit und stellen Sie sicher, dass Sie aus Versehen keine anderen Formen als den Mischmodus gewählt haben Normal.
Wenn Sie fertig sind, klicken Sie auf Export und speichern Sie Ihre SVG.
Jetzt haben Sie Ihre SVG-Datei bereit. Schauen wir uns einige Möglichkeiten an, wie Sie sie verwenden können.
Der einfachste Weg ist es, es einfach wie jedes andere Bild mit HTML-Code in Ihren HTML-Code zu laden:
Das Schöne an SVG ist jedoch, dass Sie den Inhalt der SVG-Datei auch direkt in Ihren HTML-Code einfügen können, um das Bild inline zu verwenden.
Öffnen Sie dazu Ihre SVG-Datei in einem Texteditor und kopieren Sie alles ab div Sie können den Stil anpassen, um die Größe und Position des Bildes zu steuern.
Um diesen Ansatz in Aktion zu sehen, überprüfen Sie dieses Beispiel in CodePen:
So können Sie mit Affinity Designer eine SVG-Illustration erstellen! Der Vorgang unterscheidet sich nicht allzu sehr von allen anderen in Affinity Designer vorgenommenen Designs. Die Einschränkungen müssen jedoch nur für nicht standardmäßige Mischmodi und zu komplexe Formen beachtet werden. Aufgrund der Notwendigkeit von flachen Farben und der Vorliebe für einfache Formen sind isometrische Illustrationen besonders gut für SVG geeignet.
Weitere Informationen zur Verwendung von Affinity Designer finden Sie in unseren Tutorials und Kursen. Wenn Sie dabei sind, schauen Sie sich auch unsere SVG-Tutorials und -Kurse an.
