Exporter des calques Photoshop facilement avec Cut & Slice Me

Couper et trancher dans le processus de conception est sans aucun doute un travail qui prend du temps. De plus, cela devient de plus en plus compliqué lorsque vous devez couper et découper des centaines de couches à différentes échelles .

Bien sûr, il existe des copies fusionnées, des couches d'exportation vers des fichiers ou des fonctions de découpe dans Photoshop. Mais ces approches n'ont pas beaucoup aidé à rendre le processus de découpage et de découpage plus rapide. Ce dont vous avez besoin est un plugin.

Cut & Slice Me est une extension Photoshop pour simplifier le processus de découpe et de découpage . Vous pouvez ensuite exporter vos couches pour les appareils iPhone, Android ou de bureau. Les fichiers exportés sont livrés avec différentes échelles et résolutions, telles que rétine pour iPhone ou HDPI, LDPI, MDPI et XHDPI pour Android.

Couper et trancher l'installation

Pour utiliser le plugin Cut & Slice Me, vous devez au moins installer Adobe Photoshop CS6 / CC sur votre machine. Téléchargez le plugin (et l'exemple de fichier PSD sur lequel nous travaillerons plus tard).

Une fois votre téléchargement terminé, double-cliquez sur le fichier CutAndSliceMe.zxp et l'installation commencera automatiquement par Adobe Extension Manager . Suivez les instructions et redémarrez votre Photoshop s'il était déjà ouvert.

Pour rendre le plugin visible dans votre panneau droit de Photoshop, allez simplement dans Window> Extensions> Cut and Slice me .

Commencer

Cut & Slice Me est facile à utiliser, mais vous devez d'abord faire un peu de travail pour vous assurer que le plugin fonctionne efficacement pendant la coupe et le tranchage.

D'abord, vous devez organiser vos objets de calque dans des dossiers comme Cut & Slice Me ne vérifie que les noms de groupes. Vous devez également ajouter le symbole "@" à la fin du nom du groupe de calques que vous souhaitez exporter.

Taille définie de découpage

Tous les pixels transparents inutiles sont supprimés dans le processus d'exportation. Pour conserver le fichier exporté dans la taille souhaitée:

1. Assurez-vous que vous avez coché le paramètre «Aligner les outils vectoriels et les transformations en pixels» dans Edition> Préférences> Général .

2. Ensuite, créez un calque vectoriel rectangulaire pour la taille souhaitée.

3. Placez cette forme tout en haut du groupe, de manière à indiquer au plugin la taille de la zone dans laquelle vous souhaitez exporter. Enfin, nommez la forme "#" .

Source de l'image: Tutoriel de base Cut & Slice Me

Atout différent d'état

Lorsque vous travaillez avec des boutons, qui ont souvent des états différents, vous pouvez utiliser une méthode spéciale.

1. Dans l'exportation d'un bouton, créez un nouveau groupe de calques pour le bouton et incluez un libellé "_BTN" dans son nom.

2. Dans le bouton de groupe, créez un autre groupe contenant les états des boutons et nommez-les en fonction des états . Les noms d'état de groupe doivent être les suivants:

• Ordinaire
• flotter
• cliqué / appuyé
• choisi
• désactivée

Mis à part les boutons, cette règle peut également être appliquée pour d'autres éléments qui peuvent avoir des états différents, comme la capture d'écran suivante.

Utiliser Cut & Slice Me

Voyons maintenant comment Cut @ Slice Me peut vous aider avec vos créations. Comme mentionné précédemment, nous utiliserons le fichier de conception PSD de l'échantillon à partir de la page d'accueil de Cut & Slice Me.

Comme mentionné précédemment, actuellement Cut & Slice Me vous permet d'exporter vers l' iPhone, Android et Web . Vous pouvez choisir de découper tous les actifs, sous-groupes ou couches sélectionnées. Tranchez et exportez le plan d'échantillonnage sur l'iPhone.

Une fois le processus d'exportation terminé, vous trouverez les fichiers de résultats dans l'emplacement du fichier PSD d'origine (voir image).

Jusqu'à présent, je suppose que vous avez une compréhension solide du fonctionnement du plugin. Alors, essayons d'utiliser le plugin avec un autre design.

En utilisant le modèle Webpaint d'Elemis Freebies, vous verrez comment configurer les règles du plugin à partir de zéro .

Par souci de simplicité, nous n'utiliserons que la moitié de la conception pour l'exportation. La capture d'écran suivante est une comparaison de la structure des couches avant et après leur utilisation.

Sur la gauche (en rouge) sont les couches d'origine. Après avoir réarrangé et renommé les états des couches, nous arrivons à ce qui est à droite (en bleu).

Comme le modèle de conception sera utilisé pour le web, dans le panneau plugin, choisissez le mode de l'appareil pour le bureau (moniteur icône). Hit Couper tous les actifs .

Maintenant, l'actif défini a été découpé avec succès, comme ça.

Notez que, si vous découpez votre propre design, vous devez l'avoir dans la plus haute résolution, car les images finales sont pour xhdpi dans Android et rétine dans les appareils Apple. Ce plugin effectue la résolution complète de la conception puis la redimensionne pour l'exportation dans différentes tailles .

Conclusion

Aucun temps n'est perdu lorsque vous coupez et découpez en utilisant ce plugin Photoshop. Avec un peu plus de discipline dans l'organisation des couches, même les conceptions complexes peuvent être découpées avec précision et facilité.

Comment ajouter des extraits de code personnalisés à Atom

Ce n'est pas une coïncidence si Atom, l'éditeur de code source créé par Github, est populaire dans la communauté du développement web. Il est non seulement facilement extensible avec des milliers de paquets Atom, et possède un large support de langue, mais presque toutes ses parties sont personnalisables par l'utilisateur.En tir

(Conseils techniques et de conception)

10 méthodes d'étude efficaces pour stimuler votre esprit

Tout le monde déteste les tests, gratte ça, tout le monde déteste étudier pour les tests . Lorsque vous essayez de justifier que vous avez étudié ce qui a été enseigné pendant tout le semestre (ou l'année), justifié par ce dernier examen final, parfois tout va mal. L' esprit qui se vide, les rappels partiels et les phénomènes de pointe, ou qui gèlent au moment le plus crucial, sont ce que les étudiants redoutent le plus. Si cela vous

(Conseils techniques et de conception)