Créer un gif animé avec Photoshop

Créer un gif animé avec Photoshop

Tutoriel publié en juillet 2013 par Galdon dans la catégorie Photoshop

Dans ce tutoriel, nous allons apprendre comment créer un GIF animé avec Photsohop. Un GIF animé est une image dans laquelle on peut placer une petite animation très courte qui dure généralement quelques secondes voir moins d'une seconde.

Nous allons partir d'un document Photoshop existant : ce smiley que vous pouvez télécharger en cliquant sur le bouton de téléchargement ci-dessous :

Smiley calque de forme Boby le smiley dessiné avec des calques de forme dans Photoshop CS6.
Télécharger

Smiley calque de forme

Et voici le résultat :

Smiley gif animé avec Photoshop

C'est parti :

Panneau montage

Le panneau montage est spécialement conçu pour gérer l'animation des gif animés dans Photoshop. Il est masqué par défaut, pour afficher le panneau montage, il faut aller dans le menu Fenêtre > Montage.

Ce panneau montage est en fait une timeline qui représente l'image à différents moments dans le temps, et c'est la succession de ces images qui créé l'animation, exactement comme dans une vidéo.

Voici à quoi ressemble ce panneau :

Panneau montage animation gif animé dans Photoshop CS6
Cliquez sur l'image pour agrandir

Chaque vignette représente une image clé de l'animation. On y trouve aussi un bouton "play" qui permet de prévisualiser l'animation.

En bas du panneau se trouvent 3 icônes très utiles :

  • Trajectoire des images animées : permet de générer automatiquement des images clé pour créer une transition entre 2 images clé
  • Duplication des images sélectionnées : elle permet de créer une nouvelle image clé
  • Suppression des images sélectionnées

Créer les images clé

La première étape va donc être de créer des images clés. Par défaut, vous avez une image clé, c'est l'état initial de l'animation.

Donc on va créer une image clé, puis déplacer les différents calques qui composent l'image (les yeux, les pupilles et la bouche du smiley) :

Créer une image clé gif animé montage

On peut voir que la nouvelle configuration des calques n'est visible que sur l'image clé courante, sur la première image le smiley n'a pas changé, les calques sont à leur position initiale.

Malheureusement on ne peut animer que la position, l'opacité et les styles de calque dans un GIF animé, il est impossible de faire une rotation par exemple, car l'animation n'est pas mémorisée par Photoshop, il la répercute automatiquement sur toutes les images clés du panneau montage.

Animer la trajectoire

Maintenant que nous avons 2 images clés, il reste à créer quelques images clé intermédiaires pour créer une transition en douceur (interpolation) entre les deux.

