GIF transparent dans Adobe Illustrator se fait 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. 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 to Artboard 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 Table des couleurs et sont affichées sous forme de carrés colorés. Sélectionnez l'outil Pipette dans la barre d'outils sur le côté gauche de la fenêtre.

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 ce faire, cliquez sur l'icône Mapper les couleurs sélectionnées sur Transparent. 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. Il est responsable du menu déroulant 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 de diffusion, le curseur Quantité devient actif, vous permettant 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 pertinents pour plus première version CS3 (v. 13).

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

Cet article traite exemple le plus simple Animation de vecteurs SVG à l'aide du plugin Jquery léger Lazy Line Painter.

Source

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

Et voici les étapes que nous devons suivre :

Créez la structure de fichier correcte

Téléchargez et connectez le plugin

Dessinez une image de contour sympa dans Adobe Illustrator

Convertir notre image en Lazy Line Converter

Collez le code résultant dans main.js

Ajoutez du CSS au goût

1. Créez la structure de fichiers correcte
Le service Initializr nous y aidera, où nous devons sélectionner des paramètres comme dans l'image ci-dessous.

• Classique H5BP (plaque de chaudière HTML5)
• Aucun modèle
• Juste HTML5 Shiv
• Minifié
• Cours IE
• Cadre chromé
• Cliquez ensuite sur Téléchargez-le !

2. Téléchargez et connectez le plugin

Puisque initializr est livré avec la dernière version Bibliothèque Jquery, à partir de l'archive que nous devons télécharger depuis le référentiel du projet Lazy Line Painter, nous ne devons transférer que 2 fichiers vers notre projet. Le premier est « jquery.lazylinepainter-1.1.min.js » (la version du plugin peut différer), il se trouve à la racine du dossier résultant. Le second est example/js/vendor/raphael-min.js.

Nous plaçons ces 2 fichiers dans le dossier js. Et nous les connectons à notre index.html avant main.js comme suit :

3. Dessinez une image de contour sympa dans Adobe Illustrator

Dessinez notre image de contour dans Illustrator (le moyen le plus simple de le faire est d'utiliser l'outil Plume)

Il faut que les contours de notre dessin ne se ferment pas car pour notre effet il nous faut un début et une fin

Il ne devrait y avoir aucun remplissage

Taille maximale du fichier – 1 000 × 1 000 px, 40 Ko

Faisons un recadrage jusqu'aux limites de l'objet Objet> Plans de travail> Ajuster aux limites des plans de travail

Enregistrez au format SVG (les paramètres d'enregistrement standard conviennent)

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 fenêtre de l'image ci-dessous.
L'épaisseur, la couleur du contour et la vitesse d'animation peuvent être modifiées dans le code lui-même, qui apparaîtra après conversion !

5. Collez le code résultant dans main.js
Maintenant, collez simplement le code résultant dans fichier vide main.js
Possibilités :
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 (600 par défaut)

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

Bonjour le monde! Il s’agit du passe-partout HTML5.

Et à la place nous insérons un bloc dans lequel notre animation aura lieu

puis nous ajoutons du CSS au fichier main.css pour le rendre plus joli :

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 de l'exécution sur une machine locale, le démarrage de l'animation peut être retardé de plusieurs secondes.

Adobe Illustrator et Effets secondaires
Importation et animation simple Bonjour. Aujourd'hui, nous examinons une animation simple dans After Effects.

Ressources : Adobe Illustrator CC
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) tracez 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 moment le plus IMPORTANT
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. Fermez Adobe Illustrator et ouvrez After Effects.

Importer dans After Effects
Fichier - Importer - Fichier - sélectionnez notre fichier Illustrator enregistré.
Choisissons d'importer des calques depuis Illustrator ; si nous insérons du 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

Voilà, importé.
Voyons maintenant ce que nous avons. Double-cliquez sur la composition pour qu'elle s'ouvre et que l'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 After Effects
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) :

Deuxième	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 ici.
Seule la dernière coordonnée sera modifiée sans affecter les autres.

Deuxième	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

Regardons la photo.

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.
Allez dans le 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.

Aujourd'hui, nous avons une leçon Adobe Illustrator inhabituelle. Car cette fois nous ne ferons pas une image statique, mais une véritable animation. Imaginez, il s'avère que vous pouvez également dessiner des dessins animés avec Adobe Illustrator :)

