Erstellen von CSS-Sprites aus Photoshop

14

Ich habe eine PSD mit einem Webdesign.
Jedes Mal, wenn ich das Design optimiere, muss ich manuell verschiedene Teile des Bildes mit unterschiedlichen Ebenen-Sichtbarkeiten (für Transparenz) in CSS-Sprites kopieren.

Wie viel kann das automatisiert werden?

adobe-photoshop export css sprite SLaks
quelle
Ich schätze, dass Sie die Frage allgemein halten möchten, aber ein Beispiel wäre wahrscheinlich hilfreich. Sind die Ebenensichtbarkeiten bereits festgelegt oder müssen sie vor dem Export einzeln geändert werden?
Pekka unterstützt GoFundMonica am
@Pekka: Unterschiedliche Portionen erfordern unterschiedliche Sichtbarkeiten. Beispielsweise wird der Websitehintergrund sichtbar exportiert, der Inhaltshintergrund wird jedoch mit unsichtbarem globalem Hintergrund exportiert. (für einen transparenten Schatten)
SLaks
Aha. Dies erfordert also definitiv eine Stapelverarbeitung. Interessiert zu sehen, was kommt! ...
Pekka unterstützt GoFundMonica

Antworten:

9

Ich habe einmal ein automatisches Photoshop-Skript verwendet und gut funktioniert.

Das Konzept lautet:

  • Jeder Teil ist ein anderes Bild.
  • Jeder Teil (und damit jedes Bild) muss sich in demselben Ordner befinden, ohne andere Bilder.
  • Führen Sie das Skript aus, das den Ordner und einige Parameter (Größe, CSS-Name usw.) angibt.

  • Das Skript macht:

    1. Führen Sie alle Bilder mit der angegebenen Größe zu einem zusammen.
    2. Generieren Sie die CSS-Datei

Wenn Sie in Ihrem Fall ein Bild ändern, generieren Sie das globale Bild und das CSS über das Skript neu und ... fertig. Möglicherweise müssen Sie das CSS in Ihr CSS kopieren / einfügen, wenn Sie das generierte CSS nicht verwenden möchten.

Anmerkungen :

Ich habe es mit ein paar Dateien versucht und es hat super funktioniert. Dann habe ich versucht, wie ~ 600 Bilder und dann brauchen Sie eine gute CPU und Geduld;) In diesem Fall verwenden Sie es nicht.

Shikiryu
quelle
1

Wäre es nicht möglich, Slices zu verwenden und eine Aktion zu starten, bei der alle Slices nacheinander per Auswahlrechteck (mit Ausrichtung auf Slices und Dokumentgrenzen) ausgewählt werden, sondern die Auswahl jedes Mal zu beschneiden und als PNG zu speichern. Wählen Sie die einzelnen Sektoren aus, schneiden Sie sie ab, bis alle Sektoren fertig sind, und beenden Sie dann die Aktion. In der Mitte können Sie jede Ebene ausblenden / einblenden, da es sich immer um dieselbe Datei handelt. Es sollten also keine Konflikte auftreten. Sie würden die Aktion also jedes Mal über Ihre geänderte PSD laden. Ich kann mir nur vorstellen, dass Sie tatsächlich die Scheibengrenzen ändern müssen. Oder dass ... ich habe dich nicht richtig verstanden ...

Bearbeiten: Wenn kein Slicing erforderlich ist, dann ein Makro (Aktion), das nur das Ausblenden oder Anzeigen der Ebenen in der von Ihnen benötigten Reihenfolge enthält, nachdem alle Optimierungen vorgenommen wurden. Wie gesagt, ich verstehe vielleicht nicht ...

S.gfx
quelle
Ich halte Ihren ersten Absatz zwar für etwas verwirrend und dennoch scheint er den Workflow eher zu erweitern, als ihn zu automatisieren. Vielleicht sehe ich, wohin Sie mit der Aktion Ebenen verbergen / anzeigen gehen, obwohl ich damit Slices verwenden würde.
Jari Keinänen
Vielen Dank!
Ich