So verspotten Sie eine Website mit Sketch

Sie möchten ein einfaches Website-Modell erstellen, aber Photoshop klingt für Sie nur ein wenig entmutigend? Sie suchen etwas schnelles und einfaches, das Ihre Idee effektiv zur Geltung bringt? Nun, Bohemian Coding hat Ihre Gebete erhört und ein Tool geliefert, bei dem Web- und UI-Designer im Mittelpunkt stehen. Es heißt Sketch und Version 3 wurde gerade veröffentlicht.

Sketch ist vollständig vektorbasiert, was bedeutet, dass alles, was Sie tun, skalierbar und Ihre Prozesse zerstörungsfrei sind. Diese Funktion ist heutzutage absolutes Gold, mit all den verschiedenen Geräten und all den verschiedenen Bildschirmgrößen und Auflösungen, die Sie berücksichtigen müssen.

Ich benutze Sketch seit zwei Jahren ausschließlich für meine gesamte Designarbeit und hatte lange nicht mehr das Bedürfnis, auf etwas anderes umzusteigen.



In diesem Tutorial werde ich ein Website-Modell für ein digitales Studio namens Think Orange erstellen. Ich werde Sie durch einige der grundlegenden Konzepte und Tools von Sketch führen - einschließlich einiger aufregender neuer Funktionen, die in Version 3 eingeführt wurden - und Sie vom ersten Textblock zum Export unseres endgültigen Designs und unserer Assets führen.

Wir werden lernen, wie Sie Überschriften und Schaltflächen erstellen, mit Gittern arbeiten, Formen zum Maskieren von Elementen verwenden, alle Assets in verschiedenen Auflösungen exportieren - Retina und Nicht-Retina - und vieles mehr. Wenn Sie keine Kopie von Sketch haben, greifen Sie zu a Kostenlose Testphase und folge mit.

01. Erstellen Sie eine neue Datei

Beginnen wir mit der Erstellung einer neuen Datei. Gehen Sie in der Menüleiste zu Datei> Neu aus Vorlage> Webdesign. Hier haben wir bereits einige Zeichenflächen für uns eingerichtet, z. B. Web, Tablet und Smartphone (stellen Sie sich eine Zeichenfläche als dedizierte Leinwand vor) sowie einige Textstile und Benutzeroberflächenelemente.

02. Symbole einfügen

Wechseln Sie zu Seite zwei, und Sie finden alle in dieser Vorlage integrierten Symbole und Textstile. Von Formularen zu Schaltflächen, Überschriften zu Anführungszeichen können Sie ein Symbol einfügen, indem Sie einfach auf Einfügen> Symbol klicken.

03. Änderungen vornehmen

Jede Änderung, die Sie an einem Symbol vornehmen, wird auf jede Instanz dieses Symbols übertragen. Wenn Sie also irgendwann auf jeder Seite die Farbe der Schaltfläche 'Senden' ändern möchten, müssen Sie dies nur einmal tun. Gleiches gilt für Textstile.

Textstile funktionieren genau wie HTML-Tags. Sie können Ihre Überschriften, Textkörper und Links erstellen. Textstile verteilen sich auf alle Elemente, wenn Sie einen ändern. Praktisch.

04. Hintergrund für den Header

In diesem Tutorial kehren wir zu unserer ersten Seite zurück und arbeiten an der Desktop-Zeichenfläche. Beginnen wir mit der Erstellung eines einfachen Hintergrunds für unseren Header. Fügen Sie ein Rechteck ein, indem Sie auf Einfügen> Form> Rechteck klicken (oder die Tastenkombination R drücken).

Lassen Sie es die gesamte Breite der Seite ausfüllen und ungefähr 900 Pixel hoch machen. Auf der rechten Seite des Inspektors haben Sie Zugriff auf Füllungen, Rahmen, Schatten - Sie nennen es.

05. Fügen Sie den Titel ein

Fügen Sie nun den Titel hinzu. Fügen wir einen Textblock (T) ein und geben ihn dann einfach ein. Im Inspektor haben wir die Kontrolle über Schriftart, Größe, Farbe und alles andere, was Sie erwarten würden.

06. Erstellen Sie ein Textfeld

Für die Navigationsleiste oben erstelle ich Textblöcke für die verschiedenen Links. Nachdem Sie alle Links ausgewählt haben, verwende ich die Ausrichtungswerkzeuge oben im Inspektor, um sie horizontal auszurichten und gleichmäßig zu platzieren. Wir können einen neuen Textstil erstellen und ihn 'Navigationslinks' nennen.

07. Fügen Sie ein Bild ein

Vielleicht haben Sie ein Logo oder ein Hintergrundfoto, das Sie verwenden möchten. Das Einfügen eines Bildes ist so einfach wie Drag & Drop. Ziehen Sie das Bild einfach aus dem Finder in das Skizzenfenster und schon ist es da. Wenn Sie darauf doppelklicken, können Sie es zuschneiden, füllen oder sogar vektorisieren.

08. Der Aufruf zum Handeln

Für die Schaltfläche 'Handlungsaufforderung' füge ich das Schaltflächensymbol ein und ändere den Text in 'Fragen Sie uns nach einem Angebot' (eine Anleitung dazu finden Sie in Schritt 2).

09. Einzigartige Farben

Ich möchte, dass diese spezielle Schaltfläche eine andere Farbe hat. Wenn wir einfach die Farbe ändern, ändern sich auch alle Schaltflächen in diesen Dokumenten. Also müssen wir es zuerst vom Symbol lösen.

Wie zu erwarten, klicken Sie einfach mit der rechten Maustaste auf das Symbol (stellen Sie sicher, dass Sie den Symbolordner und kein Element darin auswählen) und wählen Sie die Option Formularsymbol trennen.

10. Verschwimmen

Um die jetzt bekannte Unschärfe zu replizieren, die Sie unter iOS und dem neuen OS X Yosemite finden, erstellen Sie einfach ein Rechteck, das als Unschärfeebene verwendet werden soll. Wählen Sie im Inspektor in der Dropdown-Liste der Unschärfe die Option Unschärfe aus, und optimieren Sie die Unschärfe im Schieben Sie den Schieberegler nach Ihrem Geschmack nach unten und vergessen Sie nicht, die Deckkraft zu ändern, damit Sie tatsächlich sehen können, was dahinter steckt.

11. Hinzufügen eines Etiketts

Jetzt möchte ich ein einfaches 4x3-Raster von Objekten erstellen - sagen wir ein Bild und eine einfache Beschriftung. Ich gruppiere die Elemente und wähle die Option Anordnen> Gitter erstellen. Hier können Sie die Anzahl der Spalten, Zeilen und Ränder zwischen festlegen. Klicken Sie auf Make Grid und voilà!

12. Formen für das Team

Es ist Zeit, unser hübsches Team vorzustellen. Ich möchte die Fotos der Menschen mit einer sechseckigen Form maskieren, wie ein kleines Abzeichen. Gehen wir zu Einfügen> Form> Polygon, ändern Sie die Anzahl der Punkte im Inspektor auf sechs und ändern Sie möglicherweise den Randradius.

Doppelklicken Sie dazu einfach auf die Form, um den Bearbeitungsmodus aufzurufen. Wählen Sie alle Ecken aus (indem Sie auf die kleinen Kreise klicken, während Sie die Umschalttaste drücken) und ändern Sie den Schieberegler für die Ecken im Inspektor nach Ihrem Geschmack. Wählen Sie abschließend die Form und das Bild aus, die Sie maskieren möchten, gruppieren Sie sie (Cmd + G), stellen Sie sicher, dass sich das Bild über der Form befindet, klicken Sie mit der rechten Maustaste auf die Form in der Objektliste und wählen Sie Als Maske verwenden.

13. Zeichenflächenexporte

Wenn Sie mit dem Ergebnis zufrieden sind und es exportieren möchten, wählen Sie einfach die Zeichenfläche aus. Im Inspektor sehen Sie rechts Exportieren und ein kleines Pluszeichen. Klicken Sie darauf und Sie können beliebig viele verschiedene Auflösungen und Formate hinzufügen. Wenn Sie fertig sind, klicken Sie unten in der Seitenleiste auf Exportieren.

14. Exportieren einzelner Assets

Wenn es um den Export einzelner Assets geht, ist es genauso wie oben. Vielleicht möchten Sie diese Schaltfläche exportieren. Wählen Sie es aus und klicken Sie im Inspektor unten auf Exportierbar machen. Fügen Sie eine 1x- und 2x-Version für Retina-Bildschirme hinzu und klicken Sie auf Exportieren.

Sie können das Element sogar direkt aus der Objektliste auf Ihren Desktop ziehen und daraus ein PNG erstellen. Magie!

Wörter: Rafael Conde

Wie ist es, bei Pixar zu arbeiten?

Rafael Conde ist Experte für Design, Musik und Kaffee. Folgen Sie ihm auf Twitter unter @rafahari . Dieser Artikel erschien ursprünglich in der Net Magazine Ausgabe 258.

So was? Lese das!

Haben Sie tolle Sketch-Tutorials gefunden oder haben Sie kreative Tipps? Lass es uns in den Kommentaren unten wissen!