Vous n’avez pas besoin d’une maîtrise en animation graphique ou en animation informatique pour créer de simples GIF animés. Si vous connaissez Adobe Illustrator et Adobe Photoshop et avez accès à vecteurs de stock de haute qualité– alors vous êtes beaucoup plus proche de la création d’animations qui valent la peine de se vanter. Dans ce didacticiel, nous allons vous montrer comment prendre des graphiques vectoriels et les transformer en de délicieux GIF animés qui impressionneront à coup sûr.
Nous commencerons par utiliser un vecteur libre de droits de notre bibliothèque de membres. Recherchez des vecteurs qui demandent de l’animation et du mouvement. Peut-être qu’il y a une pomme qui pourrait avoir l’air adorable avec un petit mouvement d’agitation. Ou un vaisseau spatial qui meurt d’envie de prendre son envol. N’oubliez pas que, puisque nous pouvons facilement isoler chaque élément, vous pouvez également consulter des packs d’icônes et des compositions vectorielles. Une fois que vous avez trouvé votre ajustement parfait, téléchargez le fichier .eps pour commencer à éditer vos vecteurs dans Illustrator et à animer vos vecteurs dans Photoshop.
Nous avons choisi de commencer par cela collection d’icônes plates colorées de référencement et de développement et d’ajouter des animations subtiles et simples comme des éléments légèrement rebondissants et une simple ouverture de l’enveloppe. Si vous souhaitez suivre le didacticiel, téléchargez simplement le vecteur, il est déjà inclus dans votre abonnement. Découvrez notre produit final ci-dessous.
Étape 1 : Isoler le vecteur
Ouvrez le fichier .eps dans Illustrator et cliquez sur l’icône que vous souhaitez animer. Copie (CMD + C) et coller (CMD + V ) dans un nouveau fichier d’illustrateur. Notre nouveau fichier est dimensionné à 200px x 200px.
Supprimez tous les éléments supplémentaires que vous ne souhaitez pas inclure. Nous avons évincé les mots « Campagne numérique ».
Étape 2 : dupliquer le vecteur
Entrez votre outil de plan de travail (Maj + O) – en vous assurant que votre « Déplacer/copier une illustration avec un plan de travail » L’option située à droite du nom de votre plan de travail est activée et dupliquez le plan de travail en maintenant les touches Alt et Maj enfoncées tout en cliquant et en faisant glisser la duplication vers la droite.
Considérez ces duplications comme les images de votre animation. Chaque image sera légèrement différente de l’autre, indiquant éventuellement un mouvement.
Étape 3 : Apportez des modifications subtiles d’une image à l’autre
Pour accélérer le processus, dissociez vos éléments jusqu’à ce qu’ils ne soient regroupés qu’au sein de chaque objet. La boîte de discussion n’est regroupée qu’avec la boîte de discussion, l’enveloppe n’est regroupée qu’avec l’enveloppe, etc. Cette icône particulière n’a nécessité que deux dégroupages.
Ensuite, commencez à apporter des modifications subtiles à chaque élément. Nous avons poussé la boîte de discussion vers le haut de pixels, le bouton de lecture vidéo vers la droite de 2 pixels et avons également utilisé l’outil de sélection directe (A) pour réduire le point de l’enveloppe de 2 pixels.
Étape 4 : laver, rincer, répéter
Dupliquez simplement le nouveau plan de travail et apportez les mêmes modifications qu’auparavant. Répétez cette étape plusieurs fois jusqu’à ce que vous ayez atteint la gamme complète de mouvements que vous désirez. Comme vous pouvez le voir, nous nous sommes retrouvés avec une grande quantité de plans de travail.
Nous sommes maintenant prêts à animer les plans de travail dans Photoshop !
Étape 5 : copiez les vecteurs dans Photoshop
Maintenant que vos vecteurs sont prêts, il est temps d’apprendre à animer vos vecteurs dans Photoshop. Commencez par créer un nouveau document Photoshop. Nous avons créé la taille du fichier 200px x 200px (identique à nos plans de travail Illustrator), avec la couleur RVB et 72 dpi car cela sera utilisé pour le Web. Maintenant, copiez et collez chaque icône de chaque plan de travail sur un calque séparé en tant qu’objet intelligent pour maintenir sa qualité.
Répétez jusqu’à ce que tous les éléments du plan de travail soient sur leur propre calque séparé en vous assurant qu’ils sont copiés séquentiellement et que chaque élément qui ne bouge pas est parfaitement aligné les uns avec les autres.
Étape 6 : Dupliquez les calques dans une chronologie
Ouvrez le panneau Chronologie dans le menu déroulant Fenêtre.
Dans le menu déroulant des options du panneau Chronologie, choisissez « Créer des cadres à partir de calques. « Maintenant, chaque calque d’objet intelligent que vous avez déposé dans Photoshop remplira votre période en tant qu’images individuelles.
Si vous appuyez sur play, vous verrez qu’il joue une fois et ne se déplace que jusqu’à la plage que vous avez dictée. Si vous voulez qu’il boucle indéfiniment, il y a quelques étapes supplémentaires.
Étape 7 : Copiez et inversez les cadres
Faire bouger les mouvements d’avant en arrière est simple, mais un peu fastidieux. Sélectionnez toutes les images de votre chronologie et cliquez sur le bouton papier avec le coin plié pour les dupliquer. Cela vous donne deux fois plus d’images.
Pour que l’animation ne saute pas au début, commencez par glisser-déposer la seconde moitié des images dans le bon ordre. Faites glisser l’image 28 pour aller après 14, puis après 15, puis après 16, et ainsi de suite.
Ensuite, choisissez d’avoir la boucle d’animation « Pour toujours. «
Étape 8 : Exporter au format GIF
Maintenant que votre animation est terminée, vous souhaiterez l’exporter au format GIF. Aller à Fichier > Exporter > Enregistrer pour le Web et choisissez le préréglage « GIF 32 tramé” et décochez Transparence.
Cliquez sur Enregistrer puis voila ! Vous avez un GIF animé.
Maintenant, vous avez un GIF animé que vous pouvez intégrer dans vos articles de blog ou afficher sur votre site Web ou vos bannières publicitaires, et ce n’était pas si difficile. La beauté est que vous pouvez reproduire cette technique encore et encore avec autant de vecteurs que vous le souhaitez.
Vous pensez avoir ce qu’il faut pour impressionner Internet avec vos pouvoirs GIF magiques ?
