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

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

高洛峰
高洛峰Original
2017-02-20 09:13:172307Durchsuche

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

前端工程师技能之photoshop巧用系列第五篇——雪碧图

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

前端工程师技能之photoshop巧用系列第五篇——雪碧图

 【 2] Bilder werden horizontal und vertikal angeordnet

前端工程师技能之photoshop巧用系列第五篇——雪碧图

[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

前端工程师技能之photoshop巧用系列第五篇——雪碧图

Bilder zusammenführen von ähnlicher Größe

前端工程师技能之photoshop巧用系列第五篇——雪碧图

c. Bilder mit ähnlichen Farben zusammenführen

前端工程师技能之photoshop巧用系列第五篇——雪碧图

[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

前端工程师技能之photoshop巧用系列第五篇——雪碧图

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:

前端工程师技能之photoshop巧用系列第五篇——雪碧图

Wartung

[Leinwand vergrößern]

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

前端工程师技能之photoshop巧用系列第五篇——雪碧图

【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

前端工程师技能之photoshop巧用系列第五篇——雪碧图

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

前端工程师技能之photoshop巧用系列第五篇——雪碧图
前端工程师技能之photoshop巧用系列第五篇——雪碧图 前端工程师技能之photoshop巧用系列第五篇——雪碧图
 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

前端工程师技能之photoshop巧用系列第五篇——雪碧图 前端工程师技能之photoshop巧用系列第五篇——雪碧图
[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

前端工程师技能之photoshop巧用系列第五篇——雪碧图 前端工程师技能之photoshop巧用系列第五篇——雪碧图

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn