Petite astuce Conversion de fichiers Photoshop en code avec Project Parfait

Project Parfait est un nouvel outil d'Adobe, actuellement en version bêta, qui vous permet d'ouvrir n'importe quel fichier PSD directement dans le navigateur pour en extraire les éléments CSS, texte et image. Pour le moment, cela ne fonctionne que sur Chrome, mais Adobe envisage de le déployer sur tous les navigateurs au fur et à mesure du développement..

Glisser-déposer pour télécharger

Ouvrir un fichier PSD dans Project Parfait est très facile. Il suffit d'aller à https://projectparfait.adobe.com/ et cliquez sur le grand bleu Téléchargez votre propre PSD bouton dans le coin en haut à droite:

Ensuite, après vous être connecté avec votre identifiant Adobe, faites glisser votre PSD sur la zone de panneau vide et il sera téléchargé pour vous:

Lorsque le téléchargement est terminé, vous pouvez cliquer sur la vignette de votre PSD pour l’ouvrir dans Project Parfait:

Extraction CSS

Pour générer du CSS pour n'importe quel élément de votre conception, cliquez simplement dessus pour le sélectionner. Le code correspondant sera affiché dans la barre latérale droite. Inspecteur CSS champ. De là, vous pouvez mettre en surbrillance et copier les éléments du code souhaité ou cliquer sur le bouton. Tout copier bouton:

Alternativement, avec l’élément sélectionné, un appel en bleu apparaît sur lequel vous pouvez cliquer sur le bouton. Copier CSS lien pour récupérer tout le code directement:

Extraction de texte

L’appel bleu sortant lorsqu’un élément est sélectionné peut également être utilisé pour copier facilement du contenu texte à partir d’un fichier PSD en cliquant sur le bouton Copier le texte lien:

Extraction d'Image

L'exportation d'images via Project Parfait est également simple. Commencez par sélectionner l'image que vous souhaitez exporter. S'il comporte plusieurs couches, maintenez enfoncé Décalage et cliquez sur chacun d'eux pour effectuer une sélection multiple. Cliquez ensuite sur la flèche pointant vers le bas sur l’appel bleu et vous obtiendrez un Enregistrer sous zone où vous pouvez entrer votre nom d’image, votre format et vos paramètres de qualité préférés:

Une fois l'image enregistrée, elle apparaîtra dans le Les atouts onglet de la barre latérale droite, à partir duquel vous pouvez cliquer sur l'image pour la télécharger:

Aspects toujours à venir

Project Parfait beta vient tout juste de sortir de la porte et a à peine un mois; il y a donc quelques aspects de la génération CSS qui ne sont actuellement pas pris en charge. Cependant, le taux de mises à jour a déjà été très rapide selon les membres du forum Project Parfait, je suppose donc que l'équipe Adobe travaille déjà sur ces domaines et nous pouvons supposer que de nombreuses améliorations sont en cours..

• Les paramètres d'opacité appliqués à un calque sont actuellement gérés en définissant une valeur RGBA pour la couleur d'arrière-plan. Le canal alpha de la couleur d'arrière-plan est utilisé pour définir l'opacité plutôt qu'une valeur d'opacité réelle générée pour l'élément entier, ce qui signifie que les bordures, les ombres, etc. ne seront pas affectés..
• Il ne semble pas possible de détecter plusieurs ombres pour l'instant. Si vous avez une ombre portée, elle sera sélectionnée, mais les ombres incrustées / intérieures sont ignorées..
• Les paramètres d'opacité sur les ombres ne sont pas détectés. Au lieu de valeurs RGBA, vous obtiendrez des couleurs d'ombre plates via hexcodes.
• Il n'y a pas encore de véritable moyen d'extraire une image d'arrière-plan en mosaïque, car les superpositions de motifs ne sont pas détectées et vous ne pouvez pas sélectionner une région spécifique à exporter en tant qu'image..
• Les bordures définies via les styles de calque ne sont pas détectées. Cependant, les frontières définies via Propriétés Live Shape sont ramassés.
• Lorsque les gradients sont générés, pas de Couleur de fond la propriété est définie pour fournir un repli aux navigateurs qui ne prennent pas en charge le dégradé CSS. 

