Découpage Photoshop frontal

Qu'est-ce que le slicing ? (Slice dans Photoshop)

Slice : coupez l'image en plusieurs parties et téléchargez-les une par une, afin que la vitesse de téléchargement soit plus rapide. Chaque tranche est transférée sous forme de fichier indépendant, qui contient ses propres paramètres, palette de couleurs, liens, effets de retournement et effets d'animation.

Outil de découpage : il est principalement utilisé pour décomposer une grande image en plusieurs petites images. Cette fonction est principalement utilisée dans les pages Web, car les pages Web d'aujourd'hui sont pleines d'images et de texte, et de ce fait, cela prend du temps. longtemps. Afin d'éviter que les internautes n'attendent trop longtemps sur la page Web, ils ont découpé l'image en plusieurs images plus petites.

Le découpage est une étape très importante dans le processus de production d'une page Web. Que le découpage soit correct ou non affectera souvent la post-production de la page Web. Généralement, PS ou FW sont utilisés pour couper les rendus de pages Web ou d'images à grande échelle. Un découpage correct et important apportera un impact très positif au site Web. Par exemple : réduire le temps de chargement des pages web, créer des effets dynamiques, optimiser les images, les liens, etc.

1. Production de tranches de page Web

1. Réduire le temps de chargement des pages Web

Parfois, une grande image de bannière peut être nécessaire sur la page Web, cela coûtera donc cher. navigateur pour télécharger cette image Pendant longtemps, cela a été très préjudiciable à l'expérience utilisateur. L’émergence du web slicing résout très bien ce problème. L'utilisation du découpage divise l'ensemble de la grande image en de nombreuses petites images différentes, et le navigateur téléchargera également ces petites images. De cette façon, le temps nécessaire au navigateur pour télécharger l'image est considérablement réduit, ce qui permet d'économiser beaucoup de temps.

2. Optimiser les images

De manière générale, une image complète ne peut être que dans un seul format, jpg, gif, png, psd, dpf ou autres. S'il existe un format, alors nous pouvons. utilisez uniquement un moyen d'optimiser. Le découpage Web peut diviser cette image en plusieurs petites images et les enregistrer dans d'autres formats, qui peuvent être optimisés séparément. Cela garantira une qualité d’image élevée tout en réduisant la mémoire d’image et en améliorant la vitesse de chargement de la page Web.

Préparation avant le découpage : enregistrer le fichier PSD de la page web et intégrer les images PS

Préparation spécifique au découpage : fractionnement des tranches, type de tranche (tranche utilisateur, tranche non utilisateur)

Points de base du découpage :

1. Couper selon la gamme de couleurs

2. Taille des tranches : coupez les tranches de la page Web aussi petites que possible ; complet : assurez-vous qu'une partie complète se trouve dans une tranche, comme le texte du titre d'une certaine zone, ce qui est pratique pour une modification ultérieure. Il existe de nombreuses transitions de couleurs celles avec des couleurs riches doivent être exportées au format JPG, et les parties avec animation. doit être exporté vers une animation GIF ;

, je ne sais pas si je devrai changer une certaine partie un jour, comme le texte, etc. Je peux simplement modifier les tranches utilisées séparément.

Afficher et masquer les calques découpés : tranches d'images d'arrière-plan ;

Édition des tranches : redimensionner, ajuster, supprimer, effacer les tranches (vous pouvez les sélectionner une par une, faire un clic droit pour supprimer, ou tout afficher pour supprimer), enregistrer les tranches (stockées dans un format utilisé par le web )

Supprimer la tranche

                                                                                                 using           using             using             use using ‐         using             using             use using ‐         modifier les options de découpage : type de tranche, nom : généré automatiquement, généralement nommé en anglais, il est plus convivial pour utiliser l'anglais dans le code de la page Web, URL : il s'agit de l'adresse du lien, de la cible, de la balise ALT : vous pouvez rechercher et optimiser l'image ,                                                    Taille W H

Enregistrer la tranche (stockée en tant que Web utilisé) Ctrl Maj Alt S : les formats généralement courants sont JIF et PNG -24 prenant en charge la transparence d'arrière-plan (le contrôle transparent prend en charge la transparence d'arrière-plan), JPEG (la qualité d'image est généralement de 80 ou plus). Cliquez ensuite sur Enregistrer, enregistrez le format, le format a des images limitées, défini sur les paramètres par défaut, les tranches (toutes les tranches : si les tranches utilisateur ou non-utilisateur seront exportées, toutes les tranches utilisateur : seules les tranches coupées, les tranches sélectionnées : uniquement le seront guider les tranches sélectionnées), qui générera automatiquement un dossier (Images)

Format de slot :

1, trois formats de découpage : , png prend en charge la transparence des pages Web et jif prend en charge une couleur relativement unique gamme.

2, comparaison de trois formats de découpage (portée applicable) : les pages Web JPG prennent en charge ce format ; PNG prend en charge la transparence et l'arrière-plan ;

3, la portée, les avantages et les inconvénients des trois tranches : PNG : IE6 ne prend pas en charge la transparence de l'image ; la couleur exportée par l'animation GIF est unique et les scies apparaissent lorsque la couleur est vive.

Enregistrer et renommer le slice :

1. L'export des tranches

2. Le nom du slicing est mieux en anglais Au début du symbole

.

compétences de découpage (dégradé, ombre, irrégulier) :

Dégradé : vous pouvez tirer un découpage

Ombre : comment réaliser sur la page Web, CSS3 peut également être réalisé L'ombre mais IE6 et IE8 ne le supportent pas. Vous pouvez créer une tranche pour l'ombre seule, laisser l'arrière-plan s'éteindre et l'enregistrer au format PNG-24

Irrégulier : l'arrière-plan est masqué, enregistrer au format PNG

<.> web slice tranches de pages web Exercices pratiques

Certaines couleurs peuvent être représentées par soi-même, production de widget (coupe entière), bouton de lecture vidéo

Étapes : organiser les calques, les enregistrer (pour sauvegarder les images), faites-en autant que possible Pour être précis, s'il y a plusieurs toiles, vous pouvez en créer une nouvelle et la copier sur la nouvelle toile

Comment insérer rapidement des tranches : créer un lien hypertexte ou ajouter comme lien d'arrière-plan

Résumé Points de connaissance et points clés du découpage : le concept de découpage, la fonction, la sélection du format

Pour plus d'articles liés au découpage Photoshop frontal, veuillez faire attention au chinois PHP site web!