Le guide du concepteur sur le découpage d'images dans Photoshop

Lorsque vous travaillez avec des images sur le Web, vous souhaiterez parfois charger une grande image, que ce soit comme image principale sur une page ou comme arrière-plan. L'inconvénient est que vous rencontrerez immédiatement plusieurs problèmes. Tout d'abord, la taille réelle du fichier. La deuxième est la résolution. Troisièmement, la compression.

comment dessiner des poses étape par étape

Si le fichier est volumineux, le chargement prendra beaucoup de temps, en particulier pour les utilisateurs avec une connexion plus lente. Vous pouvez réduire la taille du fichier avec la compression, mais vous ne pouvez aller plus loin avant que la qualité d'image ne commence à en souffrir.

La solution à votre problème est d'utiliser le découpage d'image, ce qui vous permettra de charger l'image, morceau par morceau, jusqu'à ce que l'image entière apparaisse sur votre écran.



Comment ça fonctionne

Voici un aperçu de son fonctionnement: lorsque vous avez une image qui prendra trop de temps à charger seule, vous profitez de l'outil de découpage de Photoshop pour couper l'image en sections plus petites. Ces images seront enregistrées dans un fichier séparé et optimisées à l'aide de la commande Enregistrer pour le Web.

De plus, Photoshop crée le HTML ou le CSS nécessaire pour afficher l'image découpée. Lorsqu'elle est utilisée dans une page Web, chaque image sera réassemblée dans le navigateur en utilisant le HTML ou le CSS mentionné précédemment pour créer un résultat fluide. Voici un exemple d'image découpée.

découpage d

Bases du tranchage

Pour garder les choses simples, nous ne travaillerons avec l'outil Tranche que sur un seul calque. Dans cet exemple, je travaille avec une image de 960x722px. Certaines choses que vous devez savoir avant de commencer:

  • Lors de la création de tranches, vous pouvez le faire à l'aide de l'outil Tranche ou vous pouvez les construire à l'aide de calques.
  • Les tranches peuvent être sélectionnées à l'aide de l'outil Sélection de tranche.
  • Vous pouvez déplacer, dimensionner ou aligner la tranche avec d'autres tranches. De plus, vous pouvez désigner un nom pour la tranche, le type et l'URL.
  • Chaque tranche peut être optimisée à l'aide des paramètres de la boîte de dialogue Enregistrer pour le Web.

Pour commencer, appuyez sur C sur votre clavier et cliquez sur l'outil Tranche.

découpage d

Lorsque vous créez des tranches, vous pouvez choisir parmi trois paramètres: Normal, Format d'image fixe et Taille fixe.

comment inverser l'image dans Photoshop
  • Normal : Cela deviendra une tranche en fonction de l'endroit où vous commencez et terminez la boîte que vous dessinez sur l'image.
  • Rapport hauteur / largeur fixe : C'est ici que vous définissez une hauteur et une largeur en utilisant des nombres entiers. Pour élaborer, si vous souhaitez créer une tranche avec un rapport de trois à un, vous devez entrer 3 pour la hauteur et 1 pour la largeur.
  • Taille fixe : C'est ici que vous définissez la hauteur et la largeur de la tranche en pixels.

Vous avez plusieurs options pour découper une image. Si la précision n'est pas importante, vous pouvez découper l'image manuellement et, si nécessaire, déplacer les tranches terminées à l'aide de l'outil de sélection de tranche.

découpage d

Si la précision est importante, utilisez des directives pour tracer les sections importantes de l'image.

découpage d

En haut de la barre de menu Tranche, cliquez sur le C ou l'outil Tranche pour l'activer et dans la barre de menu Tranche au-dessus de l'image, cliquez sur le bouton Tranches des guides.

découpage d

Les tranches sont automatiquement dessinées pour vous. Vous pouvez ensuite repositionner les tranches avec l'outil de sélection de tranche.

Modification des informations de tranche

Une fois que chaque tranche a été créée, vous pouvez modifier les informations sur la tranche de deux manières.

La première chose à faire est de cliquer sur l'outil de sélection de tranche, de cliquer sur la tranche que vous souhaitez modifier puis de cliquer sur l'icône à côté du bouton Afficher les tranches automatiques dans la barre de menu.

découpage d

Une autre option consiste à faire un clic droit sur la tranche et dans le menu contextuel, cliquez sur Modifier les options de tranche.

découpage d

Les deux choix ouvriront la boîte de dialogue Options de tranche.

découpage d

Comme vous pouvez le voir, il existe de nombreux paramètres. Vous pouvez modifier le nom de la tranche, vous pouvez lui attribuer une URL afin que lorsque vous cliquez dessus dans le navigateur, cela vous mènera à un emplacement différent, vous pouvez définir la cible (_blank, _self, _parent, _top), Message Texte, balise Alt, dimensions de la tranche et plus encore.

Enregistrer pour le Web

Une fois que vous êtes satisfait de votre mise en page, accédez à Fichier> Enregistrer pour le Web.

découpage d

coque apple macbook pro 15 pouces

Ici, vous pouvez définir le type de fichier et la compression pour chaque tranche ou utiliser la valeur par défaut répertoriée dans la boîte de dialogue Enregistrer pour le Web. Une fois que vous êtes satisfait de vos paramètres, cliquez sur le bouton Enregistrer.

découpage d

comment utiliser les éléments adobe photoshop 14

Cela fait apparaître la boîte de dialogue Enregistré optimisé sous. Au bas de la boîte se trouvent plusieurs paramètres importants.

  • Format : Vous avez trois options qui sont HTML et Images, Images uniquement et HTML uniquement.
  • Réglages : Vos options sont Personnalisé, Image d'arrière-plan, Paramètres par défaut, XHTML et Autre.
  • Tranches : Vos options sont Toutes les tranches, Toutes les tranches utilisateur et les tranches sélectionnées.

Pour ce didacticiel, j'utilise HTML et images, les paramètres par défaut et toutes les tranches. Lorsque vous êtes satisfait de vos paramètres, choisissez le dossier dans lequel vous souhaitez enregistrer les fichiers et cliquez sur le bouton Enregistrer. Cela crée un fichier HTML et enregistre les six images dans un dossier.

Voici une vue en écran partagé du fichier HTML dans Adobe Dreamweaver. Comme vous pouvez le voir, le code est simple et facile à utiliser.

découpage d

Conclusion

Comme vous pouvez le voir, le découpage d'image est utile si vous avez une grande image. En le divisant en sections, des parties de l'image commenceront à se charger en premier, ce qui permettra à l'utilisateur d'en savoir plus. Ceci est utile pour les utilisateurs avec une connexion lente.

Pour plus d'informations, consultez les articles suivants:

Mots : Nathan Segal