Share
Adobe Photoshop est en constante évolution. de nouvelles fonctionnalités sont ajoutées à chaque version, tandis que les fonctionnalités existantes sont améliorées. Il y a cependant un domaine qui est encore assez dépassé; la façon dont nous découpons nos dessins dans Photoshop n'a pas changé depuis que le Web était basé sur des tables.
L'aube de l'indépendance de la résolution (think Retina) signifie que nous nous fions de moins en moins aux bitmaps pour nos sites Web. Les polices Web, CSS3 et Scalable Vector Graphics sont tous des exemples de techniques modernes qui nous évitent de nous préoccuper des pixels. Parfois, nous devons encore découper nos fichiers PSD et utiliser les images résultantes, mais il est temps que nous le fassions de manière plus responsable..
Enter Cut & Slice me, un plugin CS6 développé par Daniel Peruho. Cut & Slice me vise à accélérer le processus de découpage moderne et offre de nombreuses fonctionnalités puissantes. C'est gratuit, c'est facile à utiliser et ça marche.
Elle propose notamment de prendre un groupe de calques et de le traiter comme un objet unique. Il supprime ensuite tous les pixels inutiles et exporte le groupe en tant que fichier image. Lors de la conception des boutons, une fois que les couches sont nommées en fonction du format requis par le plug-in, il peut découper automatiquement les différents états de ce bouton. Désireux d'apprendre plus? Plongeons dedans.
Pour commencer, vous devez d’abord exécuter Photoshop CS6. Vous devrez ensuite installer le plug-in sur votre ordinateur. Rendez-vous sur la page d'accueil de Cut & Slice me et téléchargez la dernière version du plugin. Téléchargez également le fichier exemple que nous utiliserons pour montrer le fonctionnement du plugin..
Une fois téléchargé, double-cliquez sur le fichier CutAndSliceMe.zxp pour déclencher l'installation du plug-in. Lorsque Adobe Extension Manager s’affiche, suivez les instructions..
Lancez Photoshop et choisissez Fenêtre> Extensions> Couper et me couper. Vous devriez maintenant pouvoir voir le panneau "Cut & Slice me".
Ensuite, extrayez le fichier CutAndSliceMe_sample.zip et ouvrez le fichier exemple. Vous devriez voir ce qui suit:
Ceci est une conception mobile avec des couches correctement nommées en fonction des exigences du plugin. Dans quelques instants, nous verrons comment cela fonctionne, mais avant cela, vous devez être conscient de quelques points:
Assurez-vous que le bouton avec l'icône iPhone est sélectionné, puis cliquez sur Couper tous les actifs. Lorsque le découpage est terminé, accédez au répertoire de fichiers exemple et ouvrez le dossier "CutAndSlice_sample_iPhone_assets" créé automatiquement par le plug-in..
Vous verrez chaque atout en deux tailles. un pour Retina (qui correspond en réalité à la taille de résolution maximale utilisée dans votre fichier PSD), et un autre qui est la version réduite de l'original.
Maintenant, répétons notre exercice, cette fois, l'exportation pour Android. Changez le mode du plugin en cliquant sur le bouton avec l'icône Android, puis cliquez sur Couper tous les actifs encore. Cette fois, le dossier "CutAndSlice_sample_Android_assets" est créé avec quatre sous-dossiers. un pour chaque taille d'actif. La taille que nous avons initialement conçue se trouve dans le xhdpi dossier, tous les autres actifs étant des versions réduites de ces.
Maintenant que nous avons vu plus ou moins ce que le plugin fait, il est temps de savoir comment il fonctionne.
L'aspect le plus important à prendre en compte est l'organisation de la couche, en termes de nommage et de regroupement. Organisez vos éléments en groupes, comme s'il s'agissait d'objets. Puis ajouter @ à la fin de tous les noms de groupes que vous souhaitez exporter, et enfin cliquez sur Couper tous les actifs. Le contenu de chaque groupe sera exporté sous forme de fichier PNG, en coupant tous les pixels transparents..
Remarque: Par souci de performance, Cut & Slice me vérifie uniquement les noms de groupe. Par conséquent, pour être exportés, vos calques doivent appartenir à un groupe..
Parfois, il se peut que vous ne souhaitiez pas exporter tous les actifs. vous voudrez peut-être n'exporter que les actifs que vous avez placés dans un groupe particulier. Si tel est le cas, il suffit de cliquer sur Couper les sous-groupes et Cut & Slice me exportera tous vos @ couches à l'intérieur du groupe sélectionné.
Si vous souhaitez ne découper qu'un seul groupe ou un seul calque, sélectionnez-le et cliquez sur Couper Sélectionné.
Enfin, lorsque nous traitons avec des boutons, nous avons souvent plusieurs états pour eux. Pour les exporter correctement, vous devez ajouter des groupes contenant vos différents états de bouton, en les nommant comme suit:
Accentsconagua
Ordinaireflottercliqué / appuyéchoisidésactivéePuis placez ces groupes dans un autre groupe avec _BTN annexé à son nom. Notez que le _BTN suffixe peut être utilisé avec n'importe quel élément qui a des états.
Exemples de boutons avec différents états. Comme déjà mentionné, Cut & Slice me recadre les images bitmap étroitement, en supprimant tous les pixels transparents environnants indésirables. Mais que se passe-t-il lorsque vous souhaitez que tous les états de vos boutons soient de la même taille? Dans ce cas, vous pouvez utiliser un calque vectoriel rectangulaire, nommé #, tout en haut de votre groupe, représentant la zone que vous souhaitez exporter. Votre groupe sera exporté à la taille de la forme vectorielle, sans exporter le calque vectoriel lui-même. Ceci est valable pour tous les groupes, pas seulement pour les boutons. Le plugin utilise un calque vectoriel pour cette fonctionnalité car si le Aligner les outils vectoriels et les transformer en grille de pixels L’option est cochée, comme je l’ai mentionné ci-dessus, votre forme vectorielle sera parfaitement pixelisée, sans bords flous..
Pour tester ce processus, sélectionnez la couche immédiatement ci-dessous login_BTN groupe. Puis mettre Opacité à 100% et Remplir à 40%. Vous pourrez maintenant voir la forme au-dessus du bouton. Modifiez sa taille à votre guise et exportez-la. Ouvrez maintenant le dossier des ressources et vérifiez la taille du bouton exporté. Ce devrait être la taille que vous venez de définir.
Nous savons maintenant comment utiliser le plugin. Il est donc temps de le tester dans le monde réel. Ici, je ne vais pas vous apprendre à concevoir un modèle de site Web à partir de rien. Je vais plutôt utiliser un modèle prédéfini afin de vous montrer comment nommer et organiser correctement vos calques..
Commençons par télécharger ce modèle de site Web gratuit à partir de CSS Author. Le modèle a une version Web et une version mobile. Téléchargez les deux, puis ouvrez la version Web du modèle.
Vous avez peut-être déjà remarqué que la dénomination et la structure des couches sont bien loin de ce dont nous avons besoin. Nous devrons réorganiser et renommer pour répondre aux besoins du plugin. Dans la capture d'écran suivante, vous pouvez voir une comparaison de la structure des couches avant et après nos modifications. Modifiez vos calques (en rouge) pour les faire correspondre à ceux de droite (vert).
Comparaison des couches avant (rouge) et après (vert) A cette occasion, nous souhaitons exporter pour le Web, alors changez de mode en cliquant sur le bouton avec l'icône du moniteur puis cliquez sur Couper tous les actifs. La capture d'écran suivante montre ce que vous devriez voir. Si votre vue diffère, recherchez dans votre couche les erreurs éventuelles et réessayez..
Toutes nos félicitations! Vous venez de découper votre premier dessin avec succès. Pour plus de pratique, ouvrez et découpez la version mobile du modèle.
Dans ce cas, lorsque vous modifiez le fichier, exportez pour iPhone et Android et vérifiez si tout est correct. Si oui, vous êtes prêt à passer au niveau supérieur et à découper votre propre design.
Vous aurez probablement remarqué que lors de l'exportation de nos actifs, nous avons eu beaucoup de fichiers PNG. Et, comme nous le savons, extraire davantage de fichiers image individuels d’un serveur Web entraîne davantage de demandes HTTP, ce qui ralentit le rendu de vos pages Web. Pour résoudre le problème, vous pouvez envisager de transformer tous vos PNG (ou certains d’entre eux) en un fichier sprite à image unique..
Heureusement, la tâche est facile ces jours-ci et il existe de nombreuses façons de l’aborder. Il existe de nombreux outils en ligne qui peuvent vous aider dans vos démarches. Regardez les générateurs de sprite suivants:
… Voir ce qui convient le mieux à vos besoins.
Jusqu'ici tout va bien, mais il y a encore une chose que nous devons signaler. Avec des technologies telles que CSS3 et SVG, nous ne comptons plus uniquement sur des images. Nous pouvons maintenant facilement utiliser des icônes SVG ou des boutons alimentés par CSS3 dans nos conceptions. Le principal avantage de l'utilisation des graphiques SVG et CSS3 est qu'ils sont indépendants de la résolution et fonctionnent très bien dans un design réactif. En outre, vous pouvez les modifier et les ajuster directement dans votre code sans avoir besoin d’utiliser l’éditeur d’images. Mais attendez! Cela ne signifie pas que les images sont complètement inappropriées. Ils peuvent toujours être utilisés pour des photos, des graphiques complexes et des éléments graphiques, etc. CSS3 et SVG sont intéressants, mais le support du navigateur n'est pas encore complètement fiable, vous devez donc être vigilant lorsque vous les utilisez.
La capacité d'automatiser nos tâches de conception est extrêmement importante dans le monde Web en rapide évolution. Heureusement, des outils tels que Cut & Slice me nous procurent une telle automatisation et nous permettent de gagner beaucoup de temps. Comme vous pouvez le constater, avec un peu de discipline lorsque nous nommons et organisons nos calques, nous pouvons découper même des conceptions complexes rapidement et facilement. En quelques clics, nous avons tous les atouts dont nous avons besoin, correctement découpés et prêts à être utilisés.
