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

Einzelne Artboards exportieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zu Präsentationszwecken sollen häufig auch einzelne Screens exportiert werden. Erfahren Sie in diesem Video, welche Formate und Einstellungen dabei zur Verfügung stehen und wie Sie den Export anstoßen.

Transkript

Ich möchte Ihnen zeigen, wie man die einzelnen Artboards aus Sketch exportieren kann. Zwischendurch möchte man ja seine Zwischenstände vielleicht dem Kunden präsentieren oder den Kollegen zeigen. Und ja, wenn wir uns jetzt zum Beispiel so ein Screenshot verschicken wollen von einem Artboard, wie machen wir das? Dazu gibt es verschiedene Möglichkeiten. Die erste Möglichkeit ist die: Ich wähle das Artboard aus, was ich exportieren möchte oder auch mehrere und klicke dann hier unten auf das Plus bei "Make Exportable". So dann sehen wir hier eine Vorschau von unserem Screen, den wir exportieren wollen. Und wir sehen jetzt hier verschiedene Angaben, die man treffen kann. Wir sehen jetzt, dass wir das in einfacher Größe exportieren an der Stelle. An dieser Stelle können wir über das Dropdown auswählen, ob wir ein Präfix oder Suffix haben wollen. Das heißt, dass vor den Dateinamen noch etwas davor kommt oder danach, und wir können das Format definieren. Wir können das Element übrigens auch mehrfach exportieren, indem wir hier oben auf das Plus klicken. Mit jedem Mal, wo wir auf das Plus klicken, kommt ein weiterer Export hinzu. Hier wird automatisch zweifach und dreifach erzeugt. Das heißt, für Retina-Auflösung haben wir jetzt "2x". Unsere aktuelle Auflösung des Artboards steht auf 375. Das ist einfach. Die iPhones, in dem Fall iPhone 6, iPhone 6s und iPhone 7, haben aber eine Breite von 750. Das betrifft in dem Fall die doppelte Auflösung. Wenn wir also jetzt mit doppelt so hoher Auflösung exportieren, dann haben wir genau das Format, was man dann auf Retina-Displays benötigt. Wenn man aber an einem Rechner ohne Retina arbeitet, dann arbeitet man vielleicht mit der Grundauflösung, kann das aber nachher problemlos hier für die verschiedenen Formate exportieren. Es gibt Geräte, die haben noch eine viel höhere Auflösung. Da kann auch dreifach hier angeben. Das Suffix ist in dem Fall "@2x", "@3x". Ja, und dann können wir doch das Format anpassen. Das heißt, in welchem Dateiformat soll die Datei exportiert werden? Und Standard ist hier PNG gewählt. PNG ist ein Format, was kompressionslos ist, sprich der Export wird zwar komprimiert, sprich die Datei, die exportiert wird, ist zwar kleiner, als wenn man es in einem TIFF zum Beispiel exportiert. Aber wir haben keinen Qualitätsverlust an der Stelle. Dann gibt es das JPEG-Format. Das ist ja auch das, was man mit Kameras kennt, wenn man ganz normal Fotos macht. Digitalkameras speichern in der Regel standardmäßig als JPEG ab. Und beim JPEG-Format, da kann man nachträglich die Qualität regeln. Also die Qualität runterregeln, um somit die Datei auch von der Dateigröße zu minimieren. PNGs können aber transparent sein, also transparente Bereiche zum Beispiel beinhalten. Das geht beim JPEG nicht. Dann haben wir noch das TIFF-Format. TIFF ist auch kompressionslos und das, was man hier exportiert, sind sehr große Dateien, die man eher für den Druck benötigt. Fur Web verwendet man TIFF normalerweise nicht. Aber es kann ja sein, dass man ein Screenshot tatsächlich abdrucken möchte, weil man ein Buch schreibt oder weil man in einer Broschüre ein Screenshot von einem Interface zeigen möchte. Dann kann man hier als TIFF exportieren. Ansonsten haben wir noch dieses Format WEBP. Das Problem ist allerdings, dass dieses Format nicht von allen derzeit gängigen Browsern unterstützt wird. Das ist eher etwas für die Zukunft. Aktuell würde man eher mit PNG und JPEG arbeiten. Ansonsten haben wir hier noch drei weitere Formate. Das PDF ist klar. Das PDF ist ebenfalls ein Austauschformat. Das heißt, wenn ich jemandem einen Screen schicken will, dann kann ich das als PDF tun. Das Schöne ist, dass bei einem PDF Vektordateien, also alles, was Vektorpfade sind und Text ist, als Vektor auch weitergegeben wird. Somit ist das PDF auch ja nur bedingt kompressionslos. Heißt, es eignet sich gut zum Austauschen von Dateien oder zum Kommentieren zum Beispiel. Ich exportiere ein PDF und der Kunde kann Kommentare vergeben. EPS eignet sich gut, wenn wir die Datei exportieren wollen und in anderen Vektorprogrammen weiterarbeiten wollen, wie zum Beispiel Illustrator. Da ist EPS der Standard. Und dann SVG steht für Scalable Vector Graphic. Scalable Vector Graphics können im Browser angezeigt werden. Und alle aktuellen Webbrowser unterstützen auch das SVG-Format. Das heißt, ein ganzer Screen macht jetzt keinen Sinn. Aber wenn wir ein Interface-Element haben, wie zum Beispiel dieses hier, oder einfache Icons oder Ähnliches, diese kann man wunderbar als SVG exportieren, weil die Dateigröße winzig klein ist, alle Browser das unterstützen und man die Dateien, weil es im Endeffekt weiterhin Vektoren sind, man diese beliebig vergrößern und verkleinern kann und sie nicht unscharf oder pixelig werden. Ja, das sind also die Unterschiede, die wir hier zur Auswahl haben. Wir können uns hier auch Presets erstellen. Das heißt, wenn ich jetzt auf "Make Exportable" klicke, werden direkt alle Formate erstellt, die ich benötige, und ich muss nicht extra noch mal auf Plus, Plus, Plus klicken. Diese Presets kann man hier auswählen. Die Presets erstellen kann man in den Voreinstellungen. Wenn wir hier in die "Preferences" gehen, dann haben wir hier den Bereich "Presets". Und hier ist das Default-Preset einfach nur "einfach". Für iOs haben wir "einfach", "zweifach", "dreifach". Für Android haben wir noch andere Presets. Und wir können jetzt noch weitere Presets uns hier erstellen. Wir können den Namen geben. Ich sage jetzt einfach mal "My Preset". So, und kann jetzt hier sagen "einfach". Und dann brauche ich noch "zweifach", "dreifach", "anderthalbfach". Na, ich speichere das ab. Und dann habe ich jetzt hier "My Preset" auch zur Auswahl. Wenn ich dann in Zukunft auf das Plus klicke, werden direkt alle diese Presets geladen. Eine Möglichkeit, um jetzt den Screen zu exportieren, geht ganz einfach per Drag-and-Drop. Hier steht es auch, wenn ich mit der Maus überfahre, steht da: "drag and drop outside Sketch to export the slice". Das heißt, ich fasse den Screenshot an, öffne dann den Finder und lege den Screenshot hier im Finder ab. Und hier haben wir jetzt den Screenshot exportiert, ja, und können diesen jetzt zum Beispiel per Email verschicken. Das ist natürlich ein sehr einfacher Weg, einfach per Drag-and-Drop. Eine weitere Möglichkeit ist, dass man hier unten hinklickt auf "Export Cover", dann öffnet sich ja das Fenster, und ich kann sagen "Exportieren". Oder ich klicke hier unten rechts hin, dann habe ich die Wahl, das per Email zu verschicken, per AirDrop, per Twitter und so weiter. Oder wir klicken hier oben rechts, dann öffnet sich hier ein Fenster mit allen Objekten, die wir zur Auswahl haben. Das heißt, wo wir gesagt haben "Make Exportable". Momentan ist es nur eins, deswegen können wir eins auswählen. Aber sonst hat man hier eine ganze Liste. Ich kann es gerade mal zeigen, indem ich einfach auch das weitere Element auswähle, auch sage "Make Exportable". Wenn ich jetzt hier oben hinklicke, dann habe ich beide zur Auswahl, kann aussuchen, welches exportiert werden soll. Ich sehe auch hier, dass das Cover viel mehr Formate hat, als mein Tracklist, kann auf "Export" klicken, um meine Screens zu exportieren. Eine weitere sehr schöne Möglichkeit geht über den Dialog "File Export", ist genau das Gleiche, hier "Export Artboards to PDF". Wenn ich das auswähle, dann kann ich mir jetzt einen Ordner auswählen, ich wähle jetzt diesen hier aus, in dem Fall wird ein PDF generiert, ich speichere das ab. Und wenn ich jetzt einen Blick in den Finder werfe, dann haben wir hier die "Export.pdf"-Datei. Wenn ich mir die anschaue, dann sehen wir hier unser exportiertes PDF mit den einzelnen Seiten, durch die man jetzt klicken kann. Das ist natürlich sehr schön, weil das kann man jetzt dem Kunden zur Verfügung stellen, der kann es dann im PDF-Format öffnen und dort gibt es ja die Möglichkeit, das Ergebnis zu kommentieren. Das heißt, der Kunde kann Kommentare für alle möglichen Bereiche festlegen, diese abspeichern, uns per E-Mail zurückschicken und wir können dann die Kommentare abarbeiten. Wie wir also gesehen haben, gibt es etliche Möglichkeiten, um in Sketch die einzelnen Artboards als einzelne Screens zu exportieren.

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!