LOOZIN
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilGalerieRechercherDernières imagesS'enregistrerConnexion
Le Deal du moment :
Retour en stock du coffret Pokémon ...
Voir le deal

 

 Tutorial-Gif animé sous Photoshop

Aller en bas 
4 participants
AuteurMessage
Bubu
Général Major Crayonneur
Général Major Crayonneur
Bubu


Nombre de messages : 1354
Localisation : plutôt vague
Date d'inscription : 28/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 12:57

Je vais d'abord indiquer comment les faire sous Cs3 parce que c'est la seule version que j'aie sous la main... pale

Mettons que je veuille faire faire un tonneau à ce sympathique petit vaisseau.
Tutorial-Gif animé sous Photoshop I216664_ExempleGif01

Je dessine ensuite les différentes poses une par une (ça je peux pas vous aider, faut bosser Very Happy ), chaque fois sur un calque différent.
Tutorial-Gif animé sous Photoshop I216674_ExempleGif02
Si vous voulez mettre un fond d'arrière-plan, libre à vous évidemment d'een mettre un sur un calque en dessous des autres...

Ensuite, et c'est là que ça change selon que l'on est sous Cs3 ou sous une ancienne version study . J'expliquerai comment faire sous une ancienne version après. Wink on va dans l'onglet Fenêtre et on coche l'option Animation.
Tutorial-Gif animé sous Photoshop I216683_ExempleGif03

Une fenêtre supplémentaire apparaîtra.
Tutorial-Gif animé sous Photoshop I216686_ExempleGif04
Les icônes sont les mêmes que pour le reste des outils Photoshop, je ne pense donc pas avoir besoin de vous expliquer quel icône cliquer pour créer une nouvelle image d'animation et ce que signifie la poubelle juste à côté de cette icône-là. Rolling Eyes

Créez autant d'images nécessaires à votre animation. Dans mon cas il y a 8 poses différentes,
Tutorial-Gif animé sous Photoshop I216688_ExempleGif05
je vais donc créer 7 images en plus de la première, pour en avoir 8 en tout.
Tutorial-Gif animé sous Photoshop I216690_ExempleGif06

Ensuite, pour chaque image, vous ne rendrez visible que le calque correspondant.
Exemple, Image01>Calque01:
Tutorial-Gif animé sous Photoshop I216690_ExempleGif06
Tutorial-Gif animé sous Photoshop I216694_ExempleGif08
Image02>Calque02:
Tutorial-Gif animé sous Photoshop I216695_ExempleGif09
Tutorial-Gif animé sous Photoshop I216696_ExempleGif10
Et ainsi de suite, jusqu'à obtenir une ligne du temps complète.
Tutorial-Gif animé sous Photoshop I216698_ExempleGif11
Notez qu'avec le bouton Play (non, je ne vous indique pas lequel c'est avec une autre capture d'écran Very Happy ) vous pouvez prévisualiser ce que donne l'animation.
Et qu'en bas à droite de l'image, il est possible de modifier le temps que reste cette image, si vous avez besoin de modifier le rythme de votre animation.
Tutorial-Gif animé sous Photoshop I216700_ExempleGif12
Par défaut, il n'y a pas de délai de défilement des calques, l'animation peut être alors un peu rapide... pale
Tutorial-Gif animé sous Photoshop Exemplegif13xf6
Par exemple, ici je le trouve un peu trop rapide, je vais donc le ralentir un peu... (Si Samsam me laisse le temps Wink )
Tutorial-Gif animé sous Photoshop Exemplegif14nu7
C'est mieux non? Un vrai petit Baron Rouge!
Il ne reste plus qu'à enregistrer votre image (en format Gif évidemment Smile ) et à l'uploader sur un site idoine. Vous l'avez sans doute remarqué, pour les captures d'écran j'ai utilisé Imageshack France et pour les animations l'Imageshack original. Je ne sais pas pourquoi, sur le site français il ne chargeait que la première image. Je ne sais pas si c'est moi qui ai fait une mauvaise manipulation cette fois là ou si c'est le site.

Pour les versions précédentes plutôt que d'aller dans l'onglet Fenêtre il faut transférer le document sur un autre programme (InDesign je crois mais je peux me tromper) au moyen d'une icône qui se situé comme indiqué dans l'image ci-dessous:
Tutorial-Gif animé sous Photoshop I216719_ExempleGif15

