Forum Topjeux & Temple dbz
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Forum Topjeux & Temple DBZ
 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

 

 TUTO pour l'animer !!! [important!!!]

Aller en bas 
5 participants
AuteurMessage
gohan 754
Namecks
gohan 754


Nombre de messages : 36
Date d'inscription : 13/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 22:21

ouvrir images ready
TUTO pour l'animer !!! [important!!!] Imageban
TUTO pour l'animer !!! [important!!!] Calqban1
Dans la fenêtre des calques nous pouvons voir 5 caques :
- 70 euros par an ...
- bulle
- HEBERGEMENT DE SITES...
- logo Bo web
- Calque 0

Les calques se superposent les uns aux autres, pour y remédier :
Fenêtre des calques > calque bulle : cliquer sur l'oeil (à gauche du calque) pour ne plus le faire apparaître.
Fenêtre des calques > calque HEBERGEMENT DE SITES ... : cliquer sur l'oeil pour ne plus le faire apparaître
Etape 4 : La fenêtre animation
C'est dans la fenêtre "Animation" que nous allons réaliser notre bannière. Si cette fenêtre n'apparaît pas allez sur le menu "Fenêtre" tout en haut de ImageReady puis cliquez sur "Animation".
TUTO pour l'animer !!! [important!!!] Ban1
Fenêtre animation > une vignette apparaît, elle est numérotée (1) en haut à gauche et elle est sélectionnée (contour bleu).
Etape 5 : Dupliquer une image dans l'animation
Nous allons créer une seconde image identique à la première pour pouvoir la modifier :
Fenêtre animation > cliquer sur l'icône "Reproduit l'image sélectionnée".

TUTO pour l'animer !!! [important!!!] Ban111

Fenêtre animation > une deuxième vignette identique à la première apparaît, elle est numérotée (2) en haut à gauche et elle est sélectionnée.
TUTO pour l'animer !!! [important!!!] Ban2
Etape 6 : Modifier le contenu de la vignette n°2
Nous avons actuellement deux vignettes identiques, pour que la seconde fasse apparaître une autre image nous allons tout simplement cacher le calque inutile pour notre animation et faire apparaître celle désirée :
Fenêtre des calques > calque 70 euros par an ... > cliquer sur l'oeil pour ne plus le faire apparaître.

Fenêtre des calques > calque bulle > cliquer à l'emplacement de l'oeil pour le faire apparaître.

TUTO pour l'animer !!! [important!!!] Calqban3
TUTO pour l'animer !!! [important!!!] Ban3
Fenêtre animation > dans la deuxième vignette nous pouvons voir que l'image a changé et que c'est maintenant le calque bulle qui apparaît.
Etape 7 : Dupliquer l'image de la vignette n°2
Pour faire l'effet de l'image "bulle" qui arrive par transparence et apparaît totalement venant de la droite, nous avons besoin de deux images clés :
- la première servira pour faire le départ de l'animation bulle, - la seconde l'arrivée.
La première image clé étant la vignette n°2 nous allons donc tout simplement dupliquer cette image pour avec la seconde.

Fenêtre animation > cliquer sur l'icône "Reproduit l'image sélectionnée".

TUTO pour l'animer !!! [important!!!] Ban33
Fenêtre animation > une troisième vignette identique à la seconde apparaît, elle est numérotée (3) en haut à gauche et elle est sélectionnée.
TUTO pour l'animer !!! [important!!!] Ban4
Etape 8 : Préparer la première image clé pour l'effet du déplacement
Nous allons donc transformer la première image clés pour faire le départ de l'animation de la bulle :
Fenêtre animation > cliquer sur la vignette n°2 pour la sélectionner.

TUTO pour l'animer !!! [important!!!] Ban34
Etape 9 : Préparer la première image clé pour l'effet de la transparence
Nous allons maintenant créer la transparence de la première image clé :
Fenêtre animation > cliquer sur la vignette n°2.
Fenêtre des calques > calque bulle > cliquer une fois sur le calque pour le sélectionner.