Et pour cela, nous n’avons besoin de rien du tout. Bonne organisation des couches et export travail final au format swf, où chaque calque est converti en une image d'animation. Dans le didacticiel d'aujourd'hui, nous allons dessiner une animation de compte à rebours dans le style d'un film rétro. Le résultat devrait être une vidéo flash avec ce même compte à rebours.

La première chose à faire est de dessiner tous les éléments nécessaires à une future animation. Pour ce faire, dans un document séparé, j'ai réalisé deux positions d'un cadre de film, un cercle de référence, qui est découpé en secteurs séparés, une texture et une rayure verticale pour ajouter l'effet d'antiquité, ainsi que tous les chiffres et les inscriptions.

Lorsque toutes les parties de notre dessin animé sont prêtes, nous pouvons commencer à créer l'animation elle-même. Pour plus de commodité, il est préférable de le faire dans un nouveau document. Dans ce cas, nos calques joueront le rôle d'images d'animation. Et dans la toute première couche, il vous suffit de copier une image du film. Placez-le au milieu de votre zone de travail.

Créez maintenant un deuxième calque et copiez-y une image du film, dans laquelle les trous le long des bords sont réalisés avec un décalage. Il doit également être placé au centre.

À partir de ces deux couches, vous pouvez déjà obtenir une animation de film en mouvement. Mais plus tard, nous aurons besoin de beaucoup plus de couches. Sélectionnez donc les deux premiers calques, accédez aux options du panneau et faites une copie des calques.

De la même manière, nous devons accumuler 12 couches d’images du film qui définissent son mouvement.

Nous avons maintenant tout un tas de calques et ils sont tous visibles. Dans le sens où les couches supérieures bloquent les couches inférieures, ce qui n'est pas tout à fait pratique pour le travail. Par conséquent, vous pouvez désactiver certains calques en cliquant sur l'icône avec un œil à gauche du nom du calque. Pour activer ou désactiver tous les calques en même temps, maintenez la touche Alt enfoncée tout en cliquant sur l'icône en forme d'œil. En activant et désactivant les calques, vous pouvez voir exactement ce qui se trouve dans une image spécifique de notre future animation. Et maintenant, pour ajouter une légère instabilité au mouvement du film, nous devons déplacer légèrement les images résultantes dans des directions différentes. Pour ce faire, activez uniquement le calque avec lequel vous allez travailler. ce moment, puis déplacez le cadre de quelques pixels dans n'importe quelle direction.

Une fois que vous avez parcouru tous les calques et ajouté un petit décalage, vous pouvez commencer à créer l'animation du cercle en mouvement. Pour ce faire, copiez le cercle composé de secteurs du document contenant les parties du dessin animé et placez-le sur le premier calque au-dessus du cadre du film.

Si vous désélectionnez le cercle, il ressemblera à un tout unique. C'est exactement ce dont nous avons besoin.

Mais comme il se compose de secteurs individuels, vous pouvez créer une animation très rapidement et facilement en changeant leur couleur. Pour ce faire, copiez ce cercle sur le deuxième calque et éclaircissez le premier secteur. Vous vous souvenez que notre film tremble lorsqu'il bouge, il n'est donc pas du tout nécessaire de placer le cercle exactement au centre du cadre. Positionnez-le à l'œil nu.

De la même manière, vous devez copier le cercle dans chaque calque suivant, tout en peignant un secteur de plus avec une couleur plus claire que la fois précédente. Ensemble, ces 12 couches forment une animation du film se déplaçant avec un cercle rempli.

Ensuite, nous devons ajouter de la texture à nos calques. Activez le premier calque et copiez la texture du fichier original avec les pièces de rechange.

Activez ensuite les calques suivants un par un et copiez-y la même texture. Pour lui donner un aspect différent dans chaque image, faites-le simplement pivoter de 90 degrés. Comme vous l'avez peut-être deviné, nous devons ajouter de la texture aux 12 images.

Si vous en avez déjà assez de copier, alors je peux vous faire plaisir - il en reste très peu. Le plus dur est passé. Il ne reste plus qu'à ajouter des rayures verticales et c'est presque tout. Pour ce faire, nous copions à nouveau le scratch original et le plaçons à un endroit arbitraire en plusieurs couches. Dans mon cas, les rayures n’apparaissent que sur deux couches.

