GIF animé - Wisibility
GIF animé

GIF animé

Photoshop CS3

 16 avril 2008
Peter Gabor
1090720470
Malgré toutes les évolutions de Photoshop, il reste toujours possible de réaliser un GIF animé que Peter nous met en scène pour son amie Monique.
Obtenir Adobe Flash Player

22Commentaires

Xwa  | 2008-04-17 13:06:25

Alors Monique on a compris ? :)

Moi je voulais savoir si par exemple j'ai 30 calques est t'il possible de passer du premier au dernier automatiquement avec l'outil trajectoire ou si je dois les cocher et décocher moi même a chaque fois ?

Je sais pas si j'ai étais trésl clair mais bon ... :p

Merci!

peter (wisi)  | 2008-04-17 13:32:24

non cher Xwa, on peut pas. On est obligé de sélectionner les images clé, deux par deux pour les interpoler. En revanche, je n'ai pas testé, mais peut-être qu'on peut se faciliter la vie avec des scripts. Dernière chose, on parle de gif animé avec des interpolations qui augmentent considérablement le poids du fichier. Il faut vraiment calculer son coup pour savoir quelle taille pour quel usage etc. Parce qu'un gif animé de 2Mo, j'en ai déjà vu. C'est donc possible mais je doute qu'un portail l'accepte en l'état, question de rapidité d'affichage et… de bande passante. Imaginez 1M,5 connexions quotidiennes et faites le calcul. Très onéreux.

Xwa  | 2008-04-17 13:36:42

Merci pour votre réponse rapide Mr Peter ! ;)

peter (wisi)  | 2008-04-17 13:44:26

Juste pour vous montrer des exemples où le gif animé s'impose de façon très professionnelle et presque scientifique:

paris.blog.lemonde.fr/par...

Laurent  | 2008-04-17 21:08:13

Sympa ce tuto, mais au début de la composition, quand tu positionnes chaque calque grâce aux repères magnétiques, c'est quand même plus simple de les positionner directement en maintenant "Shift" lors du déplacement pour les centrer directement !
Sino, rien à redire pour le reste, le tuto est vraiment des plus complet ^^

Freddy  | 2008-04-17 21:32:39

Moi qui pensais que le gif animé était mort :)

peter (wisi)  | 2008-04-18 01:17:43

@Laurent, oui merci, tu fais bien de l'avoir rappelé, perso j'ai voulu rendre ce tuto très basique avec le moins de racourcis clavier, genre débutant de base. Monique l'était :-) @ Freddy: eh bien non mon cher Freddy. Pour une petite anim de qq secondes c'est bcp plus efficace de cette sorte. Et par ailleurs on ne peut pas toujours jouer un fichier swf ou flv dans tous les blogs. J'ai la plus grande difficulté en tous cas dans le mien qui est un WordPress bridé par le Monde. Donc les gif animés étaient bien mieux indiqués. Par ailleurs si tu regardes un peu l'utilisation que j'en fais sur Design et Typo ça reste très correcte comme qualité pour donner envie par exemple à un lecteur d'aller visiter un autre site. Et je redonne l'exemple ci-dessus où le Gif animé devient un véritable outil pédagogique:

paris.blog.lemonde.fr/par...

Dommage que ce soit un format qui soit tant abandonné. Je suis sûr qu'il a encore de très beaux jours, surtout lorsque les créateurs s'en emparent pour faire des recherches plastiques:

www.nogallery.info/projec...

Laurent  | 2008-04-19 03:57:01

