Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64
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.
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:
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.
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.
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.
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.
Videos zu Enigma64
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Links / Quellen:
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
[…] Kurzem Zeit habe ich euch das brandneue Photoshop-Plugin Enigma64 vorgestellt. Enigma64 stellt ein zusätzliches Bedienfeld für den Export von Web-Grafiken und Code […]
Kritik ist immer gut, aaaaber diese aggressiv-pampige Art, die man im Netz mittlerweile unter jedem 2. IT-relevanten Artikel findet, die ist wirklich schlimm. Die Leute kommentieren mit einer Arroganz und in einem Ton, noch dazu in einer völlig unselbstreflektierten Art, wo ich mich manchmal frage wie diese Leute im realen Leben klar kommen, und ob sie gar nicht erkennen was sie da tun. Zumal diese Hobby-Commenter dann meist auch falsch liegen. Und das sollte man auch mal ansprechen.
@Panique
Ich gebe Dir VOLLKOMMEN Recht. Der Ton macht die Musik. Und leider muss ich auch feststellen, das sich die meisten Leute im Ton vergreifen. Es kommt mir so vor, das einige Leute nicht wirklich eine gute Erziehung bekommen haben – leider !
@Jonas Hellwig
Mach weiter… du machst das sehr gut (finde ich). Aber vor allen Dingen. Lass dich nicht unterkriegen von aggressiven und unqualifizierten Kommentaren ;-)
@Gunnar Bittersmann: Ich finde, Du hast einen sehr aggressiven, vorwurfsvollen Informatiker-typischen Ton an Dir. Und Dein Comment hat auch keinerlei sinnvollen Inhalt. Da mich solche Möchtegern-Korrektur-Kommentare immer aufregen, vor Allem von den weltfremdesten Computerheinis (Deine Website zeigt, daß du den vollkommen falschen Beruf hast!!!), noch dazu unter wirklich guten Artikeln, take this: Da das Tool beim Base64-Export ja eigentlich nur eine Zeichenkette ausgibt (und kein File), finde ich das ebenfalls verwirrend (und jeder andere User sicherlich auch). Zudem hat Jonas auch nie behauptet daß Base64 ein neues Grafikformat ist. Alles cool also!
So, der Mob wurde zurechtgewiesen, die öffentliche Ordnung ist wieder hergestellt. ;)
Also hier sollte wirklich mal ein Punkt gemacht werden. Es wird hier explizit nach Kritik gefragt. Dem ist Gunnar nachgekommen.
Wenn Dir sein Beitrag nicht gefällt, dann ignoriere diesen doch einfach und kritisiere nicht einfach seine Seite, weil Du sonst von Gunnar nichts kennst und somit keine Angrifsfläche hast. Gleiches gilt übrigens für seine Berufswahl.
Mit anderen Worten: Du machst exakt das Gleich, was Du bei Gunnar beanstandest.
Jonas macht es ebenfalls verkehrt. Er möchte Kritik erhalten, kommt Kritik wehrt er sich nur, anstatt sich dieser Kritik anzunehmen. Denn der Satz ist definitiv irreführend, nur soviel dazu.
Unterm Strich: Wenn ihr keine Kritik ertragen könnte, egal in welcher Form, dann fragt nicht danach.
Ich hatte nicht das Gefühl auf die Kritik nicht angemessen eingegangen zu sein, aber offenbar habe ich mich getäuscht. Ich habe den Satz jetzt noch einmal abgeändert und hoffe, dass für zukünftige Leser das Missverständnis jetzt ausgeräumt ist. Danke auch für dein Feedback – ihr seid sicher nicht die Einzigen die den Satz falsch verstanden haben.
„Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3 und Base64 immer populärer.“
Wie bitte? Das liest sich so, als wäre Base 64 ein weiteres Grafikformat. Ist es nicht.
„Etwas verwirrend ist hier, dass noch Optionen für den Bildexport angezeigt werden.“
Äh, die Verwirrung ist wohl ganz auf deiner Seite.
Ich finde nicht, dass der von dir zitierte Satz irreführend ist. Erstens ist Base64 ja mit einem weiterführenden Artikel verlinkt (für alle die den Begriff nicht einordnen können) und zweitens würde der Leser ja sonst auch CSS3 für ein Dateiformat halten.
Was den Base64-Export in Enigma angeht, so bin ich in der Tat verwirrt. Mir ist nicht klar warum bei Base64 noch ein individueller Dateiname angehakt werden kann. Auf den erzeugten Code hat die Einstellung keinerlei Auswirkung. Auf Nachfrage bei den Entwicklern wurde mir mitgeteilt, dass die Funktion mit einem Update bereinigt wird.
Die Funktion des PNG/JPG-Buttons wurde bereits in einem früheren Kommentar geklärt. Im Missverständnisse zu vermeiden habe ich den Satz im Artikel angepasst.
Genau sowas habe ich gestern gesucht – jetzt ist es leider zu spät.
Für den Base64-Code müssen auch die Bild-Optionen ausgewählt werden, da genau die gleiche Bilddatei wie beim Export nur in den Base64-Code „umgerechnet“ wird. Der Dateityp wird ja auch am Anfang angegeben (data:image/png)
Ah! Vielen Dank für die Info. Das war mir so gar nicht klar. Eigentlich logisch :D
[…] Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64 | kulturbanause blog. […]
[…] exportieren könnt. Darüber hinaus beschleunigt das Tool den Webdesign-Wrokflow erheblich. Einen ausführlichen Artikel zu Enigma findet ihr hier. Base64-Export mit […]