Partie 5 de la série sur l'utilisation habile de Photoshop pour les compétences d'ingénieur front-end - Images Sprite

Mots précédents

Comme mentionné précédemment, les images descriptives seront éventuellement fusionnées en images de sprites. Cet article est le cinquième article de la série de compétences Photoshop - Sprite

Définition

Le sprite CSS (sprite) est une méthode de traitement d'application d'image Web, qui permet à tous les images dispersées liées à une page sont incluses dans une grande image. Deux avantages peuvent être obtenus en utilisant le traitement des sprites :

[1] Réduire le nombre de requêtes http

[2] Réduire la taille de l'image et améliorer la vitesse de chargement des pages Web (la vitesse de chargement de plusieurs images est inférieure à celle de la vitesse de chargement combinée des images synthétisées)

Tout n'est pas parfait Tout en présentant des avantages, cela présente également des inconvénients, c'est-à-dire que cela augmente les coûts de développement et de maintenance de la page Web.

Scénarios d'application

Comme mentionné précédemment, toutes les images ne peuvent pas être utilisées pour créer des images de sprite, seules les images descriptives conviennent

【1】Contenu les images définies dans la balise img ne peuvent pas être fusionnées en images de sprite. La fusion de ces images affectera la lisibilité de la page, réduira la sémantique et la plage de réglage est petite

【2】Pour les images en mosaïque horizontalement et verticalement. verticalement ne peut pas être fusionné dans des images de sprite. S'il est carrelé horizontalement, toutes les images carrelées horizontalement ne peuvent être fusionnées qu'en une seule grande image, qui ne peut être disposée que verticalement, pas horizontalement ; si elle est carrelée verticalement, toutes les images carrelées verticalement ne peuvent être fusionnées qu'en une seule grande image. être disposé uniquement horizontalement, pas verticalement

Fusionner

La production d'images de sprite consiste en fait à fusionner de petites images sporadiques en une seule grande image, mais les petites images sont fusionné Les règles suivantes doivent être suivies :

[1] L'image doit laisser un espace avant de fusionner

1. S'il s'agit d'une petite icône, l'espace peut être convenablement plus petit, généralement d'environ 20 pixels

　2. S'il s'agit d'une grande icône, l'écart doit être plus grand, car lorsque la grande icône est ajustée, l'espace affecté sera plus grand

　【 2] Les images sont disposées horizontalement et verticalement

[3] Principes de fusion et de classification

Il existe trois principes de fusion et de classification, qui sont basés sur des modules et basés sur la taille et la couleur

a. Fusionner les images appartenant au même module

b. 🎜>

c. Fusionner des images avec des couleurs similaires

[4] Fusionner les recommandations

Dans le sprite réel production , deux méthodes sont généralement utilisées : l'une consiste à fusionner les images utilisées uniquement sur cette page ; l'autre consiste à fusionner les icônes avec état

Implémentation

Dans le passé, nous devions peut-être implémenter manuellement l'image du sprite, ce qui est une chose très gênante et sujette aux erreurs. Il existe aujourd'hui de nombreux outils pratiques pour créer des sprites. Ce que j'utilise souvent, c'est un petit outil appelé outil de fusion en arrière-plan CSS.

Le mode d'emploi est le suivant :

Maintenance

[Agrandir le canevas]

Image-> Taille du canevas Sélectionnez le positionnement (généralement le coin supérieur gauche)

[Réduire le canevas]

[Remarque] Le mode de couleur de PNG8 est par défaut le mode de couleur d'indexation. Lors de la modification d'images png8, vous devez changer son mode de couleur en mode RVB. sont image -> Mode-> Couleur RVB

1. Sélectionnez l'image-> La sélection de recadrage est basée sur la couleur du pixel dans le coin supérieur gauche, ce qui permet d'obtenir un effet de recadrage automatique

2. Sélectionnez d'abord la zone que vous souhaitez conserver, puis sélectionnez Image-> Recadrer ou sélectionnez le bouton de l'outil de recadrage dans la barre d'outils pour recadrer

[Déplacer l'icône]

1. Si l'icône est un calque indépendant, vous pouvez donc la faire glisser avec l'outil de déplacement

2. Si l'icône est un calque non indépendant

a. Utilisez d'abord l'outil de sélection pour sélectionner la zone de l'icône, puis utilisez l'outil de déplacement pour faire glisser l'icône, afin que le calque puisse être déplacé

b. Utilisez d'abord l'outil de sélection pour sélectionner la zone de l'icône, puis coupez et collez . Vous pouvez diviser le calque d'origine en deux calques, ce qui est plus pratique. pour le fonctionnement

Plus Partie 5 de la série sur la façon d'utiliser habilement Photoshop avec plusieurs compétences d'ingénieur front-end - Sprite Pictures Pour les articles connexes, veuillez faire attention au site Web PHP chinois !