Comment insérer une animation GIF dans Illustrator. Guide : comment créer une animation SVG à l'aide d'After Effects CC. Préparer un fichier SVG dans Illustrator

Le format de fichier Flash (SWF) est basé sur graphiques vectoriels et est conçu pour des graphiques compacts et évolutifs pour Internet. Ce format de fichier étant basé sur des graphiques vectoriels, l'objet conserve la qualité de l'image quelle que soit la résolution et est idéal pour créer des images d'animation. Dans Illustrator, vous pouvez créer des images d'animation individuelles sur des calques, puis exporter les calques d'image sous forme d'images individuelles à 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'export, chaque symbole n'est défini qu'une seule fois dans le fichier SWF.

Commande d'exportation (SWF)

Fournit le plus grand contrôle sur l’animation et la compression des bits.

Offre 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 Export (SWF), mais utilise les dernières options de commande Export utilisées (voir ).

Lorsque vous préparez un objet à enregistrer au format SWF, gardez les directives suivantes à l'esprit.

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

Insérer un graphique Illustrator

Un graphique créé dans Illustrator peut être copié et collé rapidement, facilement et facilement dans Application Flash.

Lorsque vous insérez un graphique Illustrator dans une application Flash, les attributs suivants sont conservés.

Contours et formes

• Épaisseur du trait

  Définitions des dégradés

  Texte (y compris les polices OpenType)

  Images connexes

• Modes de fusion

De plus, Illustrator et Flash prennent en charge les options suivantes lors de l'insertion d'un graphique.

Lorsque vous sélectionnez des calques entiers de niveau supérieur dans un graphique Illustrator et que vous les collez dans une application Flash, les calques et leurs propriétés (visibilité et verrouillage) sont préservés.

Les formats de couleurs Illustrator autres que RVB (CMYK, niveaux de gris et formats personnalisés) sont convertis en RVB par Flash. Les couleurs RVB sont insérées comme d'habitude.

Lorsque vous importez ou insérez un graphique Illustrator, vous pouvez utiliser diverses options pour enregistrer certains effets (tels que les ombres de texte) en tant que filtres Flash.

Flash conserve les masques Illustrator.

Exporter des fichiers SWF depuis Illustrator

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

Lorsque vous exportez, vous pouvez choisir parmi une variété de styles prédéfinis pour une sortie optimale, et spécifier comment vous souhaitez utiliser plusieurs plans de travail et comment vous souhaitez transformer les symboles, les calques, le texte et les masques. Par exemple, vous pouvez choisir d'exporter les symboles Illustrator sous forme de films ou images graphiques et créer des symboles SWF à partir de calques Illustrator.

Importation de fichiers Illustrator dans une application 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 (AI) d'Illustrator et l'importer avec précision dans Flash à l'aide des commandes Fichier > Importer vers. espace de travail ou Fichier > 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 Importer de 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 Programme Flash comme une seule couche. Lorsque vous importez un autre plan de travail à partir du même fichier AI, les objets de ce plan de travail sont importés dans Flash en tant que nouveau calque.

Lors de l'importation d'illustrations Illustrator au format AI, EPS ou Demande PDF Flash conserve les mêmes attributs que lors de l'insertion de graphiques Illustrator. De plus, si le fichier Illustrator que vous importez contient des calques, vous pouvez les importer à l'aide de l'une des méthodes suivantes.

Convertissez les calques Illustrator en calques Flash.

Convertissez les calques Illustrator en images Flash.

Convertissez tous les calques Illustrator en un seul calque Flash.

Salut tout le monde! Aujourd'hui, je vais essayer de décrire les capacités du programme Adobe Illustrator , en le comparant aux capacités du flash. Il ne s'agira pas d'une analyse globale du programme, mais plutôt d'une description de quelques fonctionnalités intéressantes que j'ai découvertes dans ce programme. J'ai collecté des informations pièce par pièce au fur et à mesure que je les étudiais afin de tout publier dans un seul article. J'avoue tout de suite que je ne suis pas un utilisateur très expérimenté d'Illustrator, je ne l'utilise pour dessiner que depuis six mois (avant cela, je dessinais tout en Flash). Beaucoup de gens se plaignent du fait que l’illustrateur est complexe et pas toujours intuitif. Dans une certaine mesure, je conviens qu'après le rinçage, ce programme est complexe. Mais l'essentiel ici n'est pas d'abandonner, mais de continuer à étudier. Et après quelques semaines, la pensée surgit : comment faisais-je sans cela avant !

