Aujourd'hui, nous ne faisons pas une leçon ordinaire Adobe Illustrator. Parce que cette fois, nous ne ferons pas une image statique, mais la plus vraie animation. Imaginez, se révèle être avec en utilisant Adobe. Illustrator vous pouvez aussi dessiner des dessins :)

Et nous n'aurons besoin de rien pour cela. Couche compétente et organisation d'exportation travail fini Dans le format SWF, où chaque couche est convertie dans le cadre de l'animation. Dans la leçon d'aujourd'hui, nous dessinons une animation du compte à rebours dans le style rétro. À la sortie, un film flash avec ceci est le compte à rebours même.

La première chose à faire est de dessiner tous les articles nécessaires à une animation future. Pour ce faire, dans un document séparé fait deux positions du film film, le cercle de référence, qui est coupé dans des secteurs séparés, une texture et une rayure verticale pour ajouter l'effet de l'Antiquité, ainsi que tous les chiffres et inscriptions.

Lorsque toutes les parties de notre dessin animé sont prêtes, vous pouvez commencer à créer l'animation elle-même. Pour plus de commodité, il est préférable de faire dans un nouveau document. Dans le même temps, les couches joueront le rôle des cadres d'animation. Et dans la toute première couche, il suffit de copier le cadre du film. Placez-le au milieu de l'espace de travail.

Créez maintenant une deuxième couche et copiez une image des images de film dans celle-ci, dans laquelle les trous autour des bords sont fabriqués avec un décalage. Il doit également être situé au centre.

De ces deux couches, vous pouvez déjà avoir l'animation du film mobile. Mais plus tard, nous aurons besoin de beaucoup plus de couches. Par conséquent, mettez en surbrillance les deux premières couches, accédez aux options du panneau et effectuez une copie du calque.

De même, nous devons accumuler 12 couches avec des cadres du film, demandant à son mouvement.

Maintenant, nous avons un tas de couches et toutes sont visibles. En ce sens que les couches supérieures sont bloquées par le bas, ce qui n'est pas entièrement pratique pour le travail. Par conséquent, vous pouvez désactiver certaines couches en cliquant sur l'icône à l'aide de la gauche du nom de la couche. Pour éteindre ou activer toutes les couches à la fois, maintenez la touche ALT enfoncée lorsque vous cliquez sur l'icône GLAZIK. Y compris et éteindre les couches, vous pouvez voir exactement ce qui est situé dans un certain cadre de notre future animation. Et maintenant, pour ajouter des gigues de lumière au film en mouvement, vous devez mettre les cadres reçus un peu dans des directions différentes. Pour ce faire, activez uniquement le calque avec lequel vous allez travailler dans ce momentPuis déplacez le cadre sur une paire de pixels dans n'importe quelle direction.

Lorsque vous êtes allé sur toutes les couches et ajouté un petit changement, vous pouvez commencer à créer l'animation d'un cercle en mouvement. Pour ce faire, copiez le cercle composé de secteurs, d'un document avec une pièce de rechange de dessin animé et mettez-le sur la première couche sur le cadre du film.

Si vous supprimez la sélection du cercle, cela ressemblera à un seul entier. C'est ce dont nous avons besoin.

Mais comme il se compose de secteurs séparés, vous pouvez, changer de couleur, très rapidement et facilement créer une animation. Pour ce faire, copiez ce cercle dans la deuxième couche et faites le premier secteur plus léger. Vous vous rappelez que le film tremble en conduisant, il n'est donc pas nécessaire de mettre le cercle exactement au centre du cadre. Placez-le sur les yeux.

De même, vous devez copier le cercle sur chaque couche suivante tout en peignant la ligne de brossage sur un secteur plus que l'heure précédente. Tous ensemble, ces 12 couches forment une animation du mouvement du film avec un cercle de remplissage.

Ensuite, vous devez ajouter de la texture dans nos couches. Allumez le premier calque et copiez la texture dans le fichier source avec des pièces de rechange.

Puis, à son tour, allumez les couches suivantes et copiez la même texture là-bas. Pour qu'elle avait l'air différente sur chaque cadre, il suffit de le tourner sur un angle de 90 degrés. Comme vous l'avez déjà deviné, nous devons ajouter de la texture aux 12 cadres.

Si vous vous fatiguez déjà de faire face, je peux vous livrer - cela reste très peu. Le plus difficile déjà derrière. Il reste à ajouter des égratignures verticales et presque tout. Pour ce faire, copiez à nouveau la gratte d'origine et placez-la dans un endroit arbitraire en plusieurs couches. Dans mon cas, les égratignures n'apparaissent que dans deux couches.

