Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Sketch Grundkurs

Assets exportieren

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Auch einzelne Assets gilt es im Produktionsalltag immer wieder zu exportieren. In diesem Video zeigt Ihnen der Trainer, wie Sie dieser Aufgabe gerecht werden.

Transkript

Nun geht es um das Slicen von Elementen. Das heißt, das Zerlegen von dem Interface, was wir gestaltet haben, in seine Einzelteile. Denn wir benötigen unterschiedliche Einzelteile für die Entwicklung nachher, die dann in HTML und CSS wieder zusammengesetzt werden. Das heißt, wir benötigen zum Beispiel dieses Icon hier als Einzelteil. Der Text, den macht man nachher in HTML und CSS, den müssen wir nicht exportieren. Aber wie gesagt diesen Pfeil, das Icon hier für den Menüpunkt. Wir haben hier den Hintergrund, der muss exportiert werden, dieses Bild als einzelnes. Ja, das ist wieder reiner Text. Dann haben wir hier unten im Player, da haben wir zwei Icons, die exportiert werden müssen und diese drei Buttons. Früher war es so, dass so ziemlich alles als Grafik exportiert werden musste. Das heißt, man hat diese Buttons hier als einzelne Grafik exportiert. Also drei Grafiken, in dem Fall als PNG und na ja, das Ganze war dann halt ziemlich aufwendig, weil die Dateigröße entsprechend auch in die Höhe geht und man musste halt tatsächlich viel mit Grafiken machen. Heutzutage kann man sehr viel mit CSS machen. Bei diesem Button zum Beispiel kann man hingehen und den Kreis selber, den Verlauf und den Schatten dahinter in CSS nachbauen. Das Icon, das kann man dann als SVG-Grafik mittig da drin positionieren. Fangen wir aber erstmal hier mit dem Hintergrund und mit diesem Bild an. Ich selektiere mal den Hintergrund und um diesen jetzt als einzelnes Segment zu haben, wähle ich das Bild aus, klicke dann rechts auf "Make Exportable", hier auf das "+" und klicke dann hier auf das Slice-Werkzeug. Somit wird jetzt der Hintergrund hier zerschnitten. Allerdings sehen wir hier in der Vorschau, deswegen ist die Vorschau auch so praktisch, dass wir hier Elemente haben, die wir gar nicht brauchen. Wir wollten ja die Buttons einzeln haben, den Text einzeln und dieses Bild auch. Deswegen haben wir hier ein Häkchen wo wir sagen können, dass nur der Inhalt der Gruppe exportiert werden soll. Also wird in dem Fall, wie wir sehen, nur das Cover exportiert und nicht der Rest. Wir können jetzt auch festlegen, was für ein Format es sein soll. aber wichtig ist jetzt, dass wir schon sehen dass das richtige Element exportiert wird. Wenn es noch transparente Pixel drumrum gäbe, könnte man diese über diesen Haken hier beschneiden, also trimmen. Wenn es transparente Bereiche hier im Bild gibt, kann man auch noch sagen, welche Farbe dieser Bereich haben soll, indem man hier ein Häkchen setzt für den Hintergrund und eine Hintergrundfarbe auswählt. Brauchen wir aber auch nicht. Das kommt eher bei diesem Bild hier infrage. Wenn ich hier dieses Cover auswähle, und dafür jetzt ebenfalls ein Slice erstelle, indem ich auf das "+" klicke und dann hier auf das Slice-Werkzeug, dann sehen wir jetzt hier unser Cover. Mit dem Hintergrund. In dem Fall wollen wir keinen Hintergrund haben, deswegen setzen wir hier wieder den Haken. So, und der Hintergrund ist automatisch transparent. Wir könnten aber jetzt hier eine Hintergrundfarbe dafür auswählen, damit das mit dieser Hintergrundfarbe exportiert wird. Gut, das sparen wir uns aber, denn wir wollen keine Hintergrundfarbe haben, wir wollen natürlich Transparenz haben und wenn wir mit Transparenz arbeiten wollen, dann müssen wir natürlich die Grafik als PNG exportieren. Schauen wir uns noch zwei weitere Beispiele an. Wenn ich jetzt hier in dem Fall dieses Icon exportieren möchte, das befindet sich ja jetzt in einem Symbol, dann muss ich doppelt klicken um in das Symbol hineinzukommen, kann das "Loop"-Icon mir hier jetzt auswählen und klicke ebenfalls auf das "+", auf das Slice-Werkzeug und ich will in dem Fall auch keinen Hintergrund haben. So, und jetzt können wir das Element halt in dem Fall auch als SVG exportieren. Das heißt, ich kann hier auf SVG umstellen und die Grafik als SVG-Grafik exportieren. Schauen wir uns aber noch hier diesen Button an. Ich möchte diesen Button als Ganzes, als eine SVG-Grafik exportieren. Deswegen gehe ich hier in den Button hinein, habe diese beiden Elemente und da ich die beide zusammen exportieren will, gruppiere ich die. Sie befinden sich schon in einer Gruppe, wenn Sie noch nicht in einer Gruppe wären, würde ich diese jetzt gruppieren, also "Cmd+G" kann der Gruppe jetzt noch einen Namen geben, wie zum Beispiel sagen wir mal "back-btn" für Button und dann klicke ich hier wieder auf das "+", auf das Slice-Werkzeug und deaktiviere den Hintergrund. Wir sehen, der Hintergrund ist transparent und ich will hier in dem Fall ebenfalls eine SVG exportieren. Wenn wir jetzt lediglich diesen Button exportieren wollen, dann klicken wir halt hier auf "Export"-Button. Wenn wir alles, was wir bisher gesliced haben, exportieren wollen, dann klicken wir hier oben rechts auf "Export", dann kriegen wir hier die Auswahl, was alles exportiert wird. Wir können hier nochmal klicken um nichts auszuwählen, und dann einzeln zu selektieren. Wenn ich noch mal klicke, dann sehen wir hier, das alles ausgewählt wurde. Wir sehen jetzt hier einen Warnhinweis, denn wir haben das Problem, dass dreimal der gleiche Dateiname vergeben wurde. Das heißt, ich muss jetzt hingehen und diese Dateien umbenennen. Am einfachsten ist es, indem wir hier unten hinklicken, um nur die Slices angezeigt zu bekommen. Ich klicke also die Ebenen aus, sehe nur noch die Slices und hier sehe ich jetzt "Cover", "Cover". So, das ist unser Background, das heißt, hier gehe ich einfach hin und sage "Background". Dann haben wir hier das Cover und dann haben wir noch ein weiteres Cover. Das finden wir hier nicht, aber das sehen wir hier oben. Wenn ich hier also hingehe, kann ich jetzt den Namen von dem ganzen Artboard umbenennen oder ich nenne halt hier das Element um: "Cover-front" Bei den Namen von diesen Slices, von diesen Segmenten, kann man direkt drauf achten dass man diese vernünftig benennt. Das heißt, man verwendet ein Minus oder einen Unterstrich anstelle eines Leerzeichens und man verwendet keine Sonderzeichen, das heißt kein "&" hier irgendwo, oder keine Umlaute und Ähnliches. So, und jetzt wollen wir das Ganze exportieren. Also, ich klicke erneut, jetzt muss es ja stimmen, auf den "Export"-Button. Jetzt kriegen wir keinen Hinweis mehr. Ich kann jetzt exportieren. Hierfür habe ich minen extra Ordner "Export" angelegt. Ich klicke jetzt hier auf "Export", um die Daten dorthin abzulegen. Wenn wir jetzt einen Blick in den "Export"-Ordner werfen, dann sehen wir jetzt hier unsere ganzen PNGs, die wir erstellt haben, das Cover in unterschiedlichen Größen und vor allem hier die SVG-Datei, den "Zurück"-Button. Wenn ich mir den jetzt per Drag-and-drop in Google Chrome öffne. dann sehen wir hier den Button, der wird perfekt dargestellt und es handelt sich wie gesagt, um eine SVG-Grafik. Diese SVG-Grafik kann ich auch in einem HTML-Editor wie "Brackets" öffnen und dann sehen wir hier den ganzen Code, aus dem sich die SVG-Grafik zusammensetzt. Und diese Grafik ist von der Dateigröße wirklich winzig klein. Wenn wir uns hier mal die Details anschauen, dann sehen wir, dass sie nur drei Kilobyte groß ist. Also quasi nichts im Vergleich zu Grafiken. Wenn wir das jetzt als PNG exportiert hätten, hätten wir eine recht große Datei. Somit, drei Kilobyte ist nichts, die Datei ist sofort geladen. Daher macht es Sinn, in Sketch genauer hinzuschauen, was kann man wie exportieren? Was macht Sinn als CSS, was macht Sinn als SVG und was sollte als PNG oder JPEG exportiert werden?

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!