Exporter vers Edge Animate avec Photoshop CC

Dans ce tuto Photoshop, le formateur va exporter une composition Photoshop vers Edge Animate.

Il possède pour cela une autre composition et nous allons utiliser de nouveau l'outil tranche pour décomposer la page en trois parties. Il découpe le Header, le Main et le Footer. Quelques images seront tout de même générées à l'aide de Generator mais il va directement aller chercher cette page générée par l'outil tranche dans animate pour intégrer les images à animer. En exportant grâce à la fenêtre exporter pour le web, il y aura trois images indépendantes. Il a déjà généré des images avec Generator tel que les boutons, le texte, la vague et les vignettes de la galerie photo. Il va donc commencer par activer Generate. Une fois les images générées, il les masque pour pouvoir exporter les trois autres images en découpes. Il exporte ses trois images en jpeg. Il va placer maintenant les images générées et la composition Photoshop dans le dossier image généré lors de l'export pour le web. Il va maintenant ouvrir la page index.html dans Edge Animate. A l'ouverture, il y a à droite les images du dossier. Il va rajouter dans les plans les images qui ont été obtenues à l'aide de Generator. Il créer une animation avec les trois vignettes qui apparaissent en fondu sur le plan.

Et comme dans Reflow, si l'on modifie une image dans Photoshop, elle sera modifiée dans Edge Animation.