D'un point de vue technique, la première étape de la conception Web consiste pour l'artiste à réaliser un rendu de page Web, et la deuxième étape consiste à découper la page Web sur le front-end. Les outils couramment utilisés pour couper des pages Web incluent Fireworks et PS est utilisé ici pour couper des pages Web.
Nous obtenons le résultat souhaité (tels que les fichiers .png, .jpg) via le brouillon de conception et fournissons des images (HTML : img, CSS : background) pour la page Web.
Modifier -> Préférences -> Unités et règles, sélectionnez les pixels.
Ouvrir sous le menu "Fenêtre" :
Outils (activés par défaut)
Options (activées par défaut)
Couche (activées par défaut)
Informations (activées manuellement)
Historique (activées manuellement)
Fermez les autres fonctions inutiles et placez les fonctions ci-dessus dans la zone appropriée. Fenêtre-"Espace de travail-"Enregistrez l'espace de travail défini :
§L'outil de déplacement
sera automatiquement sélectionné et vérifié, et le groupe sera changé en calque
▪ Outil de sélection rectangulaire
▪ Outil baguette magique
>
-Zoom arrière : Ctrl Moins ▪Sélecteur de couleurs1.4 Vue auxiliaire
Activer sous le menu "Affichage" :
▪Règle Ctrl R
▪Affichage-> Du contenu supplémentaire doit être affiché)2. Obtenez des informations
Ouvrez le brouillon de conception et obtenez les informations :
▪Informations sur les couleurs : Choix des couleurs
2.1 Tous les nombres doivent être mesurésOutils :La chose la plus importante pour obtenir des informations est d'étirer la toile le plus grand possible pour minimiser l'erreur.
Mesure
Largeur, hauteur
Remplissage, marge extérieure
BordurePositionnementTaille du texteHauteur de la lignePosition de l'image d'arrière-plan
2.2 Mesurer la sélection (outil de sélection rectangulaire)
Ajouter à la sélection : appuyez longuement sur Maj
Intersecter avec la sélection : Maintenir Shift Alt 2.3 Mesure liée au texte
2.3.1 Calque de texte séparé
Vous pouvez obtenez directement la taille du texte ;
cliquez sur 
pour obtenir d'autres données de confiance, telles que la hauteur de la ligne :
2.3.2 Couche de texte non individuelle (sélectionnez la police la plus grande comme mesure)
Utilisez l'outil de sélection rectangulaire pour sélectionner le texte, et la hauteur est la taille de la police 
Sélection des couleurs
2.4 Toutes les couleurs sont à choisir la couleur 
Couleur de la bordure
Couleur de fond
Couleur du texteAgrandissez la toile autant que possible pour obtenir des points réels et éviter les points irréguliers.
2.5 La couleur d'un calque de texte séparé peut être obtenue directement, et d'autres couleurs peuvent être obtenues avec "l'outil Pipette du sélecteur de couleurs"
Une attention particulière est due à l'effet de superposition des calques, la couleur affichée ne correspond pas à la couleur réelle. Il s'agit d'utiliser le sélecteur de couleurs pour obtenir la couleur
Continuez à cliquer sur différentes zones pour voir si la couleur change
Sélectionnez d'abord le calque, puis sélectionnez l'outil Baguette magique, cliquez pour sélectionner la ligne supérieure, comme indiqué ci-dessous :
Continuez de cliquer et sélectionnez une ligne vers le bas à la fois
Confirmez qu'il s'agit d'un dégradé linéaire.
Modifié (généralement utilisé dans l'attribut background) :
icône, logo
Boutons, texte, etc. avec effets spéciaux
Fond de couleur non unie
Basé sur le contenu (généralement utilisé dans les balises img)
bannière, photos publicitaires
Photos dans l'article...
Par exemple, dans l'image ci-dessous, la case rouge doit être coupée , et la boîte noire est obtenue à partir de l'arrière-plan Pas besoin de couper
Le contenu est généralement enregistré sous .JPG,
Les fichiers modifiés sont généralement enregistrés au format .PNG8, .png24
Les formats PNG8 et PNG24 prennent en charge la transparence totale ; PNG24 prend en charge la translucidité (la qualité de l'image est relativement élevée). mais ie6 ne prend pas en charge la translucidité PNG24, ce qui nécessite d'être compatible.
Masquer le texte et ne conserver que l'arrière-plan
Couche de texte trouvé
Supprimer l'icône des lunettes
L'image d'arrière-plan peut être étirée
Sélectionnez une zone avec l'outil de sélection rectangulaire
Transformation libre Ctrl T
L'image d'arrière-plan ne peut pas être étirée (l'image d'arrière-plan Il y a des effets de texture, etc.)
Sélectionnez une zone avec l'outil de sélection rectangulaire
Utilisez l'outil de déplacement Alt
Couper l'image.PNG24
•Sélectionnez les calques requis avec l'outil de déplacement (maintenez la touche Ctrl enfoncée pour une sélection multiple)
•Cliquez avec le bouton droit pour fusionner les calques ( Ctrl E)
•Envoyez le calque de dessin par e-mail vers un nouveau fichier ou faites-le glisser directement vers un fichier existant (Nouveau : Ctrl N)
Couper l'image.PNG8 (couper avec l'arrière-plan)
•Fusionner les calques visibles (Maj Ctrl E)
•L'outil de sélection rectangulaire sélectionne le contenu
•L'outil Baguette magique supprime les parties en excès (soustraire de la sélection : maintenez Alt)
Utilisez l'outil de sélection rectangulaire pour sélectionner une zone
Copiez-le et collez-le dans un nouveau fichier
Le contenu en mosaïque remplit la largeur du fichier (axe des x) ou la hauteur (axe des y) : par exemple, si un nouveau fichier est utilisé pour mosaïquer l'axe des x, la largeur de l'image coupée doit être cohérent avec le nouveau fichier
▪ Tirez les guides
§Sélectionnez l'outil de découpage
§Cliquez sur "Tranche basée sur les guides " dans la barre d'options
▪Sélectionnez la tranche Sélectionnez l'outil
Double-cliquez sur la tranche et modifiez le nom du fichier et d'autres informations
▪Enregistrer
Sélectionnez toutes les tranches et définissez le format de stockage de manière uniforme
Stockez le contenu requis (l'arrière-plan est généralement transparent)
▪ Copiez, créez, collez (Ctrl C, Ctrl N, Ctrl V ou faites glisser le contenu vers un nouveau fichier)
Calque indépendant : faites glisser le contenu directement vers un nouveau fichier
Fusionner : sélection de l'outil de sélection rectangulaire, extraction de la baguette magique, Ctrl C, Ctrl N, Ctrl V
▪Enregistrer au format utilisé par le Web (Alt Shift Ctrl S)
Lorsque l'image est riche en couleurs et n'a aucune exigence de transparence
Il est recommandé de l'enregistrer dans Format JPG et choisissez la qualité appropriée
Remarque : Qualité : 60-80 ; ne peut pas être 100, 80 est déjà bon
Lorsque l'image n'est pas très colorée, qu'elle nécessite ou non de la transparence
Enregistrez-la au format PNG8
Remarque : lors de l'enregistrement , vous devez réinitialiser l'absence de tramage et l'absence de passe-partout
Lorsque l'image a des exigences de translucidité
Enregistrez-le au format PNG24
Paramètre par défaut.
Pour garantir la qualité de l'image
conservez une copie du fichier PSD, et toutes les modifications futures seront apportées sur le fichier PSD
Au fur et à mesure de l'avancement du projet, nous souhaiterons peut-être changer la position de l'icône, ajouter de nouvelles icônes, supprimer d'anciennes icônes, modifier la taille du canevas, nous devons donc apporter des modifications et maintenir.
Image->Taille du canevas, selon la situation, sélectionner le point d'ancrage
La première méthode : sélectionner la zone avec l'outil de sélection rectangulaire, Image->Recadrer pour recadrer le canevas
La deuxième méthode : utilisez l'outil de recadrage directement pour recadrer.
aubeSi l'icône est un calque indépendant
, faites-la simplement glisser avec l'outil de déplacement
historicSi l'icône n'est pas indépendante
Sélectionnez la zone de l'icône avec l'outil de sélection
Faites glisser l'icône avec l'outil de déplacement
Remarque : Si l'icône n'est pas indépendante, vous pouvez utiliser l'outil de sélection pour sélectionner la zone de l'icône, appuyer sur Ctrl X pour la couper, puis la coller pour transformer l'icône en un calque indépendant .
Après avoir organisé les icônes, placez-les dans la position correspondante.
Pour modifier l'image PNG8, vous devez changer le mode de couleur en couleur RVB. Comment faire : Image->Mode->Couleur RVB.
Solution de fusion d'images : image de sprite
Les sprites CSS sont appelés sprites CSS par de nombreuses personnes en Chine et sont une méthode de traitement d'application d'image Web. Il vous permet d'inclure toutes les images dispersées impliquées dans une page dans une seule grande image, de sorte que lors de l'accès à la page, les images chargées ne seront pas affichées une par une comme auparavant. Positionnez l'arrière-plan en fonction de la position de l'icône spécifique sur la grande image.
Avantages du puzzle Sprite : réduisez les requêtes réseau et améliorez la vitesse de chargement des pages Web.
Outil de compression :
▪Lossy TinyPng : https : // /tinypng.com/
▪Lossless Minimage : https://github.com/NetEaseWD/minimage
Des espaces appropriés doivent être réservés entre les images (pour faciliter la modification des images et l'écriture du code CSS)
Disposition des icônes : horizontale et verticale
▪ Fusionner les images appartenant au même module (fonctionnalisation)
▪ Fusionner les images de taille similaire (économiser de l'espace)
▪ Fusionner les images avec des images similaires couleurs (réduisez le nombre de couleurs et la taille du fichier sera relativement petite)
§Fusionner en fonction des méthodes ci-dessus
▪Fusionner uniquement les images utilisées sur cette page
▪Fusion d'images avec état (passage de la souris sur les changements d'état, etc.)
7.2 Css3Solution : enregistrez deux copies de sprite.png(24) et sprite_ie png(8)<.>
§Les navigateurs avancés utilisent CSS3§Les navigateurs de bas niveau utilisent des images coupées7.3 Rétrogradation gracieuse
▪ Effets d'affichage pris en charge ▪ Aucun effet s'il n'est pas pris en charge
Pour plus d'images de découpe PS dans la partie production de pages, veuillez faire attention au site Web PHP chinois pour les articles connexes !
qu'est-ce que l'index MySQL
Qu'est-ce qui est mis en évidence dans jquery
Requête blockchain du navigateur Ethereum
Comment récupérer les flammes Douyin après leur disparition ?
Comment résoudre le problème des 400 requêtes incorrectes lorsque la page Web s'affiche
Outils de recherche couramment utilisés
Logiciel gratuit pour créer des sites Web
Quel est le concept de base de l'intelligence artificielle
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