Des aspects qui sont déjà excellents

Génération de texte CSS

Project Parfait fait déjà du bon travail en générant du CSS pour des éléments de texte.

Il génère parfaitement les réglages numériques d'épaisseur de police tels que 100, 300, 900, ce qui signifie que si vous définissez une épaisseur de police telle que "Mince", "Clair", "Noir", etc. dans Photoshop, la valeur correcte sera affichée en CSS. pour refléter ce poids.

Il fait également un très bon travail d'estimation de la hauteur de ligne, calculée comme une valeur relative à la taille de la police de l'élément de texte sélectionné.. 

De plus, s'il existe plusieurs types de style dans une ligne de texte, il les détectera tous les deux et vous fournira deux sorties CSS, l'une préfacée par le commentaire. / * Style en ligne * /.

Sélection de couche

Parfois, les couches sont empilées les unes sur les autres ou ne sont séparées que par une petite distance, ce qui rend difficile leur sélection via l'interface visuelle. Project Parfait offre donc également la possibilité de sélectionner des calques directement via l'onglet "Calques" de la barre latérale:

Extraire une palette de couleurs

Dès que vous importez votre PSD, Project Parfait identifiera toutes les couleurs utilisées dans la conception et les imprimera dans le fichier. Couleurs section de la barre latérale droite. De plus, chaque fois que vous sélectionnez un élément utilisant l'une de ces couleurs, celle-ci est mise en surbrillance dans la barre latérale:

Ceci est potentiellement très utile pour les utilisateurs de préprocesseurs, car les valeurs de couleur peuvent facilement être définies en tant que variables au début du processus de codage, puis appliquées selon les besoins tout au long de la conception..

Identifier les styles de dégradé réutilisables

De la même manière que Project Parfait détecte les couleurs plates, il détectera également les dégradés appliqués dans le dessin et les rendra disponibles pour un copier-coller facile à partir de la barre latérale droite. Comme pour les couleurs plates, tout élément sélectionné utilisant un dégradé verra le dégradé correspondant mis en surbrillance dans la barre latérale:

Pour les utilisateurs de préprocesseurs, cela constitue un moyen pratique de saisir tous les dégradés utilisés dans la conception afin qu'ils puissent être définis en tant que mixins pour une réutilisation aisée dans la conception..

Résumé des polices

En plus des informations sur les couleurs et les dégradés, Project Parfait vous fournira également un résumé «en un coup d'œil» de toutes les polices utilisées dans la conception, ainsi que des poids et des tailles utilisés..

Cela signifie que dès que vous ouvrez le fichier PSD, vous savez quelles polices et quelles variantes d’épaisseur de police vous devez saisir dans un format Web convivial pour l’intégration. Vous avez également la possibilité d’enregistrer les tailles de police en tant que variables de préprocesseur si vous le souhaitez..

Obtenir des informations de mise en page

Lorsque vous travaillez directement dans Photoshop, obtenir des informations sur la largeur, la hauteur, la position et la distance entre les éléments peut être une expérience pénible. Pas si avec Project Parfait.

Pour obtenir la largeur, la hauteur et les coordonnées X / Y d'un élément, cliquez dessus et regardez l'appel bleu:

Pour obtenir la distance entre deux éléments, maintenez la touche MAJ enfoncée et cliquez sur les deux. Un écran apparaît vous indiquant la distance horizontale et verticale en pixels:

Projet Parfait est gratuit, donnez-lui un tourbillon

Pour le moment, l'utilisation de Project Parfait est totalement gratuite, il suffit de vous connecter avec votre identifiant Adobe et vous êtes prêt..

Si vous êtes un concepteur qui souhaite améliorer son flux de production ou un développeur qui souhaite passer plus facilement du code PSD au code, Project Parfait est un incontournable dans le monde de la conception Web..