Pour cela, il suffit de sélectionner la dernière image clé (fin de l'animation) et de cliquer sur l'icône trajectoire en bas du panneau montage (cf image globale ci-dessus). Une fenêtre s'affiche alors :

Trajectoire montage

Après avoir cliqué sur OK, on peut voir de nouvelles images apparaître :

Images clé trajectoire

Animer le délai

Par défaut, chaque image clé est sans délai, c'est-à-dire qu'il n'y a pas de "pause" sur chaque images, elles défilent à un rythme d'environ 10 images par seconde.

Mais il est possible de mettre un délai sur certaines vignettes de façon à faire une pause ou à faire varier la vitesse de l'animation. Pour cela, il faut cliquer sur la petite liste déroulante présente sous chaque vignette (0s) :

Délai animation gif animé

En cliquant sur Autre... il est possible de définir un délai personnalisé, autre que les valeurs prédéfinies qui sont proposées dans le menu contextuel.

Exporter en GIF animé

Une fois votre animation terminée, il ne reste plus qu'à enregistrer l'image en GIF animé. On ne peut pas enregistrer au format gif animé via la boite de dialogue "Enregistrer sous", il faut passer par la fonction exporter pour le web.

Pour cela, allez dans le menu Fichier > Enregistrer pour le Web (ou utilisez le raccourci clavier Alt+Ctrl+Maj+S). Une fenêtre s'affiche alors, il faut choisir le format GIF dans la liste déroulante en haut à droite :

Exporter en GIF animé depuis Photoshop
Cliquez sur l'image pour agrandir

Modifier un GIF animé avec Photoshop

En plus de pouvoir créer des GIF animés, Photoshop permet aussi d'éditer un gif animé existant. Pour cela, il suffit de l'ouvrir comme n'importe quelle image dans Photoshop. On voit alors apparaître les images clés dans le panneau montage.

Certaines versions anciennes de Photoshop ne permettent pas de modifier un GIF animé, il affiche alors un message d'erreur indiquant : "Ceci est une image GIF animée. Vous ne pouvez afficher qu'une seule image. Si vous enregistrez sur ce fichier, vous perdrez des informations". Ce "bug" a été corrigé dans Photoshop CS6, donc si vous rencontrez ce problème, il faut mettre à jour vers la version CS6 minimum.

Vous pouvez aussi utiliser ImageReady pour modifier le GIF si vous utilisez Photoshop CS2 (ImageReady n'est plus maintenu à l'heure actuelle, il est absent des versions suivantes de Photoshop : CS3, CS4, CS5 et CS6).

Fini de lire cette page ? allez faire un tour ici : fille de la jungle, ça peut vous intéresser.

80 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°4878 par fernao6475436@gmail.com
fernao6475436@gmail.com lundi 23 mars 2020, 21:56
Expert point of view and information support https://fxmarketstrategies.business.blog
commentaire n°4883 par bravo29re@gmail.com
bravo29re@gmail.com mardi 24 mars 2020, 17:21
<a href=https://youtu.be/ENp8EVdSImA>;ИНСТРУКЦИЯ ПО РАБОТЕ В ИНТЕРНЕТЕ 5000 РУБ. В ДЕНЬ</a>
commentaire n°4886 par fernodor6475436@gmail.com
fernodor6475436@gmail.com mercredi 25 mars 2020, 22:51
Current information about information technology https://whatdopeoplefromdifferentcountries.blogspot.com/
commentaire n°4888 par fernodor6475436@gmail.com
fernodor6475436@gmail.com jeudi 26 mars 2020, 09:31
Current information about information technology https://worldanallytics.blogspot.com
commentaire n°4889 par eileenjcochran@rambler.ru
eileenjcochran@rambler.ru jeudi 26 mars 2020, 20:26
fucking the nurse bbypandaface naked madison milstar anal pussy pulsating gay saline facesitting slave bondage rough porn nut xxx lola bunny rule34 jamie chung fappening panty poop clips kink mask shame porn escort masajes youtuber turned pornstar

totaly free web cam <a href=https://mia-li.leshim-sami.com/anal/my-tight-cunt.php>;my tight cunt</a> nude ethnic teens <a href=https://elisabeth-montgomery.leshim-sami.com/hot/>;hot</a> butt porn pictures <a href=https://sexy-naked.leshim-sami.com/big/gina-ryder-videos.php>;gina ryder videos</a> chubby spreading ass <a href=https://reality-kings.leshim-sami.com/anal-porn/>;anal-porn</a> how to make porn video <a href=https://elisabeth-montgomery.leshim-sami.com/verified-profile/prone-bone-videos.php>;prone bone videos</a>

blake morgan nude watch my gf galleries ehentai zaush acidental anal shyla stylez masturbation khloe k naked watch sex videos online cherokee d ass free mimi rogers pussy baylee escort

tbfe porn <a href=https://liz-summers.leshim-sami.com/strapon/mistress-january.php>;mistress january</a> super petite porn <a href=https://she-hates.leshim-sami.com/realsex/young-sexstories-1.php>;young sexstories</a> maria ozawa gif <a href=https://teens-in.leshim-sami.com/ass/>;ass</a> grandmother nude pics <a href=https://free-movie.leshim-sami.com/cum/tight-pants-babes.php>;tight pants babes</a> gay public freeballing <a href=https://kenzie-reeves.leshim-sami.com/milf/erotic-thriller-videos.php>;erotic thriller videos</a>

hentai dancers goddess ryan fart girl nude videos erect nipples tits hot little blonde
commentaire n°4890 par ferinodo6475436@gmail.com
ferinodo6475436@gmail.com vendredi 27 mars 2020, 11:22

Information site. Last news https://forexlegaltender.law.blog
commentaire n°4901 par Doris
Doris mercredi 1 avril 2020, 12:46
Je veux que le monde connaisse un grand homme bien connu sous le nom de DR Padman, site Web: https://padmanspell.com/index-3.htmlhe a la solution parfaite aux problèmes relationnels et aux problèmes de mariage. La raison principale pour laquelle je suis allé chez DR Padman. était pour trouver une solution sur la façon dont je peux récupérer mon mari parce que ces derniers temps j'ai lu des témoignages sur Internet que certaines personnes ont écrits sur DR Padman, et j'étais tellement heureux et j'ai décidé de demander de l'aide, ce qu'il a fait travail en jetant un sort d'amour sur mon mari qui l'a fait revenir vers moi et implorer le pardon. Je n'arrêterai pas de publier son nom sur le net à cause du bon travail qu'il fait. Je laisserai tomber son contact pour l'utilité de ceux qui ont besoin de son aide.Son email (padmanlovespell@yahoo.com) ou son site Web: https://padmanspell.com/index-3.html Whatsapp +19492293867 https: // twitter. com / padman_dr. ce grand lanceur de sorts pour votre problème de relation ou de mariage, encore une fois je suis très reconnaissant envers Dr.PADMAN
commentaire n°4919 par нету
нету dimanche 5 avril 2020, 12:25
https://t.me/DobejsjaUspeha > Добейся успеха. Поиск мотивации непростое дело, канал ориентирован на людей, потерявших веру в себя. Заходите и располагайтесь поудобнее! Советы и фразы, заряжающие на успех во всех сферах жизни. Развивайтесь и реализовывайте свои задумки! Добивайтесь лучших результатов! Подборка материалов вам в помощь!

https://t.me/FITNESmotiv > FITNES спорт мотивация. Ваш друг в мире спорта! Канал, способный замотивировать вас на успех в спортивных достижениях! Контент канала станет вашим главным помощником и советчиком в мире спорта. Подписывайтесь и следуйте публикуемым рекомендациям. прогресс не заставит себя долго ждать!

https://t.me/BusinesMoney > Бизнес и деньги - Полезный канал для желающих начать своё дело. Рекомендации по кредитованию, поиску инвесторов и прочи полезности для неопытных предпринимателей. Мы научим как грамотно организовать свой бизнес с минимальными потерями.

https://t.me/SistemaBiznes > Бизнес система. Жизнь и бизнес состоят из большого количества скучных, нудных и банальных вещей, сделав которые, неожиданно получаешь то самое, о чём не стыдно дать интервью.

https://t.me/BlogCryptoCurrency > Криптовалюты - Ваш проводник в мир криптоволюты. Обучающая информация об особенностях и прочих важных моментах. Подпишись, следи за обновлениями и изучай!

https://t.me/biz_trenajer > Бизнес тренажер. Канал посвящен всему, что касается бизнеса.

https://t.me/relefTela > Рельеф тела - Всё о здоровом образе жизни. Мотивация к спортивным достижениям и построению красивого тела.

https://t.me/body_bildingg > Бодибилдинг как есть! - Основы бодибилдинга у нас на канале! Полезные упражнения, способные помочь построению красивого тела! Мотивация и куча полезностей. Настройся на результат!

https://t.me/dom_hack > Домашние поделки -Всё, что нужно знать. Поделки, советы лайфхаки по дому.

https://t.me/goodPolitikant > Добрый политикан. Политические новости и подборка интересных фактов. Интересная информация, способная расширить и обогатить ваш кругозор. Подписывайтесь и следите за обновлением новостной ленты. Интересный контент гарантируем!

facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré