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.

Vous avez une ou deux icônes que vous souhaitez animer avec une animation. Par où commencerais-tu? Disons que vous avez des fichiers SVG, Illustrator CC et After Effects 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. tu peux trouver le mien fichiers Illustrator CC et After Effects CC.

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

salut! Aujourd'hui, je vais essayer de décrire les capacités du programme Adobe Illustratoren le comparant aux capacités de la chasse d'eau. Ce ne sera pas une analyse globale du programme par os, mais plutôt une description de quelques astuces intéressantes que j'ai découvertes dans ce programme. J'ai rassemblé les informations morceau par morceau pendant que je les étudiais pour tout mettre dans un seul post. Je dois avouer tout de suite que je ne suis pas un utilisateur très expérimenté d'un illustrateur, ce n'est que depuis six mois que je l'utilise en dessin (avant cela, je peignais tout en flash). Beaucoup de gens se plaignent que l'illustrateur est compliqué et pas toujours intuitif. Dans une certaine mesure, je suis d'accord qu'après le flash, ce programme est difficile. Mais l'essentiel ici n'est pas d'arrêter, mais de continuer à étudier. Et après quelques semaines, la pensée apparaît, comment pourrais-je me passer de lui avant!

Donc, ce que j'ai aimé chez l'illustrateur, et ce que j'ai trouvé par moi-même ce n'est pas en Flash.
1. Je vais commencer par le plus simple, mais en même temps nécessaire. Essayez d'organiser les objets en cercle en un éclair. Était auparavant Outil déco , mais il a été supprimé, apparemment considéré comme inutile. Nous avons décidé que c'était plus amusant de le faire avec des stylos. Illustrator a cette fonction: Effet - Distorsion et transformation - Transformation.

Tout est simple et rapide, les valeurs (distance entre objets, nombre de copies) sont définies par nous-mêmes dans les paramètres.

2. Zig-zag

Chose encore plus simple, mais néanmoins utile. Cela peut sembler une bagatelle, mais en un éclair, il faut dessiner à la main, chez un illustrateur c'est une question de secondes.

3. Déformation d'objets (Warp)

Il n'y a rien de tel dans le flash. Dans l'exemple ci-dessous, je n'ai montré que 2 façons de déformer des formes simples (Effet - Warp - Arc / Fish). En fait, il y en a 15 dernière version programmes.

4. Arrondissement automatique des coins (coins ronds)

Vous pouvez le faire manuellement: sur un objet graphique, lorsqu'il est sélectionné, un point blanc et un symbole de ligne arrondie apparaissent dans le coin (à tous les yeux). Nous tirons avec la souris, ajustez à votre goût.

Mais cela ne s'applique qu'aux formes, avec un trait de crayon d'une manière légèrement différente - appliquez l'effet d'arrondi ( Effet - Styliser - Coins ronds). En sortie, on obtient le même résultat.

5. Rugueux (grossissement)

L'effet est appliqué à des formes simples ( Effet - Distorsion et transformation - Rugueuse). En sortie, nous obtenons quelque chose qui ressemble à un modèle 3D low-poly. À mon avis, cool :) Et le plus important - très simple.

6. Pucker et ballonnement (Tirant et ballonnements)
Un exemple dans l'image ci-dessous:

7. Extension du formulaire (Offset Path)

Flash a une fonction Expand Fill, il ne fonctionne pas du tout avec les traits de crayon, contrairement à l'illustrateur.

8. Pinceaux (Art Brush, Pattern Brush, Scatter Brush)
Voir l'image ci-dessous avec des exemples:

9. pinceau de texture (pinceaux de texture)

En outre, Illustrator propose de nombreux pinceaux de texture sur lesquels j'ai écrit et comment ils sont apparus dans la nouvelle version de Flash -. Il a été remarqué que l'utilisation des pinceaux dans Adobe Animate est extrêmement lente. C'est tout:(

10. Je ne sais pas si c'est une astuce simple, mais je veux me concentrer sur un pinceau avec un drôle de nom GoutteBrosse... Situé dans la boîte à outils, un très joli pinceau à utiliser. Il a un tas de paramètres, je l'aime plus que d'habitude. Il est difficile d'expliquer avec des mots ses avantages, il vaut mieux l'essayer une fois.

10.Split à la grille

La fonction Split to Grid (Object-Path-Split to Grid), qui vous permet de couper une forme en segments égaux, est également utile. Qu'est-ce que cela nous rappelle? C'est vrai - des fenêtres dans un immeuble de grande hauteur. Quant à moi, une chose sympa pour dessiner, par exemple, des paysages urbains;)