Alors, qu’est-ce que j’ai aimé chez l’illustrateur et qu’est-ce que j’ai trouvé qui n’était pas en flash ?
1. Je vais commencer par le plus simple, mais en même temps nécessaire. Essayez de disposer les objets en cercle dans Flash. Était auparavant Outil Déco, mais il a été supprimé, apparemment jugé inutile. Nous avons décidé qu'il serait plus amusant de le faire avec les mains. Illustrator a cette fonction : Effet – Distorsion et transformation – Transformation.

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

2. Zigzag

Une chose encore plus simple, mais néanmoins utile. Cela semble être une petite chose, mais dans Flash, vous devez dessiner à la main, dans Illustrator, ce n'est qu'une question de secondes.

3. Déformation des objets (Warp)

Il n'y a rien de tel dans 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 dans dernière version programmes.

4. Arrondi automatique des coins (Round Corners)

Vous pouvez le faire manuellement : sur un objet graphique, lorsqu'il est sélectionné, un point blanc et une ligne arrondie apparaissent dans le coin (dans tous les coins). Nous faisons glisser avec la souris et l'ajustons à votre goût.

Mais cela ne s'applique qu'aux formes, avec un trait de crayon on fait un peu différemment - on applique un effet d'arrondi ( Effet – Styliser – Coins arrondis). A la sortie on obtient le même résultat.

5. Rugueux

L'effet s'applique aux formes simples ( Effet – Déformation et transformation – Roughen). Le résultat ressemble à des modèles 3D low-poly. Je trouve que c'est cool :) Et surtout, c'est très simple.

6. Plissement et ballonnement(Rétraction et Inflation)
Exemple dans l'image ci-dessous :

7. Expansion du formulaire (chemin de décalage)

Flash dispose d'une fonction Expand Fill ; il ne fonctionne pas du tout avec les traits de crayon, contrairement à Illustrator.

8. Pinceaux (pinceau artistique, pinceau à motifs, pinceau à dispersion)
Regardez l'image ci-dessous avec des exemples :

9. Pinceau texturé

Illustrator propose également de nombreux pinceaux de texture, dont j'ai parlé et comment ils sont apparus dans nouvelle versionéclair - . Il a été remarqué que l'utilisation des pinceaux dans Adobe Animate est terriblement lente. C'est ça:(

10. Je ne sais pas si c'est une vraie astuce, mais je veux me concentrer sur un pinceau avec un nom amusant GoutteBrosse. Situé dans la barre d’outils, c’est un pinceau très agréable à utiliser. Il a un tas de réglages, je l'aime plus que l'habituel. Il est difficile d’expliquer ses bienfaits avec des mots, il vaut mieux l’essayer une fois.

10. Diviser en grille

Une autre chose utile est la fonction Split to Grid (Object-Path-Split to Grid). Elle vous permet de couper la forme en segments égaux. Qu’est-ce que cela nous rappelle ? C'est vrai - des fenêtres dans un immeuble de grande hauteur. Je pense que c'est une bonne chose pour dessiner, par exemple, des paysages urbains ;)

Un autre outil utile présenté dans Illustrator, probablement depuis sa première version. Avec son aide, vous pouvez créer, par exemple, des textures de bois :

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

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

Illustrator est très pratique pour créer des motifs homogènes ( Objet-Motif-Création). Je me souviens avec quelle fureur j'ai développé la sophistication en flash avec la création de . Dans la version SS 2015 d'Illustrator, tout est automatisé ; un certain nombre de paramètres vous aideront à créer un motif dans des dizaines de variantes, en n'en ayant que quelques-unes sous la main. éléments graphiques. 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 un objet vectoriel modifiable à 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. Importez l'image que vous aimez dans Illustrator (Ouvrir), puis Objet - Créer une mosaïque d'objets. Dans les paramètres, nous précisons la fréquence de division en hauteur et en largeur.

Et en sortie on obtient :

15.Mélanger

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

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, sélectionnez le nombre d'étapes (le nombre d'objets clonés).

16. Outil de création de forme. Une chose très pratique pour travailler avec des primitives. En flash, il me semblait que c'était moins pratique.

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

Le module complémentaire est un outil qui permet de couper, de connecter, etc. automatiquement. formulaires en surbrillance. Quant à moi, ce n'est pas très pratique, je l'utilise plus souvent ConstruireFormeOutil.

