Comment faire pour que le tranchage suce moins: trucs et astuces pour trancher un PSD
J'ai un sale petit secret, je déteste trancher des fichiers Photoshop. Par cela, je ne veux pas dire que je déteste transformer les 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 un aspect occupé, encombré et trop compliqué, donc je l'ignore généralement et opte plutôt pour le recadrage manuel et la sauvegarde des images individuellement selon les besoins.
Afin de lutter contre cette tendance et essayer de voir la véritable utilité des outils de découpage de Photoshop, je me suis lancé dans une mission pour apprendre toutes les subtilités du fonctionnement du découpage. Vous trouverez ci-dessous une collection de trucs et astuces résultant de ce voyage. J'espère que vous apprendrez une ou deux choses que vous ne saviez pas!
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 trop expérimenté les fonctionnalités de découpage, je me suis dit qu'il n'y avait qu'une seule façon de procéder. J'avais tort.
Les trois différents types de tranches sont les tranches utilisateur, les tranches automatiques et les tranches basées sur les calques. Pour commencer, parlons des deux que vous connaissez probablement: les tranches utilisateur et les tranches automatiques. Ceux-ci sont très étroitement liés, en fait, l'un crée l'autre.
Comme vous le savez, pour découper un PSD, vous commencez par saisir l'outil de découpage (C) et dessiner une zone autour de la zone que vous souhaitez exporter en tant qu'image autonome. En ajoutant des tranches à toutes les zones de votre maquette auxquelles vous souhaitez procéder, 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 utilisateur et plusieurs tranches automatiques. Lorsque vous créez une tranche, Photoshop suppose que votre objectif final est de transformer l'intégralité du PSD en une série de tranches. Personnellement, je pense que cette hypothèse est assez ennuyeuse, et nous discuterons plus tard de la façon de la contourner. Pour l'instant, sachez qu'en raison de cette hypothèse, Photoshop étend les bords de votre tranche tout au long du PSD, créant ainsi plusieurs autres sections automatiquement. Ceci est illustré dans l'image ci-dessus.
Astuces pour travailler avec les tranches utilisateur et automatique
Pendant que nous abordons le sujet des tranches utilisateur et automatique, passons en revue certaines des fonctionnalités évidentes et pas si évidentes afin que vous puissiez vraiment avoir une idée des outils et des options dont vous disposez.
Déplacement et modification de tranches
Une fois que vous avez créé une tranche, vous devriez voir des commandes similaires à celles d'une transformation gratuite qui vous permettront de la déplacer et de la modifier. Vous pouvez également utiliser l'outil de sélection de tranche pour vous assurer que vous n'éditez 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. Plus tard, nous verrons comment les exporter en tant que fichiers ou les ignorer lors de l'exportation, mais pour l'instant, examinons comment transformer une tranche automatique en tranche utilisateur.
Le processus est extrêmement simple. Tout d'abord, vous devez sélectionner la tranche automatique à l'aide de l'outil de sélection de tranche. Ensuite, sélectionnez la tranche automatique que vous souhaitez convertir et appuyez sur le bouton "Promouvoir" près du haut.
C'est tout! Maintenant, la tranche automatique doit changer de couleur, indiquant qu'il s'agit désormais d'une tranche utilisateur. Vous aurez désormais un plus grand contrôle sur sa taille et sur la façon dont il exporte.
Tranches à division automatique
Lorsque vous avez une série d'objets répartis horizontalement, verticalement ou même dans une grille, vous n'avez pas besoin de prendre le temps de parcourir et de faire une tranche autour de chaque unité individuelle. Au lieu de cela, vous pouvez créer une tranche qui couvre tous les objets et demander à Photoshop de faire le reste.
Pour ce faire, commencez par créer votre grosse tranche en dessinant une boîte autour de tous les objets. Ensuite, avec l'outil de sélection de tranche activé, cliquez sur le bouton «Diviser» en haut de la page.
Cela devrait faire apparaître la boîte de dialogue «Diviser la tranche» illustrée ci-dessus. Cette fenêtre vous permet d'insérer rapidement des tranches verticales et horizontales supplémentaires. S'ils ne s'alignent pas à droite, vous pouvez les ajuster manuellement après avoir cliqué sur le «bouton OK».
Tranches de guides
Beaucoup d'entre vous sont probablement beaucoup plus à l'aise avec les guides qu'avec les tranches à l'intérieur de Photoshop. La réalité est qu'ils fonctionnent tous deux de manière très similaire, mais le système de guides est certes un peu plus fluide.
Si c'est ainsi que vous roulez, cela s'intègre parfaitement dans un flux de travail simple pour créer des tranches. Faites simplement glisser les guides pour découper votre PSD et ignorez complètement les outils de découpage. Ensuite, une fois que vous avez terminé, sélectionnez l'outil Tranche et appuyez sur le bouton "Tranches des guides" en haut.
Nommer les tranches
L'une des choses ennuyeuses qui vous dérangeront la première fois que vous travaillerez avec des tranches est que lorsque vous les exportez, les fichiers résultants contiennent tous de gros noms laids qui n'ont aucun sens. Pour résoudre ce problème, vous devez vous assurer que vous avez entré et nommé chaque tranche de manière appropriée. Quel que soit le nom que vous attribuez, celui-ci sera alors conservé comme nom de fichier lors de l'exportation.
Pour nommer une tranche, double-cliquez simplement sur son contenu avec l'outil Slice sélectionné. Cela fera apparaître la boîte de dialogue ci-dessous.
Notez que vous disposez de plusieurs options ici, notamment la définition de la couleur de la tranche, la saisie manuelle des dimensions et l'attribution d'un nom. Il y a aussi un tas de trucs HTML comme URL, Target, etc. Il s'avère que Photoshop peut prendre votre PSD en tranches et le publier sous forme de page Web. Certains bash cette fonctionnalité parce que les paramètres par défaut créent une disposition basée sur un tableau, cependant vous pouvez les changer pour utiliser CSS.
Maintenant, ne vous excitez pas trop. Même avec les options CSS sélectionnées, Photoshop est encore assez pourri à créer un site Web pour vous. Vous feriez bien mieux de le faire à la main ou du moins de le confier à Dreamweaver, ce qui signifie que vous devez ignorer complètement toutes ces autres options.
Tranches basées sur les couches et pourquoi elles sont meilleures
Les tranches basées sur les couches sont l'une des principales caractéristiques qui ont rendu le tranchage beaucoup moins agréable pour moi. Il s'agit d'une marque particulière de tranches d'utilisateurs qui sont supérieures à plusieurs égards.
Comme leur nom l'indique, ces tranches ne sont pas basées sur une boîte 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 allez dans le menu et sélectionnez Calque> Nouvelle tranche basée sur un calque. Notez que cela fonctionne même si vous avez sélectionné plusieurs calques, chaque calque sera simplement transformé en sa propre tranche!
De toute évidence, pour que cela fonctionne correctement, vous devez être vraiment bon dans la façon dont vous structurez vos couches. Vous devez de toute façon créer vos maquettes sous forme de 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 qu'elles créent beaucoup de travail supplémentaire si vous souhaitez revenir en arrière et modifier vos conceptions. Après avoir mélangé l'illustration, vous devez revenir en arrière et déplacer toutes vos tranches pour l'aligner avec la nouvelle disposition. Cette contrariété est la raison pour laquelle je sauvegarde toujours manuellement les pièces individuelles par recadrage.
Cependant, les tranches basées sur les couches sont en fait assez intelligentes. Lorsque vous vous déplacez autour de vos calques, vos tranches suivent automatiquement. Si vous ajoutez un effet qui modifie les limites, comme une lueur extérieure, la tranche se développe pour l'inclure. Si vous transformez le calque à 30% de sa taille d'origine, la tranche se met à jour automatiquement!
De toute évidence, il y a un argument clair ici pour utiliser des tranches basées sur les couches chaque fois que cela est possible, car cela vous fait gagner un temps incroyable dans la phase de reconception inévitable.
Tuer le désordre
Un autre de mes plus gros ennuis avec le découpage est qu'il peut créer un PSD vraiment encombré. Cela est principalement dû à l'effet secondaire de découpage automatique.
À titre d'exemple, jetez un œil à l'image ci-dessous (c'est un peu trop simplifié ici mais vous obtenez le point). Ici, je ne voulais vraiment créer que trois tranches, mais Photoshop est automatiquement entré et l'a transformé en douze tranches !
Je ne sais pas pour vous, mais je ne crée pas de pages Web comme une grande collection d'images toutes entassées. Donc, je ne veux tout simplement pas toutes ces tranches supplémentaires! Je ne vais pas exporter ces zones en images, donc tout ce qu'elles font, c'est ajouter du bruit à mon interface. Quand je vois un document comme celui-ci, les tranches cessent d'être un outil significatif pour moi.
Pour résoudre ce problème, nous pouvons saisir l'outil de sélection de tranche et appuyer sur le bouton «Masquer les tranches automatiques» en haut de l'écran. Cela fait exactement ce que son nom l'indique, élimine toutes ces méchantes tranches automatiques de la vue.
Regardez à quel point 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 de ces cas où Photoshop essaie tout simplement trop de prévoir mon flux de travail préféré et finit par exagérer les fonctionnalités.
Exportation de tranches
C'est là que l'utilité du découpage entre vraiment en jeu. Sans découpage, vous devez enregistrer chaque partie de votre maquette une à la fois. Le flux de travail ressemblerait à ceci: faire une sélection, recadrer, optimiser dans Save for Web, enregistrer, annuler le recadrage et répéter. C'est beaucoup d'étapes inutiles! Voyons comment cela fonctionne avec le découpage.
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 appareils». Vous connaissez probablement déjà cette boîte de dialogue, mais c'est un peu différent lorsque vous avez des tranches dans votre document.
Si vous avez des tranches, l'aperçu de votre document dans cette fenêtre les montre toutes (malheureusement, cela inclut ces tranches automatiques ennuyeuses). De là, vous pouvez simplement cliquer pour sélectionner chaque tranche et optimiser les paramètres pour chacune individuellement. Cela inclut le type de fichier, la qualité, etc. Ainsi, en une seule session, vous pouvez configurer une exportation de trois JPG et un PNG, chacun avec une qualité que vous jugez appropriée.
Une fois que vous avez tout réglé à votre convenance, appuyez sur le bouton "Enregistrer". Une boîte de dialogue devrait apparaître qui vous permet de choisir un dossier dans lequel placer toutes les images. N'oubliez pas que nous avons déjà configuré la convention de dénomination, alors laissez-la telle quelle. La clé ici est de vous assurer que vous n'exportez que «Toutes les tranches utilisateur» ou «Tranches sélectionnées».
Selon votre flux de travail souhaité, l'une de ces options fonctionne très bien. L'option par défaut est simplement «Toutes les tranches», qui inclura non seulement vos tranches utilisateur et couche, mais également les tranches automatiques complètement inutiles que vous devrez de toute façon jeter. Épargnez-vous les problèmes et abandonnez-les ici avant la sauvegarde proprement dite.
Conclusion
Nous avons passé en revue beaucoup de trucs assez techniques sur Photoshop aujourd'hui, donc je vais essayer de bien le résumer. Tout d'abord, trancher un PSD peut vraiment ressembler à un processus maladroit si vous ne savez pas ce que vous faites. Assurez-vous de bien regarder autour de vous dans Photoshop et expérimentez les conseils ci-dessus pour vous assurer de tirer le meilleur parti des outils à votre disposition.
Deuxièmement, n'oubliez pas qu'il existe trois types de tranches: les tranches automatiques, les tranches utilisateur et les tranches basées sur les calques. Les tranches automatiques sont assez boiteuses et sont plus un effet secondaire malheureux pour le découpage qu'une fonctionnalité utile. Vous n'êtes pas obligé d'être d'accord avec moi à ce sujet, mais si vous le faites, cachez-les afin qu'ils ne soient pas si distrayants. Les tranches utilisateur sont simplement celles que vous créez intentionnellement. Vous pouvez les ajuster avec l'outil de sélection de tranche et les nommer en double-cliquant sur le contenu. Les tranches basées sur les calques sont comme les 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 sera continuellement mise à jour d'elle-même.
Enfin, lors de l'exportation d'un document avec des tranches, choisissez la commande Enregistrer pour le Web et optimisez chaque tranche comme son propre fichier. Assurez-vous également d'exporter uniquement les tranches utilisateur ou les tranches sélectionnées, sinon toutes les tranches automatiques créées par Photoshop rempliront votre dossier d'images.
C'est probablement beaucoup plus que ce que vous avez jamais voulu savoir sur le découpage dans Photoshop, mais j'espère que cela vous a aidé à repérer les inefficacités du système afin que vous puissiez ajuster et profiter de cet ensemble d'outils utiles 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 mis en place ici n'est qu'une des nombreuses solutions possibles et je suis impatient d'entendre et d'apprendre de la vôtre!
