Les jolies pages du web, les plus beaux sites du web
classement des plus beaux sitesles plus beaux sites du webAccueil joliespagesRecherche de sitesforum joliespagesNewsletter Joliespagescontact joliespagesles plus beaux sites du webclassement des plus beaux sites
classement des plus beaux sites
Google
 
Recherche sur le Web Recherche sur Joliespages
classement des plus beaux sites
logo joliespages
Joliespages
joliespages
Annuaire de joliespagesAnnuaire par catégories
moteur de rechercheMoteur de recherche
Les derniers sites inscrits sur Joliespages - www.joliespages.comLes derniers inscrits
Les premiers sites inscrits sur JoliespagesLes premiers inscrits
Les concepteurs qui ont référencés le plus de créations sur JoliespagesLes concepteurs
Les sites qui ont un nouveau look sur JoliespagesLes relookages
Tous les sites aux couleurs dominantes bleues référencés sur joliespages.comLes couleurs BLEUES
Tous les sites aux couleurs dominantes vertes  sur joliespages.comLes couleurs VERTES
Tous les sites aux couleurs dominantes marronLes couleurs ROUGES
Tous les sites aux couleurs dominantes marronLes couleurs MARRON
Tous les sites aux couleurs dominantes rosesLes couleurs ROSES
Tous les sites aux couleurs dominantes jaunesLes couleurs JAUNES
Tous les sites aux couleurs dominantes orange référencés sur joliespagesLes couleurs ORANGE
Tous les sites aux couleurs dominantes violettes sur joliespages.comLes couleurs VIOLETTES
Tous les sites aux couleurs dominantes blanches sur Joliespages.comLes couleurs BLANCHES
Tous les sites aux couleurs dominantes noires sur Joliespages.comLes couleurs NOIRES
Tous les sites aux couleurs dominantes grisesLes couleurs GRISES
Tous les sites aux couleurs dominantes multiples sur JoliespagesLes couleurs MULTIPLES
couleurs multiplesSite en Français  Site en Anglais  Site en Allemand  Site en Espangol  Site en Italien  Autre  

Membres
Accès membresAccès membres
Devenir membreProposer un site

Photoshop 6
copyBannière animée
copyChanger les couleurs
copyCopyright sur photo
trancheDécoupe des images
fusionFusion des calques liés
gommer par dégradéGommer par dégradé
Gommer sans abîmerGommer sans abîmer
associer deux photos dans une formePhotos dans un cercle
associer deux photos dans une formeScripts
les plus beaux sites web
Tuto
Les tutoriaux référencés sur Joliespages pour lPhotoshop/ImageReady
Les tutoriaux Illustrator référencés sur JoliespagesIllustrator
Les tutoriaux référencés sur Joliespages pour lInDesign
Les tutoriaux référencés sur Joliespages pour lFlash
Les tutoriaux référencés sur Joliespages pour lAfter effects
Les tutoriaux référencés sur Joliespages pour lThe GIMP
Les tutoriaux référencés sur Joliespages pour lPainter
Les tutoriaux ArtRage référencés sur Joliespages ArtRage
Les tutoriaux 3DS Max référencés sur Joliespages3DS Max
Les tutoriaux Php et MySQL qui sont référencés sur Joliespages.Php - MySQL
Les tutoriaux Illustrator qui sont référencés sur Joliespages.CSS
Les tutoriaux Illustrator qui sont référencés sur Joliespages.HTML
Javascript
Tutoriaux divers

tutoriauxRecherche tutoriaux
tutoriauxProposer un tutorial

Dossiers
cahier des chargesCahier des charges
copyrightCopyright
référencementRéférencement
balises METABalises <META>
iso 8859-1Norme ISO 8859-1

Astuces
codes couleursAvoir les codes RVB
Mettre une photo ou image dans une celluleCellules papier peint
infobulle imageInfobulle sur image
quiz phpPetit quiz en PHP
redirection de pageRedirection de Page
redirection de pageVisionneuse

Joliespages
Forum de joliespagesForum
Newsletter de joliespagesNewsletter
ContactContact
Faire un lienFaire un lien
Recommander ce siteRecommander ce site

Partenaires
partenairesTous les partenaires
partenairesTabs 4 acoustic
partenairesAnnuaire des Gites
partenairesGraphilab
partenairesGT Liens
partenairesLes Entreprenautes
partenairesWeb-Arts-Gallery
partenairesJN-Forum
partenairesCreation-Flash
partenairesPsdmag
partenairesreferencement-fr
partenairesHorslimite.net
partenairesMyphphost.net
partenairesEgao
partenairesEspricrea
partenairesELODIE FREGE
partenairesBoobup
partenairesMincoin
partenairesAtoutsweb
partenaireshorslimite.net
partenairesNotoOn.com
partenairesTurquie Aras
partenairesMa Maison de A a Z
partenairesAilleur Production
partenairesCreation-Flash
partenairesPicture & co
partenairesImplisite
partenairesScience-et-vie.net
menu

photoshop  
bannièreFaire sa bannière publicitaire
Pour la réalisation de notre bannière nous allons travailler sous ImageReady. Ce tutorial est pour un public débutant/avancé, il est délimité par des étapes.

