$ 6.00

Tuto Motion Web Design : créez une animation façon Twitter avec CSS, Photoshop

$ 6.00

  • Une formation vidéo de 46m04s
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation CSS, Photoshop (durée : 46m04s)

    • Introduction gratuit 00:01:12
    • 1 - Analyse de l’animation initiale de Twitter.com 00:03:55
    • 2 - Création de l’animation sous Photoshop 00:24:28
    • 3 - Vérification de l’animation et création de la sprite 00:08:54
    • 4 - Intégration web de l’animation et utilisation de la fonction steps() 00:07:35



Formateur : Jonathan Noble

Jonathan Noble a publié 1 tutoriel et obtenu une note moyenne de 5,0/5 sur 101 tutoriels vendus. Voir les autres formations de Jonathan Noble

5,0
note moyenne

6
avis laissés
5 étoiles
6
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de tahar77 laissé le 09/12/2015
    Un Excellent tutoriel avec de bonnes astuces. Je ne connaissais pas du tout la fonction step(). C'est très souple et permet des animations fort sympathique. Merci pour ce tuto.
    "Merci beaucoup Tahar pour votre super avis et votre note ! Je suis très content d'avoir pu vous apprendre quelques petites astuces CSS grâce à la fonction step(). À très vite dans un prochain tuto !"

  • 5
    avis de mika012 laissé le 24/11/2015
    Sympa et simple, j'aime !
    "Yeah, merci Mika ! Ravi que ça vous plaise :) Rendez-vous très vite dans un prochain tuto !"

  • 5
    avis de ailand laissé le 21/11/2015
    Très bon du tutoriel et j'espère qu'il y en aura d'autres traitant ce sujet !
    "Un grand merci @ailand ! Il y en a effectivement d'autres tuto en préparation. Si vous avez des idées n'hésitez pas à me l'indiquer ! :)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Photoshop CS6, Photoshop CS5
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1560 tuto gratuits


non, je ne veux pas me former gratuitement