(plans de travail)

18.Panneau d'outils personnalisé

La possibilité de créer votre propre barre d'outils, en supprimant celles inutiles et en choisissant uniquement 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 (Maj+F2). Dans Illustrator, ils peuvent tous être placés sous vos yeux. C'est pratique lorsque vous créez plusieurs versions du même dessin, afin que toutes les options soient sous vos yeux pour comparaison.

19.Isométrie utilisant Styles graphiques

Et la dernière chose est de créer une isométrie sans l'utiliser en 1 clic (ou plus précisément, en 3 clics, car on a 3 côtés ;) en utilisant des styles graphiques ( Styles graphiques). Je décrirai comment cela se fait la prochaine fois.

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

Un GIF transparent dans Adobe Illustrator est créé comme suit. Allez dans le menu Fichier > Enregistrer pour le Web et les appareils (Alt+Ctrl+Shift+S). Dans la fenêtre qui s'ouvre, dans le champ Format de fichier optimisé, vous devez d'abord vous rendre dans l'onglet Taille de l'image(Taille de l'image). Le fait est que par défaut, la page entière est incluse 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 le 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 des formats 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 Tableau des couleurs(Table des couleurs) et sont affichés 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 manières de définir les couleurs. Le moyen le plus simple consiste à spécifier une couleur avec une pipette directement sur l'image - après cela, la couleur sera mise en évidence sur 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. Dans le premier comme dans le deuxième 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 cela, cliquez sur l'icône Mappe les couleurs sélectionnées sur Transparent(Ajouter les couleurs sélectionnées à la transparence). Sur l'image, ce bouton est encerclé et la couleur rouge est définie sur transparent. Une zone transparente apparaîtra dans l'image et le carré de la table des couleurs changera d'apparence - 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 sur Transparent.

Quelques mots sur la méthode de réglage de 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). Il existe quatre choix : Pas de tramage de transparence, Dither de transparence de diffusion, Dither de transparence de motif et Dither de transparence de bruit. En mode algorithme diffus, le curseur devient actif Montant(Valeur) permet de modifier la valeur de diffusion. Que mettre en pratique ? Selon le but et l'image. Je n'utilise pas cette option et je la laisse toujours par défaut - Pas de tramage de transparence.

Cliquez sur Enregistrer - le GIF transparent est prêt. Le travail a été réalisé dans Adobe Illustrator version CS4 (v.14), mais toutes les actions et raccourcis clavier sont également pertinents pour la version antérieure CS3 (v. 13).

Vous avez une ou deux icônes que vous aimeriez donner vie avec une animation. Par où commenceriez-vous ? Disons que vous disposez de fichiers SVG, Illustrator CC et After Effects CC, mais la solution vous échappe.

Dans cet article, je vais montrer comment animer facilement un fichier SVG, notamment en préparant le fichier SVG dans Illustrator et en l'important dans After Effects CC. Je vais également vous expliquer comment vous pouvez le convertir en calques 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 : apprendre à donner vie aux images.

Préparer 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 disponible gratuitement sur Week Of Icons.

Après avoir ouvert le fichier, nous devons dissocier et diviser tous les objets en calques. Vous pouvez le faire manuellement ou utiliser Libérer sur les calques (séquence) pour accélérer le processus. Avant d'importer le fichier dans After Effects, nous devons l'enregistrer au format de fichier Illustrator.

Importer et organiser 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 > Importer > Fichier… Là, sélectionnez le fichier Illustrator CC que nous avons préparé et cliquez sur Importer. Une petite boîte de dialogue devrait apparaître avec le nom du fichier sélectionné. Sélectionner Composition dans la liste déroulante appelée Type d'importation.

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

Avant de commencer, nous devons convertir toutes ces couches en Calques de forme. Nous devons tous les sélectionner avec Ctrl+A/Commande+A, ou manuellement en utilisant Maj + Souris Gauche. Après ce clic clic-droit passez la souris sur le calque et sélectionnez Créer > Créer des formes à partir d'un calque vectoriel.

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

Bien que cela ne soit pas nécessaire, il est important de donner à chaque couche un nom et/ou un code couleur approprié. Cela nous permettra de travailler plus efficacement en nous concentrant sur le personnel clé. Dans l'exemple ci-dessous, les couleurs des étiquettes correspondent plus ou moins au remplissage de leurs calques correspondants.

