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

Créer une Animation avec un Sprite Sheet

Retour à la formation
Chapitre 10 Leçon 1
Précédent
Suivant

Cette vidéo explique comment créer une animation en utilisant un Sprite Sheet, une série d'images assemblées en un seul fichier, pour des performances optimales sur divers appareils.

Détails de la leçon

Description de la leçon

Un Sprite Sheet est une animation représentée sous la forme d'une suite d'images collées dans un seul document, généralement au format JPEG ou PNG. L'objectif est de créer une animation légère, portable, et flexible sur laquelle on peut interagir facilement, contrairement aux vidéos ou aux animations scripts.

Dans cette vidéo, nous allons animer un personnage qui saute, une tâche difficilement réalisable avec des commandes JavaScript ou CSS seules. Nous partirons d'un document Photoshop structuré sur plusieurs calques et le réorganiserons en une seule image aplatie.

Il est essentiel de considérer les contraintes des appareils, comme l'iPad, qui peuvent avoir des problèmes de performance avec des images de tailles supérieures à 1024x768 pixels. Nous verrons donc comment scinder notre Sprite Sheet pour une meilleure compatibilité.

Finalement, nous intégrerons cette image dans un logiciel d'animation comme Animate pour éviter de coder manuellement, et nous piloterons l'animation avec des commandes JavaScript ou CSS, en croppant visuellement la Sprite Sheet selon la cadence souhaitée.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Comprendre ce qu'est un Sprite Sheet.
  • Créer un Sprite Sheet à partir d'un document Photoshop multicalque.
  • Adapter le Sprite Sheet pour une utilisation optimale sur des appareils mobiles comme l'iPad.
  • Intégrer et piloter une animation Sprite Sheet avec JavaScript ou CSS dans un logiciel d'animation.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir :

  • Des connaissances de base en Photoshop.
  • Une compréhension des principes de l'animation.
  • Des notions de base en JavaScript et CSS.

Métiers concernés

Ce sujet est pertinent pour les :

  • Développeurs de jeux vidéos.
  • Concepteurs d'interfaces utilisateur.
  • Graphistes spécialisés en animation.
  • Développeurs Frontend travaillant sur des applications mobiles.

Alternatives et ressources

Les alternatives possibles incluent :

  • L'utilisation de vidéos pour des animations complexes, bien que moins performantes pour des applications mobiles.
  • L'usage de bibliothèques JavaScript spécialisées dans les animations comme GSAP.
  • Le recours à d'autres logiciels d'animation comme After Effects, bien qu'ils soient plus lourds en termes de performance.

Questions & Réponses

Un Sprite Sheet est une animation représentée sous la forme d'une suite d'images collées dans un seul document, généralement en format JPEG ou PNG.
Les Sprite Sheets sont légers, portables et flexibles, permettant des interactions plus faciles et une meilleure performance sur des appareils mobiles par rapport aux vidéos.
Il est conseillé de scinder le Sprite Sheet en plusieurs parties pour que la taille des images reste inférieure à la résolution de l'écran de l'iPad, évitant ainsi les problèmes de performance.