Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Sketch Grundkurs

Symbole: Grundlagen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bei sich wiederholenden Elementen, wie etwa der Navigation oder Buttons, bietet es sich an, diese in Symbole zu konvertieren. Spätere Änderungen werden dann automatisch auf alle Elemente übertragen.

Transkript

Eine Funktion, die ich in Sketch am meisten zu schätzen weiß, ist das Arbeiten mit Symbolen. Wenn man Symbole verwendet, kann man damit sehr effizient und effektiv arbeiten und das möchte ich jetzt gerade mal demonstrieren und zwar anhand dieser Player-Leiste hier. Diesen Player finden wir in allen drei Screens oder es können auch 30 Screens sein oder 300, ganz egal. Wir finden überall wieder diesen Player oder hier oben diese Leiste, oder andere Elemente, die sich auf allen Screens wiederholen, oder mehreren Screens, es müssen nicht unbedingt alle sein. So, um jetzt mit Symbolen arbeiten zu können, gehen wir als erstes hin und selektieren hier unseren gesamten Player-Bereich. Dann machen wir daraus eine Gruppe über Command+G und jetzt, wo wir das Ganze gruppiert haben, mache ich daraus ein Symbol. Ich habe dazu hier oben das Werkzeug beziehungsweise die Schaltfläche oder wir gehen über Layer Create Symbol Dann müssen wir einen Namen vergeben und ich nenne das Ding jetzt einfach mal Player. Wir sehen jetzt hier anhand des Icons, dass wir jetzt hier vor unserer vorigen Gruppe Player, jetzt hier dieses, ja, wie so ein Recycle Icon haben. so ein Synchronisations-Icon, und das wird auch hier in lila dargestellt. Genauso wie hier das Aa, also diese Textbox. Das liegt aber daran, dass diese Textbox hier ein Stil ist. Stile werden ebenfalls hier in diesem lila Ton angezeigt. Wir sehen den Unterschied, wenn ich mal zur Seite klicke, da hat der Text keinen Stil, deswegen ist der grau. Hier ist ein mit einem Stil, deswegen diesen lila Farbton. Ja und wir sind aber hier bei den Symbolen. Und wir sehen, vor dem Player haben wir jetzt dieses Synchronisations-Icon. Genauso auch hier oben in der Statusleiste, weil diese Statusleiste, die hatten wir uns aus einem Template aus Sketch herauskopiert und das war schon ein Symbol. Gut, wir haben also jetzt unser eigenes Symbol erstellt hier unten für den Player-Bereich. Und das Symbol möchte ich jetzt woanders weiterverwenden, deswegen kann ich hier bei dem anderen Screen diesen Player raus löschen, genauso auch hier, das war zuviel. Wie man sieht, habe ich hier schon eine Gruppe. die löse ich jetzt einfach mal auf über Strg+Shift+G So, und jetzt kann ich den Bereich löschen. Okay, und jetzt gehe ich einfach hin, ich kopiere mir den Player in die Zwischenablage über Command+C wechsel dann in das nächste Artboard, Command+V und auch hier. Somit haben wir jetzt hier überall das gleiche Symbol. Und das Schöne ist, dass wenn ich jetzt das Symbol verändere, verändere ich automatisch alle 3 Player. Wenn ich jetzt also zum Beispiel hingehe und sagen wir mal diese Buttons nach oben setzen möchte, dann mache ich einen Doppelklick, bin dann im Symbol drin und gehe jetzt hin, muss noch ein Doppelklick machen, weil wir eine Gruppe erstellt hatten, wähle jetzt hier die Elemente aus, verschiebe die meinetwegen hier nach oben, gehe dann über diesen Pfeil Return to Instance und dann sehen wir, dass wir alle verändert haben. Das ist natürlich extrem komfortabel, weil wir so ganz einfach hingehen können, nachträglich Elemente tauschen können, löschen können, verschieben können, Stile ändern können, was auch immer, und das dann automatisch auf allen Artboards in allen Symbolen automatisch synchronisiert wird. Das Gleiche hier oben. Wenn wir jetzt zum Beispiel den Carrier ändern wollen, also hier den Namen, dann ändern wir den an einer Stelle und ändern somit alle. Auch das möchte ich gerade noch mal demonstrieren. Vorher gehe ich aber erstmal hin und setze das Symbol hier wieder zurück. Schiebe also die Elemente etwas zurück. So, hier sind wir. Jetzt möchte ich hier oben den Carrier, den Namen etwas ausrichten. Der soll hier genau in der Mitte sein. Also mache ich einen Doppelklick und bin dann hier, ich zoome mal ran, in der Bearbeitung dieser Statusleiste. So, und als erstes Mal werde ich den Hintergrund hier einfärben, weil jetzt sehen wir den Text gar nicht. Das heißt, ich erzeuge mir jetzt einfach mal ein Rechteck hier an dieser Stelle. So, zoome ich mal ein bisschen raus, dann geht das schneller. So, die Statusleiste ist sehr lang. Okay, ich ziehe das jetzt hier auf die volle Breite, nehme die Border weg, die Fill setzt ich auf Schwarz. So, und jetzt, die Höhe ist eigentlich 20. Und jetzt schiebe ich natürlich die schwarze Fläche ganz nach unten, somit sehen wir jetzt auch, was wir machen. Ja, und jetzt kann ich entweder hingehen und das Icon weiter nach links schieben, oder ich schiebe den Text einfach ein Stückchen weiter nach rechts. So sieht mir das viel sympathischer aus. Jetzt gehe ich wieder zurück und jetzt haben wir das überall geändert. Ja, wie wir also gesehen haben, ist das Arbeiten mit Symbolen sehr effizient. Deswegen würde ich grundsätzlich immer Symbole anlegen, wenn man mehrere Elemente hat, die man über mehrere Screens verteilt unterbringt. Wenn es nur Text ist oder nur ein Objekt, dann kann man natürlich hingehen und mit Stilen arbeiten und die Stile synchronisieren. Wenn es aber mehrere Objekte sind, die zusammen als Gruppe, als ein Element dienen, wie hier zum Beispiel der Player oder wie bei einer Webseite der Header, wo das Logo drin ist, wo die Navigation drin ist, wo auf allen Seiten das gleiche Logo gezeigt wird, wo auf allem Seiten die gleich Navigation gezeigt wird, dann sollte man unbedingt mit Symbolen arbeiten, denn der Kunde will immer das Logo größer haben, und somit muss man nicht in allen Screens das Logo ändern. Man macht es in dem Symbol und synchronisiert somit alle Screens und ist innerhalb von wenigen Sekunden fertig.

Sketch Grundkurs

Lernen Sie die grundlegende Bedienung von Sketch am Beispiel des UX-Designs einer App.

4 Std. 45 min (54 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.04.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!