Utilisez le raccourci clavier pour configurer les paramètres Ctrl+K/Commande+K ou Composition > 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. Pour ce projet, j'ai choisi 60 images par seconde pour garder l'animation fluide.

Sur ce moment Tout semble prêt, mais il reste encore une chose à faire. Nous devons regrouper certains calques afin que leurs mouvements soient synchronisés avec le calque principal, que nous pouvons contrôler. Cette méthode est appelée Parentalité.

Dans notre exemple, j'ai attribué des calques moins importants (calques enfants), tels que le pare-brise, les parties de la carrosserie, le bois et les cordes, au calque principal du corps (calque parent). Cela m'a permis de contrôler la position et la rotation de la voiture entière (sauf les roues) à l'aide du calque parent.

Créer une animation

Je voulais que la voiture heurte un rocher et reste suspendue un moment dans les airs. Je voulais aussi que l'arbre monte et descende et ouvre le tronc. J'ai commencé par créer une pierre, une voiture et des roues. Il est ensuite temps de surmonter le plus grand obstacle : mettre l'action sur l'arbre. Une fois cela fait, je suis passé aux pièces plus petites comme le support et les cordes.

La première étape consistait à créer un élément ou un calque rocheux, mais au lieu de revenir à 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.

Le coffre était une tâche relativement simple. Je l'ai monté à l'arrière de la voiture et j'ai fait un point d'ancrage au sommet en bas à gauche. À l’aide de Pick Whip, je l’ai attribué au calque du corps parent. L'avant-dernière étape consistait à donner l'effet de rotation, ce qui rendait le moment où la voiture rebondissait plus réaliste en combinaison 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 .

Adobe Illustrator et After Effects
Importer et animations simples

Ressources: Adobe IllustratorCC
Adobe After EffectsCC

Commençons par apprendre en dessinant dans Illustrator.

Dessinons
1) Dessinez un rectangle jaune comme arrière-plan

Figure 1 - Rectangulaire

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

Figure 2 - 1) tracer un cercle ; 2) dégradé ; 3) supprimer un 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 fixant le nombre de rayons à 3

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

5) Dessinez un chat à l'aide d'un stylo et de formes simples

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

Et maintenant le plus PRINCIPAL moment
Répartissons les images en calques (ce qui sera animé se trouve sur un calque séparé) comme ceci :

Figure 5 - toutes les photos (couches importantes marquées en rouge)

Ça y est, maintenant économisons.
Regardons les paramètres de sauvegarde

Figure 6 - Enregistrer

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

Importer dans After Effects
Fichier - Importer - Fichier - sélectionnez notre fichier enregistré Illustrateur.
Choisissons d'importer des calques depuis Illustrator ; si nous insérons des images, nous obtiendrons une image avec des calques fusionnés, mais nous n'en avons pas besoin.

Figure 7 - Importer en tant que composition

Voilà, importé.
Voyons maintenant ce que nous avons. Double-cliquez sur une composition , pour qu'il s'ouvre et qu'on voie les calques (si tout est fait correctement, il y aura plusieurs calques). Nous obtenons ceci, voir figure

Figure 8 - Composition ouverte

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

Animation dans Effets secondaires
Définissez le point de rotation en haut de la flèche à l'aide de l'outil Pan Behind ( touche de raccourci-Oui). Nous prenons simplement un point et le déplaçons là où c'est nécessaire. En conséquence, cela ressemblera à ceci..

Figure 9 - Outil Panoramique et Calques

Ça y est, passons maintenant aux calques d'animation.
Nous aurons besoin d'une couche Arrow et Head_cat.
Commençons par la flèche.
Développons la liste, trouvons-la et cliquons sur l'horloge. Nous fixons donc le premier point à zéro seconde. L'animation durera 2 secondes au total.
Voici donc les réglages que vous devez effectuer (nous mettrons 3 points au total) :

Animons maintenant la tête du chat.
Développons head_cat et trouvons Position.
Il y aura 4 points ici.
Seule la dernière coordonnée sera modifiée sans affecter les autres.

Figure 11 - Positionner la tête

Donc, le principe de l’animation était le suivant. La flèche se balance d'un côté à l'autre, dès qu'elle s'approche du chaton, elle rentre la tête, s'attarde un moment dans cette position, puis la remet à sa place.

La dernière étape

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

Figure 12 - Rendu

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