Voilà je pense que c'est tout ce que j'avais à dire... Very Happy


Dernière édition par Bubu le Mer 24 Sep - 14:13, édité 17 fois
Revenir en haut Aller en bas
http://buburoi.canalblog.com
samsam
Lieutenant Général crayonneur
Lieutenant Général crayonneur
samsam


Masculin Nombre de messages : 1820
Age : 42
Localisation : près d'une bière surement...
Date d'inscription : 05/03/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 12:59

Oui, ok, on dessine un vaisseau, ensuite? Very Happy
Revenir en haut Aller en bas
http://samsam.over-blog.com
Bubu
Général Major Crayonneur
Général Major Crayonneur
Bubu


Nombre de messages : 1354
Localisation : plutôt vague
Date d'inscription : 28/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 13:05

Attends, je susi en train d'écrire le post, c'est assez long et je vérifie que chaque image s'upload bien avant de continuer pour pas me retaper le deuxième paragraphe à la fin du truc.

Et apparemment il fait une couille quand quelqu'un poste alors qu'on édite un message...

Un peu de patience.
Revenir en haut Aller en bas
http://buburoi.canalblog.com
samsam
Lieutenant Général crayonneur
Lieutenant Général crayonneur
samsam


Masculin Nombre de messages : 1820
Age : 42
Localisation : près d'une bière surement...
Date d'inscription : 05/03/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 13:49

Tu aurais pu poster le gif animé en question, qu'est ce qui nous prouve que ça marche vraiment ??? Very Happy
Revenir en haut Aller en bas
http://samsam.over-blog.com
Bubu
Général Major Crayonneur
Général Major Crayonneur
Bubu


Nombre de messages : 1354
Localisation : plutôt vague
Date d'inscription : 28/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 13:51

Tutorial-Gif animé sous Photoshop Moyenneexplosiongs2
@ RHAAAAAAAA!!!!! @

Laisse-moi finir enfin! Je te le dirai quand ce sera fini!!! Very Happy

[Edit:] Ca y est! C'est fini! T'es content?
[Edit:] Cette explosion est pas terrible en fait study elle est toute ralentie... Boh, j'ai posté ça en vitesse, et il me reste encore beaucoup à apprendre! Smile


Dernière édition par Bubu le Ven 26 Sep - 11:29, édité 1 fois
Revenir en haut Aller en bas
http://buburoi.canalblog.com
BenB
premier sergent chef grib'
premier sergent chef grib'
BenB


Masculin Nombre de messages : 51
Age : 40
Date d'inscription : 14/08/2008

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 17:17

Hé cool...

Moi vu que je débarque dans le royaume de l'informatique, je connaissais pas du tout ce truc...

Alors merci pour les explications...
Cool Cool Cool
Revenir en haut Aller en bas
http://benb-esquisses.blogspot.com
samsam
Lieutenant Général crayonneur
Lieutenant Général crayonneur
samsam


Masculin Nombre de messages : 1820
Age : 42
Localisation : près d'une bière surement...
Date d'inscription : 05/03/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyMer 24 Sep - 17:57

Haha, on dirait un pop corn ton exploqion ^^
Revenir en haut Aller en bas
http://samsam.over-blog.com
Bubu
Général Major Crayonneur
Général Major Crayonneur
Bubu


Nombre de messages : 1354
Localisation : plutôt vague
Date d'inscription : 28/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyJeu 25 Sep - 11:04

BenB> Merci! Wink

Samsam> Je suppose qu'il ne me reste plus d'autre choix que de te tuer... I love you
Revenir en haut Aller en bas
http://buburoi.canalblog.com
BenB
premier sergent chef grib'
premier sergent chef grib'
BenB


Masculin Nombre de messages : 51
Age : 40
Date d'inscription : 14/08/2008

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyVen 26 Sep - 11:12

Hey...

J'aurais bien aimé savoir comment on fait si on veut poster une animation comme ça sur le forum ou sur un blog (sauvegarder au format gif?, quelle taille de document au max, il faut héberger ça en tant que photo ou vidéo,...)...
Revenir en haut Aller en bas
http://benb-esquisses.blogspot.com
Bubu
Général Major Crayonneur
Général Major Crayonneur
Bubu


