lundi 9 septembre 2013

Extensions Photoshop : Generator/Reflow


Edge Reflow fait partie de la suite logicielle Adobe Edge tools. En complément de Edge Animate qui permet de réaliser des animations interactives comme dans Flash Pro, mais au format HTML5, Edge Reflow va offrir des outils pour créer des interfaces responsives, c'est-à-dire, qui s'adaptent à chaque résolution d'écran. Les deux logiciels offrent naturellement une compatibilité transversale.

Photoshop, de son côté, qu'on ne présente plus, permet de réaliser des maquettes graphiques de sites Web (surtout depuis l'arrêt annoncé du développement de Fireworks par Adobe), mais aucune liaison ne permettait jusqu'à lors de publier à la volée de Photoshop vers Edge ou vers les standards d'images HTML/HTML5. Voici qui est résolu dans la mise à jour de Photoshop CC contenant deux nouvelles extensions nommées Generator et Projet Edge Reflow, sorties ce jour.

1) L'extension Generator pour Photoshop CC
Generator permet de générer des images jpg, gif ou png, sans enregistrer ni exporter votre document, à mesure de vos modifications. Il suffit de nommer vos calques Photoshop avec l'extension qui correspond au format d'image que vous souhaitez obtenir (.gif, .jpg, .png) et d'y ajouter, sans espace ni séparation le pourcentage de compression Jpeg si c'est un Jpeg sur une échelle de 1 à 10 (exemple de nommage de calque : monJoliFond.jpg7) et Photoshop convertit automatiquement les calques en bitmaps dans le bon format, en temps réel, à chaque modification de ce calque ! Les fichiers sont placés à côté du fichier Photoshop, dans un répertoire nommé Assets.

Il devient aisé de produire à la volée les vignettes d'une application mobile nombreuses et répétitives, une suite d'images défilante pour une publication digitale ou les sources d'une maquette de page HTML. En organisant intelligemment votre flux de production, vous pouvez ainsi placer le fichier natif Photoshop (.psd) directement dans le répertoire de votre projet et, sans même exporter vos images, elles écrasent en temps réel celles qui seront invoquées directement depuis vos pages HTML. Une révolution dans le flux de production Web et mobile que l'on n'a pas connue depuis la création de l'outil Tranches.

2) L'extension Projet Edge Reflow pour Photoshop CC
L'extension Projet Edge Reflow permet d'exporter directement un fichier Photoshop au format Edge Reflow. Le texte demeure éditable en CSS au sein de Edge.Les images peuvent être organisées dans des divs si elles ont préalablement été rassemblées dans des groupes de calque Photoshop. Les balises HTML5 sont même reconnues si vous nommez vos groupes de calques du nom de chaque balise (header, footer...). En somme, vous construisez votre page HTML5 dans Photoshop ! Que reste-t-il à Dreamweaver ? Une révolution pour les webdesigners !

L'option Projet Edge reflow n'est naturellement disponible que si Edge Reflow CC est installé sur votre poste. Assurez-vous, dans la fenêtre de notififcation Creative Cloud que Edge Reflow apparaît bien comme un logiciel installé. Les versions préliminaires (beta) de Edge Reflow ne permettent pas d'activer cette option. Seule la version CC la rend disponible dans Photoshop CC.

Pour en savoir plus sur ces fonctionnalités, consultez les vidéos suivantes.




Pour en savoir plus sur Edge Animate, lisez également l'article consacré à ce nouvel outil absolument incontournable :

http://bloc-notes-arzhur.blogspot.fr/2013/09/formation-edge-animate.html

Pour télécharger Edge tools (Animate, Reflow, Code, Typekit, Webfont, Phonegap, Inspect), suivez le lien :

http://html.adobe.com/fr/edge/

Aucun commentaire:

Enregistrer un commentaire