Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

enigma64-logo-icon

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Was macht Enigma64?

Enigma64 exportiert einzelne Ebenen, Auswahlen oder ganze Dokumente mit nur einem Klick nach JPG, PNG und Base64. Zunächst werden der Pfad und die Kompressionsstufe angegeben, anschließend lassen sich die grafischen Elemente der Website viel schneller speichern als das bisher der Fall war. In Kombination mit CSS Hat stehen in Photoshop somit alle Export-Möglichkeiten zur Verfügung, die wir heute für die Web-Entwicklung brauchen:

Enigma64 Icon und Logo
Enigma64 Icon und Logo

PNG und JPG-Grafiken exportieren

Um Grafiken zu exportieren sind nur wenige Punkte zu beachten. Zunächst müsst ihr mit dem großen Button ganz oben bestimmen, dass Grafiken exportiert werden sollen. In den Einstellungen könnt ihr festlegen in welcher Kompression die JPG-Grafiken gespeichert werden sollen und ob es sich um progressive JPGs handeln soll.

Das Bedienfeld von Enigma64 nach erfolgreichem Export ins PNG-Format
Das Bedienfeld von Enigma64 nach erfolgreichem Export ins PNG-Format

Darüber hinaus könnt ihr bestimmen wohin die Grafiken gespeichert werden, und ob ihr den Namen der Ebene als Dateinamen verwenden wollt. Wenn ihr einen individuellen Dateinamen vergeben wollt, aktiviert einfach die entsprechende Checkbox. Ein Haken bei „Trim“ beschneidet die Grafik, sollte die Ebene kleiner sein als der ausgewählte Bereich.

Die Einstellungen von Enigma64
Die Einstellungen von Enigma64

Nun müsst ihr nur noch bestimmen ob ihr PNG- oder JPG-Grafiken erstellen wollt. Anschließend klickt ihr auf „Visible Canvas“ um die gesamte Bühne zu exportieren. Ihr könnt alternativ auch einfach eine oder mehrere Ebenen auswählen und über „Selected layers“ exportieren. In diesem Fall werden jedoch nicht mehrere Dateien erstellt, sondern ein Dokument mit dem sichtbaren Inhalt aller markierten Ebenen.
Wenn ihr lieber mit einer Auswahl arbeitet, markiert zunächst einen Bereich und klickt anschließend auf „Selection“. Hierbei wird der sichtbare Inhalt der Auswahl durch alle Ebenen hinweg kopiert.

Base64-Code exportieren

Wenn ihr Base64-Code exportieren wollt, müsst ihr den Bereich zunächst ganz oben aktivieren. Wählt aus welches Dateiformat (PNG, JPG) als Grundlage für den Base64-Code dienen soll, anschließend reicht ein Klick auf einen der Export-Buttons und der Code befindet sich in der Zwischenablage. Etwas verwirrend ist hier, dass ganz unten noch Optionen für den Bildexport angezeigt werden. Wurde in Version 1.1.0 behoben.

Die Vorteile von Base64 habe ich in meinem Artikel „Grafiken mit Data URIs (Base 64) erzeugen“ ausführlich erklärt.

Base64-Export mit Enigma64
Base64-Export mit Enigma64

Enigma 1.1.0

Enigma ist in Version 1.1.0 erschienen. Neben einigen Fehlerkorrekturen ist die wohl wichtigste Verbesserung der Export nach PNG8. In den Optionen kann zwischen PNG24 und PNG8 gewechselt werden. Alternativ reicht ein Klick auf die PNG-Schaltfläche um zwischen den beiden Varianten von PNG zu wechseln.

PNG8- und PNG24-Export in Enigma24
PNG8- und PNG24-Export in Enigma24

Videos zu Enigma64

Links / Quellen: