Workflow avec Adobe Extract
Vous détestez Photoshop ( / Illustrator) ? Votre version n'est pas à jour ou vous avez tout simplement la flemme de l'installer ?
ADOBE (oui oui, c'est bien eux) propose désormais un outil appelé Extract qui permet entre autre de parcourir un fichier PSD / AI dans un navigateur web et en retirer une grande partie de ses informations. On pourra donc désormais intégrer sans utiliser les logiciels de la marque (je me doute qu'il y aura des choses auxquelles l'on ne pourra accéder...).
Pour cela, il suffit de créer un compte gratuit sur le Creative Cloud d'ADOBE si ce n'est pas déjà fait, et de se rendre dans la section Fichiers.
Voici un petit tour d'horizon de l'interface.
1. La bibliothèque
La bibliothèque est votre vivier de fichier sur votre cloud (PSD, AI, JPG, PNG, etc etc...). Ici notre maquette en aperçu.
2. Vue de détail
Lorsqu'on sélectionne un fichier PSD, on arrive sur l'écran qui détails les grandes lignes de notre maquettes : dimensions totales, couleurs utilisées (hexadécimales).
3. Activité
Dans l'onglet activité, on accède aux fonctionnalités de versioning et discussion en rapport avec le document. Ici la dimension de collaboration prend tout son sens, à l'instar de google docs pour le partage, pixelapse (article antérieur) pour le versioning. On accède donc à un historique des versions de la maquette et aux commentaires des différents intervenants. Il est également possible d'y joindre le client pour validation / discussion graphique. On peut tout naturellement revenir à une version antérieure du document si nécessaire.
4. Exract - Styles
Voici l'écran qui envoie son pesant d'or comme on dirait dans le jargon, car c'est là que le parcours du fichier se fera. Au centre l'écran de sélection et d'actions, à droite, les informations propres aux document ou à la sélection.
On peut donc remarquer ici la sélection d'un élément qui nous fournit de suite la taille et la position du bloc, en px ou en % pour le responsive, et des fonctionnalité pour obtenir le contenu ou les CSS permettant de mettre en forme ce bloc. CSS qu'on retrouve d'ailleurs dans la barre de droite en détail. Toujours à droite, on retrouve en dessous les polices utilisées et les tailles utilisées dans le bloc en bleu. En gris, il 'agit des autres tailles des polices utilisées dans toute la maquette.
On pourra également avoir deux bloc sélectionné simultanément comme ci-dessous.
Les infos au centre changent alors et nous indiquent l'espacement entre ces deux blocs dans le coin haut/gauche, et dans le coin bas/droite si les blocs sont imbriqués, et enre les deux blocs s'ils n'ont aucune parenté. A droite, nous avons ici scrollé sous les infos de police pour retrouver les couleurs avec codes hexadécimaux; avec une bordure bleue pour les couleurs contenues dans le(s) bloc(s), les autres étant les couleurs dans le reste de la maquette. Puis en dernier se trouvent les dégradés de la maquette avec toujours le même principe de présentation par rapport à la sélection en cours.
5. Ectract - Calques
L'onglet (en haut à droite) calques permet de retrouver la présentation des logiciels de la marque avec les calques/dossiers et les imbriquations de ceux-ci. On pourra alors masquer/afficher certains calques/dossiers comme dans les logiciels. Rien de nouveau, mais quand même très pratique. Au centre on peut alors observer le masquage des calques et notre maquette allégée visuellement afin de mieux cibler nos éléments. On remarque aussi ici (au centre) la possibilité de placer un élément graphique en file d'attente de téléchargement. A l'instar de l'export pour le web des logiciels, on choisit le nom, le type de compression, la description (attribut alt de la balise img j'imagine), et si c'est une version pour écran Retina ou autre (sur ce point je ne sais pas si l'export produira deux fichiers ou s'il faut placer en file d'attente chaque version. A tester...). La même fonctionnalité est accessible sur les calques directement dans la barre de droite.
6. Exctract - Actifs
Et voici le dernier écran qui concerne l'onglet Actifs en haut à droite, qui permet une gestion des fichiers que l'on veut extraire sous forme d'image/SVG. On retrouve sur chaque asset la flèche bleue pour redéfinir les options d'export, et un simple clic sur la vignette de l'asset permet de le télécharger. On peut aussi supprimer un asset de la liste. Moyen pratique de trouver les éléments graphiques à télécharger mis de côté au préalable, on aurait juste aimé un téléchargement global pour tous ces assets (actuellement on doit cliquer sur chaque élément pour les télécharger séparément).
7. En Conclusion
Un très bel outil selon moi qui servira autant à l'intégrateur/développeur qu'au chef de projet. La dimension collaboration même sans le client prend son sens car il n'y a pas beaucoup de solutions à ce jour pour les sources graphiques. Le fait de s'affranchir de Photoshop / Illustrator est un grand plus, et permet même à ceux qui sont sur Linux de traiter un PSD. Bien souvent, les développeurs/intégrateurs doivent maintenir un photoshop juste pour accéder aux sources graphiques et récuprérer les dimensions de blocs d'un PSD, ce qui oblige à installer une version du logicielle avec une numéro de série, de mettre à jour cette version pour ouvrir les PSD créés avec la dernière version, tout ça pour juste en extraire les assets (ou presque).
D'autres petites fonctionnalités sont disponibles, comme par ex télécharger la maquette en PSD / JPG / PNG / PSDX / ASE (nuances couleurs), et sûrement d'autres (présentes comme à venir).
Un vrai gain de productivité selon moi à l'échelle d'une équipe, reste à tester et optimiser le workflow :)
Newsletter
Abonnez-vous à notre newsletter :