kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Einstieg in Sketch

Icon Sketch App

Das Grafikprogramm Sketch erfreut sich bei UX-, UI-, App-, und Webdesignern größter Beliebtheit. Sketch deckt die Bedürfnisse von Interface-Designern perfekt ab und bietet spezialisierte Funktionen, die es in anderen Programmen so nicht gibt. Insbesondere die Arbeit mit Design-Systemen, fluiden Layouts und Prototypen wird dank Sketch spürbar erleichtert. Darüber hinaus lässt sich das Programm dank zahlreicher Plugins flexibel erweitern.

In diesem Beitrag beschreiben wir die wichtigsten Funktionen, schildern typische Anwendungsfälle und klären die häufigsten Fragen unserer Schulungsteilnehmer um euch den Einstieg in das Programm zu erleichtern. Es lohnt sich dennoch zusätzlich die kurzweilige, offizielle Dokumentation zu lesen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Die Sketch-Benutzeroberfläche

Die Oberfläche von Sketch ist aufgeräumt und arbeitet an vielen Stellen kontextsensitiv. Es gibt also nicht zahlreiche Bedienfelder von denen viele ungenutzt sind, sondern es gibt wenige globale Sinnabschnitte. Die Optionen in diesen Bereichen ändern sich automatisch, je nachdem was auf der Arbeitsfläche angeklickt wurde bzw. welche Einstellungen gewählt wurden. In Sketch kommt es daher häufig vor, dass eine gesuchte Option nicht gefunden werden kann bis das richtige Objekt ausgewählt wurde. Generell solltet ihr damit rechnen, dass viele Optionen direkt am Objekt mit Klick, Doppelklick und Rechtsklick erreichbar sind.

Aufteilung der Sketch Benutzeroberfläche in vier globale Sinnabschnitte

Die Sketch-Oberfläche lässt sich im folgende Sinnabschnitte unterteilen:

Werkzeuge (1, oben)
In diesem Bereich stehen standardmäßig Funktionen zum Erstellen von Formen und Texten sowie zum Verschmelzen und Transformieren von Objekten zur Verfügung. Auch häufig benötigte Funktionen wie die Erstellung eines Symbols oder der Export von Elementen können hier aufgerufen werden. Der Bereich kann über einen Rechtsklick vollständig individualisiert werden.

Konfigurationsoptionen für die Werkzeuge von Sketch
Konfigurationsoptionen für die Werkzeuge von Sketch – erreichbar über einen Rechtsklick

Ebenen (2, links)
Auf der linken Seite werden Objekte organisiert. Sketch unterscheidet zwischen Seiten (Page), Zeichenflächen (Artboards), Gruppen (Group), Symbolen und Elementen.

Die Seite ist die größte organisatorische Einheit. Eine Seite kann zahlreiche Zeichenflächen unterschiedlicher Größe beinhalten. Auf jeder Zeichenflächen können dann wiederum Gruppen, Symbole und Elemente platziert werden. Die Besonderheit eines Symbols besteht darin, dass es zentral geändert werden kann und sich auf alle Bereiche auswirkt an denen eine Instanz des Symbols im Einsatz ist.

Links Seitenleiste in Sketch mit Seiten, Zeichenfläche, Gruppen und Objekten
Links Seitenleiste in Sketch mit Seiten, Zeichenfläche, Gruppen und Objekten

Bühne (3, mitte)
Auf der Bühne werden alle Objekte positioniert. Sie können per Klick ausgewählt und in Position und Größe angepasst werden. Im Normalfall wird nicht direkt auf der Bühne, sondern auf einem Artboard auf der Bühne gearbeitet.

Optionen (4, rechts)
Wenn ein Objekt ausgewählt wurde, erscheinen rechts alle Optionen, die für dieses Objekt zur Verfügung stehen. Wenn beispielsweise eine Zeichenfläche markiert wurde kann die Größe und die Hintergrundfarbe editiert werden. Wurde ein Rechteck markiert, stehen Optionen für Farben, Schatten, abgerundete Ecken etc. zur Wahl. Bei einem selektierten Textelement finden sich Optionen für Schriftart-, -größe, -farbe usw.