Pour faire l'effet de la transparence :
Fenêtre des calques > calque bulle > rentrer la valeur 20% dans l'opacité en haut à droite : votre image devient presque transparente.

TUTO pour l'animer !!! [important!!!] Calqban5
Ce qui donne :
TUTO pour l'animer !!! [important!!!] Ban55
Etape 10 : Création de nouvelles images entre les deux images clés
L'image clé n°1 qui est dans la vignette n°2 :
TUTO pour l'animer !!! [important!!!] Ban5
L'image clé n°2 qui est dans la vignette n°3 :
TUTO pour l'animer !!! [important!!!] Ban4
L'image clé n°1 qui est dans la vignette n°2 :



L'image clé n°2 qui est dans la vignette n°3 :



Nous allons demander à ImageReady de créer des images entre les deux images clés pour rendre l'animation fluide, on peut dire qu'il interprète les déplacements entre deux images clés :
http://www.joliespages.com/images/ban6.gif
Fenêtre animation > sélectionner la vignette n°3.

Fenêtre animation > cliquer sur l'icône "Trajectoire des images animées" > une nouvelle fenêtre "trajectoire" s'ouvre.

Fenêtre Trajectoire > images à ajouter > saisir 3.
http://www.joliespages.com/images/ban7.gif
Fenêtre animation > l'image n°3 est devenu maintenant n°6 (une série de 3 images se sont intégrées entre la vignette n°2 et l'ancienne n°3).


Etape 11 : Faire apparaître le calque "HEBERGEMENT DE SITES..."
http://www.joliespages.com/images/calqban8.gif
Fenêtre des calques > calque bulle > cliquer sur l'oeil pour ne plus le faire apparaître.

Fenêtre des calques > calque HEBERGEMENT DE SITES ... > cliquer à l'emplacement de l'oeil pour le faire apparaître.

Fenêtre animation > la vignette n°6 fait apparaître l'image "HEBERGEMENT DE SITES..."
Etape 12 : Lire l'animation
http://www.joliespages.com/images/ban8.gif
Nous avons maintenant finit notre animation, vous pouvez la voir en cliquant sur l'icône "lecture", et l'arrêter par l'icône stop.


Etape 13 : Définir le temps en seconde pour une image
http://www.joliespages.com/images/ban9.gif
Pour l'instant nous avons une animation qui défile à 0 seconde, c'est à dire que lors de l'exportation l'animation sera si rapide que nous pourrons pas bien la voir. Nous allons donc régler le temps de pose entre chaque image pendant son défilement, c'est à dire qu'elle paraîtra pendant tant de secondes avant l'image suivante.

Nous voulons que notre vignette n°1 apparaisse pendant 1.5 secondes :

Fenêtre animation > sélectionner la vignette n°1 > cliquer dessous sur 0 sec > un menu apparaît avec une série de temps en seconde > cliquer sur Autre.
http://www.joliespages.com/images/infoban9.gif
La fenêtre "Définir le délai de l'image" s'ouvre.

Saisissez "1.5" secondes, l'image apparaîtra pendant 1.5 secondes dans l'animation.
Etape 14 : Optimiser l'image
Nous allons maintenant optimiser l'animation pour qu'elle soit la plus légère possible. En effet si vous désirez faire une bannière publicitaire il ne faut pas qu'elle dépasse les 10ko, voir même beaucoup moins. Si son poids est trop élevé elle mettra trop de temps à s'afficher ce qui n'est pas très bon sur Internet.
http://www.joliespages.com/images/ban10.gif
Sélectionner la vignette dans laquelle paraît le maximum de couleurs pour régler l'optimisation de la sortie :
Fenêtre animation > sélectionner la vignette n°5.

Fenêtre de l'image > cliquer sur 2 vignettes en haut, cela vous permettra de voir les deux effets : l'image originale et celle qui sera sauvegardée.

En bas de chaque image (originale et la sortie), vous pourrez voir le poids de chaque tranche sélectionnée, l'image en gif fait 14.84 Ko nous allons la réduire à 8 Ko.
http://www.joliespages.com/images/infoban10.gif
Fenêtre optimiser > sélectionner le format GIF.

