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

Icons einfügen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video zeigt der Trainer wieder am Beispiel des Musik-Players, wie Sie durch das Einfügen von Icons ansprechende Schaltflächen aus einfachen Vektorgrundformen erzeugen.

Transkript

Damit unser Projekt etwas lebendiger wird, wollen wir das als Nächstes mit Icons bestücken. Wir benötigen Icons hier oben für diese Statusleiste, wir benötigen Icons hier oben zum Navigieren in der App und hier unten natürlich, um unseren Player zu starten, um zum nächsten und zum vorigen Clip zu gelangen. Fangen wir mal ganz oben an. Um hier jetzt in dem Fall das Icon hinzuzufügen, für die Stärke des Signals und hier auf der rechten Seite die Batterielaufzeit, dazu haben wir bereits vorgefertigte Icons, und zwar wenn wir in die Templates reingehen, dann haben wir die Templates für iOS-Design. Und wie wir hier schon sehen, haben wir hier die Statusleisten, und in unserem Fall benötigen wir weiß. Deswegen nehme ich mir mal dieses hier, kopiere es mir einfach in die Zwischenablage, wechsele dann zurück in unsere Applikation und füge das dann hier ein. Jetzt muss ich hier den Y-Wert noch auf 0 setzen, so, und somit ist das Ganze hier schon perfekt. Ich kann durch jetzt noch reingehen und hier meinetwegen den Text ändern. Der ist jetzt weiß in dem Fall. Das ist natürlich unkomfortabel. Hier schreibe ich jetzt einfach "v2b" an der Stelle rein, gehe wieder zurück, so der könnte ein bisschen höher sitzen. Das heißt, ich wähle den Text einfach aus und verschiebe den etwas nach oben. Mal gucken, wie es jetzt aussieht. So sieht das Ganze schon gut aus. Vielleicht diesen Text auch noch ein bisschen nach oben. So, auch den schiebe ich mal 2 px nach oben. Das war vielleicht einer zu viel. So, hier hat man auch noch irgendwo Text. Den schieben wir auch wieder 2 nach oben, denke ich. Mal gucken, wie es aussieht. Kann wieder 1 runter. Na ja, das sind also Feinheiten, an denen man sich natürlich aufhalten kann. Aber wie wir sehen, haben wir jetzt sehr schnell hier unsere Statusleiste erhalten. So, als Nächstes kümmern wir uns um die weiteren Icons. Und für den Fall habe ich eine extra Sketch-Datei angelegt, nur mit den Icons. Diese Icons sind alle vektorbasiert, das heißt, man kann sie beliebig nachträglich noch anpassen und von der Größe skalieren, ohne dass sie pixelig werden. Gut, und bevor ich mir jetzt jedes Icon einzeln rüberkopiere, nehme ich direkt alle, kopiere sie mir in die Zwischenablage, wechsele dann in unser Sketch-Projekt und füge diese hier ein. So als Nächstes gehe ich jetzt einfach nur noch hin und werde die Icons hier auf die Seite legen, so dass wir uns einfach gleich bedienen können und die dahin legen können, wo wir sie brauchen. Das ist dieses hier. Und auch das ziehen wir uns mal hier auf die Seite. So als Nächstes müssen wir uns eigentlich nur noch die Icons aussuchen, die wir benötigen, und diese positionieren. Diesen Pfeil zurück. Der soll in dem Fall weiß sein, deswegen ändere ich mal hier den Farbton. Außerdem die Höhe, die setze ich jetzt einfach mal auf 23, so das sieht eigentlich ganz gut aus. Von der Position aus, da halte ich mal die Alt-Taste gedrückt. Möchte ich, dass dieser hier 15 px von oben ausgerichtet ist, also wähle ich den Pfeil aus, schiebe ihn in 2 px nach oben. Jetzt sehen wir die 15 px. Okay. Und dann beachten wir noch den Abstand von links. Der soll in dem Fall 20 sein. Das stimmt nun auch. Jetzt brauche ich noch das Menü hier auf der rechten Seite. Ich schiebe es mir hier rüber. Auch hier setze ich das Ganze auf Weiß. Die Höhe setze ich mal auf 20, weil sonst wirkt das Icon, wenn es die gleiche Höhe hat, wie der Pfeil. Dann wirkt das viel dominanter als der Pfeil. Deswegen setze ich das hier ein bisschen kleiner an. Und auch hier müssen wir natürlich gucken wegen den Abständen, von oben soll es in dem Fall 20 sein. Also es sind viel. Vielleicht auch 15. Das ist gut. Und von rechts soll es in dem Fall natürlich ebenfalls 35 px sein. Also gehen wir auch hierhin und schieben das Ganze noch weiter zur Seite. Moment, nochmal gucken, hier haben wir als Abstand 20. Okay, dann gehen wir auch hierhin und machen auch hier exakt 20 px Abstand. Okay, somit sind die beiden Objekte schon mal gut positioniert. Ich finde, das Menü kann noch ein bisschen weiter runter. Das kommt dadurch, dass wir es vergrößert und verkleinert haben. Wenn ich jetzt beide auswähle, dann sitzt es ungefähr mittig. Okay, schauen wir mal weiter unten. Ich scrolle sie nach unten, muss natürlich hier meine Icons mitnehmen. So. Und was wir hier benötigen, ist als nächstes Mal der Play-Button. Also ziehe ich mir den hier an die entsprechende Stelle, wähle zusammen den Kreis aus und positioniere das Ganze jetzt mal mittig. Obwohl das Dreieck hier mittig ausgerichtet ist, wirkt es nicht mittig, weil es auf der linken Seite viel mehr Platz braucht als auf der rechten. Deswegen wähle ich es aus und schiebe es mal ein paar Pixel nach rechts, so dass man das Gefühl hat, das sitzt mittig und das sieht deutlich besser aus. Okay, dann brauchen wir noch den Pfeil nach rechts zum Vorwärtsspringen. Der soll eine Höhe haben von 20, und der soll ebenfalls hier jetzt mittig ausgerichtet sein. Und der sieht in dem Fall gut aus, weil wir auf beiden Seiten hier diese Balken haben. Ich dupliziere mir den noch, schiebe ihn mal hier zur Seite. Auch hier gucke ich, dass er genauer mittig sitzt. Bevor ich ihn jetzt mittig setze, werde ich ihn aber erst noch hier über diese Schaltfläche horizontal spiegeln, oder hier ist es halt Flip. Ich wähle beide aus sowohl den Kreis, als auch den Button zum Zurückspringen, versuche nochmal zu positionieren, aber das sitzt schon perfekt. Okay, dann brauchen wir zu guter Letzt eigentlich noch diese beiden Icons hier. Wie wir sehen, sind die beiden von der Höhe her identisch 35 und 35. Aber dadurch, dass die Icons anders aufgebaut sind, wirkt dieses halt deutlich fetter bei der gleichen Größe, das heißt, wir müssen von der Größe her das hier etwas verringern, damit sie genau so wirkt, wie dieses hier. Okay, erst mal das erste Icon nehmen. Das soll hier unten in die Ecke und zwar mit einer Höhe von 20. Von der Seite soll es 30 px ausgerichtet sein und von oben hier 140. Okay, da sieht so weit gut aus. Nehmen wir uns auch das nächste Icon. Das schiebe ich jetzt hier zur Seite. Das hat in dem Fall eine Höhe von 16, also etwas kleiner. Somit wirkt es aber jetzt gleich groß, vor allem die Stärke der Linie. Und auch das soll oben 140 ausgerichtet sein, was es jetzt schon ist, und von der Seite ebenfalls 30, also noch ein bisschen mehr. Hier haben wir jetzt beides gut positioniert. Ja, so wären wir jetzt mit Icons fertig. Ich zoome mal aus unserem Projekt raus über Command+1, und somit sehen wir schon mal hier eine gute Vorschau unserer Icons, und wir sehen, wirkt das Ganze jetzt schon deutlich lebendiger.

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
Ihr(e) Trainer:
Erscheinungsdatum:25.04.2017
Laufzeit:4 Std. 45 min (54 Videos)

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!