Tastaturkürzel
Es bietet sich an, die Tastaturkürzel für häufig verwendete Formen zu lernen bzw. die Werkzeugleiste anzupassen. Eine Liste der Sketch-Tastaturkürzel findet ihr hier: sketchapp.com/docs/shortcuts/

Ebenen, Seiten und Artboards

In der linken Seitenleiste lassen sich Objekte und Seiten in Sketch organisieren. Standardmäßig gibt es eine Seite (Page 1), die unendliche Abmessungen hat und in Zeichenflächen unterteilt werden kann.

  • Um neue Seiten hinzuzufügen, genügt ein Klick auf das Plus-Icon (+) neben dem Titel »Pages«.
  • Um auf der ausgewählten Seite neue Zeichenflächen (engl. Artboards) hinzuzufügen, muss das Artboard-Werkzeug (A) ausgewählt werden. Anschließend können Zeichenflächen per Klick aufgezogen werden. In Sketch ist es übrigens üblich mit zahlreichen Artboards pro Seite zu arbeiten. Navigiert wird dann per rein- und raus-zoomen.
  • Um auf einer Seite bzw. einer Zeichenfläche eine neue Gruppe hinzuzufügen, müssen Objekte markiert sein. Anschließend wählt man »Arrange > Group« (Cmd + G)
  • Wenn Objekte, Seiten oder Artboards umbenannt werden sollen, genügt ein Doppelklick auf den Namen, links in der Seitenleiste
  • Um Objekte auf der Bühne zu verschieben, müssen Sie angeklickt werden. Anschließend können Sie verschoben werden. Wenn ganze Zeichenflächen inkl. aller Objekte verschoben werden sollen, ist es hilfreich die Zeichenfläche links im Ebenebedienfeld zu markieren.
  • Die Reihenfolge von Seiten, Zeichenflächen und Objekten kann ebenfalls per Drag and Drop links im Ebenenbedienfeld verändert werden.

Artboards anlegen und organisieren

Um ein neues Artboard hinzuzufügen, muss das Artboard-Werkzeug (A) ausgewählt werden. Anschließend stehen rechts im Inspektor Voreinstellungen für Artboard-Größen zur Verfügung.

Tipps

  • Mit CMD + Scrollen kann stufenlos gezoomed werden.
  • Um Artboards zu ändern muss das Artboard in der Ebenenliste links ausgewählt werden. Anschließend können alle Eigenschaften verändert werden.
  • Wenn Artboards auf der Bühne verschoben werden sollen, »greift« sie beim Namen und verschiebt sie dann.
  • Wenn Objekte vollständig außerhalb einer Zeichenfläche liegen sind sie sichtbar. Sobald ein Teil des Objekts auf einer Zeichenfläche liegt, ist nur noch dieser Teil sichtbar und der außerhalb der Zeichenfläche liegende Bereich wird optisch entfernt.

Wenn die Übersicht durch zu viele Ebenen, Gruppen, Artboards und Seiten eingeschränkt ist, kann über »View > Layer List > Collapse alle Groups« alles zusammengeklappt werden.

Layouts und Raster

Ein Artboard kann mit einem Kästchenraster (Grid) oder einem zeilen- bzw. spaltenbasierten Raster (Layout) ausgestattet werden. Dazu muss das Artboard zunächst ausgewählt werden. Anschließend kann unter »View > Canvas >« das Grid bzw. das Layout eingeblendet werden. Dort finden sich auch die Einstellungen für beide Rastertypen (Grid/Layout-Settings).

Tipps

  • »Columns« sind Spalten, »Rows« sind Zeilen und »Gutter« ist der Abstand zwischen den Spalten. »Offset« bezeichnet den Einzug des gesamten Rasters von links. Ein negativer Einzug ist auch möglich.
  • Das Raster kann auch auf mehrere Artboards angewendet werden, wenn mehrere gleichzeitig in den Ebenen markiert sind.
  • Auf kleinen Geräten möchte man normalerweise, dass das Layout über die volle Breite des Displays verläuft. Hier entspricht die »Total Width« der Breite des Artboards.
    Auf Desktop-Monitoren soll das Layout normalerweise nicht über die volle Breite laufen. Dann »friert« das Raster häufig bei einem Maximalwert (z.B. 1440 Pixel) ein und das Layout wird zentriert.

Formen zeichnen

Um Formen zu zeichnen, muss über »Insert > Shape > « die gewünschte Form ausgewählt werden. Anschließend kann die Form per Klick + Ziehen auf der Bühne gezeichnet werden. Mit Cmd werden Rechtecke quadratisch und Ellipsen kreisförmig erzeugt.

Bei individuellen Formen wird das Vektor-Werkzeug gewählt, dass per Klick Eckpunkte und per Klick + Ziehen Kurvenpunkte erzeugt. Wenn die Form fertig ist, kann sie per Doppelklick nachträglich editiert werden.

Per Doppelklick, können Pfadpunkte editiert, hinzugefügt und gelöscht werden. Das funktioniert generell bei allen Formen.

Formen»Pixel perfect« zeichnen

Achtet darauf, dass Formen sauber auf das Pixelraster gezeichnet werden, damit keine unscharfen Kanten im Browser entstehen. Unter »View > Canvas » Show Pixel« kann man die Pixelansicht für hohe Zoomstufen aktivieren. Das solle man unbedingt tun, um zu erkennen, wenn Fehler entstehen. Gerade beim Zeichnen von Icons etc. ist dieser Schritt unabdingbar.

Links die Pixelansicht mit fehlerhafter Unschärfe. Rechts die normale Ansicht, in der kein Fehler erkennbar ist

Formen kombinieren, von einander abziehen etc.

Mit den »Boolean Optionens« von Sketch können Formen kombiniert werden. Somit können aus simplen Formen komplexere Formen entstehen. Die Funktion ist vergleichbar mit dem »Pathfinder« von Adobe Illustrator.

Wenn Formen kombiniert wurden, entsteht in der Ebenenliste eine neue Gruppe namen »Combined Shape«. Hier können alle einzelnen Bestandteile noch editiert werden.

Soll aus diesen einzelnen Basis-Formen nun eine neue Form entstehen, wählt die Gruppe aus und »flattet« sie. »Layer > Flatten Selection to Bitmap«.

Zwei »Combined Shapes« können nicht erneut kombiniert werden. Zuvor müssen die Formen reduziert werden (Flatten).

Mit Texte arbeiten

Text einfügen

Wenn Text eingefügt werden soll, kann bei aktiviertem Textwerkzeug ein Textrahmen aufgezogen werden. Alternativ erzeugt man einen Text per Klick und kann anschließend den Rahmen ebenfalls noch korrigieren.

Texte in Pfade umwandeln

Wenn ein Text in Pfade umgewandelt werden soll, wählt die Option »Layer > Convert to Outlines«. Anschließend sind die Buchstaben als Form editierbar.

Mit Bildern und Fotos arbeiten

Bilder einfügen

Wenn ein Bild eingefügt wird, öffnet sich der Dialog für die Bildauswahl. Anschließend kann das Bild auf der Bühne positioniert und proportional skaliert werden. Das Verhalten bei »Bild einfügen« ähnelt einem Bild (<img>), dass als Vordergrundbild in HTML eingefügt wurde. Die Funktion verhält sich anders als ein Hintergrundbild, dass einem bestehenden Objekt zugewiesen wurde und ebenfalls in Skech eingefügt werden kann. Letzteres entspricht eher einem CSS background-image.

Wenn über die Funktion »Insert > Image« eine SVG-Datei importiert werden soll, kann diese nicht ausgewählt werden. Wenn hingegen die SVG-Datei per Drag and Drop in das Programm gezogen wird, funktioniert es.

Masken und Bildausschnitte erstellen

Wurde ein Bild eingefügt, kann per Doppelklick die Bearbeitungsfunktion aktiviert werden. Rechts im Inspektor stehen dann u.a. Beschneidungsfunktionen zur Verfügung.