Fenêtre optimiser > couleurs > cliquer sur les flèches pour réduire ou augmenter la valeur (19 couleurs dans notre exemple).
http://www.joliespages.com/images/ban11.gif
Etape 17 : La sauvegarde
http://www.joliespages.com/images/infoban11.gif
Pour l'instant nous avons une animation qui ne peut être lu que sur ImageReady. En effet le format de ce fichier est en psd, il faut donc absolument le convertir en gif pour qu'il soit lu automatiquement par tous les logiciels de photo.

Pour faire l'exportation nous allons

Fenêtre animation > sélectionner "tranche" > nommer l'image en face de nom : banniereboweb

Pour la sauvegarde en gif :

Menu Fichier > "Enregistrer une copie optimisée sous".

Dans fenêtre "Enregistrer une copie optimisée sous"
- choisissez votre répertoire de sauvegarde.

En face du nom se met automatiquement : banniereboweb.gif
A l'emplacement du type : choisisser image(*.gif)
Cliquer sur enregistrer.
http://www.joliespages.com/images/optimis.gif
Attention, nous avons seulement enregistré l'animation au format gif, pour garder le fichier psd et retravailler dessus, il est important de faire la sauvegarde --> Fichier (menu tout en haut à gauche)> Enregistrer.

Pour voir votre bannière : aller sur l'explorateur, ouvrez le répertoire de votre fichier, cliquer deux fois sur le fichier banniereboweb.gif.

Moi j'ai absolument rien compri et vous ? lol
Revenir en haut Aller en bas
gohan-san
Super Saiyan 3
gohan-san


Nombre de messages : 210
Date d'inscription : 07/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 22:23

Honetement jai rien compris
Revenir en haut Aller en bas
gohan 754
Namecks
gohan 754


Nombre de messages : 36
Date d'inscription : 13/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 22:37

t pas le seul tinkiet lol![/b]
Revenir en haut Aller en bas
gohan-san
Super Saiyan 3
gohan-san


Nombre de messages : 210
Date d'inscription : 07/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 22:43

C'est compliquer quand meme LOl
Revenir en haut Aller en bas
gohan 754
Namecks
gohan 754


Nombre de messages : 36
Date d'inscription : 13/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 22:49

a bon ? lol
Revenir en haut Aller en bas
gohan-san
Super Saiyan 3
gohan-san


Nombre de messages : 210
Date d'inscription : 07/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 22:52

Ben je trouve et toi ?
Revenir en haut Aller en bas
gohan 754
Namecks
gohan 754


Nombre de messages : 36
Date d'inscription : 13/05/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyMer 25 Mai - 23:09

j'ai meme pas le courage de lire alors tu voi ... !
Revenir en haut Aller en bas
topjeux
Rang: Administrateur
topjeux


Nombre de messages : 512
Date d'inscription : 22/02/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyJeu 26 Mai - 5:50

lol moi aussi j'ai pas envie de lire !
Revenir en haut Aller en bas
TUPAC
Super Saiyan 3
TUPAC


Nombre de messages : 173
Localisation : dans mon lit
Date d'inscription : 12/04/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyJeu 26 Mai - 18:47

MDR moi j ai compri là où il y a des image sinon le rest rien ! MDR
Revenir en haut Aller en bas
Gippel
Super Saiyan 3
Gippel


Nombre de messages : 239
Date d'inscription : 11/04/2005

TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] EmptyJeu 26 Mai - 20:59

clair, c est lourd a lire
Revenir en haut Aller en bas
Contenu sponsorisé





TUTO pour l'animer !!! [important!!!] Empty
MessageSujet: Re: TUTO pour l'animer !!! [important!!!]   TUTO pour l'animer !!! [important!!!] Empty

Revenir en haut Aller en bas
 
TUTO pour l'animer !!! [important!!!]
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» tuto pour fond
» [~~Tuto~~] Creer un Ipod
» Encore un tuto (
» [tuto] motifs

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Topjeux & Temple dbz :: GFX -- Graphique :: Tutoriaux-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser