Teil 5 der Serie über den geschickten Einsatz von Photoshop für Front-End-Ingenieurfähigkeiten – Sprite-Bilder

Vorherige Wörter

Wie bereits erwähnt, werden beschreibende Bilder irgendwann zu Sprite-Bildern zusammengeführt. Dieser Artikel ist der fünfte Artikel in der Reihe der Photoshop-Kenntnisse – Sprite

Definition

CSS Sprite (Sprite) ist eine Web-Bildanwendungsverarbeitungsmethode, die es allen ermöglicht Verstreute Bilder, die sich auf eine Seite beziehen, werden in einem großen Bild zusammengefasst. Durch die Verwendung der Sprite-Bildverarbeitungsmethode können zwei Vorteile erzielt werden:

　【1】Reduzieren Sie die Anzahl der HTTP-Anfragen

　【2】Reduzieren Sie die Bildgröße und verbessern Sie die Ladegeschwindigkeit der Webseite (Die Ladegeschwindigkeit mehrerer Bilder ist geringer als die eines kombinierten Bildes) Ladegeschwindigkeit synthetisierter Bilder)

Es ist nicht alles perfekt. Es bringt zwar die Vorteile mit sich, bringt aber auch Nachteile mit sich, das heißt, es erhöht die Entwicklung und Wartungskosten der Webseite.

Anwendungsszenarien

Wie bereits erwähnt, können nicht alle Bilder zur Erstellung von Sprite-Bildern verwendet werden, nur beschreibende Bilder sind geeignet

【1】Inhalt Im img-Tag festgelegte Bilder können nicht mit Sprite-Bildern zusammengeführt werden. Das Zusammenführen dieser Bilder beeinträchtigt die Lesbarkeit der Seite, verringert die Semantik und der einstellbare Bereich ist klein

【2】Für Bilder, die sowohl horizontal als auch gekachelt sind Vertikale Bilder können nicht mit Sprite-Bildern zusammengeführt werden. Wenn es horizontal gekachelt ist, können alle horizontal gekachelten Bilder nur zu einem großen Bild zusammengeführt werden, das nur vertikal angeordnet werden kann, nicht horizontal; wenn es vertikal gekachelt ist, können alle vertikal gekachelten Bilder nur zu einem großen Bild zusammengeführt werden nur horizontal, nicht vertikal angeordnet werden

Zusammenführen

Bei der Produktion von Sprite-Bildern werden eigentlich sporadische kleine Bilder zu einem großen Bild zusammengeführt, die kleinen Bilder jedoch schon Zusammengeführt Die folgenden Regeln müssen befolgt werden:

[1] Das Bild muss vor dem Zusammenführen eine Lücke lassen

1. Wenn es sich um ein kleines Symbol handelt, kann die Lücke entsprechend kleiner sein, normalerweise ca 20 Pixel

2. Wenn es sich um ein großes Symbol handelt, sollte die verbleibende Lücke größer sein, da bei der Anpassung des großen Symbols der betroffene Raum größer wird

　【 2] Bilder werden horizontal und vertikal angeordnet

[3] Prinzipien des Zusammenführens und Klassifizierens

Es gibt drei Prinzipien des Zusammenführens und Klassifizieren, nämlich modulbasiert und modulbasiert

Bilder zusammenführen, die zum selben Modul gehören

Bilder zusammenführen von ähnlicher Größe

c. Bilder mit ähnlichen Farben zusammenführen

[4] Empfehlungen zusammenführen

Bei der tatsächlichen Sprite-Produktion werden im Allgemeinen zwei Methoden verwendet: Eine besteht darin, Bilder zusammenzuführen, die nur auf dieser Seite verwendet werden. Die andere besteht darin, zustandsbehaftete Symbole zusammenzuführen

Implementierung

In der Vergangenheit mussten wir das Sprite-Image möglicherweise manuell implementieren, was eine sehr mühsame und fehleranfällige Sache war. Heutzutage gibt es viele praktische Werkzeuge zum Erstellen von Sprites. Was ich oft verwende, ist ein kleines Tool namens CSS-Hintergrund-Merge-Tool.

Die Verwendung ist wie folgt:

Wartung

[Leinwand vergrößern]

Bild-> Leinwandgröße Wählen Sie die Positionierung (normalerweise die obere linke Ecke)

【Leinwand verkleinern】

[Hinweis] Der Farbmodus von PNG8 ist standardmäßig auf den Indexfarbmodus eingestellt. Wenn Sie das PNG8-Bild ändern, müssen Sie seinen Farbmodus in den RGB-Modus ändern . Schritte für Bild-> RGB-Farbe

1. Die Auswahl des Bildes basiert auf der Pixelfarbe in der oberen linken Ecke, wodurch ein automatischer Zuschneideeffekt erzielt werden kann 🎜>

　2. Wählen Sie zuerst den Bereich aus, den Sie behalten möchten, und wählen Sie dann Bild-> Zuschneiden aus oder wählen Sie die Schaltfläche „Zuschneiden“ in der Symbolleiste aus, um das Symbol zuzuschneiden

[Symbol verschieben]

　1 Wenn das Symbol eine unabhängige Ebene ist, ziehen Sie es mit dem Verschieben-Werkzeug

2. Wenn das Symbol eine nicht unabhängige Ebene ist

a. Verwenden Sie zunächst das Auswahlwerkzeug, um den Symbolbereich auszuwählen, und ziehen Sie dann das Symbol mit dem Verschieben-Werkzeug, sodass die Ebene verschoben werden kann verschoben

b. Wählen Sie zuerst mit dem Auswahlwerkzeug den Symbolbereich aus, schneiden Sie ihn aus und fügen Sie ihn ein. Sie können die ursprüngliche Ebene in zwei Ebenen unterteilen Bequemer für die Bedienung

Für weitere Front-End-Ingenieurfähigkeiten, der fünfte Artikel in der Reihe der cleveren Verwendung von Photoshop – Sprite-Bilder. Weitere Artikel finden Sie auf der chinesischen PHP-Website!