Maintenant, c'est prêt le cycle principal avec l'animation du film, il reste à ajouter des chiffres. Comme il vient de 3 à 1 plus un autre mot aller !!!, alors nous avons besoin de plus de couches. Pas 12 ans, mais jusqu'à 48. Pour cela, vous devez faire trois autres copies de couches prêtes à l'emploi avec l'animation du film.

Et puis tout est simple. Nous allumons la toute première couche et mettons trois chiffres là-bas.

Ensuite, vous devez copier cette figure dans les calques suivantes jusqu'à ce que l'animation du cercle soit terminée. Lorsque vous atteignez la copie suivante du calque, où le cercle sera complètement rempli, vous devez mettre deux chiffres deux. De même, copiez le numéro un sur les couches souhaitées. Et lorsque vous arrivez aux dernières calques, conçues pour inscrire allez !!!, enlevez simplement le cercle avant de copier l'inscription dans la couche souhaitée.

Sur cela avec l'animation tout. La principale chose ici n'est pas de se confondre. Vous pouvez donner des couches quelques noms pratiques, mais j'étais en quelque sorte paresseux :) Et même lorsque vous avez fini de travailler, assurez-vous de retourner toutes les couches en cliquant sur l'icône de vitrage.

Dans la fenêtre avec les paramètres d'exportation, assurez-vous d'installer Exporter comme suit: Calques AI aux cadres SWF. C'est cette option qui transforme les couches d'illustrateur dans les cadres d'animation. Ensuite, cliquez sur le bouton Avancé.

Ouvert paramètres additionnels. Ici, vous devez définir le taux de trame de la fréquence de trame. J'ai 12 cadres par seconde. Une boucle de contrôle est responsable de l'animation cyclique. Grâce à elle, la vidéo sera jouée dans un cercle. Et l'option de commande de couche: bas up lit les couches d'illustrateur à partir du bas vers le haut dans le panneau. Juste que nous avons construit notre animation.

À la sortie, nous obtenons un film flash avec notre animation.

Maintenant, vous voyez que l'animation simple à faire dans Adobe Illustrator n'est pas si difficile qu'elle semble au premier abord.

Mais pour créer de longs rouleaux ou des applications interactives, il est toujours préférable d'utiliser Adobe Flash. soit d'autres éditeurs flash. Par exemple, ce chat que j'ai fait dans l'ancien Flash Macromedia, qui s'est désactivé au travail.

La dernière fois, HTML5 et CSS3 sont de plus en plus utilisés pour créer une animation. Ce code Soutenu par les navigateurs modernes et ne nécessite pas d'utilisation d'un lecteur Flash.

Roman aka dacascas. Surtout pour le blog note Microstrum Illustrator

Abonnez-vous à notre newsletter afin de ne pas manquer quoi que ce soit nouveau:

