CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Intégration de Photoshop et Edge Animate pour des Animations Web

Retour à la formation
Chapitre 17 Leçon 3
Précédent
Suivant

Voici une méthode complète pour créer des animations web en utilisant Photoshop et Edge Animate.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez à utiliser une méthode alternative pour intégrer des compositions Photoshop dans Edge Animate. Contrairement à la technique précédente qui utilisait Dreamweaver et Générator, cette méthode utilise l'outil tranche de Photoshop pour diviser votre page en trois parties : le header, la partie centrale et le footer. Vous exporterez les images via différents formats en optimisant la compression pour chaque section.

Après avoir structuré votre composition avec l'outil tranche et exporté les images, vous importerez ces éléments dans Edge Animate. Vous pourrez alors animer à la main les images générées. Cette méthode est particulièrement utile pour des animations qui nécessitent une granularité et un contrôle précis des éléments. Vous verrez également comment gérer la mise à jour des assets de manière efficace en rééditant les fichiers PSD et en régénérant les calques à la volée.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
- Apprendre à utiliser l'outil tranche de Photoshop
- Comprendre les techniques d'exportation pour le web
- Intégrer et animer les images dans Edge Animate

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :
- Des connaissances de base en Photoshop
- Une expérience pratique avec Edge Animate
- Des notions de compréhension du format HTML

Métiers concernés

Cette technique peut être utilisée par :
- Designers web impliqués dans la création de contenu animé
- Développeurs front-end intégrant des animations dans des sites web
- Graphistes travaillant sur des projets de publication digitale

Alternatives et ressources

En alternative, vous pourriez utiliser :
- Adobe Illustrator pour la création d'éléments graphiques
- Adobe Animate pour des animations plus complexes
- GIMP pour l'édition d'images

Questions & Réponses

L'objectif principal est de diviser la page en sections distinctes pour une meilleure gestion et intégration des éléments dans Edge Animate.
Il est important de désactiver certains calques pour éviter l'aplatissement inutile des éléments et permettre l'animation des calques restants dans Edge Animate.
La mise à jour des assets se fait en rééditant les fichiers PSD et en régénérant les calques à la volée, ce qui permet une intégration instantanée dans Edge Animate.