Nombre de messages : 1354
Localisation : plutôt vague
Date d'inscription : 28/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyVen 26 Sep - 11:22

J'en ai pas hébergé assez pour te dire ce qui marche et ce qui ne marche pas mais, sous Photoshop, tu enregistres en Gif avec l'option "enregistrer pour le Web et les périphériques".

Là, tu as une fenêtre de prévisualisation qui te donne un aperçu (forcément) la taille du fichier, les différents formats (jpeg, gif, png) et tailles de format (gif128, gif64 ou gif32, tramé, non tramé), et en dessous de tout ça, une petite barre d'outils play/stop, rew/fastforward pour vérifier que ton animation fonctionne.

Pour bien faire, ton animation ne doit pas dépasser 100ko. Par exemple mon animation d'explosion est molle du cul parce qu'elle en fait 900ko et quelques. (mais je vais la réenregistrer sous un format plus petit)

Tu peux utiliser Imageshack comme quand tu postes des images sur le forum. Pour moi ça a marché à chaque fois jusqu'à présent, sauf sur Imageshack-France, va savoir pourquoi...
Revenir en haut Aller en bas
http://buburoi.canalblog.com
Bubu
Général Major Crayonneur
Général Major Crayonneur
Bubu


Nombre de messages : 1354
Localisation : plutôt vague
Date d'inscription : 28/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyVen 26 Sep - 13:31

Un petit conseil d'Isa pour faire des images légères, que je me permets de placer ici.

isaeris a écrit:
Sympa le gif, je ne connais pas le programme utilisé mais dans les programmes adobe il y a image ready, perso je fais mes gif animés avec quand y'en faut pour la promo des sites, le plus compliqué étant de réduire le poids du fichier. Ce programme contient une fenêtre pour optimiser les gifs et réduire ainsi leur poids qui peut vite devenir monstrueux.

Par exemple ce n'est pas tant le temps qu'il y aura entre les images qui augmentera fortement le poids mais le nombre de couleurs différentes.
Il faut donc au maximum réutiliser les couleurs des dessins pour faire un texte ou une couleur de fond, pour pouvoir arriver à une image en 128 couleurs max au lieu de 256, tout en essayant si possible d'atteindre le 64 couleurs, très peu gourmand alors.
Il faut éviter aussi trop de transparence (si vous voulez faire faire disparaitre progressivement un des calques par exemple). Enfin limiter le nombre de calques en les aplatissant préalablement.

De cette manière on peut arriver entre 10 à 15 ko pour une petite vignette et à moins de 40 ko pour une grande.
Revenir en haut Aller en bas
http://buburoi.canalblog.com
SambO_°
Général Major Crayonneur
Général Major Crayonneur
SambO_°


Masculin Nombre de messages : 1437
Age : 43
Localisation : dans mes nuages...
Date d'inscription : 27/02/2006

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyVen 26 Sep - 14:16

cool ton tuto bubu ! I love you

oué ,c'est dur d'optimiser un gif !

je me disais bien que ce ne devait pas dépasser les 100ko (qui est déjà énorme)

les conseils d'isaeris sont cool!


Like a Star @ heaven
Revenir en haut Aller en bas
http://artofparadox.over-blog.com/
BenB
premier sergent chef grib'
premier sergent chef grib'
BenB


Masculin Nombre de messages : 51
Age : 40
Date d'inscription : 14/08/2008

Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop EmptyVen 26 Sep - 16:53

Cool...

Merci Bubu pour ta réponse à mes interrogations de ce matin...
Et Merci Isaeris pour tes compléments d'informations...
Revenir en haut Aller en bas
http://benb-esquisses.blogspot.com
Contenu sponsorisé





Tutorial-Gif animé sous Photoshop Empty
MessageSujet: Re: Tutorial-Gif animé sous Photoshop   Tutorial-Gif animé sous Photoshop Empty

Revenir en haut Aller en bas
 
Tutorial-Gif animé sous Photoshop
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Tutorial dessin - brush et autre ressource CG
» Photoshop mon amour.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
LOOZIN :: Loozin :: VOS Coups de coeurs-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser