Vous avez une ou deux icônes que vous souhaitez animer avec une animation. Par où commencerais-tu? Disons que vous avez fichiers SVG, Illustrator CC et Effets secondaires CC, mais la solution vous échappe.

Dans cet article, je vais vous montrer comment vous pouvez facilement animer un fichier SVG, notamment en préparant le fichier SVG dans Illustrator et en l'important dans After Effects CC. Je vais également expliquer comment vous pouvez le convertir en couches de forme et ajouter du mouvement. Enfin, parlons de l'exportation et du rendu.

Le résultat final du travail.

Passons maintenant à la partie amusante - comment animer des images.

Préparation d'un fichier SVG dans Illustrator

Commençons par ouvrir votre fichier SVG dans Adobe Illustrator CC. Je vais animer une petite icône de voiture qui est disponible gratuitement à Week Of Icons.

Après avoir ouvert le fichier, nous devons dissocier et séparer tous les objets en calques. Vous pouvez le faire manuellement ou utiliser Relâcher vers les calques (séquence) pour accélérer le processus. Avant d'importer le fichier dans After Effects, nous devons l'enregistrer en tant que fichier Illustrator.

Nous pouvons dissocier des objets en utilisant Release to Layers (Sequence), pour ne pas perdre un temps précieux.

Importation et organisation d'un fichier dans After Effects CC

Vous êtes maintenant prêt à importer dans After Effects CC. Utilisons le raccourci clavier Ctrl + I (Windows)ou Commande + I (Mac)pour charger la boîte de dialogue Importer le fichier, ou allez à Fichier\u003e Importer\u003e Fichier ... Au même endroit, sélectionnez le fichier Illustrator CC que nous avons préparé et cliquez sur Importer.Une petite boîte de dialogue doit apparaître avec le nom du fichier sélectionné. Veuillez sélectionner Composition dans la liste déroulante sous le nom Genre d'importation.

Un moyen plus rapide d'importer un fichier consiste à double-cliquer sur la colonne dans le volet projet.

Dans le panneau Chronologie, nous verrons une nouvelle composition. Double-cliquez dessus. Nous devrions maintenant voir les calques Illustrator CC avec des icônes orange à gauche des titres.

Avant de passer aux choses sérieuses, nous devons convertir toutes ces couches en Couches de forme... Nous devons tous les sélectionner avec Ctrl + A / Commande + A, ou manuellement avec Maj + gauche de la souris... Après cela, faites un clic droit sur le calque et sélectionnez Créer\u003e Créer des formes à partir d'un calque vectoriel.

Maintenant que les nouveaux calques sont sélectionnés, faites-les glisser vers partie supérieure panneaux au-dessus des calques Illustrator CC, puis supprimez les calques Illustrator CC afin qu'ils ne gênent pas.

Conversion de calques Illustrator CC en calques de forme dans After Effects CC

Bien que cela ne soit pas nécessaire, il est important de donner à chaque calque un nom approprié et / ou de le coloriser. Cela nous permettra de travailler plus efficacement alors que nous nous concentrons sur cadres clés... Dans l'exemple ci-dessous, les couleurs des étiquettes correspondent plus ou moins au remplissage de leurs calques respectifs.

Il est très pratique d'étiqueter les calques de forme avec les noms, couleurs, étiquettes et emplacements appropriés.

Utilisez le raccourci clavier pour configurer les options Ctrl + K / Commande + K ou Composition\u003e Paramètres de composition… Dans les paramètres de composition, nous devons sélectionner la largeur, la hauteur, la fréquence d'images et la durée (largeur, hauteur, fréquence d'images et durée). Pour ce projet, j'ai choisi 60 images par seconde pour rendre l'animation fluide.

Sur le ce moment tout semble prêt, mais il reste encore une chose à faire. Nous devons regrouper certaines couches afin que leurs mouvements soient synchronisés avec la couche principale que nous pouvons contrôler. Cette méthode s'appelle Parenting.

Utilisez Pick Whip pour affecter le calque parent à plusieurs calques.

Dans notre exemple, j'ai attribué les couches les moins importantes (couches enfants) telles que le pare-brise, les parties du corps, le bois et les cordes à la couche principale du corps (couche parent). Cela m'a permis de contrôler la position et la rotation de l'ensemble de la voiture (à l'exclusion des roues) à l'aide d'un calque parent.

Création d'animation

Je voulais que la voiture heurte un rocher et plane un peu dans les airs. Je voulais aussi que l'arbre se déplace de haut en bas et ouvre le tronc. J'ai commencé par créer de la pierre, des voitures et des roues. Ensuite, il était temps de surmonter le plus grand obstacle: imposer l'action à l'arbre. Après avoir terminé cela, j'ai abordé les petits détails comme le coffre et les cordes.

Esquisse avec description d'animation

La première étape consistait à faire en sorte que l'élément ou le calque ressemble à un rocher, mais au lieu de revenir dans Illustrator CC pour ajouter un autre calque, j'ai simplement utilisé l'outil Plume dans After Effects CC. Cela m'a permis de concevoir rapidement une petite pierre.

Oh, le puissant Pen Tool!

Le coffre était une tâche relativement simple. Je l'ai placé à l'arrière de la voiture et ai fait un point d'ancrage au sommet inférieur gauche. À l'aide de Pick Whip, je l'ai affecté au calque du corps parent. L'avant-dernière étape consistait à donner l'effet de rotation, ce qui à son tour rendait le moment de rebond de la voiture plus réaliste.Bodymovin combiné avec la bibliothèque mobile Lottie.

P.S. vous pouvez trouver mes fichiers Illustrator CC et After Effects CC.

Le jeu d'icônes est disponible en téléchargement gratuit sur.

Le format de fichier Flash (SWF) est basé sur graphiques vectoriels et est conçu pour des graphiques évolutifs et compacts pour le Web. Étant donné que ce format de fichier est basé sur des graphiques vectoriels, l'objet conserve la qualité d'image à n'importe quelle résolution et est idéal pour créer des images d'animation. Dans Illustrator, vous pouvez créer des images d'animation distinctes sur des calques, puis exporter les calques d'image sous forme d'images distinctes à utiliser sur votre site Web. Vous pouvez également définir symboles dans le fichier Illustrator pour réduire la taille de l'animation. Lors de l'exportation, chaque symbole n'est défini qu'une seule fois dans le fichier SWF.

Commande d'exportation (SWF)

Fournit le meilleur contrôle sur l'animation et la compression de bits.

Fournit plus de contrôle sur la combinaison de formats SWF et bitmap dans une mise en page fragmentée. Cette commande offre moins d'options d'image que la commande Exporter (SWF), mais utilise les derniers paramètres utilisés pour la commande Exporter (voir).

Gardez les consignes suivantes à l'esprit lors de la préparation d'un objet pour l'enregistrement au format SWF.

À l'aide de Device Central, vous pouvez voir à quoi ressemblera l'illustration Illustrator dans l'application Lecteur Flash sur divers appareils portables.

Insertion d'une illustration Illustrator

Créé en application Illustrator Vous pouvez rapidement, facilement et facilement copier et coller un graphique dans votre application Flash.

Les attributs suivants sont conservés lorsque vous collez une illustration Illustrator dans Flash.

Contours et formes

• Épaisseur de ligne

  Définition des dégradés

  Texte (y compris les polices OpenType)

  Images similaires

• Modes de fusion

En outre, Illustrator et Flash prennent en charge les éléments suivants lors de l’insertion d’une illustration.

Lors de la sélection de calques dans une illustration Illustrator haut niveau et leur insertion dans Flash préserve les calques et leurs propriétés (visibilité et blocage).

Les formats de couleur Illustrator autres que RVB (CMJN, niveaux de gris et formats personnalisés) sont convertis par Flash en format RVB... Les couleurs RVB sont collées de la manière habituelle.

Lors de l'importation ou du collage d'une illustration Illustrator, vous pouvez utiliser diverses options pour conserver certains effets (tels que l'ombre projetée par le texte) en tant que filtres Flash.

Flash enregistre les masques Illustrator.

Exportation de fichiers SWF à partir d'Illustrator

Les fichiers SWF exportés à partir d'Illustrator correspondent à la qualité et au taux de compression des fichiers SWF exportés à partir de Flash.

Lors de l'exportation, vous pouvez choisir parmi de nombreux styles prédéfinis pour une sortie optimale et spécifier comment plusieurs plans de travail sont utilisés, comment les symboles, les calques, le texte et les masques sont convertis. Par exemple, vous pouvez choisir d'exporter les symboles Illustrator sous forme de films, ou images graphiquesainsi que la création de symboles SWF à partir de calques Illustrator.

Importation de fichiers Illustrator dans Flash

Pour créer une mise en page complète dans Illustrator, puis l'importer dans Flash en une seule étape, vous pouvez enregistrer l'illustration au format natif d'Illustrator (AI) et l'importer en haute fidélité dans Flash à l'aide des commandes Fichier\u003e Importer dans le bureau. ou Fichier\u003e Importer dans la bibliothèque.

Si votre fichier Illustrator contient plusieurs plans de travail, sélectionnez le plan de travail à importer dans la boîte de dialogue Importation Flash et spécifiez les paramètres pour chaque calque de ce plan de travail. Tous les objets du plan de travail sélectionné sont importés dans Flash en tant que calque unique. Lorsque vous importez un plan de travail différent à partir du même fichier AI, les objets de ce plan de travail sont importés dans Flash en tant que nouveau calque.

Lorsque vous importez une illustration Illustrator sous forme de fichiers AI, EPS ou PDF, Flash conserve les mêmes attributs que lors du collage d’une illustration Illustrator. En outre, si le fichier Illustrator que vous importez contient des calques, vous pouvez les importer de l’une des manières suivantes.

Convertissez les calques Illustrator en calques Flash.

Convertissez les calques Illustrator en cadres Flash.

Convertissez tous les calques Illustrator en un seul calque Flash.

Récemment, divers types de graphiques SVG (Scalable Vector Graphics) sont devenus très populaires sur les sites Web et les applications. Cela est dû au fait que tous derniers navigateurs supporte déjà ce format. Voici une information sur la prise en charge du navigateur SVG.

Cet article couvre l'exemple le plus simple d'animation d'un vecteur SVG à l'aide du plugin léger Jquery Lazy Line Painter.

La source

Pour terminer et bien comprendre cette tâche, des connaissances de base en HTML, CSS, Jquery sont souhaitables, mais pas obligatoires si vous souhaitez simplement animer SVG) Commençons!

Et donc les étapes que nous devons suivre:

1. Créer une structure de fichiers correcte
2. Téléchargez et connectez le plugin
3. Dessiner des contours sympas dans Adobe Illustrator
4. Convertissez notre image en Lazy Line Converter
5. Collez le code résultant dans main.js
6. Ajoutez du CSS au goût

1. Créez la structure de fichiers correcte
Le service Initializr nous aidera avec cela, où vous devez sélectionner les paramètres comme dans l'image ci-dessous.

• H5BP classique (plaque de chaudière HTML5)
• Aucun modèle
• Juste HTML5 Shiv
• Minifié
• Classes IE
• Cadre chromé
• Cliquez ensuite sur Télécharger!

2. Téléchargez et connectez le plugin

Étant donné qu'initializr est livré avec la dernière bibliothèque jquery, à partir de l'archive que nous devons télécharger à partir du référentiel du projet Lazy Line Painter, nous n'avons besoin de transférer que 2 fichiers vers notre projet. Le premier est «jquery.lazylinepainter-1.1.min.js» (la version du plugin peut différer) et se trouve à la racine du dossier résultant. Le second est example / js / vendor / raphael-min.js.

Placez ces 2 fichiers dans le dossier js. Et nous les connectons à notre index.html avant main.js comme ceci:

3. Dessinez une image de contour sympa dans Adobe Illustrator

