créer une animation photoshop

Créer une animation gif pour son site web

Créer une animation avec Photoshop

Créer une animation, mais qu’est ce donc que cela et à quoi donc ça va me servir ?

Sur un site web, et spécialement sur sa page d’accueil, ce qu’on va rechercher c’est un effet wahoo. Un effet qui va nous permettre de capter l’attention de notre utilisateur et pour cela, rien de mieux que du mouvement !

créer une animation photoshop

Le mouvement on peut l’obtenir avec une vidéo en page d’accueil, par exemple pour les sites “Les rêves de Naf“, “Nantucket cap ferret” ou encore “Coprénov”

C’est surtout cet effet boucle qui est important dans le fait de créer une animation car il permet de conserver l’attention de l’utilisateur plus longtemps. Au delà de la vidéo car on n’a pas tous un drone sur la main pour faire de superbes plans en HD, on peut aussi se tourner vers la création d’une animation pour capter l’attention de nos potentiels prospects, lecteurs, ou autres utilisateurs de notre site.

Jouer sur le désir de l'utilisateur de voir la fin

Créer une animation c’est jouer sur le désir de l’utilisateur de voir la fin. L’animation va se former sous les yeux de vos auditeurs, le but étant de piquer leur curiosité pour qu’ils aient envie de voir la fin de l’animation : l’image au complet. On va voir ensemble comment créer rapidement et facilement une animation à intégrer sur votre site, sur vos réseaux ou même en fond d’écran si vraiment vous voulez la voir tous les jours, c’est à vous de voir.

Personnellement, les tutoriels j’aime bien les voir une fois en vidéos puis de manière écrite pour pouvoir revenir rapidement sur les points que j’aurais manqué.

Un tutoriel, c’est aussi une recette de cuisine, seul deux choses compte :

  • Les ingrédients
  • Les étapes

Que nous faut-il pour réussir ce tutoriel ?

Les ingrédients

  • Photoshop (que vous pouvez obtenir juste ici pour un prix très compétitif)
  • Un ordinateur (évidemment) ou une tablette
  • Une image (à animer)

Les étapes pour créer une animation

  • Lancer Photoshop
  • Créer un nouveau fichier (en fonction de la taille de l’image que vous souhaitez animer)
  • Fichier “importer et incorporer” l’image que vous souhaitez animer
  • Recadrer l’image à votre convenance
  • Clic droit sur votre image pour “pixeliser l’image“. Cela va vous permettre de pouvoir y apporter des modifications
  • Clic droit sur le calque contenant votre image et choisissez “Dupliquer le calque“. On va avoir besoin de dupliquer ce calque de nombreuses fois donc on préférera utiliser le raccourcis ctrl+j
  • Camoufler le calque que l’on vient de dupliquer (en cliquant sur l’œil)
  • Tout en haut, on va chercher l’onglet “fenêtre” puis dans ce même ongle “montage” qui va nous ouvrir l’outil d’animation d’images. On clique sur “créer une animation d’image

La c’est bon, on est prêt pour commencer, notre matériel est prêt. Il n’y a qu’un seul outil que l’on va utiliser (hormis la patience) pour concevoir notre montage : Notre fidèle gomme. Pour le reste, c’est très répétitif, il faut juste comprendre la logique de l’affichage de notre animation. C’est à dire ? Notre image, c’est la fin de notre animation, le dernier calque visible. Pour obtenir ce dernier calque, il va falloir effacer pas à pas notre image. Réfléchissez en sens inverse : si vous souhaitez animer un mot comme WEB, le but va être de donner à l’animation un effet d’écriture, comme si le mot était en train de s’écrire sous nos yeux. Pour cela on va effacer la fin du B, le début du B, la fin du E, le début du E et ainsi de suite pour que le mot s’écrive comme si il était écrit à la main.

  • On duplique notre calque
  • On camoufle le calque que l’on vient de dupliquer
  • On se place sur la copie du calque
  • On efface avec notre gomme la partie que l’on considère comme la partie finale de notre image.
  • On duplique notre calque (CTRL+j)
  • On camoufle le calque que l’on vient de dupliquer
  • On se place sur la copie du calque
  • On efface un morceau
  • On repète l’opération jusqu’à obtenir une feuille blanche (après avoir effacer l’entièreté de l’image, ou du moins, ce que l’on souhaitait animer).

Dernière étape : ajouter tous nos calques un à un à l’outil d’animation. Maintenant qu’on a bien tous nos calques, on va pouvoir les ajouter à notre outil pour pouvoir créer notre animation.

  • On s’assure que l’on a qu’un seul calque de visible
  • On se place sur notre outil d’animation
  • On clique sur “+”
  • Cela va ajouter le seul calque visible
  • On rend visible le deuxième calque (en partant du haut)
  • On clique sur “+” sur notre outil d’animation
  • Et rebelote, on répète l’opération jusqu’à obtenir tous nos calques visibles et ajoutés un à un sur notre outil d’animation.

Depuis notre outil de montage on peux choisir le temps d’apparition de chaque calque, si on le laisse, par défaut, sur 0 seconds, l’animation sera davantage rapide, donc fluide. On peut néanmoins choisir de faire apparaître le dernier calque (l’image entière) un peu plus longtemps que le reste des calques.

Il ne nous reste plus que la dernière étape si notre animation nous convient : exporter notre animation.

  • fichier (en haut à droite)
  • exportation
  • enregistrer pour le web
  • assurez-vous que les paramètres sont bien définis au format “gif”
  • Visionnez votre animation
  • Intégrez la où bon vous semble !!

 

Le final

Profitez de votre animation et affichez la fièrement sur votre site web 🙂 !

créer une animation photoshop

Animation réalisée pour la page d’accueil de l’association DisDameDonc.

Animation réalisée pour la page de contact de l’architecte Vincent Le Pendeven.

créer une animation gif photoshop

Vous existez, montrez le !

Conclusion :

En conclusion, un site web c’est un véritable terrain de jeu pour les petits artistes plein de créativités que vous êtes. Amusez-vous et cela se ressentira lorsque l’on visitera votre site. Internet propose des milliers de sites web monotone, ne suivez pas cette voix si vous souhaitez sortir du lot et maximiser vos leads et vos visites ! Photoshop c’est certes un coût mais c’est aussi un outil inégalé pour vous accompagner dans la création. Création de logo, animation, incrustation, retouche photo, allez au bout de vos ambitions avec un site à la hauteur de vos espérances.

Profitez également des tarifs proposés par Amazon sur le pack Photoshop + Lightroom pour faire des économies !

À lire également

référencement site web
Référencement

5 façons de référencer son site web

Malgré l’influence toujours grandissante des réseaux sociaux, le site web a toujours sa place de choix en 2024. Votre petit guide pour comprendre tous les points clés qui font du site internet un allié puissant à travers les années et un outil immanquable.

Lire
référencement natuel, blog
Outil pour créer son site

Le blog : une masterclasse pour référencer son site

Malgré l’influence toujours grandissante des réseaux sociaux, le site web a toujours sa place de choix en 2024. Votre petit guide pour comprendre tous les points clés qui font du site internet un allié puissant à travers les années et un outil immanquable.

Lire
choisir son hébergement web
Hébergement web

Choisir son hebergement web

Malgré l’influence toujours grandissante des réseaux sociaux, le site web a toujours sa place de choix en 2024. Votre petit guide pour comprendre tous les points clés qui font du site internet un allié puissant à travers les années et un outil immanquable.

Lire