L'art des icônes animées : concevoir et animer avec Adobe Photoshop et Illustrator

1. Introduction : l'art des icônes animées: Bonjour et bienvenue dans The Art of Animated Icones, concevez et animez avec Photoshop et Illustrator Je suis Cynthia Oswald, artiste designer et fondatrice d' une agence de marque florissante . J'ai l'expérience du design de communication et de l'expérience en tant que professeur universitaire J'ai combiné mon amour pour la créativité et l'enseignement pour vous proposer ce cours complet Nous allons nous plonger dans le riche monde de l'animation d'icônes dans Art Forum. Je pratique professionnellement depuis des années Que vous soyez un designer chevronné ou un débutant dans le domaine, ce cours vise à vous inspirer, responsabiliser et à vous doter des compétences applicables dans le paysage numérique d'aujourd'hui. Mais la particularité de l' animation des icônes et de leur numérisation le mouvement du monde est essentiel à l' Imaginez que vous ajoutiez des icônes animées à votre package de marque ou à vos campagnes par e-mail. C'est une façon créative de donner vie à votre design et de communiquer avec votre public. L'avantage, c'est que vous n' avez pas besoin de logiciels spécialisés. Nous utiliserons les normes du secteur, Adobe Photoshop et Illustrator avant de commencer Voici un bref aperçu de ce dont vous aurez besoin Compréhension de base d' Adobe Photoshop et d'Adobe Illustrator. Les deux plateformes sont installées sur votre ordinateur, un carnet de croquis. Prenez donc vos stylos et blocs-notes numériques , car juste après cela, nous nous lancerons directement dans un projet de classe passionnant Vous pourrez concevoir et animer votre propre icône, combinant les éléments du design et du mouvement pour créer quelque chose de vraiment spectaculaire J'ai hâte de voir la créativité que vous apporterez à la table. Commençons. 2. Le projet Class : icône animée: Bienvenue dans notre cours l'animation d'icônes avec Photoshop et Illustrator. aujourd'hui est particulièrement excitante, car nous nous lançons dans un projet de classe transformateur Vous allez concevoir et animer votre propre icône unique, que ce soit pour une marque, une idée ou une expression créative À l'aide de la combinaison magique d' Adobe Illustrator et de Photoshop, choisissez ce projet pour acquérir une expérience pratique avec les mêmes outils professionnels que moi Cette expérience vous permettra de créer du contenu pour diverses plateformes, soit par e-mail, sur des sites Web ou sur les réseaux sociaux. Avant de vous lancer, j'ai quelques conseils essentiels à vous donner. Réfléchissez à l'endroit où vous comptez utiliser cette icône afin de sélectionner la taille et le format appropriés. Optez pour des transitions fluides et visuellement attrayantes. Mais n'oubliez pas non plus d'insuffler votre travail un style et une touche uniques En termes d'étapes, commencez par choisir un thème qui vous correspond personnellement Concevez votre icône et Illustrator en portant une attention particulière à la forme, à la couleur et à l'alignement. Alors insufflons-lui de la vie en l'animant dans Photoshop N'ayez pas peur d' expérimenter et de faire preuve d'un peu créativité avec les techniques d'animation dont nous avons parlé. Une fois que vous êtes satisfait de votre création, exportez-la sous forme de fichier GIF ou vidéo. Partagez-le dans notre galerie de projets avec une brève description de votre concept et du processus que vous avez suivi. En participant. Vous ne vous contentez pas de soumettre un projet, vous acquérez une expérience précieuse, enrichissez votre portfolio et vous élargissez votre réseau créatif grâce à des interactions avec vos pairs Alors, prenez vos outils de conception , donnez libre cours à votre créativité et embarquons ensemble dans ce voyage remarquable . Bonne animation 3. Dessiner et créer une icône d'illustrateur: Bon retour. Ce cours vise à faire passer votre icône d'une simple idée à un design dynamique dans Illustrator Passons à la vitesse supérieure en matière de créativité. Chaque chef-d'œuvre commence par l'inspiration. Vous aimez la nature, la technologie, l'ambiance vintage Votre thème ou concept prépare le terrain pour votre design. Pensez à une idée qui trouve un écho lorsqu'elle devient votre boussole Pour créer une icône puissante, vous devez comprendre certains principes de conception fondamentaux Équilibre, contraste, alignement. Ce ne sont pas que des mots , vos outils. Lorsqu'ils sont bien compris, ils font passer votre design de bon à époustouflant. Donc, si quelque chose ne va pas, réfléchissez à la façon dont vous pourriez l'ajuster ou mieux réfléchir en fonction de la hiérarchie, du contraste et de la répétition. Nous sommes la cohérence, la proximité, l'équilibre, l'espace colorimétrique et le mouvement ou le flux global. Maintenant, dessinons. N'oubliez pas de formuler autant d'idées que possible. Plusieurs croquis vous donnent un certain nombre de concepts parmi lesquels choisir. J'adore cette citation de Louise Fili que j'ai lue récemment. L'esquisse est l' âme d'un design. Une bonne esquisse peut être belle ou non, selon la qualité de la finition. Eh bien, je ne vais pas vous parler de mon processus d'esquisse dans ce cours. Je tiens à souligner l'importance cette étape jouera dans le résultat final. Il est temps de numériser, choisir quelques croquis que vous aimez et de commencer à les tracer et à les itérer dans Adobe Illustrator. Vous serez peut-être surpris de voir comment un trait de crayon grossier se transforme en une courbe numérique nette. J'ai quelques conseils à vous donner pour vectoriser vos croquis. Tout d'abord, si vous avez un iPad à portée de main, vous pouvez envisager de le redessiner dans Adobe Illustrator ou même de procréer à l'aide de votre Si c'est quelque chose que vous avez l'habitude d' utiliser dans le cadre de votre pratique. J'ai essayé, mais j'ai finalement décidé de repartir à zéro et d'utiliser Adobe Illustrator sur mon ordinateur à l'aide de l'outil Pen. Et c'est parce que je voulais un design polonais que je pourrais transmettre une police de caractère, sans nécessairement avoir l'air dessiné à la main, mais que l'un ou l'autre puisse fonctionner Il est important de noter que vous pouvez exécuter cette classe sans vectoriser J'utilise un logo que je suis en train de développer qui dit : utilisez ce que vous souhaitez créer. Si vous décidez de suivre la voie typographique, vous voudrez peut-être suivre des cours de type avancés avant de commencer. Voici quelques-uns de mes conseils préférés pour vous aider à démarrer. Tout d'abord, restez simple. Moins il y a de points, mieux c'est. Chaque courbe ne doit comporter qu' un seul point et les points d'ancrage ne doivent pas dépasser le point précédent ou le point suivant J'enfreint les règles parfois lorsque je crée, puis je les résous une fois que j'ai terminé. L'utilisation de règles vous aidera à rester sur la bonne voie. Parfois, je n' active les règles qu'après avoir retracé mon dessin Vérifiez que les épaisseurs les plus grandes et les plus petites restent les mêmes pour des raisons de cohérence J'utilise souvent des blocs de couleurs différentes sur une couche séparée pour vérifier l'épaisseur des lettres Je recommande de faire des recherches sur les polices Serifs sans serif, end script pour comprendre certaines règles de base avant de commencer Par exemple, les lettres incurvées telles que Oh and see s'étendent souvent au-delà de la hauteur X. Et la hauteur du x est la hauteur du X minuscule. Avant de revenir à la conception de l'icône, je voudrais simplement vous présenter quelques outils que j' utilise principalement au cours Je trace mon croquis à l'aide de l'outil stylo et vous pouvez l'afficher en tapant P sur votre clavier. Lorsque l'outil stylo est sélectionné, vous pouvez dessiner à l'aide de points et créer des courbes en cliquant et en faisant glisser le pointeur. Lorsque vous créez un point pour sélectionner et modifier un point spécifique, vous pouvez utiliser l'outil de sélection directe ou taper a pour saisir l'objet dans son intégralité Utilisez l'outil de sélection ou tapez V. Enfin, pour modifier les points d'ancrage, ce sont les courbes, vos points Vous pouvez maintenir l' outil stylo enfoncé dans la barre d'outils et le point d'ancrage s' affichera ci-dessous, ou vous pouvez taper Shift plus C. Maintenant que j'ai la partie principale de mon design d'icône, je souhaite créer des éléments illustrant la croissance autour de la lettre. Je vais utiliser l'outil stylo pour créer des traits pour les lignes représentant les tiges, puis créer des formes ou des objets l'aide de l'outil stylo pour les feuilles et la fleur. Pendant que je travaille, je vais zoomer et dézoomer le design pour voir comment il fonctionne dans plusieurs tailles. Cela permet de mettre en lumière tout ce qui peut sembler déséquilibré Je pense également qu'il est important de prévoir du temps pour travailler sur cette partie. Une fois que vous l'aurez transféré dans Photoshop, vous voudrez qu'il soit poli afin de ne pas avoir à revenir en arrière. J'ai décidé d' arrondir le capuchon de mes traits , étant donné que les tiges sont généralement plus arrondies par nature Je voulais avoir cette sensation organique. Je voulais également séparer chaque élément à des fins d'animation. Ainsi, au lieu de fixer chaque tige, je clique sur le dessin intermédiaire en basculant entre l' outil stylo et l'outil Lorsque je souhaite créer une nouvelle forme ou ligne, il me suffit d'appuyer sur V, puis nouveau sur P pour créer une nouvelle ligne ou une nouvelle forme. Cela garantit que chaque élément est autonome et nous rendrons l'animation plus fluide et plus intéressante dans le résultat final. Vous pouvez également commencer à organiser par couches, si vous préférez. Mais j'ai suivi ce processus plus tard, alors que je préparais le fichier pour Photoshop Vous remarquerez également que je n'ai dessiné qu'une seule feuille, et c'est parce que je finis par les dupliquer en sélectionnant la feuille et l' option sur le clavier , puis en la faisant glisser vers le nouvel emplacement, cela la dupliquera automatiquement Vous pouvez également facilement retourner une feuille en sélectionnant l'objet, transformer refléter dans la barre de menu supérieure et j'utilise la transformation verticale. Un dernier conseil d'illustration à noter est la façon dont je travaille en utilisant des traits pour créer les formes. Mais une fois qu'ils sont terminés, entourez la forme du début à la fin avec l'outil Stylo Je permute ensuite le trait pour le remplir en tapant Shift X sur le clavier ou en utilisant les erreurs de permutation dans la barre d'outils. Gardez à l'esprit que je sais que je veux animer ceci et que je vais y réfléchir lors la conception de l'illustration À quoi cela pourrait-il ressembler en mouvement ? Quelles parties du fichier original dois-je conserver ? Vous remarquerez que je copie et colle mon travail tout au long du processus. C'est ainsi que j'ai un historique de chaque version au cas où je n'aimerais pas la direction qu'elle prend et que j'ai fait marche arrière J'ai également enregistré mon fichier tout au long du processus de conception en sélectionnant simplement la commande S sur mon clavier. J'ai certains éléments que j'aimerais répartir uniformément une fois que je les ai généralement là où je les souhaite tous, les ai tous sélectionnés et l'icône de distribution apparaît dans le menu supérieur pour moi. Vous pouvez également accéder à Window Align pour ouvrir le panneau, puis sélectionner la distribution horizontale ou verticale enseignée en bas ou au centre en fonction de votre design. À ce stade, je suis plutôt content du design et même si j'en ai déjà d'autres rendus, je suis convaincu par cette version pour l'animation, mais maintenant je dois l'affiner. Je vais prendre un peu de recul et voir ce que j'aimerais faire d'autre. Je vais comparer quelques options pour voir laquelle est la plus efficace et apporter quelques derniers ajustements à l'illustration pour qu' elle corresponde mieux à ma vision à long terme. Il est important de concevoir en gardant le but en tête, surtout s'il s'agit d'un projet de marque comme le mien. Une fois que toutes vos conceptions finales ont été rendues, effectuez un zoom arrière et passez à l'appel final. Dans cette vidéo, nous avons examiné le choix d'une direction, la création de croquis, rendu de vos croquis et Illustrator. Et je vous ai donné un aperçu des coulisses mon processus et de mes outils préférés pour concevoir l'icône. Ensuite, nous allons vous expliquer comment préparer votre fichier pour Photoshop 4. Préparer l'icône pour Photoshop: Prêt à démarrer. La toute première chose à faire est étendre l'apparence de notre fichier Illustrator. Cela permet de conserver un aspect net et propre à mesure que nous agrandissons le fichier. Mais avant de nous lancer, sauvegardons une copie de notre design actuel. Vous ne savez jamais ce que vous voudrez peut-être modifier, surtout si vous envisagez de l'utiliser dans un autre programme tel qu' Adobe After Effects le duplicata, il suffit de sélectionner l'icône entière en maintenant la touche Maj enfoncée et en cliquant sur la zone qui l'entoure. Maintenez ensuite la touche Option enfoncée. Cliquez et faites glisser le pointeur vers un nouvel endroit de votre Canvas. Tout est prêt. Maintenant, allez dans le menu supérieur, sélectionnez Objet, Expand , puis choisissez Object stroke, Fill, Walla Vos lignes se sont maintenant transformées en formes. Ensuite, copions cette icône nouvellement transformée dans un nouveau fichier propre. Pour cet exemple, je vise un format carré, parfait pour Instagram. N'oubliez pas que, comme il s'agit d'art vectoriel, nous pouvons le redimensionner sans perdre en qualité lorsque nous passons à Photoshop Il est maintenant temps de porter notre chapeau organisationnel. Nous allons organiser nos couches de manière à ce que l' animation soit un jeu d'enfant. Vous allez recommencer dans Photoshop, mais pour le moment, regroupez des éléments similaires sur le même calque ou sur des calques individuels. Par exemple, déplaçons tous les objets décoratifs sur une couche, les feuilles sur une autre, les tiges sur une autre. Tu as compris l'idée. Bien, entrons dans les détails. Il est temps de déterminer comment votre illustration se révélera pendant l'animation. Je vais en faire une partie plus tard dans Photoshop. Mais laissez-moi vous montrer une façon d'y parvenir ici, dans Illustrator, au cas où vous le préféreriez. Sélectionnez d'abord la ligne qui représente votre radical et appuyez sur la commande C pour la copier coller à nouveau au même endroit. Utilisez la commande Shift et V. Déplacez cette ligne dans une nouvelle couche. Concentrons-nous maintenant sur cette couche. Allez-y et masquez toutes les autres couches. Vous pouvez activer le stylet en appuyant sur le poinçon. Nous allons légèrement effacer certaines parties de la tige en utilisant le stylo comme tranche. À l'aide de l'outil Stylo, placez une ligne sans trait sur l'illustration à l'endroit où vous souhaitez créer le premier marqueur. Ouvrez ensuite le panneau Pathfinder, sélectionnez Diviser, puis supprimez la partie supérieure ou la partie qui sera révélée ultérieurement Cela agira comme un marqueur de croissance, essentiellement ce que votre public verra avant l' apparition du stem complet ou de ce que vous illustrez ou animez Plus vous créez de marqueurs de croissance, plus l' animation sera fluide. La rapidité joue également un rôle. Une révélation plus rapide permet d'obtenir un résultat fluide ou une animation. Une fois que vous avez ajusté la tige ou tout autre élément que vous illustrez, activez ou désactivez les couches pour prévisualiser les étapes de votre animation Cela vous donnera une idée de la façon dont tout se déroulera dans l'animation finale. Prêt pour un outil de mélange, AMUSEZ-VOUS ici pour créer des étapes ou la façon dont les feuilles et les fleurs pousseront. En d'autres termes, comment votre illustration sera révélée et animée. Dessinons d'abord le point de départ. Dans mon cas, c'est un petit bourgeon. À l'aide de l'outil de mélange, je vais créer cinq étapes de croissance. Double-cliquez sur l'outil de fusion dans le panneau d'outils pour ouvrir les options de fusion, choisissez les étapes spécifiées, puis sélectionnez le nombre d'étapes souhaité. Je vais les séparer un peu et choisir cinq étapes. Nous pouvons toujours en retirer. L'idée est de vous assurer que vous pouvez voir chaque étape clairement et séparément. Assurez-vous qu'ils ne se touchent pas, ajustez-les si nécessaire, puis agrandissez l'apparence pour que chaque étape soit un objet distinct. Enfin, vous allez les aligner à leur point de départ. N'oubliez pas que vous pouvez ajuster le nombre d' étapes en fonction du rythme de votre animation. Plus d'étapes pour une opération lente, fluide ou en révéler moins pour quelque chose de plus rapide. Répétons maintenant ce processus pour l'ensemble de l'animation. Si vous réfléchissez à la manière dont vous souhaitez que chaque objet soit révélé et animé tout au long du processus, aurez plus de temps pour itérer dans Photoshop, mais vous aurez besoin de connaissances approfondies pour cela auparavant Alors prenez votre temps et ne passez pas à autre chose tant que vous n'êtes pas très enthousiaste à l'idée de faire danser ce truc Maintenant que vous avez créé toutes les étapes de croissance, assurons-nous de leur emplacement final et séparons chaque étape sur sa propre couche. Assurez-vous d'étiqueter de la manière qui vous convient. Mon animation finale comporte 100 couches, mais vous pourriez facilement en avoir 300 ou plus. Ainsi, plus vous maîtrisez clairement l'organisation de vos fichiers, plus la création de l' animation sera rapide et fluide. C'est l'heure d'un rapide examen. Maintenant que chaque étape se trouve sur son propre calque, passez d'un calque à l'autre pour aperçu du déroulement de l' animation, puis apportez les modifications nécessaires Par exemple, j'ai remarqué que mes petites feuilles devraient être plus proches de la tige. Un dernier conseil de pro, pensez à la couleur. Le flux de votre animation peut influencer vos choix de couleurs. Sachez donc que lorsque vous avez fait votre sélection, j'ai choisi la couleur principale de ma marque pour démarrer, en ajoutant des teintes secondaires pour un effet encore plus éclatant. N'oubliez pas que vous pouvez même animer les transitions avec de la couleur Enfin, enregistrez votre fichier d'origine au cas où vous souhaiteriez changer de couleur ultérieurement. Bien, prenons un moment pour passer revue ce que nous avons accompli jusqu'à présent Tout d'abord, nous avons commencé par développer notre Canvas et Illustrator pour que tout reste net. N'oubliez pas de sauvegarder une copie, vous ne savez jamais quand vous pourriez avoir besoin du design original. Ensuite, nous déplaçons cette icône étendue dans un nouveau format de fichier carré. Idéal pour Instagram et facile à passer à Photoshop sans perte de qualité. L'organisation était essentielle. Nous avons commencé à trier nos couches de manière à ce que le processus d'animation soit fluide ou progressif. Nous avons abordé les détails de la planification des animations, jusqu'à la création de marqueurs de croissance pour nos tiges ou pour toute autre illustration que vous avez créée. Plus vous en aurez, plus votre animation sera fluide. L'outil de fusion est entré en jeu pour créer des étapes indiquant comment votre illustration sera révélée et animer, ajuster le nombre d'étapes fonction de la pièce que vous visez Une fois les étapes terminées, nous avons réorganisé nos couches, puis nous avons joué le moment de vérité passant d'une couche à l'autre pour prévisualiser l'animation, en veillant à ce que tout soit beau et ajusté Enfin, nous avons examiné l'impact de la couleur sur le flux et le rendu de votre animation. Choisissez des couleurs qui complètent la marque que vous créez pour elle et votre style d'animation. Êtes-vous impatient de passer aux prochaines étapes ? Ensuite, nous allons intégrer tous ces éléments dans Photoshop pour vraiment donner vie à votre design. J'ai hâte de voir ce que nous allons créer ensemble. 5. Animation dans Photoshop: Bonjour encore une fois. Après notre travail méticuleux dans Illustrator, il est temps de donner une touche de magie à nos icônes Passons à Photoshop et donnons vie à nos créations. Déplaçons notre icône Illustrator en couches dans Photoshop. Tout d'abord, nous allons créer un nouveau fichier à dimension que vous utiliserez dans le formulaire final Je vais utiliser un peu plus grand que ce dont j'ai besoin au cas où je souhaiterais l'utiliser pour une autre application. Une fois votre nouveau fichier créé, il ne vous reste plus qu'à vous rendre dans Illustrator et à sélectionner l'intégralité de votre design. Appuyez sur Copier ou sur Commande C, puis revenez à Photoshop, appuyez sur Coller ou sur Commande V. Quelques options vous seront Choisissez Coller sous forme de couches pour transférer tout votre dur labeur. Pensez à l'animation comme à une séquence d' images statiques affichées rapidement. Ici. Les couches deviennent des cadres et votre chronologie les organise. Il s'agit du storyboard de votre animation. Maintenant que nous sommes dans Photoshop, nous pouvons constater que les calques d'Illustrator ont été regroupés et que chaque objet appartient à son propre groupe dans le calque. C'est parfait pour la base de votre organisation. Étiquetons chaque objet et classons-le dans l'ordre dans lequel nous souhaitons qu'il apparaisse. N'oubliez pas que cela désactivera les étapes précédentes afin que l'animation ne se complique pas à chaque microrévélation Pour la tige ou la fleur, chaque stade sera masqué au fur et à mesure que le suivant se révélera. Dans le dernier cours, je vous ai montré comment modifier les étapes de croissance directement dans Illustrator. J'ai choisi de créer les tiges ici dans Photoshop parce que cela me semblait plus facile et plus fréquent pour mon processus. Je vais le faire maintenant. Et j'espère que cela vous donnera un aperçu la façon dont vous pourriez l'utiliser et faire quelque chose de similaire. Avant de poursuivre, je vais rasteriser toutes mes couches En passant aux couches. Rasterisez toutes les couches. Je viens de saisir la couche pour laquelle je souhaite créer des étapes, puis le panneau des couches cliquer sur Option et de la faire glisser pour la dupliquer. Ensuite, je prends la gomme et j'efface la zone que j'aimerais révéler à l'étape suivante Je répète ce processus jusqu'à ce que j'aie environ trois ou quatre étapes pour chacune des tiges Ensuite, je vais tester l'ensemble de l'animation en révélant chaque couche individuellement. Il est important de noter que ce processus a révélé certaines zones délicates de l'animation Et j'ai déjà pu le réparer ici. J'aime l' animation où il est beaucoup plus difficile de travailler à rebours. Photoshop, traditionnellement, un outil de retouche photo cache un trésor de capacités d' animation. Explorons juste un petit extrait qui donnera une position à ces vecteurs statiques. Dans ce cours, nous allons créer une animation chronologique. Pour commencer, allez dans la chronologie de la fenêtre et sélectionnez Créer une animation d'image dans la fenêtre contextuelle. Cela devrait vous permettre de commencer avec un seul cadre qui montre tout ce qui est visible dans votre panneau Calques. À l'heure actuelle, il agit comme une photographie de ce qui est visible. Ne passez donc pas à la création d'un nouveau cadre tant que vous n'avez pas masqué ou affiché tout ce que vous souhaitez voir dans le premier cadre. Appuyez ensuite sur le signe plus en bas de votre panneau de chronologie pour créer un nouveau cadre. Répétez le processus et ne dévoilez que la partie suivante de votre animation, en veillant à désactiver les couches qui seront redondantes ou qui n'apparaîtront que plus tard dans votre animation Maintenant, c'est parti pour les courses. Avant d'aller trop loin, définissez le rythme de votre animation. Après avoir ajouté de nouvelles images, vous pouvez appuyer sur le bouton Play en bas de la chronologie pour voir à quoi cela ressemble. S'il vous semble trop nerveux, réduisez le temps passé sur chaque image. Vous pouvez le faire en bas du cadre en cliquant sur la flèche vers le bas, puis en sélectionnant l'heure à laquelle vous souhaitez que le cadre soit affiché. Pour mon animation, j'ai opté pour 0,02 s, littéralement une fraction de seconde, afin qu'elle puisse rapidement tourner en boucle Ce qui m'amène à ma diapositive suivante. Cette animation devrait-elle tourner en boucle ou dérouler une, deux ou trois fois ? C'est quelque chose que vous devez déterminer avant d' exporter le fichier. Le mien est réglé par défaut pour toujours. Donc, si vous cliquez dessus et en bas du panneau de chronologie, vous pouvez choisir combien de fois il fera une boucle. Dans mon cas, je ne voulais que cela se produise qu'une seule fois. Aujourd'hui. Je vous présente les animations les plus élémentaires. comporte d'autres fonctionnalités d'animation et La timeline comporte d'autres fonctionnalités d'animation et de vidéo, ainsi que d'autres effets que vous pouvez ajouter à votre animation, tels que l'interpolation entre les images, qui permet d' ajouter automatiquement des étapes et d' éliminer des couches Pour ce cours, je voulais vous montrer comment créer une belle animation en utilisant les compétences que vous possédez probablement déjà. Considérez cela comme la base de l'animation dans Photoshop La cohérence est essentielle pour une finition vraiment professionnelle. Assurez-vous que votre animation est parfaitement fluide Surveillez-le car les transitions choquantes ne correspondent pas. Durées des cadres. Votre icône doit se déplacer naturellement comme si elle avait une vie propre. Vous pouvez supprimer des cadres et en ajouter de nouveaux, mais il est toujours plus facile de le faire en suivant un ordre naturel. Je vous recommande donc de vérifier apparence de votre animation au fur et à mesure que vous la créez. OK, récapitulons rapidement ce que nous avons vu dans ce cours Tout d'abord, nous avons importé l'icône dans Photoshop en copiant et en collant littéralement Nous avons configuré une animation d'image à l'aide de couches. Ensuite, nous nous sommes vraiment lancés dans les détails de l'édition et de l' organisation Ensuite, j'ai passé en revue les outils d'animation que nous utilisions dans Photoshop Ensuite, nous avons parlé du rythme de votre animation et de l'ajout d'effets d'animation Enfin, il suffit de vérifier votre travail pour garantir une transition harmonieuse Un travail fantastique, votre icône devrait désormais être le résultat de la fusion de vos compétences uniques en matière de design et de la magie de l'animation. Êtes-vous prêt à partager vos créations avec le monde entier ? Passons à l'exportation et à la mise en valeur de vos billes animées J'ai hâte de voir ce que tu as créé. 6. Exporter votre animation: Bienvenue aux passionnés de design. Notre animation étant terminée, il est temps de passer à l'une des étapes les plus cruciales : l'exportation. Assurons-nous que votre icône animée est optimisée et prête à être vue par le monde entier. Maintenant, en ce qui concerne l'exportation Photoshop vous offre beaucoup de choix et je vais vous expliquer les deux dont vous aurez besoin pour ce type d'animation. Film ou cadeaux. Les cadeaux sont parfaits pour leurs nombreuses capacités et leur nature en boucle, tandis que les films offrent une excellente qualité et une meilleure profondeur de couleur N'oubliez pas que le choix vous appartient en fonction de l'endroit où vous souhaitez que votre icône brille. Commençons par exporter fichier vidéo pour mon fil Instagram Il suffit d'aller dans Fichier, exporter, rendre la vidéo et les paramètres du film apparaîtront. Choisissez l'endroit où vous enregistrez le fichier et sa taille. N'oubliez pas que j'ai commencé avec quelque chose de plus grand que ce dont j'avais besoin pour avoir de la flexibilité. Mais il n'est pas nécessaire d'enregistrer une vidéo volumineuse pour Instagram. Utilisez ces spécifications à partir de votre plateforme spécifique. C'est ça. Téléchargez-la ensuite vers l'emplacement de votre choix et partagez votre animation. La vraie raison pour laquelle l'animation est née était de partager par e-mail sous forme de fichier GIF. Vous ne pouvez tout simplement pas partager de vidéo par e-mail, mais vous pouvez partager un GIF animé ou un fichier GIF qui fournira une image attrayante ou de haute qualité avec un avantage professionnel. Gardez toujours à l'esprit les limites et les avantages de la plateforme . Vous pouvez appuyer sur Commande, Option Shift et S ou accéder à Fichier, Exporter et enregistrer pour le Web, puis choisir Gif dans les options et dans le coin supérieur droit Vous pouvez même tester votre animation, choisir des paramètres supplémentaires ou modifier vos préférences de boucle directement sur place, puis Enregistrer pour sortie Au contraire, vous venez de maîtriser l'art de l' animation d'icônes, de la conception à l'exportation Que ce soit pour votre client, votre portfolio ou simplement pour le plaisir, vous avez désormais les compétences nécessaires pour créer des visuels animés captivants Dans la vidéo suivante, récapitulons ce que nous avons appris et célébrons en partageant nos designs 7. Terminer et fêtons-nous !: Bonjour à tous, Félicitations pour avoir terminé ce cours. L'art des icônes animées, concevez et animez avec Photoshop et Illustrator Quelle incroyable aventure, et je suis très fière des progrès que vous avez réalisés. Prenons un moment pour réfléchir à toutes les nouvelles compétences et techniques que vous avez apprises. Tout d'abord, vous avez maîtrisé l' art de donner vie à vos croquis en concevant des icônes et Illustrator en couches, où nous nous sommes concentrés sur les dimensions, couleurs et les détails complexes. Nous avons ensuite changé de cap et sommes passés Photoshop, où il a appris à donner vie à des designs statiques en créant des animations image par image. Nous avons même exploré des fonctionnalités plus avancées, telles que le réglage du rythme de vos animations et l'ajout d' et Qu'est-ce qu'apprendre sans application, n'est-ce pas ? Vous avez la possibilité d'appliquer toutes ces techniques dans notre projet de classe. Maintenant, il ne s'agit pas seulement du produit final, mais aussi du parcours et des compétences que vous avez acquises en cours de route. Chacun d'entre vous a donné vie à sa vision unique combinant des principes de conception avec des techniques d'animation pour produire quelque chose de vraiment magique. Maintenant, pour la grande finale, je vous invite à télécharger votre dernière icône animée dans la galerie de projets C'est une excellente occasion de partager votre travail, de recueillir des commentaires et même de voir comment vos camarades ont relevé les mêmes défis N'oubliez pas d'inclure une brève description de votre concept et du processus de création que vous avez suivi. dialogue avec la communauté peut offrir nouvelles perspectives et même vous inspirer pour votre prochain projet. Alors allez-y, mettez en valeur vos chefs-d'œuvre et profitez des fruits de votre travail N'oubliez pas que la galerie de projets n'est pas simplement une exposition, c'est une conversation. Participez et participez. Merci d'avoir participé à ce cours, et j'espère voir bientôt vos icônes animées illuminer notre galerie de projets. ici là, continuez à concevoir, à animer et, surtout, à