Wie arbeite ich mit Bild-Sprites in Photoshop?

Ich verwende CSS-Sprites , um die Serverlast zu reduzieren und damit das Laden der Seite zu beschleunigen. Das ist sehr effektiv, aber ich finde es schwierig, diese zusammengesetzten Bilder zu verwalten.

Ich habe mich entschieden, Photoshop-Slices zu verwenden, um die verschiedenen Bereiche zu verfolgen, die jedem Bild zugewiesen sind (einige von ihnen haben weiße Flächen um sich herum), da Hilfslinien schnell unhandlich wurden.

Das Problem ist jetzt, dass ich beim Exportieren für das Web nur einzelne Slices und nicht das gesamte Bild exportieren kann, was die Idee zunichte macht. Also greife ich darauf zurück, eine Kopie des Bildes zu erstellen, bevor ich dieses flache Bild exportiere und exportiere.

Gibt es eine Möglichkeit, ein ganzes Bild, das Slices enthält, für das Web zu exportieren? Und gibt es darüber hinaus einen praktischeren Weg, dies zu tun?

bearbeiten

Ich habe Bilder unterschiedlicher Größe (auf derselben Photoshop-Leinwand) und für unterschiedliche Verwendungszwecke, was bedeutet, dass ich manchmal einem Sprite eine ganze Zeile widmen muss oder manchmal den erforderlichen Leerraum im Auge behalten muss um eine Ikone erhalten.

Guides erlauben mir nicht, einen klaren Blick auf den Bereich zu behalten, der einem bestimmten Sprite gewidmet ist.

Aber ein Bild zeigt das besser als Worte:

Mit Führern

Bei Hilfslinien sind die Sprites nicht klar abgegrenzt

Mit Scheiben

Mit Slices ist jeder Sprite-Bereich deutlich sichtbar

Das Arbeiten mit Slices macht es also einfacher, meine Sprites zu visualisieren, aber dann ist es unmöglich, das gesamte Bild zu exportieren.

Gibt es eine Problemumgehung in Photoshop?

Sehen Sie sich diese Frage an, die einige Antworten enthält: graphicdesign.stackexchange.com/questions/18780/…
Danke, aber darauf bezieht sich meine Frage nicht.
Bilder können keine Slices enthalten, da Slices einzelne Bilder sind. Sie können jederzeit Speichern unter... wählen, um Ihr Spritesheet als Bild zu speichern.

Antworten (1)

Verwenden Sie keine Scheiben. Slices sind für ... na ja, Slices ... was genau das Gegenteil von dem ist, was Sie mit Sprite-Sheets machen möchten.

Ich benutze nur Anleitungen. Wenn ich also ein Symbol-Sprite-Blatt erstelle, mache ich mein Bild vielleicht 40 Pixel hoch x 400 Pixel breit und ziehe dann alle 40 Pixel eine vertikale Hilfslinie, um meine „Box“ für das Symbol zu erstellen.

Wie arbeite ich mit Bild-Sprites in Photoshop?
AntwortenHierDatenschutz-Bestimmungen1y, 0v