Sketch Grundkurs

Text layouten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie in diesem Video, wie Sie Text layouten und ihn zum Schluss mit einer Alpha-Maske versehen. So stellen Sie sicher, dass der Text später scrollbar ist.

Transkript

So, wir wollen jetzt hier an unserem Interface weiterarbeiten, beziehungsweise wir brauchen einen weiteren Screen für unsere Audio-App. Dazu gehe ich hin und dupliziere den Vorhandenen, indem ich ihn auswähle, die Alt-Taste gedrückt halte und dann ein Duplikat hier zur Seite raus ziehe. Dieses Artboard nenne ich jetzt in dem Fall Track-List, okay. Und ich entferne die Elemente, die ich nicht brauche, das heißt diesen Teil hier, den Teil. Das Icon hier oben wird auch nicht benötigt. Die freie Fläche wollen wir jetzt nutzen, um hier eine Track-List anzuzeigen. Dazu erzeuge ich mir in dem Fall mit dem Textwerkzeug hier einen ganzen Bereich, in dem die Track-List nachher zu sehen ist. Sie soll natürlich hier an der Unterkante dann aufhören. Natürlich links ausgerichtet. Und jetzt brauche ich Text. Für den Text habe ich mir ein extra Dokument vorbereitet, das ist die Datei Track-List und hier kopiere ich mir einfach die gesamten Titel raus, kopiere sie mir in die Zwischenablage. Jetzt habe ich Steuerung + X gemacht, ich meine natürlich Steuerung + C , beziehungsweise Command und C. Gehe jetzt hier rüber, markiere alles, Command + V, und habe jetzt hier meine Track-List. Als nächstes geht es natürlich darum, diese jetzt hier ein bisschen aufzubereiten. Zum einen ändere ich einmal die Schriftgröße, die setze ich hier auf 21. Und den Zeilenabstand möchte ich auch deutlich erhöhen, nämlich auf 38. Okay, so sieht das eigentlich schon ganz gut aus. Ich positioniere mir hier das Ganze noch irgendwie schick hin. Okay. Hier unten soll der Text nachher auslaufen, das heißt wir lassen den Text nachher hier transparent werden. Aber bevor es soweit ist möchte ich jetzt erst noch hingehen und hier ein bisschen weiter layouten. Zum einen den Titel, der jetzt gerade läuft, den machen wir in dem Fall fett, so. Und außerdem soll jetzt vor diesem Titel hier noch ein Dreieck zu sehen sein. Dazu gehen wir hier auf Insert, wählen Shape und dann Triangle. Ja und jetzt gehe ich hin und zeichne mir auch schon ein Dreieck, so. Allerdings muss ich das jetzt noch drehen, von der Größe anpassen. Ich zoome mal ganz nah heran über Command, 2. Das ist schon sehr nah, aber wunderbar. So kann ich das Dreieck jetzt nämlich drehen, nämlich indem ich die Command-Taste gedrückt halte, zusammen mit der Shift-Taste damit es einrastet gehe ich jetzt hin und drehe das Dreieck, positioniere es und muss jetzt noch gucken wegen der Farbe. Ich nehme Border weg, setze die Füllung auf weiß. Ist immer noch deutlich zu groß. Deswegen geh ich jetzt hin und verkleinere das jetzt mal indem ich Command und Pfeil nach oben drücke. So ich zoome mal raus. Schau mal wie es aussieht. Ist immer noch ein bisschen sehr groß. Vielleicht noch ein kleines bisschen kleiner. So ist es in Ordnung. Jetzt noch positionieren. Da an der Stelle steht es gut. Ja und was ich jetzt noch gerne hätte, wären hier so horizontale Trennlinien. Dazu gehe ich auch hier über Insert, und dann in dem Fall Shape und dann Line, oder halt die Taste L. Und jetzt male ich mir eine horizontale Linie rein und halte dabei die Shift-Taste gedrückt, damit diese auch gerade wird. So, die Farbe soll in dem Fall weiß sein und die Stärke auf 2. So, diese Linie muss ich jetzt hier noch ausrichten, dass sie genau mittig sitzt zwischen diesen beiden Zeilen. Und jetzt dupliziere ich sie mir ganz einfach über Command D. Schiebe sie dann nach unten an die entsprechende Stelle. Wieder Command, D. Verschieben. Und das wiederhole ich jetzt ein paarmal. Wir können auch ganz einfach hingehen und gar nicht so präzise ausrichten, weil wir können den Abstand auch gleich noch nachträglich über das Ausrichten-Werkzeug optimieren. Ich gehe also hin und habe den oberen Teil hier perfekt ausgerichtet, dann noch den unteren Teil. Ja, so sieht es gut aus. Und jetzt wählen wir uns alle diese horizontalen Linien aus, mit gedrückter Shift -Taste, und können jetzt ganz einfach sagen, dass wir sie hier horizontal verteilen wollen. Ja, und so sieht das Ergebnis schon gut aus. Ich zoome mal hier etwas ran, über Command, 2, an diese Stelle. Ja, und mit dem Ergebnis bin ich soweit zufrieden. Als nächstes möchte ich jetzt eine Alpha-Maske erstellen, so dass der untere Teil hier ausfaded. Dazu gehe ich hin und ich kopiere mir hier erst mal alle Elemente. So. Dann ziehe ich als nächstes ein Rechteck auf, was den gesamten Bereich hier abdeckt. So. Ich nehme von mir aus noch die Border raus und ich erzeuge mir hier einen Verlauf, weil es ja eine Alpha-Maske sein soll. Und jetzt muss ich die Maske natürlich noch hier mit der Gruppe anwenden. Ich wähle also beides aus und gehe dann auf Maskieren. Somit haben wir jetzt hier unsere Maske, allerdings wirkt die noch nicht. Denn wir müssen ja jetzt in dem Fall hingehen und sagen, dass das eine Alpha-Maske sein soll. Deswegen gehen wir hier auf Layer Mask Mode. Ich muss natürlich die Maske dafür ausgewählt haben. Layer Mask Mode, und kann Noch sehen wir kein Ergebnis, denn die Alpha-Maske arbeitet ja mit Transparenzen. Also muss ich jetzt hier hin gehen und eine Transparenz definieren. Das heißt oben soll ja 100 Prozent Deckkraft sein, aber unten... Moment, genau umgekehrt. Das ist jetzt hier in dem Fall oben. Und unten der dunkle Bereich, das ist dieser hier, der soll ja transparent sein. Und da ich erst hier anfangen möchte mit der Transparenz, erzeuge ich mir hier einen weiteren Punkt. Und der hat ja jetzt auch in dem Fall eine Deckkraft von 100 Prozent. Bei dem anderen gehe ich jetzt aber hin und verringere die Deckkraft auf null. Und jetzt sehen wir auch hier schon den Verlauf. So und den Verlauf können wir jetzt ganz einfach anpassen natürlich nachträglich, indem wir nachträglich ganz einfach hingehen und mit der Maske spielen. Das heißt, wenn hier etwas später erst der Bereich hier auslaufen soll, oder vielleicht schon ein bisschen eher. So vielleicht. Dann können wir damit noch ein bisschen spielen. Auf jeden Fall soll es nachher realistisch aussehen, so dass man erkennen kann, dass dies ein Scroll-Bereich ist, der nach unten hin ausläuft. Eigentlich sind wir soweit jetzt fertig. Das Einzige, das mir gerade noch auffällt, ist dass der Titel oben fehlt. Deswegen hier gebe ich jetzt einfach mal einen Titel ein. Hier drüben fehlt der auch. Deswegen gehen wir auch hier hin und schreiben hier jetzt What I Might Do. Ja, und somit haben wir uns jetzt hier alle Textelemente erstellt und wir haben dieser auch(inaudible)

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!