Temps qu'on parle d'animation, voici aussi une technique (très simple mais qu'il est bon de connaître) pour décomposer un gif animé dans Photoshop CS3 Extended:
www.trucsenvrac.com/home/...


Peter, quand tu dis "Dommage que ce soit un format qui soit tant abandonné", je plus ou moins d'accord avec toi, plus ou mois car il ne faut pas oublier que l'on peut aussi s'amuser avec, en créant pas exemple des smileys animés, je pense qu'ils ont encore de beaux jours devant eux :p

Arf, ca me rappelle ceux que j'avais fait il y a un moment, car je dois bien l'avouer, je m'étais bien amusé:
halo.jeun.fr/la-vie-du-fo...

peter (wisi)  | 2008-04-19 16:00:54

@Laurent: J'ai essayé l'astuce pour ouvrir un Gif animé avec Photoshop CS3 extended. Ça ne marche pas sur Mac. Le champ de recherche ne reconnaît pas le *.* que recommande l'auteur de l'intervention sur le forum que tu cites. Désolé.

Ronald  | 2008-06-10 21:57:03

merci, pour une fois moi aussi j'ai compris!
merci , merci merci

Sekai  | 2008-10-03 23:40:19

Bonsoir,

votre tuto ma été d'une grande aide mais j'ai toujours un petit problème c'est que quand je fais les trajectoires sa me met sur les image qui se crée une sorte de brume blanche 8-O
Regardez par vous même :
nsa02.casimages.com/img/2...
Que faire ? :-/

clairottefcil  | 2008-11-14 05:39:12

merci beaucoup
you're the best
8-)

lexx  | 2009-01-05 14:59:05

bonjour,

excellent tuto !!!

mais je me retrouve avec le même soucis que Sekai, à savoir une brume blanchâtre sur les trajectoires.

je ne comprend pas ce qu'il y a.

david  | 2009-02-12 19:23:50

merci beaucoup pour ce super tuto tres qui est bien expliqué encore merci

Patrice  | 2009-02-25 00:03:58

Je voudrais demander est-ce que c'est possible de cadrer le gif ? si oui tu peux me dire comment faire ?

merci d'avance ;-)

ToutiWeb  | 2009-08-14 16:45:34

superbe tuto : bravo !

Dakine  | 2010-11-07 22:02:00

Vous savez si il y a moyen de mettre en gif anomé en favico ?

Agamemnon  | 2011-01-28 21:38:05

Trois ans après, toujours valable avec cs5. Merci à vous !

Jean-Paul  | 2011-07-15 09:11:30

Bonjour,
Ayant fait le tour des "tutos" disponibles sur le net, force est de constater que vous (Wisibility.com) êtes vraiment les meilleurs et les plus clairs.

Bertrand (Wisi)  | 2011-07-15 11:34:21

@[Jean-Paul|#c11348] : Merci Jean-Paul
Des compliments comme ça on veut encore ;-)

Sergio  | 2012-04-18 10:50:50

Ce tuto tranche vraiment avec les didactitiels gratuits ou payants mal écrits, peu explicites, oubliant des étapes essentielles qui génèrent des pertes de temps. A ce jour, je n'en ai vu aucun qui soit aussi efficace que celui-ci. Tout est clair. Félicitations à Peter!
Pour un coup d'essai, j'ai tenté d'animer des photos. ça marche mais le poids du gif final ( 1Mo environ), difficilement réductible, est prohibitif pour le web. Cela dit, le gif animé est une solution pérenne pour l'animation de logos.

Jean-Paul  | 2012-04-18 12:24:31

Bonjour,

Travaillez avec des images déjà en basse résolution (72) et de petite taille.

 Vous aussi, commentez l'article

  • Autres tutoriels du formateur
  • Identité graphique de Nerim

    Identité graphique de Nerim

    Peter Gabor  |
    16 744

    Design et Typo

  • GIF animé

    GIF animé

    Peter Gabor  |
    47 492

    Photoshop CS3

  • velib’ | un logo qui déraille

    velib’ | un logo qui déraille

    Peter Gabor  |
    25 573

    Design et Typo

  • Etude du design graphique du site SFR

    Etude du design graphique du site SFR

    Peter Gabor  |
    24 236

    Design et Typo


  • Remonter en haut du tutoriel

    Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
    Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
    Contact - Wisibility est une marque déposée

    Blog - Tutoriels - Wisi TV - Forum