1. Dessinez notre image de contour dans Illustrator (le moyen le plus simple de le faire avec l'outil Stylo)
2. Il faut que les contours de notre dessin ne soient pas fermés car pour notre effet un début et une fin sont nécessaires
3. Il ne devrait y avoir aucun remplissage
4. Taille maximale du fichier - 1000 × 1000 px, 40 Ko
5. Recadrer sur objet\u003e Plans de travail\u003e Ajuster aux limites des plans de travail
6. Enregistrer au format SVG (les paramètres d'enregistrement standard feront l'affaire)

Par exemple, vous pouvez utiliser les icônes de la pièce jointe.

4. Convertissez notre image en Lazy Line Converter
Faites simplement glisser votre icône dans la case ci-dessous.
L'épaisseur, la couleur du contour et la vitesse de l'animation peuvent être modifiées dans le code lui-même qui apparaîtra après la conversion!

5. Collez le code résultant dans main.js
Maintenant, nous collons simplement le code résultant dans un fichier main.js vide
Paramètres:
strokeWidth - épaisseur du contour
strokeColor - couleur du contour
Vous pouvez également modifier la vitesse de dessin de chaque vecteur en modifiant les valeurs du paramètre de durée (par défaut 600)

6. Ajoutez du CSS au goût
Supprimer le paragraphe de index.html

Bonjour le monde! C'est HTML5 Boilerplate.

Et au lieu de cela, nous insérons un bloc dans lequel notre animation aura lieu

puis ajoutez du CSS au fichier main.css pour un meilleur look:

Corps (arrière-plan: # F3B71C;) #icons (position: fixe; haut: 50%; gauche: 50%; marge: -300px 0 0 -400px;)

enregistrez tous les fichiers.
Maintenant, ouvrez simplement index.html dans un navigateur moderne et profitez de l'effet.

P.S. lors du lancement sur une machine locale, le démarrage de l'animation peut être retardé de plusieurs secondes.

Un GIF transparent dans Adobe Illustrator se fait comme suit. Accédez au menu Fichier\u003e Enregistrer pour le Web et les appareils (Alt + Ctrl + Maj + S). Dans la fenêtre qui s'ouvre, dans le champ Format de fichier optimisé, vous devez d'abord aller dans l'onglet Taille de l'image (Taille de l'image). Le fait est que par défaut, la page entière entre dans la fenêtre d'optimisation, ce qui n'est généralement pas nécessaire. Par conséquent, dans l'onglet Taille de l'image, décochez la case Clip sur plan de travail (Recadrer à la taille de la page) et cliquez sur le bouton Appliquer.

Sélectionnez ensuite GIF dans la liste de sélection de format et cochez la case Transparence.

Après cela, nous déterminerons quelles couleurs seront transparentes. Toutes les couleurs présentes dans l'image sont contenues dans l'onglet Table des couleurs (Table des couleurs) et s'affichent sous forme de carrés colorés. Sélectionnez l'outil dans la barre d'outils sur le côté gauche de la fenêtre Pipette (pipette).

Il existe deux façons de définir les couleurs. Le moyen le plus simple est de spécifier une couleur avec une pipette directement sur l'image - après cela, la couleur sera mise en surbrillance dans la table des couleurs avec un trait sombre. Eh bien, si vous savez exactement quelle couleur doit être transparente, vous pouvez la sélectionner directement sur la table des couleurs en cliquant sur le carré de couleur correspondant. Et dans les premier et second cas, si vous devez sélectionner plusieurs couleurs, vous devez travailler avec la touche Maj (ou Ctrl) enfoncée. Après avoir choisi une couleur, vous devez demander au programme de la rendre transparente. Pour ce faire, cliquez sur l'icône Mappe les couleurs sélectionnées sur Transparent (Ajouter les couleurs sélectionnées à la transparence). Dans l'illustration, ce bouton est entouré et le rouge est sélectionné comme transparent. Une zone transparente apparaîtra sur l'image et le carré de la table des couleurs changera d'aspect - une partie deviendra un triangle blanc. Pour annuler la couleur sélectionnée, vous devez la sélectionner dans la table des couleurs, puis cliquer à nouveau sur l'icône Mapper les couleurs sélectionnées en transparent.

Quelques mots sur la manière de définir la transparence. Le menu déroulant en est responsable. Spécifier l'algorithme de tramage de transparence, en russe - Algorithme de simulation de transparence (Fig. ci-dessous). Quatre choix peuvent être faits: No Transparency Dither - pas d'algorithme, Diffusion Transparency Dither - algorithme diffus, Pattern Transparency Dither - algorithme basé sur un modèle et Noise Transparency Dither - algorithme basé sur le bruit. En mode algorithme diffus, le curseur devient actif Montant (Montant) qui vous permet de modifier la valeur de diffusion. Que mettre en pratique? Selon le but et l'image. Je n'utilise pas cette option et laisse toujours la valeur par défaut - No Transparency Dither.

Cliquez sur Enregistrer - le GIF transparent est prêt. Le travail a été effectué dans Adobe Illustrator version CS4 (v.14), mais toutes les actions et raccourcis clavier sont pertinents pour plus première version CS3 (version 13).

Adobe Illustrator et After Effects
Importer et animation simple

Hey. Aujourd'hui, nous examinons une animation simple dans After Effects.

Ressources: Adobe Illustrator CC
Adobe After Effects CC

Commençons par apprendre à dessiner dans Illustrator.

Dessiner
1) Dessinons un rectangle jaune pour l'arrière-plan

Figure 1 - Rectangle

2) Dessinez un cercle et remplissez-le d'un dégradé
Travaillons un peu sur le cercle:
- supprimez le point bas du contour, nous obtenons un arc;
- tracez une ligne droite, fermant le bas de l'arc, nous obtenons un demi-cercle

Figure 2 - 1) dessiner un cercle; 2) gradient; 3) supprimer le point

