La conversion de maquettes Photoshop en code Web dynamique est une pratique extrêmement courante chez les concepteurs Web. Nous l'avons tous fait un million de fois à la main, c'est donc assez excitant de voir apparaître des solutions nous permettant d'automatiser ce processus.
La dernière version de Creative Cloud, Photoshop CS6, intègre une fonctionnalité permettant de convertir les styles Photoshop en CSS, et si vous avez besoin d'une autre solution, vous disposez de deux extensions solides que vous pouvez extraire. Aujourd'hui, nous allons comparer les résultats des trois méthodes: Photoshop, CSS3Ps et CSSHat pour déterminer laquelle est la meilleure.
Nos trois candidats
Cet article vise à comparer les résultats de trois méthodes différentes permettant d’atteindre le même objectif. Nous avons un design dans Photoshop et nous voulons le voir construit en HTML et CSS.
Nos trois méthodes incluent Photoshop lui-même (version 13.1), ainsi que deux extensions CSS3P et CSSHat. J'ai récemment créé un screencast pour Psdtuts + qui présente et compare certaines images entre Photoshop et CSS3Ps, que vous pouvez trouver ici.
Cependant, je n'ai pas abordé la fonctionnalité de groupe de couches dans ce tutoriel, j'ai donc pensé que cela en valait la peine et j'ai décidé d'ajouter également CSSHat afin que nous couvrions vraiment les bases.
Notre cas de test
Nous aurons besoin de quelque chose pour tester les différentes méthodes de conversion, alors j'ai créé un panneau d'interface utilisateur générique pouvant contenir tout ce que vous voulez:
Celui-ci est composé de trois couches différentes: la couche de texte, la barre supérieure et l’arrière-plan. Ici, je les ai séparées un peu afin que vous puissiez avoir une idée de la façon dont elles ont été construites.
Vous pouvez voir ci-dessous notre palette de calques. Notez que cet objet est structuré de manière très intentionnelle. Les trois méthodes que nous allons examiner aujourd'hui convertissent les noms de calques en noms de classes en CSS. Vous devez donc vous assurer que vous faites très attention à la façon dont vous nommez vos différents morceaux. Notez également que les formes sont constituées de calques de formes vectorielles.
Certaines des méthodes que nous allons essayer prennent en charge les groupes de couches, ce qui signifie que nous souhaitons convertir la structure ici en une structure div dans notre code HTML.
HTML
Photoshop peut s'occuper du CSS pour nous, mais nous sommes toujours seuls avec HTML. Voici une tentative rapide de structure HTML qui fonctionnera avec le code que Photoshop va générer. Sans cela dans votre code HTML, le CSS ne ferait rien!
Photoshop
Commençons par la fonctionnalité intégrée de Photoshop. Le processus est extrêmement simple. Tout ce que nous avons à faire est de sélectionner notre groupe de calques dans le panneau Calques et de cliquer sur Calque> Copier CSS (vous pouvez également accéder à cette commande avec un clic droit).
Photoshop ne fournit pratiquement aucun retour d'information indiquant que quelque chose s'est passé à ce stade. Il n'y a pas d'options à ajuster, pas de panneaux à inspecter, juste la commande de menu sur laquelle nous avons cliqué ci-dessus, ce qui place une grosse partie de code dans notre presse-papiers. Voici la sortie, directement à partir de Photoshop.
Le résultat
Si nous jetons cela dans un éditeur de code et examinons le résultat, les résultats sont un peu décourageants. Photoshop n'a pas très bien réussi la conversion. Pour commencer, la barre supérieure n'a pas de coins arrondis. De plus, l'ombre semble être à pleine opacité (trop sombre) et le placement de type est désactivé. Si nous donne un bon départ et nous fait véritablement gagner beaucoup de temps, ce n’est probablement pas la solution magique que vous espériez de Photoshop.
Voir en direct: Cliquez ici
Pour aggraver les choses, si nous revenons en arrière et examinons le code, il y a de quoi se plaindre. Il se passe ici des choses vraiment débiles, telles que la transformation inutile du texte. Il semble que vous pouvez Laissez Photoshop écrire des CSS pour vous, mais je ne suis pas convaincu que vous devriez le faire.
CSS3Ps
Notre prochain candidat est CSS3Ps, un plugin Photoshop totalement gratuit qui précédait les fonctionnalités intégrées de Photoshop. Le site Web présente des exemples assez complexes, nous espérons donc que notre projet sera un peu mieux traité.
Avec l'extension CSS3Ps installée, allez à Fenêtre> Extensions> CSS3Ps. Sélectionnez ensuite le groupe de calques et cliquez sur le logo qui apparaît à l'intérieur du panneau CSS3Ps.
Une fois que vous avez appuyé sur ce bouton, une page Web s'ouvre et vous présente une minuterie. Vous êtes obligé d'attendre vingt secondes et de regarder une annonce, ce qui est dommage, mais étant donné que l'extension est gratuite, c'est compréhensible.
De là, vous êtes dirigé vers une page contenant le code, que j'ai copié et collé ci-dessous. Notez que cette fois-ci, j'ai dû ajouter des points avant les noms de classe. CSS3Ps prend le nom du calque exactement comme il apparaît dans Photoshop, vous ajoutez donc le?.? ou ?#? symboles là-bas.
Le résultat
Il y a beaucoup à aimer sur la sortie CSS3Ps. Pour commencer, chaque couche est considérée comme son propre objet et ne tente pas de les positionner les unes sur les autres. En fait, je préfère cela et supprime toujours immédiatement le code de positionnement absolu utilisé par la méthode intégrée. Cela permet de centrer la conversion là où elle devrait être: sur le style.
Voir en direct: Cliquez ici
En parlant de style, les résultats dans ce domaine sont également améliorés. Notez que la barre du haut a réellement un bord-rayon cette fois-ci et que la case-shadow utilise une valeur alpha pour réduire l'opacité. Cette version est peut-être un petit préfixe lourd sur les choses qui n’exigent plus de préfixes, mais sinon le code n’est pas à moitié mauvais.
En outre, le fait que vous puissiez reformater la sortie dans Sass ou SCSS est une fonctionnalité exceptionnelle qui rend cette méthode meilleure que la fonctionnalité par défaut de Photoshop.
CSSHat
La troisième et dernière méthode que nous allons tester est CSSHat. Comme CSS3Ps, c'est une extension Photoshop, mais celle-ci vous coûtera environ 30 $.
Pour utiliser CSSHat, sélectionnez simplement le calque que vous souhaitez convertir et ouvrez le panneau CSSHat (recherchez-le dans le menu des extensions comme avec CSS3Ps ci-dessus). Malheureusement, CSSHat ne supporte actuellement pas les groupes de calques, vous devrez donc le faire sur chaque calque. Il s’agit d’une frappe sérieuse contre CSSHat, mais elle compense par sa polyvalence.
J'adore le fait que j'ai enfin quelques options à modifier. Les deux autres méthodes étaient faciles, mais si vous n'aimez pas quelque chose, difficile! Ici, je peux basculer entre quatre options différentes: les explications de commentaire, les préfixes du navigateur, les dimensions de la couche et si le code est encapsulé dans une règle nommée d'après la couche.
Notez également que vous pouvez obtenir la sortie dans une variété impressionnante de formats: CSS, SCSS, Sass, LESS, Stylus et Stylus CSS. Voici le résultat pour la version CSS simple:
Le résultat
Comme vous pouvez le voir ci-dessus, le morceau de code est cette fois-ci assez énorme, principalement en raison du fait que le dégradé est converti en URL de données. Vous trouverez ci-dessous le résultat si nous collons directement dans notre éditeur de code.
Voir en direct: Cliquez ici
Comme vous pouvez le constater, tout comme dans le cas des CSSP, les éléments sont simplement stylisés et non positionnés, il faudrait les insérer nous-mêmes. Sur ce plan, les styles sont parfaits, à l’exception du texte, qui est minuscule. Je suppose que cela a à voir avec le fait que j'ai construit la version de Photoshop sur un écran Retina, de sorte que vous pourriez ne pas rencontrer ce bogue (CSS3P a en fait fait la même chose).
Qui gagne?
"Je recommande CSSHat et CSS3Ps pour ce que vous obtenez à l'intérieur de Photoshop 13.1."Aucune des méthodes de conversion des styles Photoshop en CSS décrites ci-dessus n'est parfaite. La version de Photoshop fonctionne, mais le code est plutôt moche et les résultats n'utilisent pas les techniques CSS3 avancées dont vous aurez besoin pour faire correspondre des éléments tels que l'opacité et les configurations complexes de bordures de bord. CSS3Ps est gratuit et fonctionne mieux que Photoshop, mais la méthode pour vous transformer en une page Web cachée derrière un délai de vingt secondes est assez ennuyante.
CSSHat est ce qu'il y a de mieux en matière de personnalisation, mais il ne supporte pas les groupes de calques. La méthode Photoshop par défaut est la seule qui positionne vos éléments multiples de manière à correspondre à votre toile, ce qui peut être une bonne ou une mauvaise chose (j'aimerais que ce soit une fonction facultative). En fin de compte, rien ne vous donnera la précision, la puissance et la polyvalence du codage à la main, mais ces outils peuvent vous aider à bien démarrer et vous faire économiser un temps précieux.
Personnellement, j'ai tendance à préférer CSSHat à ce groupe. C'est un peu cher, mais la fonctionnalité est excellente. Franchement, cela ressemble beaucoup à ce que je voulais voir d’Adobe. Je pense qu'ils ont vraiment laissé tomber cette fonctionnalité et je recommande à la fois CSSHat et CSS3Ps à ce que vous obtenez à l'intérieur de Photoshop 13.1.
Qu'est-ce que tu penses?
Maintenant que vous avez vu mon évaluation de ces trois outils, le moment est venu pour vous d’en parler. Laquelle de ces méthodes avez-vous déjà essayée? Lequel pensez-vous est le meilleur? Faites-nous savoir dans les commentaires ci-dessous!