Die meist geeignetere Möglichkeit Bildausschnitte zu erzeugen ist die Maske. Hierzu wird ein Objekt ausgewählt, das als Maske fungieren soll. Dieses Objekt wird dann über »Layer > Mask > Use as mask« als Maske festgelegt. Anschließend werden alle in der Ebenenliste darüber positionierten Objekte maskiert.

Mit Farben, Verläufen und Hintergrundbildern arbeiten

Wenn eine Form auf der Bühne markiert ist, stehen rechts weitere Optionen zur Verfügung. Es können beispielsweise Farben, Konturen, Blendmodi und Schatten eingefügt werden. Von allen diesen Gestaltungsattributen können mehrere übereinander verwendet werden. Indem auf das Plus-Icon geklickt wird, fügt man einen neuen Effekt gleicher Art hinzu. Verläufe, Bilder und Muster werden als Hintergrund (Fill) hinzugefügt – wie in CSS.

Wenn Optionen wieder entfernt werden sollen, muss zunächst der Haken für die Sichtbarkeit entfernt werden. Anschließend erscheint ein Papierkorb-Symbol über das alle deaktivierten Eigenschaften gelöscht werden können. Alternativ kann eine Eigenschaft auch per Drag-and-Drop auf die Bühne gezogen werden um sie zu entfernen.

Farbverläufe editieren

Wenn ein Verlauf hinzugefügt werden soll, so muss wie oben beschrieben zunächst der gewünschte Verlauf (linear, radial, gewinkelt) ausgewählt werden. Anschließend können neue Farbunterbrechungen hinzugefügt werden, indem in der Verlaufsanzeige an der Stelle geklickt wird, wo eine neue Farbe entstehen soll.

Auf der Arbeitsfläche kann der Winkel des Verlaufs eingestellt werden, indem Start- und Endpunkt verschoben werden. Auch eventuell zusätzliche Farbunterbrechungen werden auf der Bühne angezeigt und können auf der Verlaufsstrecke positioniert werden.

Hintergrundbilder einfügen

Wird ein Hintergrundbild als Füllmethode gewählt, stehen Skalierungsoptionen zur Verfügung. Die Methode »Fill« ist ab gängigsten.

Automatische Platzhalter-Grafiken verwenden

Sketch wird mit einem automatisch installierten Plugin ausgeliefert, dass es ermöglicht Platzhalter-Grafiken zu laden. Unter »Data > « stehen dazu verschiedene Bildquellen und Themen zur Verfügung. Aktiviert wird die Funktion, indem die gewünschte Form markiert wird. Im zweiten Schritt wird die Datenquelle gewählt. Sketch fügt die Bilder dann automatisch ein.

Sketch verfügt über Funktionen automatisch Platzhalter-Grafiken zu laden

Farben im Dokument oder global speichern

Im Farbwähler von Sketch sind unten zwei Sektionen enthalten – »Global Colors« und »Document Colors«. Hier können Farben, Verläufe oder Hintergrundbilder für die häufige Verwendung abgelegt werden. Je nachdem, in welchem Bereich man sich befindet, sind die Bezeichnungen der Sektionen angepasst.

Speichert man eine Farbe als »Global Color«, so steht Sie im Programm global zur Verfügung – also in allen Sketch-Dokumenten. Speichert man hingegen als »Document Color«, so steht sie nur im aktuell geöffneten Dokument zur Verfügung.

Farben ersetzen

Farben können in Sketch über »Edit > Find and Replace Color« ersetzt werden. Somit können Farbanpassungen – auch über Artboards hinweg – komfortabel vorgenommen werden.

Text- und Ebenenstile

Um Effekte für Ebenen und Text zentral verwalten zu können, existieren in Sketch »Layer-Styles« (Konturen, Schatten, Farben, Verläufe etc.) sowie »Text-Styles« (Schriftgröße, -Farbe, -Art etc.).

Um einen neuen Stil hinzuzufügen, markiert das Objekt, dass den Stil besitzt und wählt im Inspector die Option »Create new Text/Layer Style«.

Erstellung von Layer Style (links) und Text Style (rechts)

