kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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:

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

10 Kommentare

  1. seb

    Verfasst am 18. März 2013 um 10:35 Uhr.

    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)

    • Jonas Hellwig

      Verfasst am 18. März 2013 um 10:49 Uhr.

      Ah! Vielen Dank für die Info. Das war mir so gar nicht klar. Eigentlich logisch :D

  2. Gunnar Bittersmann

    Verfasst am 19. März 2013 um 23:26 Uhr.

    „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.

    • Jonas Hellwig

      Verfasst am 20. März 2013 um 7:59 Uhr.

      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.

    • Jonas Hellwig

      Verfasst am 20. März 2013 um 8:00 Uhr.

      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.

  3. Chris

    Verfasst am 23. März 2013 um 15:25 Uhr.

    @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. ;)

    • Denni

      Verfasst am 27. März 2013 um 19:04 Uhr.

      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.

      • Jonas Hellwig

        Verfasst am 27. März 2013 um 19:49 Uhr.

        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.

  4. Panique

    Verfasst am 27. März 2013 um 20:23 Uhr.

    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.

    • Cybi

      Verfasst am 8. April 2013 um 11:57 Uhr.

      @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 ;-)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.