Tutoriel Vidéo Avocode Avocode

Télécharger la vidéo

01-12-2015 14:02:00

Lorsque l'on fait de l'intégration on est souvent obligé de travailler avec des fichiers PSDs qui nécessitent l'utilisation Photoshop. Le principal problème de ce logiciel est qu'il est conçu pour le traitement photo plutôt que le Webdesign. Inspecter les propriétés des calques et exporter les assets et loin d'être pratique.

Certains designers ont même sauté le pas et utilisent maintenant Sketch plus adapté au webdesign. Le principal problème est alors l'accès au logiciel qui ne fonctionne que sur MacOS.

Retour au Source

Pour vous aider dans votre travail Source a commencé par développer des plugins pour Photoshop comme CSSHat qui permet d'obtenir le CSS correspondant à un calque.

Avec Avocode Source propose une solution plus complète afin de pouvoir se passer de Photoshop et Sketch. Pour résumé, Avocode va analyser votre design (PSD ou Sketch) sur leur serveur pour fournir ensuite une série d'outils qui vous aideront à créer vos sites en obtenant rapidement les assets et les informations importantes.

Une interface travaillée

La première chose qui saute aux yeux lorsque l'on ouvre Avocode c'est le travail qui a été fait sur l'interface. Tous les outils nécessaires sont à portée de main (ou de clic). Par exemple, on obtient les dimensions d'un élément, ainsi que sa position par rapport aux éléments adjacents avec un simple survol

Le positionnement en un clin d'oeil

Il est aussi possible de placer des repères, afin d'obtenir des mesures plus arbitraires.

Comme pour le plug-in CSSHat, l'outil est capable de nous fournir une traduction CSS des différentes propriétés d'un calque. Il est possible de configurer le langage utilisé si vous utilisez un préprocesseur par exemple.

Le CSS généré ne contient que les informations utiles

Il est d'ailleurs possible de créer des variable CSS qui seront ensuite utilisées dans le code qui sera généré lors de la sélection d'un calque.

Enfin, il est aussi possible d'exporter un ou plusieurs calques sous différents formats (PNG, JPEG, ou encore SVG). Dans certains cas, si le designer aplatit certains calques par exemple, il vous est possible de créer une découpe pour sélectionner une zone à exporter plutôt qu'un calque.
L'avantage dont dispose Avocode et la présence d'un logiciel destiné à Windows, Mac et Linux, du coup lorsque l'on exporte nos calques il est possible d'indiquer dans quel dossier on souhaite exporter les fichiers. Ce qui nous permet de gagner beaucoup de temps par rapport à ce que l'on pourrait faire sur Adobe Extract.

Avocode vs Adobe Extract

lorsque l'on parle de logiciel capable d'interpréter les fichiers PSD on pense de suite à Adobe Extract. Ce logiciel, fourni par Adobe dans sa suite Creative Cloud propose un concept similaire, être capable d'analyser un PSD sans Photoshop. Malheureusement, Adobe Extract Ne dispose pas d'une application dédiée, rendant l'export de ressources relativement pénibles (à chaque export, le fichier est téléchargé sur notre navigateur, et on doit ensuite le placer dans le bon dossier). En plus de cela, l'interface est beaucoup moins bien pensée rendant certaines opérations difficiles à réaliser. Il n'est pas possible d'avoir un retour visuel sur les éléments sélectionnés ou encore d'obtenir rapidement le positionnement d'un élément par rapport à un autre sans devoir les sélectionner.

En revanche, pour le moment Adobe Extract est gratuit contrairement à Avocode qui lui est accessible à travers une première formule à 8.99 $. Dans tous les cas vous pouvez essayer le logiciel gratuitement pour vous faire votre propre idée.