Erstellen Sie ein Sprite mit einer Folge von Bildern in Photoshop

Ich möchte ein horizontales Bild-Sprite zur Verwendung in einer jQuery-Animation erstellen. Wie würde ich ein Sprite aus 190 Bildern in einem Ordner (ca. 220 KB pro Datei) in ein einzelnes horizontales Sprite erstellen?

Am Ende fand ich ein Skript für Photoshop, das auch das tat, was ich brauchte, asouza.com/blog/?p=119

Antworten (4)

Da ich auch viel Code schreibe, kenne ich Ihren Schmerz bei dieser Aufgabe. Zum Glück gibt es Dutzende davon

Sprite-Generatoren

dort draußen. Ich speichere den Link nicht einmal ab, da findet man immer schnell einen passenden. Der oben verlinkte Generator nimmt eine ZIP-Datei. Glücklicherweise geben sie Ihnen nicht nur das resultierende Sprite-Bild/Sprite, sondern schreiben auch das CSS für Sie.

Nebenbemerkung/Hinweis: Achten Sie darauf, wie Sie Dinge benennen. Normalerweise ordnen sie Sachen nach Namen. Wenn Sie also :activeund :hoverangegeben haben, sollten Sie sie entsprechend benennen:

  • layer_active.ext,
  • layeractive.extoder
  • layer-active.ext.

Jetzt muss nur noch das (ziemlich heftige) Markup geschrieben werden :)

Das klingt ziemlich glatt.

Nun, die offensichtliche Antwort ist, einen Batch-Prozess zu erstellen, der dies für Sie erledigt, damit Sie es nicht 190 Mal tun müssen.

Aber vielleicht können Sie einen der automatisierten Prozesse von Photoshop verwenden, um dies für Sie zu erledigen. In der alten Version von Photoshop, die ich verwende, ist ein Contact Sheet II-Prozess verfügbar. Vielleicht könnten Sie es so einrichten, dass es alle Bilder enthält, die Sie in ein Sprite verwandeln möchten, und dann die Breite auf die Gesamtbreite festlegen, die Sie für alle Bilder erwarten, und die Höhe auf die maximale Höhe der einzelnen Bilder ( also wäre es zum Beispiel etwas Verrücktes wie 15.000 px X 200 px)

Und dann würden Sie die "Miniaturansichten" auf 190 Spalten und 1 Zeile einstellen. Deaktivieren Sie dann "Dateinamen als Beschriftung verwenden".

Oh, und mit dem Abstand herumzuspielen kann helfen.

Sie müssen alle Bilder in Ihrem Photoshop öffnen und sie dann in einer Datei platzieren, die Ihr horizontales Bild enthält. nebeneinander wird dies eine große Aufgabe und Schmerz sein,

Wenn Sie einen anderen Weg gefunden haben (anstelle des erwähnten Skripts), teilen Sie uns dies bitte mit

  1. Tipps zum Erstellen von CSS-Sprites
  2. Wie erstelle ich CSS-Sprites?
Ich möchte kein Ärgernis sein, aber ich konnte nicht anders, als zu kommentieren, da mir so etwas passiert. Aber wenn Sie sich Xaviers Kommentar zu seiner eigenen Frage ansehen.
lol scheint dir meine Beiträge nicht zu gefallen, ich habe diese Frage beantwortet, weil ich es wollte und das war's.
Ich weiss. Relativ selten posten Leute Dinge gegen ihren eigenen Willen online, aber Sie sagten in Ihrer Antwort "Wenn Sie einen anderen Weg gefunden haben, lassen Sie es uns bitte wissen", und das hat er bereits in seinem Kommentar zu seiner eigenen Frage getan ... Just wollte darauf hinweisen.
lollero du bist super :)

Obwohl es nicht direkt mit Photoshop zusammenhängt, möchte ich TexturePacker empfehlen .

Ich habe es in der Vergangenheit verwendet und bin ziemlich zufrieden damit: leicht, schnell, einfach zu bedienen, erschwinglich und es generiert sauberen Code für die meisten Ziele/Frameworks da draußen (einschließlich CSS-Sprites).

Die Vollversion bietet auch Befehlszeilenzugriff, was die Automatisierung von Arbeitsabläufen sehr einfach macht.

Erstellen Sie ein Sprite mit einer Folge von Bildern in Photoshop
AntwortenHierDatenschutz-Bestimmungen1y, 0v