lundi 23 décembre 2013

Le Gif animé // TUTO //

Le Gif animé est une suite d'images qui défilent à une vitesse donnée. Fonctionnant un peu à la manière d'un film, sauf que vous n'aurez jamais le rendu fluide d'un métrage filmé par une caméra! Mais le principe est de pouvoir fournir une animation courte, légère et facile à héberger. Voici un exemple que j'ai réalisé en quelques minutes :


Nous allons reproduire à, quelques détails, ce gif. Pour commencer, ouvrez un nouveau document dans photoshop. Dans mon exemple, la taille est de 500px sur 250px avec un fond blanc.

Nous allons tout d'abord créer le cadre. Créer un nouveau calque (cmd+N), puis sélectionner l'arrière plan. Pour cela, transformer le fond en calque, faites un double clic dessus. Puis faites un clic sur la vignette correspondant à votre calque d'arrière plan. Une sélection s'affiche autour du cadre.

Ensuite, dans l'outils de sélection choisissez "modifier" puis "cadre" et appliquez une valeur de 10px. Revenez sur votre calque du dessus, puis remplissez avec un dégradé le cadre. Vous devez obtenir un rendu similaire :


Le cadre est maintenant terminé. Insérez ensuite l'image que vous voulez, pour ma part je choisi le logo du forum et placez le à droite de l'écran, de façon à ce qu'il soit collé au bord MAIS qu'on ne puisse pas le voire :

Vous apercevez à gauche la selection de mon logo
Placez le claque du cadre au dessus des autres calques, c'est important pour le rendu final pour que votre image ne semble pas passer au dessus, mais bien en dessous du cadre.

Nous allons passer à présent à la partie d'animation à proprement dites. Pour commencer, vous devez activer la fenêtre d'animation. Pour cela, rendez vous dans "Fenêtre" puis cliquez sur animation. Une nouvelle fenêtre est apparu en bas de votre zone de travail. 

Cliquez sur votre première vignette d'animation, puis sur le logo "dupliquer des images sélectionnées" :


Vous avez créé une seconde image, identique à la première. Sélectionnez votre deuxième image, puis le calque de l'image que vous avez mis sur le côté gauche de la composition. A présent, placez la à droite de la composition de façon à ce qu'elle disparaisse (comme pour la première image), en utilisant les flèches de votre pad directionnel. L'image ne doit pas bouger de façon verticale, uniquement en horizontale. 

Avec la touche cmd sur mac, sélectionnez vos deux images, puis cliquez sur l'onglet "trajectoire des images animées"

Dans cette capture d'écran, seul l'image 2 est sélectionnée, mais il faut bien que les deux soit en bleu
Un menu vient de s'ouvrir, entrez les valeurs suivantes :


Lancez une prévisualisation avec la barre espace du clavier pour voire le résultat. Votre Gif est terminé. Vous devez maintenant l'enregistrer de façon à ce qu'il puisse être hébergé sur le web. Pour cela, faite "Fichier" puis "Enregistrer pour le web et les périphériques", puis enregistrer le rendu où bon vous semble. C'est terminé, vous avez maintenant les bases pour créer un gif animé! Cependant, il y a quelques règles à respecter : 

  • Si vous devez modifier un calque, assurez vous d'être sur la première image dans la fenêtre d'animation, dans le cas contraire, c'est uniquement sur l'image sélectionné que la modification du calque prendra effet.
  • Si vous désirez augmenter ou diminuer le temps entre chaque image, vous avez un ascenseur en dessous de vos images pour cela.
  • Si vous avez plusieurs images, et que vous devez modifier le temps de l'ensemble, utiliser la touche cmd puis sélectionnez l'ensemble des images, puis modifiez le temps.
  • Autant que possible, appliquez un fond à vos compositions, le format gif gère mal la transparence du fond.
Maintenant que vous avez les bases, vous pouvez vous exercer sur des modèles plus "complexes" :








Aucun commentaire:

Enregistrer un commentaire