GIF transparent dans Adobe Illustrator est comme suit. Nous allons dans le fichier\u003e Enregistrer pour le menu Web et des périphériques (Alt + Ctrl + Maj + S). Dans la fenêtre qui s'ouvre dans le champ Fichier de fichier optimisé, vous devez d'abord aller à l'onglet. Taille de l'image (Taille de l'image). Le fait est que la page complète relève de 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, retirez la sélection de la case à cocher. Clip sur arboard. (Coupez la taille de la page) et appuyez sur le bouton Appliquer.

Ensuite, sélectionnez GIF dans la liste de sélection du format et marquez la case à cocher Transparence.

Après cela, nous définissons quelles couleurs seront transparentes. Toutes les couleurs présentes dans l'image sont contenues dans l'onglet. Table de couleurs (Table de couleur) et affichée sous la forme de carrés de couleur. Sélectionnez dans la barre d'outils dans la partie gauche de l'outil de fenêtre Pipette. (pipette).

Vous pouvez définir des couleurs de deux manières. Le moyen le plus simple de spécifier la couleur de la pipette directement sur l'image - après cela, la couleur est mise en surbrillance sur la table des couleurs avec une course sombre. Eh bien, si vous savez exactement de quelle couleur doit être transparent, vous pouvez la mettre en évidence directement sur la table des couleurs en appuyant sur la case de couleur appropriée. Et dans les premier et second cas, si vous devez sélectionner plusieurs couleurs, vous devez travailler avec la touche Shift (ou Ctrl). Après avoir sélectionné la couleur, vous devez spécifier le programme pour le rendre transparent. Pour ce faire, cliquez sur l'icône. Cartes Couleurs sélectionnées sur Transparent (Ajoutez des couleurs sélectionnées à la transparence). Dans l'image, ce bouton est encerclé et la couleur rouge est sélectionnée transparente. L'image apparaîtra une zone transparente et le carré de la table de table changera sa vue - une partie de celui-ci deviendra un triangle blanc. Pour annuler la couleur sélectionnée, vous devez la mettre en surbrillance dans la table de couleur, puis cliquez à nouveau sur les couleurs sélectionnées sur l'icône transparente.

Quelques mots sur la méthode de spécification de la transparence. Le menu déroulant en est responsable. Spécifiez la transparence ALI ALGORITHMEn russe, l'algorithme de simulation de la transparence (figure ci-dessous). Vous pouvez faire quatre choix: pas de transparence NIVER - Aucun algorithme, transparence de diffusion Dither - algorithme diffus, transparence de motif Dit - Modèle basé sur le motif et la transparence de bruit Thither - Algorithme à base de bruit. Dans le mode algorithme diffus devient un curseur actif Montant. (Valeur), ce qui permet de changer la valeur de la diffusion. Que appliquer dans la pratique? En fonction de l'objet et de l'image. Je n'utilise pas cette option et laissez toujours la valeur par défaut - pas de transparence de pitons.

Cliquez sur Enregistrer - GIF transparent prêt. Le travail a été effectué dans la version Adobe Illustrator de CS4 (V.14), mais toutes les actions et réductions de clavier sont pertinentes pour plus première version CS3 (v. 13).

Le format de fichier flash (SWF) est basé sur graphiques vectoriels Et conçu pour des graphiques évolutifs et compacts pour Internet. Étant donné que ce format de fichier est basé sur des graphiques vectoriels, l'objet enregistre la qualité de l'image à n'importe quelle résolution et est idéal pour créer des cadres d'animation. Dans Illustrator, vous pouvez créer des cadres d'animation distincts sur les couches, puis exporter les couches d'image en cadres individuels pour une utilisation sur le site Web. Vous pouvez également déterminer symboles Dans le fichier illustrator pour réduire la taille de l'animation. Lors de l'exportation, chaque caractère est défini dans le fichier SWF une seule fois.

Équipe d'exportation (SWF)

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

Fournit plus de contrôle sur le mélange des formats SWF et du bit dans une disposition fragmentée. Cette commande offre moins de paramètres d'image qu'à "Exporter" (SWF), mais utilise les derniers paramètres de commande utilisés pour "exporter" (voir).

Lors de la préparation d'un objet à enregistrer au format SWF, rappelez-vous les recommandations suivantes.

À l'aide de l'application Central de périphérique, vous pouvez voir comment l'objet Graphics illustrator ressemblait à l'application. Lecteur Flash. Sur divers dispositifs de poche.

Insertion de l'illustrateur d'objet graphique

Créé par annexe illustrateur L'objet graphique peut être rapide, simplement et sans difficulté à copier et coller dans l'application Flash.

Lors de l'insertion de l'objet Graphics illustrator, les attributs suivants sont enregistrés dans l'application Flash.

Contours et chiffres

• Épaisseur de merche

  Définition des gradients

  Texte (y compris les polices OpenType)

  Images associées

• Modes de recouvrement

De plus, l'illustrateur et le flash prennent en charge les possibilités suivantes lors de l'insertion d'un objet graphique.

Lorsque vous soulignez les couches d'illustrateur dans l'objet graphique haut niveau L'insertion complète d'entre eux dans les couches d'applications Flash et leurs propriétés (visibilité et blocage) sont enregistrées.

Les formats de couleur illustrator autres que RVB (CMJN, grades de formats gris et utilisateur) sont convertis par Flash format RVB. Les couleurs RVB sont insérées de la manière habituelle.

Lors de l'importation ou de l'insertion d'un objet graphique, l'illustrateur peut être enregistré à l'aide de différents paramètres pour enregistrer certains effets (par exemple, une ombre déposée par le texte) en tant que filtres Flash.

Flash garde les masques illustrator.

Exportations de fichiers SWF de l'application Illustrator

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

Lors de l'exportation, vous pouvez sélectionner l'un des nombreux styles prédéterminés offrant une sortie optimale et spécifier le procédé d'utilisation de plusieurs zones de montage, une méthode de conversion de caractères, de couches, de texte et de masques. Par exemple, vous pouvez spécifier l'exportation de caractères illustrator sous forme de rouleaux ou images graphiques, ainsi que la création de caractères SWF des couches d'illustrateur.

Importer des fichiers illustrator dans l'application flash

Pour créer une mise en page complète dans l'application Illustrator, puis l'importer dans l'application Flash en une étape, vous pouvez enregistrer l'objet graphique dans votre propre format illustrator (AI) et importer avec une grande précision dans l'application Flash à l'aide de la commande FILE \u003e "Importation dans la zone de travail" ou "fichier"\u003e importation vers la bibliothèque.

Si un fichier d'illustrateur Contient plusieurs zones de montage, sélectionnez la zone de montage à importer dans la boîte de dialogue d'importation du programme Flash et spécifiez les paramètres de chaque couche dans cette zone de montage. Tous les objets de la zone de montage sélectionnés sont importés dans le programme Flash en tant que couche unique. Lors de l'importation d'une autre zone de montage du même fichier AI, les objets de cette zone de montage sont importés dans le programme Flash en tant que nouvelle couche.

Lors de l'importation d'un illustrateur d'objet graphique sous la forme de fichiers AI, EPS ou PDF, l'application Flash enregistre les mêmes attributs que lors de l'insertion des objets graphiques illustrator. De plus, si le fichier d'illustrateur importé contient des calques, ils peuvent être importés dans l'une des méthodes suivantes.

Convertir des couches d'illustrateur en couches de flash.

Convertir des couches d'illustrateur en cadres Flash.

Convertissez toutes les couches d'illustrateur en une couche flash.

Récemment, l'animation SVG (graphismes vectoriels évolutifs) sur des sites et des applications est devenu très populaire. Cela est dû au fait que tous nouveaux navigateurs Supporte déjà ce format. Voici des informations pour soutenir les navigateurs SVG.

Cet article décrit l'exemple le plus simple de l'animation du vecteur SVG à l'aide du plugin de peintre paresseux Painter JQuery.

Code source

Pour remplir et compléter la compréhension de cette tâche, les connaissances de base de HTML, CSS, JQuery, mais pas nécessairement si vous voulez simplement animer SVG) montons!

Et donc les étapes que nous devons effectuer:

1. Créer la bonne structure de fichiers
2. Téléchargez et connectez Plugin
3. Dessinez une image de contour cool dans Adobe Illustrator
4. Convertir notre image dans le convertisseur de ligne paresseux
5. Insérez le code résultant dans Main.js
6. Ajoutez des CSS au goût

1. Créez la structure de fichier correcte
Avec cela, cela aidera le service initializr où vous devez sélectionner les paramètres comme dans l'image ci-dessous.

• Classic H5BP (plaque de chaudière HTML5)
• Aucun modèle.
• Juste HTML5 Shiv.
• Minifié
• Cœurs casses.
• Cadre chrome.
• Puis cliquez sur Télécharger!

2. Téléchargez et connectez le plugin

Étant donné que Initializr est livré avec la dernière bibliothèque de JQuery, à partir des archives que nous devons télécharger à partir du référentiel de projets paresseux de la ligne paresseuse, vous devez transférer uniquement 2 fichiers à notre projet. Le premier est 'jquery.lazylinePainter-1.1.min.js' (la version plug-in peut différer) elle est à la base du dossier résultant. Le second est Exemple / JS / Vendor / RaphaL-Min.js.

Ces 2 fichiers sont placés dans le dossier JS. Et connectez-les à notre index.html devant Main.Js comme suit:

3. Dessinez une image de contour raide dans Adobe Illustrator