Anschließend steht der Effekt an gleicher Stelle zur Verfügung und kann dort auch editiert oder aktualisiert werden.

Wenn ein zugewiesener Stil geändert wurde, können alle Vorkommen davon per Klick aktualisiert werden

Tipps und Hinweise

  • Wenn Stile in Ordnern organisiert werden sollen, benennt sie nach dem Muster »Ordnername/Ordnername/Stil«. Sobald zwei oder mehr Stile existieren, organisiert Sketch die Stile in Ordnern.
  • Wenn ein Stil mehreren Elementen zugewiesen wurde, kann er zentral aktualisiert werden. Das Update wirkt sich dann auf alle Vorkommen dieses Stils aus.
  • Stile können nicht auf Gruppen angewendet werden
  • Stile können in Symbolen gewechselt werden, wenn das ursprüngliche Symbol einen Stil besitzt.

Resizing: Fluide Objektgruppen für responsive Layout anlegen

Wenn mehrere Objekte in einer Gruppe zusammengefasst wurden, kann jedes Objekt in der Gruppe an den Außenkanten der Gruppe ausgerichtet werden. Zusätzlich kann festgelegt werden, wie und ob das Objekt skalieren soll.

Der Vorteil dieser Funktion besteht darin, dass die gesamte Gruppe nachträglich in Höhe und Breite skaliert werden kann, ohne dass es zu Fehldarstellungen kommt. Die selbe Gruppe kann also beispielsweise auf verschiedenen Artboards – die wiederum für Smartphone, Tablet, Notebook und Desktop unterschiedlich breit angelegt wurden – verwendet werden.

Beispiel der Resizing-Funktion von Sketch: Das Quadrat soll bei Skalierung beider Objekte immer unten rechts und in fester Breite und Höhe positioniert sein.

Wenn eine Zeichenfläche ausgewählt wurde, kann die Option »Adjust content on resize« aktiviert werden. Anschließend orientieren sich alle Objekte an der Zeichenfläche und skalieren mit, wenn diese in der Größe geändert wird.

Symbole erstellen und verwenden

Eine große Stärke von Sketch sind die sog. Symbole. Einzelne Formen oder komplexe Gruppen können in ein Symbol umgewandelt werden. Anschließend können über »Insert > Symbols > […]« weitere Instanzen dieses Symbols verwendet werden. Wenn anschließend das Original (das Symbol) editiert wird, aktualisieren sich automatisch alle Instanzen.

Um ein Symbol zu erstellen, muss ein Objekt, eine Gruppe oder eine Zeichenfläche markiert werden. Anschließend kann über »Layer > Create Symbol« ein Symbol erstellt werden.

Als Namen für das Symbol schlägt Sketch automatisch den Namen der Gruppe bzw. der Ebene vor. Der Haken bei »Send Symbol to Symbols Page« sorgt dafür, dass Sketch eine neue Seite anlegt, und dort das Original-Symbol platziert. Wenn das Original editiert werden soll, muss man daher auf diese Seite navigieren.

Overrides

Wenn ein Symbol Texte,  Hintergrundbilder oder andere Symbole beinhaltet, kann eine Instanz durch sog. »Overrides« überschrieben werden. Es ist somit z.B. möglich im Original-Symbol einen Standard-Text zu verwenden und diesen dann beim Einsatz des Symbols zu überschreiben. Wenn der Style des Symbols sich nachträglich ändern soll, wirkt sich die Änderung nach wie vor auf alle Instanzen aus – die Overrides bleiben bestehen. Auch Bilder und Bild-Hintergründe können per Overwrite überschrieben werden.

Symbole organisieren

Der Name eine Symbols kann genutzt werden, um umfangreiche Projekte mit vielen Symbolen besser zu organisieren. Dazu muss der Name der Struktur »Ordnername/[…]/Symbol« entsprechen. Anschließend erzeugt Sketch Ordnerstrukturen im Menüpunkt »Insert«.

