J'ai un sale petit secret, je déteste couper des fichiers Photoshop. Par cela, je ne veux pas dire que je déteste transformer des compositions PSD en sites Web, je veux dire que je déteste les outils de découpage de Photoshop. L'ensemble du processus donne à mon PSD une apparence occupée, encombrée et trop compliquée; je l'ignore donc tout à fait et je choisis plutôt de rogner et d'enregistrer manuellement les images individuellement, selon les besoins.
Afin de lutter contre cette tendance et d'essayer de voir la véritable utilité des outils de découpage de Photoshop, je me suis lancé dans une mission consistant à apprendre toutes les subtilités du fonctionnement du découpage. Vous trouverez ci-dessous une série de conseils et d’astuces issus de ce voyage. Si tout va bien, vous apprendrez une chose ou deux que vous n'avez jamais su!
Il existe trois types de tranches dans Photoshop
Trois types de tranches !? Ce fut l'une des choses les plus intéressantes et surprenantes que j'ai apprises. N'ayant pas vraiment expérimenté les fonctions de découpage en tranches, je me suis dit qu'il n'y avait qu'un moyen de s'y prendre. J'avais tort.
Les trois types de tranches sont les tranches utilisateur, les tranches auto et les tranches basées sur des calques. Pour commencer, parlons des deux que vous connaissez probablement: les tranches utilisateur et les tranches auto. Ceux-ci sont très étroitement liés, en fait, l'un crée l'autre.
Comme vous le savez, pour découper un fichier PSD, vous devez commencer par saisir l'outil Découper (C) et tracer un cadre autour de la zone que vous souhaitez exporter en tant qu'image autonome. En ajoutant des tranches à toutes les zones de votre composition pour lesquelles vous souhaitez effectuer cette opération, vous pouvez rapidement et facilement optimiser et exporter plusieurs images à la fois.
Lorsque vous effectuez une tranche, vous devriez obtenir quelque chose comme le résultat ci-dessous.
Ce que j'ai fait ici, c'est dessiner une boîte autour du logo en haut de la page. Cette action unique a créé à la fois une tranche d’utilisateur et plusieurs tranches automatiques. Lorsque vous créez une tranche, Photoshop suppose que votre objectif final est de transformer le fichier PSD en une série de tranches. Personnellement, j'estime que cette hypothèse est assez énervante et nous discuterons plus tard de la manière de la contourner. Pour l'instant, sachez qu'à cause de cette hypothèse, Photoshop étend les bords de votre tranche sur le PSD, créant ainsi plusieurs autres sections automatiquement. Ceci est illustré dans l'image ci-dessus.
Astuces pour travailler avec l'utilisateur et les tranches automatiques
Pendant que nous parlons des tranches utilisateur et automatique, passons en revue certaines des fonctionnalités évidentes et moins évidentes afin que vous puissiez vraiment avoir une idée des outils et des options à votre disposition.
Déplacement et édition de tranches
Une fois que vous avez créé une tranche, vous devriez voir des commandes similaires à celles d'une transformation libre qui vous permettront de la déplacer et de la modifier. Vous pouvez également utiliser l'outil Sélection de tranche pour vous assurer que vous ne modifiez que les tranches actuelles et que vous n'en créez pas de nouvelles. Cet outil se trouve sous l’outil Slice dans le menu déroulant.
Conversion de tranches automatiques en tranches utilisateur
Tout au long du processus de découpage, les découpes automatiques sont continuellement créées et mises à jour et restent distinctes des découpes utilisateur. Nous verrons plus tard comment les exporter sous forme de fichiers ou les ignorer lors de l'exportation, mais pour le moment, examinons comment transformer un découpage automatique en découpage utilisateur.
Le processus est extrêmement simple. Tout d'abord, vous devez sélectionner la tranche automatique à l'aide de l'outil Sélection de tranche. Ensuite, sélectionnez le découpage automatique que vous souhaitez convertir et appuyez sur le bouton? Promouvoir? bouton près du haut.
C'est tout! La tranche automatique doit maintenant changer de couleur, ce qui indique qu'il s'agit désormais d'une tranche d'utilisateur. Maintenant, vous aurez un plus grand contrôle sur sa taille et son mode d'exportation.
Tranches à division automatique
Lorsque vous avez une série d'objets distribués horizontalement, verticalement ou même dans une grille, vous n'avez pas besoin de prendre le temps nécessaire pour effectuer une découpe autour de chaque unité. Au lieu de cela, vous pouvez créer une tranche qui couvre tous les objets et dire à Photoshop de faire le reste.
Pour ce faire, commencez par créer votre grande tranche en traçant un cadre autour de tous les objets. Ensuite, avec l'outil de sélection de tranche activé, cliquez sur le bouton? Diviser? bouton en haut de la page.
Cela devrait faire apparaître le? Divide Slice? boîte de dialogue montrée ci-dessus. En utilisant cette fenêtre, vous pouvez insérer rapidement des tranches verticales et horizontales supplémentaires. S'ils ne s'alignent pas correctement, vous pouvez les ajuster manuellement après avoir appuyé sur le bouton "OK".
Tranches de guides
Beaucoup d'entre vous sont probablement beaucoup plus à l'aise avec les guides que les découpes dans Photoshop. La réalité est que les deux systèmes fonctionnent de manière très similaire, mais le système de guides est certes un peu plus fluide.
Si vous procédez ainsi, cela s’intègre parfaitement dans un flux de travail simple permettant de créer des tranches. Faites simplement glisser les guides pour découper votre PSD et ignorer les outils de découpage. Ensuite, une fois que vous avez terminé, sélectionnez l'outil Tranche, puis cliquez sur les? Tranches de guides? bouton en haut.
Nommer des tranches
Une des choses ennuyeuses qui vous tracassera la première fois que vous travaillerez avec des tranches est que, lorsque vous les exportez, les fichiers résultants génèrent tous de gros noms laids qui n’ont aucun sens. Pour résoudre ce problème, vous devez vous assurer que vous avez bien nommé chaque tranche. Le nom que vous attribuez sera alors repris comme nom de fichier lors de l'exportation.
Pour nommer une tranche, il vous suffit de double-cliquer sur son contenu avec l’outil Tranche sélectionné. Cela fera apparaître la boîte de dialogue ci-dessous.
Notez que vous disposez de plusieurs options, notamment la définition de la couleur de la tranche, la saisie manuelle des dimensions et l'attribution d'un nom. Il existe également un certain nombre d'éléments HTML tels que URL, cible, etc. Il s'avère que Photoshop peut utiliser votre fichier PSD découpé en tranches et le générer sous forme de page Web. Certains bash cette fonctionnalité parce que les paramètres par défaut créent une mise en page basée sur des tableaux, mais vous pouvez les changer pour utiliser CSS.
Maintenant, ne soyez pas trop excité. Même avec les options CSS sélectionnées, Photoshop est toujours assez mal pour créer un site Web pour vous.Vous feriez bien mieux de le faire à la main ou du moins de passer à Dreamweaver, ce qui signifie que vous devriez ignorer toutes ces autres options.
Tranches à base de couches et pourquoi elles sont meilleures
L'une des principales caractéristiques qui m'a permis de bien moins trancher est les tranches en couches. Il s'agit d'une marque particulière de tranches d'utilisateur qui sont supérieures à plusieurs égards.
Comme son nom l'indique, ces tranches ne sont pas basées sur une zone que vous dessinez manuellement, mais adhèrent automatiquement aux limites d'un calque. Pour créer une tranche basée sur un calque, sélectionnez un calque dans la palette des calques, puis accédez au menu, puis sélectionnez Calque> Nouvelle tranche basée sur un calque. Notez que cela fonctionne même si vous avez plusieurs couches sélectionnées, chaque couche sera simplement transformée en sa propre tranche!
De toute évidence, pour que cela fonctionne correctement, vous devez vraiment savoir comment structurer vos couches. Vous devriez de toute façon construire vos maquettes comme des fichiers entièrement superposés et organisés, cela ne devrait donc pas poser de problème.
L'avantage
L'une des principales raisons pour lesquelles les tranches normales sont si boiteuses est que cela crée beaucoup de travail supplémentaire si vous voulez revenir en arrière et peaufiner vos conceptions. Après avoir mélangé l’illustration, vous devez revenir en arrière et déplacer toutes vos tranches pour les aligner sur la nouvelle présentation. C’est pour cette raison que j’ai toujours économisé manuellement les pièces individuelles par recadrage.
Cependant, les tranches basées sur des couches sont en réalité assez intelligentes. Lorsque vous vous déplacez dans vos calques, vos tranches suivent automatiquement. Si vous ajoutez un effet qui modifie les limites, tel qu'un éclat externe, la découpe se développe pour l'inclure. Si vous transformez le calque à 30% de sa taille d'origine, la tranche est à nouveau automatiquement mise à jour!
De toute évidence, l'argumentation est claire en faveur de l'utilisation de tranches basées sur des couches chaque fois que possible, car cela vous fait gagner un temps incroyable dans l'étape inévitable de la reconception.
Tuer le fouillis
Un autre de mes plus gros ennuis avec le découpage est qu’il peut créer un PSD très encombré. Ceci est principalement dû à l'effet secondaire Auto Slicing.
A titre d'exemple, jetez un coup d'œil à l'image ci-dessous (c'est un peu trop simplifié ici mais vous comprenez le point). Ici, je ne voulais vraiment que créer trois tranches, mais Photoshop est automatiquement entré et l'a transformé en douze tranches!
Je ne sais pas pour vous, mais je ne construis pas de pages Web comme une grande collection d’images entassées. Donc, je ne veux tout simplement pas toutes ces tranches supplémentaires! Je ne vais pas exporter ces zones en images, elles ne font donc qu'ajouter du bruit à mon interface. Lorsque je vois un document comme celui-ci, les tranches cessent d'être un outil utile pour moi.
Pour résoudre ce problème, nous pouvons récupérer l'outil Sélection de tranche et cliquer sur "Masquer les tranches automatiques". bouton en haut de l'écran. Cela fait exactement ce que son nom l'indique, en écartant toutes ces vilaines tranches automatiques.
Regardez comme notre document devient plus simple! Les quelques tranches que nous avons utilisées sont clairement identifiables et conservent donc leur utilité. À mon avis, cette méthode de visualisation de vos tranches est grandement préférée. C’est l’un des cas où Photoshop essaie tout simplement trop de prédire le flux de travail que je préfère et finit par exagérer les fonctionnalités.
Exporter des tranches
C’est là que l’utilité du découpage entre vraiment en jeu. Sans découpage, vous devez enregistrer chaque partie de votre composition une à la fois. Le flux de travail ressemblerait à ce qui suit: faites une sélection, rognez, optimisez dans Enregistrer pour le Web, enregistrez, annulez le rognage et répétez. C'est beaucoup d'étapes inutiles! Voyons comment cela fonctionne avec le découpage en tranches.
Une fois que vous avez enfin compris tous les tenants et aboutissants de la découpe et que votre PSD est prêt, il est temps d'aller dans le menu Fichier et de sélectionner "Enregistrer pour le Web et les périphériques". Vous êtes probablement déjà familiarisé avec ce dialogue, mais c'est un peu différent lorsque vous avez des coupes dans votre document.
Si vous avez des tranches, l'aperçu de votre document dans cette fenêtre les affiche toutes (malheureusement, cela inclut les tranches auto gênantes). À partir de là, vous pouvez simplement cliquer pour sélectionner chaque tranche et optimiser les paramètres individuellement. Cela inclut le type de fichier, la qualité, etc. Ainsi, en une session, vous pouvez configurer une exportation de trois fichiers JPG et d'un fichier PNG, chacun avec une qualité que vous jugez appropriée.
Une fois que vous avez tout ajusté à votre convenance, cliquez sur le bouton? Enregistrer? bouton. Une boîte de dialogue devrait apparaître vous permettant de choisir un dossier dans lequel placer toutes les images. N'oubliez pas que nous avons déjà défini la convention de dénomination, laissez-la donc telle quelle. La clé ici est de vous assurer que vous n'exportez que l'un ou l'autre? Tous les tranches d'utilisateur? ou? Tranches sélectionnées ?.
Selon votre flux de travail souhaité, l'une ou l'autre de ces options fonctionne très bien. L'option par défaut est simplement "Toutes les tranches", qui inclut non seulement vos tranches utilisateur et calque, mais également les découpes automatiques totalement inutiles que vous devrez tout simplement jeter de toute façon. Epargnez-vous et dérangez-les ici avant la sauvegarde.
Conclusion
Nous avons passé en revue de nombreuses techniques assez techniques concernant Photoshop aujourd'hui, alors je vais essayer de bien les résumer. Premièrement, découper un fichier PSD peut sembler être un processus fastidieux si vous ne savez pas ce que vous faites. Assurez-vous de bien regarder dans Photoshop et expérimentez les astuces ci-dessus pour tirer le meilleur parti des outils à votre disposition.
Deuxièmement, rappelez-vous qu’il existe trois types de tranches: Tranches auto, Tranches utilisateur et Tranches basées sur des calques. Les tranches automatiques sont plutôt boiteuses et constituent davantage un effet secondaire malheureux que le tranchage. Vous n'êtes pas obligé d'être d'accord avec moi sur ce point, mais si c'est le cas, cachez-les afin qu'ils ne vous distraient pas trop. Les tranches d'utilisateurs sont simplement celles que vous avez créées intentionnellement. Vous pouvez les ajuster à l'aide de l'outil Sélection de tranche et les nommer en double-cliquant sur le contenu.Les tranches basées sur des calques sont identiques aux tranches utilisateur, mais elles sont beaucoup plus intelligentes car elles adhèrent automatiquement aux limites d'un calque donné. Vous pouvez déplacer, redimensionner et ajouter des effets à un calque et la tranche se mettra à jour de façon autonome.
Enfin, lors de l'exportation d'un document avec des tranches, choisissez la commande Enregistrer pour le Web et optimisez chaque tranche en tant que son propre fichier. Assurez-vous également d'exporter uniquement les tranches utilisateur ou sélectionnées, sinon toutes les tranches automatiques créées par Photoshop rempliront votre dossier d'images.
C’est probablement bien plus que ce que vous avez toujours voulu savoir sur le découpage dans Photoshop, mais nous espérons que cela vous a aidé à déceler les inefficacités du système afin que vous puissiez ajuster et tirer parti de cet ensemble utile d’outils sans être gêné par sa maladresse.
Laissez un commentaire ci-dessous et dites-nous comment vous découpez un PSD. Le flux de travail que j'ai configuré ici n'est que l'une des nombreuses solutions possibles et je suis impatient d'entendre et d'apprendre de la vôtre!