3) Dessinez un rectangle et faites-en une copie
- un rectangle gris;
- un autre rectangle est gris foncé
4) Dessinez un triangle à partir d'un astérisque en définissant le nombre de rayons - 3

Figure 3 - 1) lumière rectale; 2) rect foncé; 3) Triangle

5) Dessinez un chat en utilisant un stylo et des formes simples

Figure 4-1) tête; 2) cou; 3) corps; 4) jambe; 5) queue

Et maintenant le plus PRINCIPALE moment
Distribuons les images en calques (ce qui sera animé - sur un calque séparé) comme ceci:

Figure 5 - toutes les images (marque rouge les couches importantes)

Tout, maintenant nous économisons.
Voyons les paramètres de sauvegarde

Figure 6 - Enregistrer

Et maintenant la prochaine étape. FermerAdobe Illustrator et ouvrez After Effects.

Importer dans After Effects
Fichier - Importer - Fichier - sélectionnez notre fichier enregistré Illustrateur.
Choisissons d'importer des calques d'Illustrator, si nous mettons un métrage, nous obtiendrons une image avec des calques fusionnés, mais nous n'en avons pas besoin.

Figure 7 - Importer en tant que composition

Tout était importé.
Voyons maintenant ce que nous avons. Double-cliquez sur une composition ce qui s'ouvrirait et nous verrions les couches (si tout est fait correctement, il y aura plusieurs couches). Nous obtenons ceci, voir la figure

Figure 8 - Composition ouverte

Et maintenant, ce que nous sommes ici aujourd'hui, c'est l'animation.

Animation en Effets secondaires
Définissez le point de pivot sur la flèche en haut de celui-ci à l'aide de l'outil Panoramique derrière (raccourci - Y). Prenez juste un point et déplacez-le où vous voulez. En conséquence, cela ressemblera à ceci.

Figure 9 - Outil Panoramique et couches

D'accord, passons maintenant aux couches d'animation.
Nous avons besoin d'une couche Arrow et d'une couche Head_cat.
Commençons par la flèche.
Développons la liste, trouvons et cliquons sur l'horloge. C'est ainsi que nous mettons le premier point à zéro seconde. L'animation prendra 2 secondes au total.
Donc, ce sont les réglages que vous devez faire (mettez 3 points au total)

Seconde	0	1	2
	+66	- 70	+66

Voici à quoi cela ressemblera:

Figure 10 - Flèche de rotation

Animons maintenant la tête du chat.
Développons head_cat et trouvons Position.
Il y aura 4 points.
Cela ne changera que la dernière coordonnée sans toucher le reste.

Seconde	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

Nous regardons l'image.

Figure 11 - Position de la tête

Donc, le principe de l'animation était comme ça. La flèche oscille d'un côté à l'autre, dès qu'elle s'approche du chaton, elle rentre sa tête sur elle-même, s'attarde un peu dans cette position, puis la remet à sa place.

La dernière étape

Production
Vous devez créer un produit fini à partir de votre travail.
Nous allons au menu - Ajouter à la file d'attente de rendu
Le panneau Rendu s'ouvre et dans le module de sortie (deux clics) sélectionnez le format de sortie. J'ai pris * .mov

Figure 12 - Rendu

Appuyez sur le bouton RENDER et obtenez le résultat (n'oubliez pas de spécifier le chemin).
C'est tout.