Share
Ce que vous allez créerL'animation d'icônes vectorielles et de conceptions est facilitée par Adobe Illustrator et Adobe Photoshop. Créez simplement des icônes plates simples et importez-les dans Photoshop pour créer facilement des fichiers GIF. Nous allons créer trois icônes animées et explorer quelques techniques pour créer des animations fluides et faciles..
Besoin d'inspiration? Explorez d'autres icônes vectorielles incroyables sur le marché Envato et les éléments Envato.
Créer un Nouveau document dans Adobe Illustrator. Je vais utiliser Adobe Illustrator CC, mais vous pouvez facilement adapter ces techniques et conceptions aux versions antérieures.
Avec le Outil Rectangle (M), dessinez un rectangle bleu clair. Sélectionnez les deux points d’ancrage inférieurs avec Outil de sélection directe (A), et tirez le Coins vivants vers l'intérieur pour arrondir ces deux coins. Utilisez le Outil stylo (P) tracer une ligne en bleu moyen qui définit l'ouverture de l'enveloppe.
Tracez deux lignes soit avec le Outil stylo ou la Outil de segment de ligne (/) qui se rencontrent près du centre de l'enveloppe. Développer vos coups sous Objet, et utiliser le Outil de création de forme (Maj-M) sélectionner les parties non intersectées des lignes du rectangle afin de les supprimer. Ceci est notre objet enveloppe de base.
Copier (Control-C) et Coller (Contrôle-V) la conception de l'enveloppe. Tracez un triangle du coin supérieur au coin supérieur pour l'ouverture de l'enveloppe. Sélectionnez le triangle en maintenant enfoncé Alt, et faites glisser une copie du triangle. Tourner (R) pour créer l’ouverture de l’enveloppe et définir la couleur de remplissage sur un bleu plus foncé. Pour les besoins de cette démonstration, mes lignes ne figurent pas dans le dessin ci-dessous, mais seront utilisées dans la version finale..
Vous devriez maintenant avoir deux enveloppes: une ouverte et une fermée. Notre objectif est de créer plusieurs itérations d’enveloppes qui jettent un pont entre l’enveloppe fermée et l’enveloppe ouverte pour notre animation finale.. Groupe (Control-G) ensemble, chacun des composants de votre enveloppe.
Dupliquer l'enveloppe ouverte. Utilisez le Outil de sélection directe pour saisir le point d'ancrage supérieur du triangle supérieur et faites-le glisser vers le bas jusqu'à ce qu'il recouvre presque complètement le triangle noir. Dupliquer ce groupe d’enveloppes et tirez un peu vers le haut le point le plus bas du triangle le plus léger afin que l’enveloppe ressemble plus à une ouverture. Nous allons continuer à dupliquer chaque enveloppe et à déplacer le triangle vers le haut jusqu'à ce qu'il revienne au point de départ.
En fin de compte, y compris les enveloppes fermée et ouverte, j'ai neuf enveloppes pour mon icône animée. Vous pouvez vérifier l'emplacement des triangles et leurs points d'ancrage ci-dessous. Assurez-vous que chaque enveloppe est groupée séparément pour pouvoir les importer facilement. Adobe Photoshop plus tard.
Tracez un rectangle jaune clair et Copie et Coller sur chaque enveloppe. Le but est de faire en sorte que le rectangle se déplace vers le haut, même s’il s’ouvre. J'ai décidé d'aller avec sept rectangles au total pour ma conception.
Sélectionnez la première enveloppe et son rectangle qui se chevauchent. En utilisant le Outil de création de forme, sélectionnez la partie du rectangle jaune qui croise l'intérieur de l'enveloppe. Supprimez la partie non croisée du rectangle jaune pour ne conserver qu'un petit triangle du rectangle jaune. Répétez cette technique sur les autres enveloppes.
Continuez à définir la forme de la lettre jaune pour chaque enveloppe. Vous pouvez voir ci-dessous à quoi ressemblent mes lettres avec l'enveloppe correspondante.
Dessinez plusieurs rectangles minces pour simuler des lignes écrites sur la lettre. Aligner et Distribuer les rectangles dans le Aligner panneau. ensuite, Unir eux dans le Éclaireur panneau.
Placez plusieurs ensembles de rectangles sur chaque enveloppe. Notez que certaines lettres montrent plus de lignes que d’autres. J'ai placé des ensembles de rectangles sur six de mes neuf enveloppes.
Sélectionnez la forme de la lettre et les rectangles. En utilisant le Outil de création de forme, sélectionnez la partie non croisée de chaque rectangle et supprimez-les. Répétez cette étape pour toutes vos enveloppes.
Groupe ainsi, chaque enveloppe et ses composants constituent neuf groupes distincts. Maintenant nous sommes prêts à animer notre design!
Ouvrir Adobe Photoshop et créer un Nouveau document. Depuis que nous créons un graphique Web simple, j'ai défini mes Taille du document à 72 dpi (aucune raison pour une résolution plus élevée car nous n'imprimons pas notre illustration), 250 px largeur, et 300 px la taille. Vous pouvez créer un fichier plus gros ou plus petit si vous le souhaitez et rogner votre document quand vous en avez besoin..
Dans Adobe Illustrator, Copie chaque groupe d'enveloppes et Coller les dans votre Adobe Photoshop document. Si vous souhaitez redimensionner votre image sans perte de qualité, collez chaque groupe en tant que Objet intelligent. Si vous êtes satisfait de la taille, Coller les dans une nouvelle couche comme Les pixels.
Assurez-vous que chaque objet est superposé de manière séquentielle. En outre, vous voudrez sélectionner les neuf couches et Aligner les à leurs centres et les bords inférieurs.
Ouvrez le Chronologie panneau et créer un Nouvelle animation d'image. En commençant par le calque d’enveloppe fermé (masquer les autres), créez un Nouveau cadreet régler le délai du cadre sur 0,1 seconde. Pour chaque image, affichez le calque suivant et masquez le calque précédent jusqu'à ce que l'enveloppe soit ouverte. Ensuite, réglez le délai à 0,2-0,5 secondes.
Répétez les calques de masquage et de masquage, mais cette fois, procédez dans l'ordre inverse pour que l'enveloppe se referme. Assurez-vous que c'est en boucle "Pour toujours"donc l'animation continue à s'ouvrir et se fermer.
Asseyez-vous et frappez Jouer sur le Chronologie panneau pour regarder votre boucle gif. Vous pouvez ajuster vos délais de trame pour une image plus lente ou plus rapide, ainsi que modifier la durée pendant laquelle l’enveloppe fermée ou ouverte est vue. Chronologie panneau. Passons aux autres icônes et techniques supplémentaires pour l'animation.
Retour dans Adobe Illustrator, soit dans un nouveau document, soit sur un nouveau calque, tracez un cercle à l'aide de la touche Outil Ellipse (L). Ensuite, superposez le cercle avec un petit triangle et Unir les deux formes ensemble: ceci est votre bulle de discussion de base. Tracez trois cercles pour les ellipses à utiliser dans l'animation ultérieurement.
Copie et Coller la bulle de conversation et Réfléchir sur un Axe vertical. Change la couleur de la seconde bulle en une teinte plus foncée. Échelle les ellipses vers le bas afin qu'ils s'insèrent dans la bulle de discussion. Ensuite, nous ajouterons du texte.
Dessinez ou tapez des mots simples tels que "hey" et "hi", en utilisant une police manuscrite que vous aimez ou en traçant chaque lettre avec Outil Pinceau (B) en utilisant un pinceau calligraphique par défaut. Assurez-vous que le texte ou les traits sont convertis en objets et que chaque lettre est un objet séparé..
Tapez ou dessinez des émoticônes de texte simples dans les bulles de discussion. Alternativement, vous pouvez dessiner des emojis à la place. C'est votre icône de chat et le style général est à vous. Au total, il existe 14 composants distincts ci-dessous: trois ellipses, cinq lettres, deux bulles de conversation et quatre objets créant des émoticônes. Chacun sera Copié et Collé dans un nouveau document Adobe Photoshop en tant que couche séparée.
Dans Adobe Photoshop, Coller chacun des 14 composants d'icône dans votre document en tant que nouveau calque. Groupe ensemble comme des objets comme je l'ai fait ci-dessous dans le Couches panneau: les composants de chaque mot, émoticône, ellipses et bulles de discussion. Cela garde votre document organisé et rend l'animation de votre GIF plus facile dans l'ensemble.
Pour commencer, je veux que ma première bulle de conversation vienne du côté gauche. J'ai caché tous les composants sauf la première bulle de discussion et les ai placés en dehors du cadre de mon document pour la première. Chronologie Cadre. En sept secondes, j'ai déplacé ma bulle de discussion au centre du document en partant du côté gauche. Vous pouvez déplacer et modifier un calque pour chaque nouvelle image sans affecter l'image précédente..
Une fois que la bulle de discussion est visible, je commence à taper. Chaque ellipse est visible une par une dans la première bulle de conversation, suivie du premier message "hi". Ensuite, je commence à glisser la seconde bulle de discussion dans le cadre, tandis que le premier message de discussion (regroupé dans la Couches panneau "hi") est réduit en opacité (par 20% chaque image) dans le Couches panneau.
Voici un coup d'oeil à mon Chronologie panneau pour l'ensemble GIF. J'ai plus 30 images au total et la plupart d'entre eux ont un 0,1 seconde de retard. Certains composants, comme les ellipses, vont "point, point, point" à un point Retard de 0,3 seconde, tandis que la décoloration des mots ou la frappe des lettres et des émoticônes est plus rapide lorsque cela est possible. Vous pouvez ajuster vos délais préférés comme bon vous semble. Vous voulez que la frappe soit lisse et lisible sans être trop lente et agitée.
Vous pouvez consulter ma dernière animation ci-dessous: la première bulle de conversation entre et commence à taper, la deuxième bulle répond et les deux envoient des émoticônes, puis reviennent en dehors du cadre. Nous devons faire une dernière icône animée qui combine les idées et les techniques utilisées précédemment.
Dans Adobe Illustrator, dessine un rectangle. Sélectionnez les deux points d’ancrage supérieurs avec Outil de sélection directe, et tirez le Coins vivants vers l'intérieur. Dessinez un deuxième rectangle plus sombre en dessous du premier et arrondissez ses coins inférieurs. Notez que le deuxième rectangle est plus petit que le premier, mais que les deux partagent la même mesure de largeur..
En gris foncé, tracez un mince rectangle pour l'ouverture du film instantané sur la moitié inférieure de l'appareil photo. Dessinez des rectangles arrondis et un cercle pour l'objectif de l'appareil photo, le viseur et des motifs supplémentaires sur le visage de l'appareil photo.
Ajoutez un cercle rouge et un cercle gris foncé et chaud au bouton de l'appareil photo. Pour l’objectif, empilez les cercles gris et bleus les uns sur les autres, en alternant sombre et clair. Utilisez le Outil de sélection directe pour pousser le point d’ancrage supérieur du cercle intérieur vers le bas afin que l’objectif soit brillant (voir le dessin ci-dessous).
Pour l'animation de l'obturateur, je voulais une simple animation d'ouverture et de fermeture. Vous pouvez bien sûr créer des formes plus complexes si vous le souhaitez. Pour mon obturateur j'ai dessiné un cercle gris foncé. Copie et Coller le cercle et le couper en deux (chevaucher le centre horizontal du cercle avec un segment de droite, puis Diviser les deux formes dans le Éclaireur panneau).
Copie et Coller les deux moitiés du cercle. Éloignez chaque moitié du centre et utilisez le Outil de sélection directe pour déplacer les deux points d’ancrage inférieurs afin d’écraser légèrement chaque cercle de moitié. Répétez l'opération pour six itérations totales qui amènent l'obturateur de fermé à ouvert. Les six de ces groupes seront Copié et Collé dans le Photoshop document pendant la phase d'animation.
Nous pouvons maintenant travailler sur le film instantané. Essentiellement, vous tracez une série de rectangles de plus en plus grands. Commencez par un mince rectangle gris clair au centre de la moitié inférieure de l'icône de l'appareil photo. Après quelques rectangles, vous ajoutez un rectangle gris foncé à celui gris clair. Remarquez comme ils s'allongent tous les deux.
Voici un dernier aperçu de tous les composants de l'appareil photo: l'appareil photo, les six formes d'obturateur et les huit formes de film (y compris celle de la caméra). Au total je serai copier et Collage 15 composants dans le Photoshop document dans la section suivante. Animons cette caméra!
Comme avec les icônes avant, Copie et Coller chaque composant de votre Photoshop document. Je trouvais plus facile pour chaque icône de disposer de son propre document dans Photoshop afin de me concentrer sur une animation à la fois..
Regrouper les couches d'obturation et les couches de film dans le Couches panneau au-dessus de la couche caméra. J'ai commencé par l'animation de l'obturateur: fermez et ouvrez l'obturateur de manière à ce que l'objectif semble clignoter.
Ensuite, vous voudrez animer le film entrant et sortant de la fente de film (sinon, il peut tomber de la caméra, comme il le ferait réellement). Une fois de plus, vous parcourez chaque composant du film, l'un après l'autre, puis créez un cadre pour chacun en sens inverse..
Enfin, une petite note sur la sauvegarde de votre GIF des dossiers. Aller à Fichier> Exporter> Enregistrer pour le Web (hérité) (Alt-Shift-Control-S) et sélectionnez GIF dans le menu déroulant. Limiter le GIF à 32 couleurs ou moins, si possible. Vous pouvez prévisualiser l'animation, redimensionner votre fichier et décider de la qualité du fichier avant de cliquer dessus. sauvegarder.
Voici un aperçu de mon icône de caméra finale en action!
Que vous créiez un gif avec chaque cadre dessiné Adobe Illustrator, manipuler des composants dans le GIF phase de création, ou un mélange des deux techniques, l’animation de graphiques vectoriels est simple et amusante. Partagez vos créations dans la section commentaire ci-dessous ou repoussez les limites de vos idées et créez un ensemble complet d'icônes animées ou même de scènes prêtes pour la publication Web et bien plus.!
Pour des conceptions d'icônes plus épiques, rendez-vous sur Envato Elements, où vous pouvez vous abonner pour débloquer des milliers d'actifs de conception de haute qualité moyennant un tarif mensuel! Découvrez l'un de nos favoris ci-dessous!
Vous allez vous régaler avec ce lot d'icônes vectorielles! Ce pack contient 30 icônes minimalistes adaptées à divers projets. Modifiez ces icônes facilement à l'aide d'Adobe Illustrator et faites ressortir vos dessins avec des couleurs attrayantes!
Accentsconagua