Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Links / Quellen:

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. Zu gewinnen: 2x Photoshop-Plugin Enigma64! | kulturbanause blog
    schrieb am 10.04.2013 um 08:25 Uhr:

    […] 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 […]

    Antworten
  2. Panique
    schrieb am 27.03.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.

    Antworten
    • Cybi
      schrieb am 08.04.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 ;-)

      Antworten
  3. Chris
    schrieb am 23.03.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. ;)

    Antworten
    • Denni
      schrieb am 27.03.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.

      Antworten
      • Jonas Hellwig (Autor)
        schrieb am 27.03.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. Gunnar Bittersmann
    schrieb am 19.03.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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 20.03.2013 um 07: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.

      Antworten
    • Jonas Hellwig (Autor)
      schrieb am 20.03.2013 um 08: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.

      Antworten
  5. seb
    schrieb am 18.03.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)

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 18.03.2013 um 10:49 Uhr:

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

      Antworten
  6. Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64 | kulturbanause blog | tech@jbmedia.info
    schrieb am 18.03.2013 um 10:15 Uhr:

    […] Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64 | kulturbanause blog. […]

    Antworten
  7. Grafiken mit Data URIs (Base 64) erzeugen | kulturbanause blog
    schrieb am 16.03.2013 um 13:10 Uhr:

    […] 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 […]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →