Comment créer un logo animé qui tourne dans Photoshop

Bien fait, un logo animé attire l'attention des visiteurs de votre site et les incite à explorer la page. Le panneau Calques, l'outil Transformation et le panneau Chronologie de Photoshop travaillent ensemble pour créer des GIF animés à ajouter à toute page web. Vous pouvez faire tourner votre logo dans le sens horaire ou anti-horaire.

Étape 1

Ouvrez le fichier image du logo. Utilisez n'importe quel format, mais si le fichier est un PSD multicouche, fusionnez les calques.

Étape 2

Créez un canevas assez grand pour contenir complètement le logo à faire pivoter. Par exemple, si votre logo fait 300 px de large et 200 px de haut, cliquez « Fichier », « Nouveau » et définissez hauteur et largeur supérieures à 300 px. Choisissez un arrière-plan uni qui s'accorde avec votre logo et votre site. Par exemple, si le logo est sur fond blanc, choisissez « Blanc » pour « Contenu de l'arrière-plan ».

Étape 3

Donnez un nom au nouveau fichier et cliquez « OK » pour ajouter le canevas vierge.

Étape 4

Cliquez sur le menu « Fenêtre » puis sélectionnez la fenêtre contenant le logo.

Étape 5

Appuyez sur « Ctrl+A » pour sélectionner toute l'image, puis « Ctrl+C » pour la copier dans le presse-papiers.

Étape 6

Cliquez sur le menu « Fenêtre » puis sélectionnez la fenêtre contenant le canevas vierge créé pour accueillir le logo.

Étape 7

Appuyez sur « Ctrl+V » pour coller le logo dans le canevas vierge.

Étape 8

Appuyez sur « Ctrl+E » pour fusionner l'image collée dans l'image d'arrière-plan, ne laissant qu'un seul calque au lieu de deux.

Étape 9

Créez trois duplicatas du calque actuel. Menu « Calques », « Dupliquer le calque », puis « OK » pour créer chaque nouveau calque contenant une copie de l'image fusionnée originale. Photoshop nomme les calques automatiquement.

Étape 10

Sélectionnez le premier calque en partant du haut du panneau Calques, menu « Édition », « Transformation », puis « Rotation 90° dans le sens horaire ».

Étape 11

Sélectionnez le deuxième calque, menu « Édition », « Transformation », puis « Rotation 180° ».

Étape 12

Sélectionnez le troisième calque, menu « Édition », « Transformation », puis « Rotation 90° dans le sens anti-horaire ». Enregistrez votre travail.

Étape 13

Menu « Fenêtre », « Chronologie », puis cliquez sur le bouton « Créer une chronologie vidéo » pour ajouter le panneau Chronologie à votre projet. Le panneau contient les quatre calques du logo. Si vous n'en voyez que trois, déverrouillez le calque d'origine.

Étape 14

Réduisez le temps d'affichage de chaque calque en définissant sa durée à 5 images. Cliquez-maintenez sur le bord droit de chaque calque dans la chronologie et tirez vers la gauche jusqu'à ce que « Durée » affiche « 00.05 ». Moins d'images = animation plus rapide.

Étape 15

Laissez le calque du bas à sa place. Cliquez-maintenez sur le centre du calque juste au-dessus du calque du bas dans la chronologie et déplacez-le vers la droite jusqu'à ce que son côté gauche s'aligne avec le bord droit du calque du bas. Si le calque se redimensionne au lieu de bouger, appuyez « Ctrl+Z » et réessayez.

Étape 16

Cliquez-maintenez sur le deuxième calque au-dessus du bas et déplacez-le vers la droite jusqu'à ce que son côté gauche s'aligne avec le bord droit du calque sous-jacent.

Étape 17

Cliquez-maintenez sur le calque du haut dans la chronologie et déplacez-le vers la droite jusqu'à ce que son côté gauche s'aligne avec le bord droit du calque sous-jacent.

Étape 18

Appuyez sur le bouton « Lecture » pour prévisualiser l'animation.

Étape 19

Cliquez « Fichier » puis « Enregistrer pour le web ».

Étape 20

Cliquez sur la liste déroulante « Options de boucle » et sélectionnez « Toujours » pour générer un logo animé qui ne s'arrête jamais de tourner.

Étape 21

Cliquez « Enregistrer » puis « Enregistrer » dans la boîte de dialogue « Enregistrer l'optimisé sous ». Pour voir l'animation, ouvrez le fichier GIF créé avec votre navigateur web.

Astuce

Pour une rotation plus fluide, ajoutez des calques supplémentaires avec de plus petits incréments de rotation entre les images.

Avertissement

Ces instructions s'appliquent à Photoshop CC 14.2.1. Elles peuvent varier légèrement ou significativement avec d'autres versions.