Temps de réalisation : 15 minutes pour les habitués, 30 minutes pour les débutants.

 gif animé Créer un gif animé
faire un gif animéDans notre exemple nous allons créer une bannière publicitaire, vous pourrez faire la vôtre après vous être exercé sur ce tutorial.

-   Etape  1 : Télécharger le fichier psd
-   Etape  2 : Ouvrir ImageReady
-   Etape  3 : Ouvrir le fichier banniere1.psd et cacher certains calques
-   Etape  4 : Présentation de la fenêtre animation
-   Etape  5 : Dupliquer une image dans l'animation
-   Etape  6 : Modifier le contenu de la scène
-   Etape  7 : Dupliquer une image
-   Etape  8 : Préparer la première image clé pour l'effet du déplacement
-   Etape  9 : Préparer la première image clé pour l'effet de la transparence
-   Etape 10 : Création de nouvelles images entre les deux images clés
-   Etape 11 : Faire apparaître une nouvelle image
-   Etape 12 : Lire l'animation sous ImageReady
-   Etape 13 : Définir le temps en seconde pour une image
-   Etape 14 : Définir le temps en seconde pour plusieurs images
-   Etape 15 : Définir le nombre de lecture en boucle
-   Etape 16 : Optimiser l'image
-   Etape 17 : Faire la sauvegarde

  Etape 1 : Télécharger le fichier psd
imageready et photoshopPour réaliser l'exemple ci-dessous et appliquer les explications directement dessus, vous pouvez télécharger le fichier en deux formats :
- fichier psd photoshop banniere1.psd 100 Ko,
- ou le fichier compressé banniere1.zip 42 Ko, il faut utiliser winzip pour le décompresser.

bannière pubicitaire

  Etape 2 : Ouvrir ImageReady
fichier psdPour faire les animations nous devons travailler sur ImageReady, vous pouvez ouvrir directement ce programme.
ImageReady est présenté de façon identique à photoshop, Il sert beaucoup plus pour faire les gifs animés, les découpes des images, les boutons...

Si vous préférez passer par photoshop et faire un transfert sur ImageReady, vous devez cliquer sur la dernière icône de la barre d'outil de photoshop : passer à ImageReady go ImageReady. ImageReady s'ouvrira automatiquement.

  Etape 3 : Ouvrir le fichier banniere1.psd et cacher certains calques
calque

calque
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
faire son gif animé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".

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".


 
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.

  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.

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".

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.

  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.

Pour faire l'effet du déplacement de la droite vers la gauche :
Prendre l'outil déplacement déplacement cliquer sur l'image "bulle", appuyer simultanément sur la touche SHIFT de votre clavier (le déplacement sera précis), et sans relâcher déplacer vers la droite comme sur l'exemple.

  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.

Ce qui donne :

  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 :


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 :

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.

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..."


 
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

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

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.


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 : Définir le temps en seconde pour plusieurs images

 
Nous allons maintenant demander à régler le temps pour plusieurs vignettes en même temps.

Fenêtre animation > cliquer sur la vignette n°2 > appuyer simultanément sur la touche SHIFT de votre clavier et sans relâcher > cliquer sur la vignette n°4 = sélection des vignettes n°2, 3 et 4.

Fenêtre animation > vignettes n°2, 3 et 4 > cliquer dessous, sous n'importe quelle des fenêtres ainsi sélectionnées, sur 0 sec > un menu apparaît avec une série de temps en seconde > cliquer sur 0.1 seconde > les images apparaîtront pendant 0.1 seconde dans l'animation.

Fenêtre animation > cliquer sur la vignette n°5 > appuyer simultanément sur la touche SHIFT de votre clavier et sans relâcher > cliquer sur la vignette n°6 = sélection des vignettes n°5 et 6.

Fenêtre animation > vignettes n°5 et 6 > cliquer dessous, sous n'importe quelle des fenêtres ainsi sélectionnées, sur 0 sec > un menu apparaît avec une série de temps en seconde > cliquer sur autre.

La fenêtre "Définir le délai de l'image" s'ouvre.

Saisissez "1.5" secondes, les images apparaîtront pendant 1.5 secondes dans l'animation.

  Etape 15 : Définir le nombre de lecture en boucle
Il est également possible de définir le nombre de fois que nous désirons voir l'animation défiler. Effectivement pour une bannière il est plus judicieux qu'elle soit en boucle, mais pour d'autres utilisations nous pouvons aussi décider de ne faire la lecture qu'une seule fois, ou même plus...


 
Fenêtre animation > cliquer sous la vignette n°1 et sélectionner "toujours" comme sur l'exemple, normalement elle doit déjà être sur "toujours" c'est l'option par défault.

  Etape 16 : 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.

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.

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).

L'image fait maintenant 8.96 Ko.

  Etape 17 : La sauvegarde

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.

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.

  Votre avis
Pour voter cliquer juste devant votre choix :

Gif animé par joliespages
Comment avez-vous trouvé ce tutorial ?
Facile
Moyen
Difficile

Si vous avez des questions ou que vous vouliez discuter de Photoshop utiliser le forum de joliespages dans le coin Photoshop :).

Copyright 2002-2010© www.joliespages.com       Cnil : 833650             webmaster

Mise à jour régulière - 1 connecté