Tipps

  • Wenn Symbole verschachtelt werden, stehen die untergeordneten Symbole in den Overwrites als Auswahlliste zur Verfügung. Hier können untergeordnete Symbole getauscht oder deaktiviert werden.
  • Wenn Overwrites nicht zur Verfügung stehen sollen, sperrt die gewünschte Ebene.
  • Ebenestile und Textstile können in Symbolen ausgetauscht werden

Bibliotheken

Eine Sketch-Datei kann auch als Bibliothek für eine andere Sketch-Dateien gelten. Dazu muss die Datei unter »Preferences > Libraries > Add Library« hinzugefügt werden. Anschließend stehen alle Symbole, sowie die Text- und Layer-Stiles des verknüpften Dokuments zur Verfügung.

Bibliotheksobjekte am Beispiel verknüpfter UI-Kits von Apple

Export

Objekte und Artboards als Grafik exportieren

Wenn in Sketch Gruppen, Artboards oder einzelne Objekte exportiert werden sollen, kann unten rechts über »Make exportable« konfiguriert werden, wie das auf der Bühne markierte Objekt exportiert werden soll. Es kann beispielsweise das Dateiformat oder der Skalierungsfaktor beeinflusst werden.

Nachdem der Export konfiguriert wurde (1), kann mit einem Klick auf Export (2) der Exportdialog (3) geöffnet werden. Hier kann noch einmal überprüft werden welche Objekte gespeichert werden – sofern mehrere für den Export vorbereitet wurden.

Voreinstellungen für Exporte festlegen

In den Voreinstellungen von Sketch kann unter »Preferences > Presets« eine individuelle Voreinstellung für die Exporte festgelegt werden. Wenn diese individuelle Voreinstellung als Standard (Default) gewählt wird, werden alle Einstellungen automatisch gesetzt, wenn ein Objekt über »Make exportable« für den Export vorbereitet wird.

Export-Einstellungen für mehrere Objekte festlegen

Wenn die Export-Einstellungen für mehrere Objekte gleichzeitig und identisch festgelegt werden sollen, markiert in der Ebenenliste links alle gewünschten Objekte. Anschließend nehmt die Export-Einstellungen wie bekannt vor, oder entfernt die Export-Einstellungen. Die Änderungen haben Auswirkungen auf alle markierten Objekte.

Objekte als CSS- und SVG-Code exportieren

Neben den Export-Einstellungen, die ein Grafik-Dateiformat zum Ziel haben, stellt Sketch auch den Export in CSS- und SVG-Code zur Verfügung. Über »Rechtsklick > Copy CSS Attributes/Copy SVG Code« wird der entsprechende Code in die Zwischenablage kopiert und kann im Code-Editor wieder eingefügt werden.

Prototyping

Über die Preview-Funktion (Vorschau) können Sketch-Dokumente funktional getestet werden. Auch die Sketch-Mirror-App hilft dabei, indem sie Artboards auf mobile Endgeräte synchronisiert.

Artboards scrollen

Wenn ein Artboard von der Breite her einem physischen Gerät entspricht, kann in der Vorschau das Artboard gescrolled werden. Andernfalls stellt die Vorschau die vollständige Höhe des Artboards dar und skaliert die Ansicht.

Objekte beim Scrollen fixieren

Um Objekte beim Scrollen zu fixieren, kann im Inspektor die Funktion für das ausgewählte Objekt mit einem Haken bei »Fix position when scrolling« aktiviert werden. Das Objekt muss zwingend auf einem Artboard liegen, damit die Einstellung zur Verfügung steht.

Klickdummies

Wenn mehrere Zeichenflächen existieren, können Klickdummies erstellt werden. Dazu muss zunächst das Objekt ausgewählt werden, das später angeklickt werden soll. Anschließend wird mit dem Link-Werkzeug ein Link auf die Ziel-Zeichenfläche gesetzt. Rechts in den Eigenschaften kann die Art der Animation eingestellt werden.

Wenn die verlinkte Fläche nicht einem Objekt oder einer Gruppe entsprechen soll, kann auch ein sog. Hotspot gezeichnet werden, der dann als anklickbarer Bereich dient.

Hotspots in Symbolen können als Overwrite überschrieben werden!

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.