1. Nous dessinons notre image de contour dans Illustrator (le moyen le plus simple de faire avec l'outil de stylo)
2. Il est nécessaire que les contours de notre dessin ne ferment pas TC pour notre effet. Début et fin
3. Il ne devrait y avoir pas de remplissage
4. Taille de fichier maximale - 1000 × 1000 px, 40kb
5. Crop to Object Objet\u003e Artboards\u003e Fit to Artboards Bounds
6. Enregistrer au format SVG (les paramètres d'enregistrement standard conviennent)

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

4. Convertissez notre image dans le convertisseur de lignes paresseux
Faites glisser votre icône dans la fenêtre située dans la figure ci-dessous.
Épais, la couleur du circuit et la vitesse d'animation peuvent être modifiées dans le code lui-même qui apparaîtra après la conversion!

5. Insérez le code résultant dans Main.js
Maintenant, insérez simplement le code reçu dans le fichier Main.Js vide.
Paramètres:
Coup de cachet - Épaisseur de 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 des CSS au goût
Supprimer du paragraphe Index.html

Bonjour le monde! C'est HTML5 Boiserie.

Et au lieu de cela, insérez le bloc dans lequel notre animation se produira

ajoutez ensuite des CSS au fichier principal.css pour un design plus agréable:

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. Lorsque vous commencez sur la machine locale, le début de l'animation commence pendant quelques secondes est possible.

Adobe Illustrator et. Effets secondaires.
Import I. animation simple

Salut. Aujourd'hui, il existe une simple animation après des effets.

Ressources: Adobe Illustrator CC
Adobe After Effects CC

Commençons à apprendre de dessiner dans Illustrator.

Dessiner
1) dessiner comme fond avec un rectangle jaune

Figure 1 - Rectangle

2) Tracez un cercle et une colline de gradient
Nous allons travailler un peu sur le cercle:
- Nous enlevons le point inférieur sur le contour, nous obtenons un arc;
- Passons une ligne droite en fermant le fond de l'arc, nous obtenons un demi-cercle

Figure 2 - 1) tirette cercle; 2) gradient; 3) Supprimer le point

3) Dessinez un rectangle et faites-en une copie
- un rectangle gris;
- Un autre rectangle gris foncé
4) Tracez un triangle d'un astérisque en réglant le nombre de rayons - 3

Figure 3 - 1) Lumière rectoble; 2) record du noir; 3) Triangle

5) Tracez un chat avec un stylo et des chiffres simples

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

Et maintenant très PRINCIPALE moment
Je distribue les images sur les couches (le fait qu'il sera animé - sur une couche séparée) comme ceci:

Figure 5 - Toutes les photos (marquez des couches importantes)

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

Figure 6 - Enregistrer

Et maintenant la prochaine étape. FermerAdobe Illustrator et ouvert après des effets.

Importer après des effets
Fichier - Importation - Fichier - Sélectionnez notre fichier enregistré Illustrator.
Sélectionnez pour importer des couches d'illustrateur Si vous livrez des images, nous aurons une photo avec les couches combinées et nous n'en avons pas besoin.

Figure 7 - Importation en tant que composition

Tous importés.
Et maintenant voyons ce que nous avons. Double-cliquez sur la composition Ce qui aurait été ouvert et nous avons vu des couches (si tout le monde a tout fait, il y aura plusieurs couches). Nous obtenons cela, voir dessin

Figure 8 - Composition ouverte

Et maintenant, pour ce que nous sommes ici aujourd'hui - animation.

Animation B. Effets secondaires.
Définissez le point de rotation des flèches en haut de celui-ci à l'aide de la casserole derrière l'outil (touche rapide - Y). Il suffit de prendre le point et de déplacer là où il est requis. En conséquence, cela ressemblera à ceci ..

Figure 9 - Panoramique et couches

Eh bien, tout, maintenant aller aux couches pour l'animation.
Nous aurons besoin d'une flèche de calque et de tête_cat.
Commençons par flèche.
Nous allons ouvrir la liste, trouver et cliquer sur l'horloge. Nous avons donc défini le premier point sur la seconde zéro. L'animation totale durera 2 secondes.
Donc, ces paramètres doivent être effectués (nous mettrons 3 points au total)

DEUXIÈME.	0	1	2
	+66	- 70	+66

C'est comme ça que ça va ressembler:

Figure 10 - Flèche rotation

Et maintenant animé la tête du chat.
Ouvrir la tête_cat et trouver Positionner.
Il y aura 4 points.
Il n'y aura que la dernière coordonnée ne touche pas le reste.

DEUXIÈME.	0.1	0.17	1.12	2.0
Positionner	689.3	729.3	729.3	689.3

Nous regardons la photo.

Figure 11 - Tête de position

Donc, le principe de l'animation était tel. La flèche se balançant de côté de côté dès que s'approcher du chaton, il tire un peu la tête en lui-même dans cette position, puis le retourne à la place.

La dernière étape

PRODUCTION
Il est nécessaire de créer un produit fini de votre travail.
Aller au menu - Ajouter à la file d'attente de rendu
Le panneau de rendu s'ouvre et sélectionnera le format de sortie du module de sortie. J'ai pris * .mov

Figure 12 - Rendu

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