Un Mockup est un outil de conception graphique, d’évaluation et de communication visuelle. Il est fréquemment utilisé à des fins d’études, de tests ou de démonstration. Dans le domaine de la conception d’interfaces, le Mockup est une représentation du futur site ou de l’application mobile. C’est une simulation statique, en moyenne ou haute-fidélité, de l’UI, avant le processus de développement.

utiliser un mockup pour fabriquer chaque image de l’animation

Téléchargez le fichier Mockup-NOM.psd (disponible plus bas).
Double cliquez sur l’icône de l’objet dynamique de la vignette du calque pour ouvrir les calques « screen 1 », « screen 2 », et « screen 3 ». Vous avez la possibilité de choisir un fond blanc ou noir (calque Device color).
Photoshop ouvre une nouvelle fenêtre nommée screen 11.psb dans lequel vous devez importer vos images. Choisissez Menu Fichier > Importer et incorporer ses images…
Vous pouvez également créer des calques de remplissage pour placer un fond de couleur unie par exemple.
Enregistrez le fichier .psb et observez les mises à jour sur le fichier initial mockup-NOM.psd
Exportez ce résultat au format .png : menu Fichier > Exportation > Exportation rapide au format png.
Nommez cette première image : image01.png et ainsi de suite pour les suivantes…

procédure pour animer les images du mockup

Ouvrir dans Photoshop le fichier image01.png
Renommez ce fichier : animation-NOM.psd
Importer et incorporer toutes les images extraites du mockup.
Créer l’animation de chaque calque avec le panneau Montage.
Régler les cadences de chaque vue !!!
Exporter au format .gif

Il convient de faire le storyboard de l’animation avant sa réalisation.
Voir également l’article sur les rythmes et les cadences pour augmenter votre travail de conception :