Un de plus outil utileprésenté dans Illustrator, probablement depuis sa première sortie. Il peut être utilisé pour créer, par exemple, des textures de bois:

12. Déplacer (droite - Transformer - Déplacer)

Déplacement d'un objet d'une distance spécifiée. Si vous le souhaitez, vous pouvez créer immédiatement une copie, qui sera placée à la distance souhaitée de l'objet sélectionné horizontalement / ou verticalement. En plus première version flash était un plugin qui exécutait cette fonction... Malheureusement, je ne me souviens pas de son nom.

Il est très pratique de créer des modèles sans couture dans Illustrator ( Objet-Motif-Faire). Je me souviens comment j'étais frénétiquement sophistiqué dans le flash avec la création. Dans la version illustrateur de CC 2015, tout est automatisé, un tas de réglages aidera à mouler le motif dans des dizaines de variations, n'ayant que quelques éléments graphiques à portée de main. Dans les versions antérieures du programme, tout devait être fait manuellement, comme dans Flash jusqu'à présent.

(Remarque - un motif peut être transformé en objet vectoriel éditable à l'aide de la fonction d'analyse ( Objet - Développer l'apparence).

14. Mosaïque d'objets

Création d'une palette de couleurs basée sur une image existante. Nous importons l'image que nous aimons dans malade (Open), puis Objet - Créer une mosaïque d'objets... Dans les paramètres, nous spécifions la fréquence de division en hauteur et en largeur.

Et à la sortie, nous obtenons:

15.Mélange

Utilisé pour créer des dégradés. Vous pouvez créer des transitions étape par étape, comme dans l'image. Je ne dirai pas que je l'utilise souvent, mais cela peut être utile à quelqu'un. Je pense qu'il peut être utilisé pour créer de simples images d'arrière-plan.

L'outil peut également être utilisé pour cloner des objets. Placez deux objets à distance l'un de l'autre et appliquez les options de fusion, choisissez le nombre d'étapes (le nombre d'objets clonés).

16. Outil Construire la forme de l'outil. Une chose très pratique pour travailler avec des primitifs. En un éclair, cela me parut moins pratique.

Maintenez Alt et cliquez sur les segments sélectionnés - supprimez les segments. Si nous faisons simplement glisser la souris sur plusieurs zones sélectionnées - connexions.

Add-on est un outil qui permet de couper, de joindre, etc. automatiquement. formes mises en évidence. Quant à moi, ce n'est pas très pratique, je l'utilise souvent ConstruireFormeOutil.

(plans de travail)

18. Panneau d'outils personnalisés

Possibilité de créer votre propre barre d'outils, en supprimant les barres inutiles et de ne sélectionner que celles que vous utilisez.

Dans Flash, les plans de travail, à savoir les scènes ( Scène 1,2,3 ..) sont situés séparément et vous devez basculer entre eux (Shift + F2). Dans Illustrator, vous pouvez tous les placer devant vos yeux. C'est pratique lorsque vous créez plusieurs versions du même dessin, de sorte que toutes les options soient sous vos yeux pour comparaison.

19.Isométrie utilisant Styles graphiques

Et le dernier est de créer une isométrie sans l'utiliser en 1 clic (ou plus précisément, en 3 clics, car nous avons 3 faces;) en utilisant des styles graphiques ( Styles graphiques). Comment cela se fait, je signerai la prochaine fois.

Le point commun de l'illustrateur avec flash est la possibilité d'enregistrer un objet dans un symbole, et tout aussi facilement ce symbole peut être transféré vers un flash (ouvrez un fichier .ai en flash, en Importer - Importer vers la scène).
Un symbole dans Illustrator a les mêmes propriétés que dans Flash.
Et à la fin j'écrirai que dans l'illustrateur, à mon avis, il est inférieur au flash. Oui, oui, il y en a. Et c'est l'outil de remplissage ( Seau de peinture). Peu importe comment j'essaie de m'y habituer en cas de maladie, c'est plus pratique en flash.
Si mes notes vous sont devenues utiles ou si vous souhaitez ajouter quelque chose de vous-même - bienvenue dans les commentaires! Bonne chance à tous;)

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 - gif transparent prêt. Le travail a été effectué dans Adobe Illustrator version CS4 (v. 14), mais toutes les actions et raccourcis clavier sont pertinents pour la version antérieure de CS3 (v. 13).