Maintenant que le cycle principal avec l'animation cinématographique est prêt, il ne reste plus qu'à additionner les chiffres. Puisque notre compte à rebours passe de 3 à 1 plus le mot Go !!!, nous avons besoin d'encore plus de couches. Pas 12, mais jusqu'à 48. Pour ce faire, vous devez créer trois copies supplémentaires de calques prêts à l'emploi avec une animation cinématographique.

Et puis tout est simple. Allumez le tout premier calque et placez-y le numéro trois.

Ensuite, vous devez copier cette figure dans les calques suivants jusqu'à la fin de l'animation du cercle. Lorsque vous atteignez la copie suivante des calques, où le cercle sera à nouveau complètement rempli, vous devez mettre le chiffre deux. De la même manière, copiez le numéro un dans les calques souhaités. Et lorsque vous arrivez aux derniers calques de l'inscription Go!!!, supprimez simplement le cercle avant de copier l'inscription sur le calque souhaité.

C'est tout pour l'animation. L'essentiel ici est de ne pas se tromper. Vous pouvez donner aux calques des noms pratiques, mais j'étais un peu paresseux :) Et aussi, lorsque vous avez terminé votre travail, assurez-vous de réactiver tous les calques en cliquant sur l'icône en forme d'œil.

Dans la fenêtre des paramètres d'exportation, veillez à définir Exporter sous : couches AI vers des images SWF. C'est cette option qui transforme les calques Illustrator en images d'animation. Ensuite, cliquez sur le bouton Avancé.

Des paramètres supplémentaires s'ouvriront. Ici, vous devez définir la fréquence d'images. J'ai 12 images par seconde. La case à cocher Looping est responsable de l'animation cyclique. Grâce à lui, la vidéo sera jouée en cercle. Et l’option Ordre des calques : de bas en haut reproduit les calques de l’illustrateur de bas en haut dans le panneau. C'est exactement ainsi que nous avons construit notre animation.

Le résultat est une vidéo flash avec notre animation.

Maintenant tu vois ça animations simples le faire dans Adobe Illustrator n'est pas aussi difficile qu'il y paraît à première vue.

Mais pour créer de longues vidéos ou des applications interactives, il est toujours préférable d'utiliser Adobe Flash ou d'autres éditeurs flash. Par exemple, j'ai réalisé ce chat dans un vieux Macromédia Flash, que j'ai déterré dans mon travail.

De plus, récemment, HTML5 et CSS3 sont de plus en plus utilisés pour créer des animations. Ce code est pris en charge par les navigateurs modernes et ne nécessite pas l'utilisation d'un lecteur Flash.

Roman alias dacascas spécialement pour le blog

Abonnez-vous à notre newsletter pour ne rien manquer de nouveauté :

Vous avez une ou deux icônes que vous aimeriez donner vie avec une animation. Par où commenceriez-vous ? Disons que vous avez 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.

Nous pouvons dissocier les objets en utilisant Release to Layers (Sequence) pour ne pas perdre de temps précieux. 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 un fichier, ou allons dans Fichier > Importer > Fichier... À partir de 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électionnez Composition dans la liste déroulante intitulée Importer le type.

Plus façon rapide importer un fichier - double-cliquez sur l'emplacement de la colonne dans le panneau du projet.

Dans le panneau Timeline, nous verrons une 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 tous ces calques en calques de forme. Nous devons tous les sélectionner en utilisant Ctrl+A/Command+A, ou manuellement en utilisant Shift + Left Mouse. Après cela, faites un clic droit 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 vers le haut du panneau au-dessus des calques Illustrator CC, puis supprimez les calques Illustrator CC afin qu'ils ne gênent pas.

Convertir les 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 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.

Étiqueter les calques de forme avec des noms, des couleurs, du texte et un emplacement appropriés est très pratique.

Pour configurer les paramètres, utilisez le raccourci clavier 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.

À ce stade, tout semble être 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 s'appelle Parenting.

Utilisez Pick Whip pour attribuer un calque parent à plusieurs calques.

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.

Croquis décrivant l'animation

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.

Oh, le puissant outil stylo !

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 à son tour rendait le moment où la voiture rebondissait plus réaliste. Bodymovin 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 .