Share
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie mit Sketch eine von nautischen Motiven inspirierte Schriftart erstellen. Wir werden einfache Formen und das Vektorwerkzeug zusammen mit Rahmen und Stilvorgaben verwenden, um das Alphabet schnell zu erstellen.
Wenn Sketch geöffnet ist, ist die Standardansicht bereits unendlich Zeichenbrett. Da wir nichts erstellen, das eine bestimmte Größe hat, können wir dies so belassen. Wir werden jedoch mit einem Raster arbeiten, also schalten wir das jetzt ein.
An der Spitze Werkzeugleiste wählen Ansicht> Rastereinstellungen Ändern Sie dann die Werte wie unten gezeigt.
Um mir die Arbeit zu erleichtern, habe ich einige Ideen entworfen, an denen ich gerne arbeiten würde. Dies wird dazu beitragen, das Thema der Schrift gleichmäßig zu halten und einen Startpunkt zum Starten des Vektorprozesses bereitzustellen.
Es ist nicht perfekt, muss aber nicht sein. Während des Vektorprozesses habe ich sogar meine Meinung über bestimmte Schnörkel und Formen geändert. Diese Skizzen dienen nur als Leitfaden.
Aus meinen Skizzen kann ich erkennen, dass alle meine Figuren aus einem breiten Balken und einem Strich bestehen, um die Formen zu vervollständigen. Ich habe beschlossen, dass dieser breite Balken zwei Quadrate in meinem Raster und acht Quadrate groß sein soll. Ich mach das 50 x 200 px.
Im Fall des Buchstabens "A" wird diese Leiste leicht schräg gestellt, so dass ich es einfacher fand, eine benutzerdefinierte Form mit der Vektor Werkzeug (V). Mit dem Vektor Klicken Sie mit der rechten Maustaste auf einen sich kreuzenden Gitterpunkt, um Ihre Form zu starten. Zählen Sie als nächstes zwei Quadrate nach links und klicken Sie, um einen weiteren Punkt zu erstellen. Gehen Sie zwei Quadrate und acht höher und klicken Sie, um einen anderen Punkt zu erstellen. Zählen Sie jetzt über zwei Quadrate rechts und klicken Sie, um einen Punkt zu machen. Klicken Sie zuletzt auf den Startpunkt, um die Form zu schließen.
Nun erstellen wir die andere diagonale Linie, aus der das "A" besteht. Skizze hat eine Linie Werkzeug, das gut zu verwenden wäre. Dieses Werkzeug scheint jedoch nicht gut mit dem Raster zu spielen, und die mit diesem Werkzeug gezeichneten Linien rasten nicht automatisch ein. Also überspringen wir dieses Tool und machen unsere Zeilen mit Vektor Werkzeug (V).
Mit dem Vektor Werkzeug (V) Noch einmal ausgewählt, klicken Sie auf den oberen Rand des Gitters, wo die breite Form zu einem Punkt kommt, gehen Sie dann nach unten und über drei Quadrate und klicken Sie noch einmal. Sie können dann drücken Rückkehr auf der Tastatur, um den Pfad festzulegen.
Wir erstellen nun unsere Querstange und Serifen. Mit der Vektor Werkzeug (V) Klicken Sie erneut auf und erstellen Sie horizontale Linien in der Mitte der Pyramidenform. Da es acht Rasterfelder hoch ist, bedeutet dies, dass das Zentrum vier Rasterfelder nach oben oder unten sein wird. Bei den Serifen wird auf jeder Seite ein Rasterfeld ausgegeben.
Der Großteil unserer Briefform ist einfach ein Strich, aber die breite Leiste muss mit unserem Retro-Motive für nautische Tätowierungen gestaltet werden. Ich werde in einer schönen aquablauen Farbe arbeiten, aber ich kann jede Farbe verwenden, die Sie wählen. In dem Schichtenliste (ganz links) Wählen Sie alle einfachen Strich-Layer aus und klicken Sie dann auf Inspektor (ganz rechts) Grenzen Abschnitt wie unten gezeigt. Wenn es Füllungen gibt, entfernen Sie diese bitte zu diesem Zeitpunkt.
Wenn die Striche noch ausgewählt sind, gehen Sie zurück zuEbenenliste und unten werden Sie sehen Style-Presets. Drücke den "+"Symbol in diesem Abschnitt, um den Strich als Voreinstellung zu speichern, um später den Zugriff zu erleichtern.
Wählen Sie nun die breite Balkenform aus und diesmal werden wir die anpassen Füllen, Grenzen, und Innere Schatten Elemente.
Das Füllen wird ein Farbverlauf sein. Wenn Sie auf das Füllsymbol klicken, wird das angezeigt Füllfarbe Das Panel wird einfliegen und Sie können diese Einstellungen anpassen. Wählen Sie in diesem Fenster aus Gradient In der Form erscheint ein voreingestellter Farbverlauf.
Um einen Farbverlauf zu bearbeiten, müssen Sie auf die Schaltfläche schauen Zeichenbrett Bei der Form werden Sie in einer geraden Linie zwei Kreissymbole oben und unten in der Form sehen. Standardmäßig ist das obere Kreissymbol ausgewählt. Wenn Sie die Farbe / Deckkraft ändern, wirkt sich dies nur auf diesen Punkt aus. Für jetzt setzen wir es auf flach weiß mit 100% Opazität. Auf der Zeichenbrett Klicken Sie auf das untere Kreissymbol und passen Sie die Farbe an die Farbe an, die Sie mit Ihrem vorherigen Strich hatten.
Vergrößern Sie Ihre Zeichenbrett Sie befinden sich also in der Mitte der Balkenform und ziehen die Kreissymbole vom oberen und unteren Rand des Verlaufs zur Mitte. Wenn du hältst Verschiebung Das Symbol wird in vertikaler Richtung ohne Streuung verschoben. Tun Sie dies, damit sie sich treffen und eine horizontale Linie Ihrer Randfarbe und Weiß bilden.
Beachten Sie im Screenshot, dass sich diese Linie nicht genau in der Mitte des Gitters befindet. Ich wollte, dass die Farbe an der Grenze der Querlatte anhält.
Mit dem Verlauf, den wir wollen, drücken Sie die Zurück Taste oben auf der Inspektor Stellen Sie dann das ein Grenzen und Innere Schatten Abschnitte wie unten beschrieben.
Speichern Sie es mit diesen Einstellungen als Style Preset wie du es mit dem einfachen Strich gemacht hast.
Verwenden Sie unsere erste Skizze als Leitfaden und unsere neue Stilvorgaben erstellt Wir werden weiterhin unsere anderen Briefe erstellen. Sie sollten dies für eine schnelle und einfache Aufgabe halten, da viele der oben genannten Schritte wiederholt werden.
Ich gehe davon aus, dass Sie wissen, wie das Alphabet aussieht, so dass ich Sie nicht durch jeden Buchstaben gehe, sondern bei den wichtigsten Buchstabenformen, die verschiedene Werkzeuge und Techniken verwenden.
Um das "B" zu erstellen, müssen wir ein Rechteck erstellen 50 x 200 px. Dies wird der Hauptstamm des "B" sein. Wählen Sie dazu das Gestalten Menüsymbol und wählen Sie die Rechteck Werkzeug (R) und zeichnen Sie Ihre Form und fügen Sie dann das hinzu Style Preset mit dem Farbverlauf füllen.
Um die Schüssel des "B" herzustellen, verwenden wir die Gerundet Werkzeug (U) und zeichnen Sie ein abgerundetes Rechteck 150 x 100 px mit einem Radius von mindestens der halben Höhe so 50. Sie können dies im einstellen Inspektor Seitenleiste.
Mit dem abgerundeten Rechteck, das wir gerade erstellt haben, aktivieren Sie das Bearbeiten Werkzeug von unserem Werkzeugleiste oben und klicken Sie auf den oberen linken Punkt, um ihn auszuwählen. Jetzt in der Werkzeugleiste Es werden neue Optionen verfügbar. Darunter sehen Sie unsere 50px-Eckeneinstellung. Klicken Sie in dieses Textfeld und ändern Sie es in 0. Dadurch wird die abgerundete Ecke von dieser oberen linken Ecke entfernt. Wiederholen Sie dies auch für den unteren linken Punkt.
Gehe zu Bearbeiten> Pfade> Schere und klicken Sie auf die linke, flache Kante links, um sie zu entfernen. Wir werden dieses Tool sehr oft einsetzen, um es in Ihrem Interesse zu speichern Werkzeugleiste. Klicken Sie dazu mit der rechten Maustaste auf Werkzeugleiste oder besuchen Ansicht> Symbolleiste anpassen… und ziehen Sie das Werkzeug auf die Werkzeugleiste in einer Position, in der Sie sich wohl fühlen.
Wähle aus Bearbeiten noch einmal und klicken Sie auf den unteren linken Punkt und ziehen Sie ihn so, dass er den Stamm unseres "B" nicht mehr schneidet. Wenden Sie jetzt unseren einfachen Strich an Style Preset. Sie können den Vorgang jetzt abschließen, indem Sie diese Schritte wiederholen, um die Form der unteren Schüssel zu erstellen, und die Option verwenden Vektor Ein Werkzeug, um eine zusätzliche Serife in der Mitte des "B" -Stamms hinzuzufügen.
Unser "C" ist ziemlich einfach. Es ist im Grunde ein Kreis, aber wir haben unseren Stamm hinzugefügt, um ihn etwas auszufüllen. Wähle aus Oval Werkzeug (O) und einen Kreis erstellen, der ist 200 x 200 px.
Mit dem Rechteck Werkzeug (R) Zeichnen Sie unsere Hauptrechteckform wie zuvor und richten Sie sie links vom Kreis aus. Jetzt Klicken Sie bei gedrückter Umschalttaste beide formen und gehen zu Bearbeiten> Kombinieren> Überschneiden oder wählen Sie Sich schneiden von oben Werkzeugleiste. Sie können es jetzt mit unserem Farbverlauf füllen Style Preset.
Zeichnen Sie einen Kreis mit der gleichen Größe wie beim letzten Mal und platzieren Sie ihn über der gerade erstellten Form. Wähle aus Bearbeiten Wenn Sie den Cursor über die Kreiskante bewegen, sehen Sie, dass sich der Cursor in ein Stift-Symbol mit einem "+" ändert. Wenn sich der Pfad mit dem Raster schneidet, klicken Sie, um einen neuen Punkt sowohl über als auch unter dem Mittelpunkt zu erstellen. Wähle aus Schere Werkzeug und entfernen Sie die Pfade zwischen diesen beiden Punkten, die Sie gerade erstellt haben, um eine Öffnung zu erstellen. Sie können jetzt den einfachen Strich anwenden Style Preset und fügen Sie Ihre Serifen hinzu.
Befolgen Sie die obigen Schritte, um die Buchstaben "A" bis "R" erstellen zu können. Es ist so ziemlich nur schäumen, spülen, wiederholen Sie das Thema und die grundlegenden Buchstabenformen. Das "S" ist jedoch etwas anders, also erkläre ich das jetzt.
Um die Dinge in einer Linie zu halten, entschied ich mich, für alle anderen Schrägbuchstaben wie "V", "W" und "X" den gleichen Winkel wie den Buchstaben "A" zu verwenden. Dieser Winkel war jedoch etwas zu hart das "S" und das "Z". Ich habe also in diesem Schritt einen neuen Winkel für das "S" gezeichnet. Der Block ist immer noch zwei Rasterfelder breit, aber statt drei sind es jetzt vier. Also, wie wir es für "A" getan haben, wählen Sie die Vektor Werkzeug (V) und erstellen Sie Ihren abgewinkelten Block wie unten gezeigt.
Wähle aus Gerundet Werkzeug (U) und zeichnen Sie ein abgerundetes Rechteck 150 x 200 px mit einem Radius von mindestens der halben Breite so 75. Jetzt Klicken Sie bei gedrückter Umschalttaste beide formen und gehen zu Bearbeiten> Kombinieren> Überschneiden oder wählen Sie Sich schneiden von oben Werkzeugleiste. Sie können es jetzt mit unserem Farbverlauf füllen Style Preset.
Aktivieren Sie die Oval Werkzeug (O) und erstellen Sie zwei Kreise, die sind 150 x 150 px und platzieren Sie sie direkt über der vorherigen Form und richten Sie sie nach oben und nach unten aus. Dann wählen Sie die Bearbeiten Wenn Sie den Cursor über die Kreiskante bewegen, sehen Sie, dass sich der Cursor in ein Stift-Symbol mit einem "+" ändert. Wenn sich der Kreis mit der darunter liegenden Form schneidet, klicken Sie, um einen neuen Punkt zu erstellen. Wähle aus Schere Werkzeug und entfernen Sie die Pfade zwischen diesen beiden Punkten, die Sie gerade erstellt haben, um einen Halbkreis zu erstellen. Sie können jetzt den einfachen Strich anwenden Style Preset und fügen Sie Ihre Serifen hinzu. Tun Sie dies für den oberen und unteren Kreis und Ihr "S" sollte abgeschlossen sein.
Das "Y" ist eine benutzerdefinierte Form, die mit dem Zeichen "." Vektor Werkzeug (V). Nachfolgend finden Sie die Schritte zum Erstellen.
Schließlich für das "Z" fühlte ich, dass der Winkel zu steil war, also verlängerte ich ihn, wie wir es für das "S" taten. Nur ich habe dieses etwas etwas ausgeprägter gemacht. Fühlen Sie sich frei damit zu spielen, aber für mich habe ich fünf Rasterfelder durchgesehen und dann die Stiele und Serifen hinzugefügt, um das Ganze zu beenden.
Ich hoffe, ich konnte Ihnen einige zeitsparende Techniken für die Wiederverwendung einfacher Stile zeigen. Nachdem Sie Ihre Buchstaben erstellt haben, können Sie die verschiedenen Elemente zusammenfassen, um die Buchstaben zu kopieren und einzufügen, um Wörter und Sätze zu bilden. Bleiben Sie dran für zukünftige Tutorials, wie Sie diese neu erstellte Schriftart auf unterhaltsame und raffinierte Weise verwenden können.
Accentsconagua