Es ist immer schön zu sehen, wie sich Design-Tools weiterentwickeln, um modernen Anforderungen gerecht zu werden. Betrachten wir ein Beispiel dafür: den Bild-Export. Designer und Entwickler verbringen viel Zeit mit dem Exportieren von Bildern. Die Designarbeit findet oft in Software statt, die für das Designen entwickelt wurde, und Assets aus diesem Design werden für die Verwendung beim Erstellen des Designs an anderer Stelle exportiert.
Hochauflösende Displays haben diesen Prozess etwas komplizierter gemacht. Mobile- und Webentwickler müssen jetzt Bild-Assets in mehreren Auflösungen erstellen, um verschiedene Arten von Bildschirmen zu unterstützen. Im Web ist dies eine besonders wichtige Aufgabe, die für die Web-Performance von entscheidender Bedeutung ist.
Grafiken wie diese (via imgix) veranschaulichen dieses Konzept gut.
Wir müssen hier nicht auf alle HTML-Syntaxmöglichkeiten für responsive Bilder eingehen. Die Homepage von Picturefill leistet da gute Arbeit. Stattdessen gehen wir davon aus, dass wir das absolute Minimum für die Verwendung von responsiven Bildern tun, indem wir über srcset nur eine 1x- und eine 2x-Version bereitstellen.
<img src="example.png"
srcset="[email protected] 2x"
alt="example">Das Gleiche ist auch in CSS möglich.
Nun stellt sich die Frage: Wie bekommen wir diese beiden verschiedenen Versionen unseres Bildes? Früher mussten wir möglicherweise Dinge manuell in der Design-Software skalieren und einzeln exportieren, um das zu bekommen, was wir brauchen.
Das meine ich: Es ist schön zu sehen, wie sich Design-Software weiterentwickelt, damit wir das nicht mehr tun müssen! Betrachten wir einige Beispiele.
Export aus Adobe Photoshop
Nehmen wir an, wir haben eine Sache entworfen, die wir in diesen beiden Größen benötigen.
Wenn wir zu Datei > Exportieren als… gehen, sehen wir Folgendes (in der Creative Cloud 2017 Version).
Dies gibt uns die Möglichkeit, das Exportformat und die Größe usw. anzupassen, bevor wir tatsächlich speichern. Hier können wir auch die Gelegenheit nutzen, Photoshop anzuweisen, mehrere Versionen zu exportieren. Wir können eine 2x-Version anfordern, indem wir auf das „+“ klicken und die gewünschten Optionen auswählen.
Denken Sie daran, dass Photoshop oft für die Arbeit mit Raster-/Bitmap-Grafiken gedacht ist, sodass das Hochskalieren möglicherweise keine gute Idee ist (Qualitätsverlust). Stattdessen beginnen Ihre Design-Dokumente möglicherweise bei 2x, und Sie würden bei 1x (für „2x“) und 0,5x (für „1x“) exportieren.
Photoshop exportiert sie zusammen, wenn Sie auf Alle exportieren… klicken.
Es ist nicht immer so, dass Sie das gesamte Dokument in Photoshop exportieren möchten. Wenn Sie nur eine bestimmte Ebene exportieren möchten, sollten Sie wissen, dass all diese Optionen auch für diese gelten, sodass Sie über die Ebenenpalette zum Exportbildschirm gelangen.
Export aus Adobe Illustrator
Illustrators Export ist verständlicherweise ähnlich, aber auch etwas ausgefeilter. Im positiven Sinne! Das Äquivalent hier ist Datei > Exportieren > Für Bildschirme exportieren… Dies gibt uns die Möglichkeit, das gesamte Dokument zu exportieren und alle gleichen Optionen für den Multi-File-Export zu haben, wie wir sie in Photoshop gesehen haben.
Beachten Sie aber auch den Reiter Assets. Hier können wir jeden beliebigen Teil des Dokuments exportieren. Es kann alles sein. Ein einzelnes Objekt oder eine beliebige Gruppierung von Objekten. Diese definieren Sie im neuen Panel „Asset Export“.
Sie können direkt aus diesem Panel exportieren (praktisch!) oder, wenn Sie das nächste Mal zu Datei > Exportieren > Für Bildschirme exportieren… gehen, ist alles, was Sie dort eingerichtet haben, verfügbar.
Adobe hat auch ein lustiges kleines Demonstrations-GIF
Export aus Sketch
Sketch hat schon immer ein sehr gutes Export-System gehabt. Es ähnelt dem, was wir gerade in Illustrator gesehen haben, insofern, als jedes Element oder jede Gruppe exportierbar ist. Sie wählen in der Seitenleiste aus, was exportierbar sein soll, und klicken unten rechts auf „Exportierbar machen“.
Dort haben Sie alle Optionen, um in mehrere Dateien mit mehreren Auflösungen zu exportieren.
Export aus Affinity Designer
Affinity Designer hat vielleicht die robustesten Exportfähigkeiten. Erstens hat es dieses Konzept von „Personas“, wenn Sie die App verwenden. Diese beziehen sich darauf, wie Sie die App gerade verwenden. Wenn Sie entwerfen, haben Sie sie wahrscheinlich in der Zeichen-Persona. Wenn Sie exportieren, wechseln Sie zur Export-Persona.
Der Export erfolgt über Slices, die alles sein können. Sie können ein Objekt oder eine Gruppe von Objekten zu Slices machen. Oder Sie können eine beliebige beliebige Box zeichnen, die ein Slice sein soll.
Sobald Sie es so eingerichtet haben, wie Sie es wünschen, können Sie einzelne Slices nach Bedarf exportieren oder sie alle auf einmal exportieren.
Wenn ein Video Ihr Ding ist, wird alles hier ziemlich gut erklärt.