Motion Web Design : créez une animation façon Twitter
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Motion Web Design : créez une animation façon Twitter

Jonathan Noble
5,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto Photoshop et HTML / CSS 3, nous verrons ensemble comment créer pas à pas une animation Motion Web Design façon Twitter, de la création à l'intégration. Ce tuto est composé de grandes deux parties :

  • Première partie : analyse et création de l'animation dans Photoshop
    Dans cette partie, nous analyserons tout d'abord l'animation du bouton "j'aime" présente sur Twitter.com. Nous créerons ensuite notre propre animation image par image, notamment à l'aide de l'onglet Montage de Photoshop. Enfin, nous verrons comment générer une sprite de notre animation en quelques clics en moins d'une minute
     
  • Seconde partie : intégration de notre animation en CSS.
    Dans cette partie, nous nous pencherons sur l'intégration de notre animation, notamment à l'aide de la fonction transition CSS3 steps()

À la fin de ce tutoriel, vous saurez décliner très simplement cette technique sur n'importe quelle animation, afin d'ajouter une touche de Motion Web Design sur votre propre site !

Les fichiers sources vous sont fournis : que ce soit les fichiers de base afin de suivre au mieux le tutoriel, les différents logiciels/scripts utilisés pendant celui-ci, ainsi que tous les rendus finaux (.psd, sprite et intégration finale). Vous pourrez poser vos questions dans le salon d'entraide une fois ce cours acquis.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
1 - Analyse de l’animation initiale de Twitter.com
Leçon 3
2 - Création de l’animation sous Photoshop
Leçon 4
3 - Vérification de l’animation et création de la sprite
Leçon 5
4 - Intégration web de l’animation et utilisation de la fonction steps()

Plan détaillé du cours

Leçon 1Introduction
01m12
Leçon 21 - Analyse de l’animation initiale de Twitter.com
03m55
Leçon 32 - Création de l’animation sous Photoshop
24m28
Leçon 43 - Vérification de l’animation et création de la sprite
08m54
Leçon 54 - Intégration web de l’animation et utilisation de la fonction steps()
07m35

Aperçus

Avis des apprenants

Détail des avis
331
Apprenants
10
Commentaires
5/5
Note moyenne
5/5
10
4/5
0
3/5
0
2/5
0
1/5
0
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 23/08/2024
Superbe formation, même si j'ai pas mal galéré sur Photoshop, mais très intéressant. Une remarque, lorsque l'on ne connaît pas Photosop, il serait intéressant de faire apparaître les raccourci à exécuter en surimpression, car des fois, on n'est pas sûr de bien entendre le raccourci, quand on ne les connaît pas. Merci
Cédric Marniquet
Cédric Marniquet
Publié le 11/09/2020
Tutoriel très bien expliqué au fur et à mesure des étapes ! Merci :)
Teddy Marchand
Teddy Marchand
Publié le 06/08/2019
Très bon tuto. Jonathan prend le temps de nous expliquer toutes les étapes du processus de création pour que nous puissions devenir autonome.Merci :)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Photoshop CS6, Photoshop CS5, Photoshop CC

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Payer plus tard

Prix d'achat : 5,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1432 tutos gratuits

Notre politique de protection des données