Comment créer une animation simple dans Illustrator. Tutoriel illustré sur Adobe Illustrator CS. Téléchargez et connectez le plugin
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 IllustratorCommenç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.
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 s'appelle Parenting.
Utilisez Pick Whip pour attribuer un calque parent à plusieurs calques. Dans notre exemple, j'ai attribué des couches moins significatives (couches enfants) telles que Pare-brise, les parties du corps, le bois et les cordes jusqu'à la couche de corps principale (couche 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 animationJe 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. 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 .
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 présente l'exemple le plus simple d'une animation vectorielle SVG utilisant le plugin Jquery léger Lazy Line Painter.
SourcePour 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 :
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
Étant donné qu'initializr est livré avec la dernière bibliothèque Jquery, à partir de l'archive que nous devons télécharger depuis le 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), 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
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, nous collons simplement le code résultant dans un fichier main.js vide
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. au démarrage machine locale Il peut y avoir un retard de plusieurs secondes au démarrage de l'animation.
Salut tout le monde! Aujourd'hui, je vais essayer de décrire les possibilités Programmes Adobe Illustrator, en le comparant aux capacités de 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. Auparavant, il existait un Deco Tool, mais il a été supprimé, apparemment considéré comme inutile. Nous avons décidé qu'il serait plus amusant de le faire avec les mains. Illustrator a cette fonction : Effet – Distorsion&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, nous procédons un peu différemment - nous appliquons un effet arrondi (Effet – Styliser – Coins arrondis). A la sortie on obtient le même résultat.
5. Rugueux
L'effet est appliqué à des formes simples (Effet – Distort&Transform – 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. Pucker&Bloat (tiraillements et ballonnements)
Exemple dans l'image ci-dessous :
7. Expansion du formulaire (chemin de décalage)
Flash possède 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 s'il s'agit d'une véritable astuce, mais je veux me concentrer sur un pinceau portant le drôle de nom Blob Brush. 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) qui 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. Une version antérieure de Flash avait un plugin qui faisait cette fonction. Malheureusement, je ne me souviens pas de son nom.
Illustrator est très pratique pour créer des motifs homogènes (Object-Pattern-Make). 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é : de nombreux paramètres vous aideront à créer un motif dans des dizaines de variantes, avec seulement quelques éléments graphiques à portée de main. En plus versions précédentes Tous les programmes devaient être réalisés manuellement, comme dans Flash jusqu'à présent.
(Remarque : le motif peut être transformé en un objet vectoriel modifiable à l'aide de la fonction 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 l’illustration (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, j'utilise souvent l'outil Build Shape.
(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 des 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 (Graphic Styles). Je décrirai comment cela se fait la prochaine fois.
Ce que l'illustrateur a en commun avec Flash, c'est la possibilité d'enregistrer un objet dans un symbole, et tout aussi facilement ce symbole peut être transféré vers Flash (ouvrez le fichier dans flash.ai en utilisant Import – Import to stage).
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 (Paint Bucket). 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;)
Optimisation des graphiques Web
Informations graphiques est transmis beaucoup plus lentement que le texte et le temps de chargement des images est proportionnel à leur taille fichiers graphiques. Par conséquent, le chargement rapide des pages Web nécessite une petite taille de fichier intégré. images graphiques, ce qui est obtenu grâce à leur optimisation. L'optimisation de l'image fait référence à sa transformation, garantissant une taille de fichier minimale tout en maintenant la qualité d'image requise dans ce cas, obtenue principalement en réduisant le nombre de couleurs dans les images graphiques, en utilisant des formats de fichiers compressés et spéciaux et en optimisant les paramètres de compression pour chaque image. fragments.
Illustrator dispose d'outils d'optimisation d'image intégrés qui rendent le processus d'optimisation rapide et efficace grâce à diverses méthodes de prévisualisation. L'aperçu donne une idée assez précise de ce à quoi ressemblera l'image optimisée en temps réel, ce qui vous aide à évaluer le résultat de l'optimisation et à sélectionner avec succès les bons paramètres. Et vous pouvez optimiser à la fois les images créées directement dans Illustrator et d'autres, par exemple les photographies censées être placées sur un site Web.
Les paramètres d'optimisation sont définis dans la fenêtre Enregistrer pour le Web, appelée par la commande du même nom depuis le menu Fichier. Le programme vous propose d'utiliser l'un des quatre modes de prévisualisation, mais deux sont les mieux adaptés pour évaluer la qualité de l'optimisation :
- Visualisation simultanée 2-Up (deux options) de l'image originale et optimisée conformément aux paramètres spécifiés (Fig. 1) ;
- 4-Up (quatre options) Dans ce mode, la fenêtre est divisée en quatre fenêtres (Fig. 2) pour afficher l'image originale et trois versions de l'image optimisée : la première version est créée en fonction des valeurs d'optimisation définies, et la les deux autres sont des variantes des paramètres d'optimisation actuels.
Les deux modes vous permettent de gagner considérablement du temps dans la recherche de la meilleure option d'optimisation, car ils éliminent le besoin d'enregistrer des images avec différents paramètres d'optimisation et de leur comparaison visuelle ultérieure. De plus, il est possible d'évaluer non seulement la qualité de l'image optimisée, mais également sa taille et son temps de chargement sous différentes options de connexion. A titre de comparaison, le mode le plus pratique est 4-Up (quatre options), qui vous permet d'évaluer visuellement l'effet de la compression ou de la réduction de palette sur la qualité de l'image et sa taille et finalement de déterminer les meilleurs paramètres d'optimisation.
Illustrator vous permet d'optimiser les graphiques Web non seulement aux formats GIF, JPG, PNG-8 et PNG-24, mais également SWF et SVG. Les images indexées comportant un petit nombre de couleurs sont enregistrées au format GIF. Le format JPG est utilisé pour enregistrer des images en couleur et en niveaux de gris, des photographies et des graphiques riches en couleurs, tels que des remplissages dégradés. Pour les images en couleur avec des zones transparentes, le format PNG est utilisé, ce qui vous permet d'enregistrer à la fois des images indexées et en couleur, tandis qu'au format PNG-8, le nombre maximum possible de couleurs de l'image optimisée est de 256, et dans au format PNG-24, l'image peut avoir des millions de couleurs, et c'est pourquoi elle ressemble Format JPEG. La différence entre PNG-24 et JPEG est que la méthode de compression utilisée pour optimiser les images au format PNG-24 n'entraîne pas de perte de qualité, mais par conséquent la taille du fichier augmente. Les formats SVG et SWF combinent des graphiques, du texte et des composants interactifs et peuvent également être optimisés.
Considérons exemple spécifique optimisation des images. Disons qu'un logo de site Web a été développé dans Illustrator (Fig. 3), initialement enregistré au format AI. Une tentative de l'optimiser immédiatement pour le Web ne mènera à rien de bon, puisque dans ce cas l'image sera automatiquement recadrée, ce qui ne prendra pas en compte la véritable position de l'inscription résultante suite à la déformation (Fig. 4 et 5).
Essayons donc d'exporter le logo au format PSD avec la commande File=>Export (File=>Export) la taille de l'image créée sera de 143 Ko. Ouvrez le fichier PSD résultant et utilisez la commande Fichier => Enregistrer pour le Web. Compte tenu du nombre limité de couleurs impliquées dans l'image, dans ce cas le format GIF est optimal, dont les paramètres spécifiques doivent être décidés. En expérimentant les paramètres, vous pouvez vous assurer que meilleure qualité donne l'algorithme de compression par défaut du programme, Sélectif. Quant au lissage, compte tenu de la présence d'un remplissage dégradé, il est préférable de choisir un algorithme avec génération de bruit Noise (Fig. 6). La taille du fichier d'optimisation résultant sera de 6,729 Ko (Fig. 7), tandis que la transparence de l'arrière-plan sera préservée, ce qui est facile à vérifier en enregistrant l'image au format GIF avec le fichier HTML (Fig. 8). De ce fait, dans cet exemple, les fichiers Emblem.html et Emblem.gif ont été obtenus dans le dossier Primer1.
Les boutons de contrôle graphiques constituent un élément spécifique indispensable à la conception de toute page Web. Il est tout simplement impossible d’imaginer une page sans eux. Le dessin de boutons est devenu aujourd'hui un genre particulier et Illustrator vous permet de créer les options les plus complexes. Par exemple, les boutons conçus comme des objets maillés et/ou avec des masques de superposition sont beaucoup plus impressionnants que les boutons classiques.
Envisagez la possibilité de créer un bouton rond et convexe dans Illustrator. Dessinez un objet vectoriel sous la forme d'un cercle rempli d'une couleur arbitraire (Fig. 9) et convertissez-le en maillage avec la commande Objet => Créer un filet de dégradé (Objet => Créer un filet de dégradé), en spécifiant quatre lignes et quatre colonnes, et dans la liste Apparence, en sélectionnant l'option To Center Highlight égale à 60 (Fig. 10). Sélectionnez l'outil Sélection directe et cliquez dans le coin supérieur gauche de l'objet, en sélectionnant les points d'ancrage qui s'y trouvent (Fig. 11). Changez la couleur de la cellule correspondante en blanc en la sélectionnant dans la palette Nuancier (Fig. 12).
Prenez l'outil Ellipse, placez le marqueur de la souris au centre du cercle créé précédemment et, en maintenant les touches Alt et Shift enfoncées, étirez le nouveau cercle sur l'ancien afin qu'il soit 1 à 2 pixels plus grand que l'ancien sur tout côtés. Donnez-lui une bordure noire (Trait) de 1 à 2 pixels de large et remplissez-la d'un dégradé radial dans le sens du rouge au blanc (Fig. 13). Faites glisser l'objet vectoriel créé de 1 à 2 pixels vers la droite et vers le bas, puis, sans supprimer la sélection, faites un clic droit dessus et sortez menu contextuel sélectionnez Organiser => Envoyer vers l'arrière-plan. Le résultat sera un blanc pour le bouton, illustré à la Fig. 14.
En règle générale, sur n'importe quelle page Web, il existe plusieurs boutons du même type, ne différant, par exemple, que par la direction des flèches dessinées dessus, indiquant le sens de déplacement sur le site. Considérons le cas le plus simple d'avoir deux boutons, dont l'un, avec une flèche vers le bas, signifiera passer à la page suivante, et un bouton avec une flèche vers le haut signifiera passer à la page précédente. Comme modèle de flèche, prenons un triangle régulier, dessiné avec l'outil Polygone, peint en noir et, pour plus d'effet, également conçu comme un objet maillé. Déplacez la flèche vers le bouton et ajustez la position de tous les objets les uns par rapport aux autres à l'aide des boutons correspondants dans la palette Aligner. Le premier des boutons résultants est illustré sur la Fig. 15. Faisons une copie du calque avec le bouton en sélectionnant la commande Dupliquer les calques, nous obtiendrons ainsi deux calques identiques. Sélectionnez ensuite la flèche sur la copie du calque et faites-la pivoter de 180° en sélectionnant la commande Transform=>Rotate Transformation=>Rotate dans le menu contextuel. Nous obtiendrons le même bouton que celui illustré sur la Fig. 16. Veuillez noter qu'il est beaucoup plus pratique de stocker tous les mêmes types de boutons pour un projet dans un seul fichier sur différents calques, ce qui est démontré dans ce cas.
Vous devez maintenant enregistrer les versions optimisées de chaque bouton. Rendez d'abord le calque inférieur invisible, dans ce cas, le bouton du calque supérieur sera conservé. Sélectionnez la commande File=>Save for Web, configurez les paramètres d'optimisation du bouton, par exemple, comme indiqué sur la Fig. 17, cliquez sur le bouton Enregistrer et entrez un nom de fichier. Le bouton finalement enregistré est illustré à la Fig. 18. Renvoyez maintenant la visibilité au calque inférieur, rendez le calque supérieur invisible et enregistrez le deuxième bouton de la même manière, en lui donnant un nom différent. Le résultat est présenté sur la Fig. 19.
Il ne reste plus qu'à s'assurer que les boutons semblent tout à fait acceptables sur la page Web et à les placer sur une page personnalisée (Fig. 20). En conséquence, dans cet exemple, le fichier Primer2.html et deux images graphiques ont été obtenues dans le dossier images (dossier Primer2).
Si vous le souhaitez, il est facile de transformer un bouton en tranche pendant le processus d'optimisation. Dans ce cas, après avoir sélectionné la commande File=>Save for Web (File=>Save for Web) et défini les paramètres d'optimisation, vous devez sélectionner l'outil Slice Select dans la palette d'outils et double-cliquer sur l'image, qui finira par se transforme automatiquement en tranche portant le numéro de série 1 (Fig. 21). Un double-clic à nouveau ouvrira la fenêtre Options de tranche, dans laquelle vous devrez spécifier un lien et éventuellement modifier le nom de la tranche (Figure 22), puis enregistrer l'image optimisée. Le résultat dans ce cas sera les fichiers Primer3.html (Fig. 23) et Primer3.gif (dossier Primer3).
Une façon de donner vie à une page consiste à introduire des éléments de conception qui modifient son apparence(ou état) en fonction du comportement de la souris ou, moins souvent, en cas d'autres situations : mise à l'échelle, défilement, chargement, erreurs, etc.
Parmi ces éléments, les plus connus sont les rollovers (de l'anglais roll over roll over, turn over) qui changent d'apparence sous l'influence de la souris. Des exemples de survols typiques sont les boutons animés. Les survols sont souvent utilisés lors de la création d’autres éléments de navigation sur un site Web. En réalité, tout survol n'est pas une, mais plusieurs (jusqu'à quatre) images dont chacune correspond à un événement précis. Les principaux événements sont considérés comme les suivants : Normal état normal, Survolez le curseur de la souris sur un élément et appuyez vers le bas sur le bouton gauche de la souris lorsque vous passez le curseur dessus. Théoriquement, des événements tels que Clic en relâchant le bouton gauche de la souris après avoir cliqué, Up après avoir relâché le bouton, Out en quittant la zone active peuvent être impliqués. Cependant, en pratique, ils se limitent souvent à changer d'élément uniquement pour les trois, voire deux premiers événements.
Renversements classiquesAu sens classique, un survol est une série d'images graphiques au format GIF et le code HTML correspondant, grâce auquel, en fonction du comportement de la souris, une image en remplace une autre dans la fenêtre du navigateur.
Illustrator n'est pas destiné à créer directement des survols au sens classique du terme, mais il peut aider à développer les éléments initiaux de ceux-ci. L'idée dans ce cas est de créer un calque avec l'image correspondant au premier événement. Faites ensuite une copie du calque et transformez l'image pour qu'elle corresponde au deuxième événement, et ainsi de suite. L'image multicouche résultante est exportée vers un fichier PSD avec les calques conservés, sur la base duquel un survol est créé dans le programme Image Ready. L'avantage d'utiliser le programme Illustrator, comme dans de nombreux autres cas, réside dans un certain nombre de fonctionnalités intéressantes qui ne sont pas disponibles dans d'autres logiciel, combiné à la commodité de transformer des graphiques vectoriels.
Essayons de créer un survol sous la forme d'une inscription qui change de couleur en fonction du comportement de la souris. Ouvrez Illustrator et créez une forme en forme de rectangle arrondi rempli de noir (Fig. 24), faites-en une copie et placez-la dans une partie libre de l'écran. Convertissez la première copie du rectangle en un objet maillé avec une surbrillance au centre (commande Objet=>Créer un objet de maillage de dégradé=>Créer un maillage de dégradé), en spécifiant quatre lignes et dix colonnes (Fig. 25). Activez la deuxième copie du rectangle et réglez-la sur un remplissage dégradé approximativement comme indiqué sur la Fig. 26. Superposez l'objet dégradé sur celui du maillage, réduisez l'opacité de l'objet dégradé à environ 80 % et la taille d'environ 1 pixel pour éventuellement simuler l'effet d'une bosse. Et puis imprimez l'inscription sur les objets. Dans sa forme originale, laissez-lui une couleur blanche, qui correspondra à l'état Normal (Fig. 27), puis lorsque l'état de survol change, la couleur de l'inscription changera, par exemple, en vert lorsque le marqueur de la souris est survolé (état Over) et devient bleu lorsque le bouton de la souris est enfoncé (état Down).
Faites attention à la palette Calques à ce stade, elle ne contient qu'un seul calque. Faites deux copies de ce calque en utilisant la commande Dupliquer le calque du menu de la palette Calques : il y aura trois calques dans la palette (Fig. 28). Ensuite, dans la première copie du calque, changez la couleur de l'inscription en vert et dans la deuxième copie en bleu (Fig. 29). En conséquence, le blanc nécessaire au retournement sera obtenu.
Exportez l'image créée au format PSD, en préservant les calques, en utilisant la commande Fichier=>Exporter et en sélectionnant le modèle de couleur RVB (Fig. 30). Ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 31 et 32). Créez des images basées sur des calques en sélectionnant la commande Créer des images à partir de calques dans le menu de la palette Animation. La fenêtre Animation ressemblera à la Fig. 33. Dans ce cas, un seul état Normal sera initialement créé dans la palette Survols.
Ensuite, dans la fenêtre Animation, sélectionnez l'image correspondant à l'état induit, et le calque Layer 1 Copy sera automatiquement sélectionné dans la palette Calques (Fig. 34). Allez dans la palette Rollovers et cliquez sur le bouton Créer un état de survol (Créer un état de survol) fig. 35, ce qui fera apparaître l'état Over State dans la palette Rollovers (Fig. 36). Créez un état Down de la même manière. Activez l'état Normal dans la palette Survols et supprimez toutes les images de la palette Animation sauf celle qui doit correspondre à l'état Normal. En conséquence, pour chaque état de survol, il n'y aura qu'une seule image dans la palette Animation (Fig. 37, 38 et 39).
Riz. 38. Vue de l'image, de la fenêtre Animation et des palettes Calques et Survols pour l'état Over State
Vérifiez le résultat en cliquant sur le bouton Aperçu dans le navigateur par défaut de la barre d'outils et en accédant à la fenêtre du navigateur (Figure 40). Après cela, enregistrez le fichier à l'aide de la commande File=>Save Optimized et en spécifiant l'option HTML et Images (*.html). En conséquence, dans cet exemple, le fichier Primer4.html et une série d'images graphiques ont été obtenues dans le dossier images.
Riz. 40. Fenêtre du navigateur avec élément Rollover
Survols SVGLe format SVG (Scalable Vector Graphics) de plus en plus populaire Graphiques vectoriels), créé sur la base du standard XML, permet également de recevoir divers éléments interactifs, notamment des rollovers, mais en pratique cela est implémenté de manière complètement différente. Il est à noter que la création de survols SVG interactifs, contrairement aux survols classiques, lorsque le code HTML correspondant est généré de manière entièrement automatique, nécessite une connaissance du langage JavaScript et une compréhension des principes de base de la programmation orientée objet.
Pour travailler avec des objets SVG, il existe une palette spéciale Interactivité SVG, qui peut être facilement ouverte à l'aide de la commande Fenêtre => Interactivité SVG (Fenêtre => Interactivité SVG) fig. 41.
Considérons cette option de création d'un survol en prenant l'exemple d'un bouton interactif dont la couleur de l'inscription passera du noir au bleu lorsque vous survolerez la souris et se transformera à nouveau en noir lorsque la souris quittera la zone active.
Créez un bouton rectangulaire avec des bords arrondis et sélectionnez un remplissage dégradé approprié, par exemple comme indiqué sur la Fig. 42. Ajustez la transparence du bouton dans la palette Transparence. Dans cet exemple, la valeur Opacité est définie sur 50%. Faites une copie du bouton, remplissez-le de vert foncé (Figure 43), puis convertissez-le en objet maillé avec la commande Objet => Créer un filet de dégradé, en spécifiant quatre lignes et dix colonnes, et dans la liste Apparence (Vue) en sélectionnant l'option Au centre et en définissant la valeur de surbrillance sur 100. Réduisez l'opacité du calque avec l'objet maillé à environ 40 % (Fig. 44). Placez un objet maillé au-dessus d'un objet dégradé et le bouton ressemblera à celui illustré sur la Fig. 45.
Riz. 44. Transformer une copie d'un bouton en un objet maillé
Complétez le bouton avec l'inscription souhaitée et ajustez sa position à l'aide des boutons correspondants dans la palette Aligner. L'image résultante contiendra un calque avec trois objets superposés les uns sur les autres (Fig. 46). Les événements planifiés seront relatifs à un objet texte, donc pour plus de commodité, changez son nom en Texte en double-cliquant sur l'objet et en saisissant un nouveau nom. De même, changez le nom du calque de Calque 1 à Calque (Fig. 47).
Le traitement des événements implique l'utilisation de procédures JavaScript. Vous devez donc inclure un fichier décrivant ces procédures. Il s'appelle Events.js et est enregistré sur le disque dans le dossier Sample Files\Sample Art\SVG\SVG lorsque vous installez Adobe Illustrator. Pour connecter le fichier Events.js, utilisez la commande JavaScript Files SVG Interactivity (Fig. 48). Ensuite, vous devez cliquer sur le bouton Ajouter et rechercher le fichier souhaité sur votre disque dur. Lorsque son nom apparaît dans le champ URL (Figure 49), cliquez sur le bouton Terminé.
Riz. 48. Sélection de la commande Fichiers JavaScript
Ensuite, vous devez définir une réponse aux événements de souris pour l'objet Texte. Sélectionnez l'objet Texte, dans le champ Evénement de la palette Interactivité SVG, sélectionnez l'événement onmouseover elemColor(evt, "Text", "#3333FF") cela signifiera que lorsque la souris sera sur l'objet Texte, sa couleur changera en bleu (Fig. 50 ). Pour que la couleur du texte devienne noire une fois que la souris quitte la zone active, vous devrez créer un autre événement onmouseout, en le sélectionnant dans le champ Événement de la palette d'interactivité SVG. Ensuite, dans la ligne d'action, entrez le texte elemColor(evt, "Text", "#000000"), cela ramènera la couleur au noir (Figure 51).
Riz. 51. Aspect final de la palette d'interactivité SVG pour l'objet Texte
Enregistrez le survol créé en tant que fichier SVG avec la commande Fichier=>Enregistrer sous (Fichier=>Type de fichier format SVG, puis en définissant les options d'enregistrement du fichier SVG comme indiqué sur la Fig. 52. Après l'enregistrement, vous n'en recevrez qu'un seul. un seul fichier avec l'extension SVG, et non deux, comme dans le cas d'un rollover classique, dans ce cas le fichier Primer5.svg (dossier Primer5) a été reçu.Cependant, pour que le rollover fonctionne réellement, vous devez en plus copier le fichier Events.js à partir de la description des procédures JavaScript. Après cela, vous pouvez vérifier la fonctionnalité du survol - le résultat ressemblera à celui illustré sur la Fig. 53.
Le format SVG peut également être utilisé pour véhiculer une animation. Essayons de créer un élément animé simple (dans ce cas il s'agira d'informations sur l'entreprise), qui apparaîtra à l'écran lorsque vous passerez la souris sur l'objet graphique correspondant et disparaîtra lorsque vous retirerez la souris de l'élément interactif.
Créons approximativement la série suivante d'objets graphiques et textuels, comme le montre la Fig. 54. Renommons tous les objets créés de manière pratique en cliquant séquentiellement sur le nom de l'objet suivant dans la palette Calques et en entrant nom désiré(Fig. 55). Veuillez noter que ceux mis en évidence sur la Fig. 56 objets Text1, Text2, Text3 et Path1 seront toujours visibles, et tous les autres uniquement lorsque vous passerez la souris sur l'objet Text1.
Riz. 54. Vue originale de l'image
Incluez le fichier Events.js décrivant les procédures JavaScript en utilisant la commande Fichiers JavaScript de la palette d'interactivité SVG, en cliquant sur le bouton Ajouter, en pointant sur le fichier souhaité sur votre disque dur et en cliquant sur le bouton Terminé.
Définissez une réponse aux événements de souris pour l'objet Text1. Sélectionnez l'objet Texte, dans le champ Événement de la palette Interactivité SVG, sélectionnez l'événement onmouseover et dans la ligne en dessous saisissez le texte elemShow(evt, "Text4"); elemShow(evt, "Chemin2") . Par conséquent, lorsque la souris passe sur l'objet Text1, les objets Text4 et Path2 deviendront visibles. Attention, si plusieurs actions doivent être effectuées lorsqu'un événement survient, elles doivent être précisées à l'aide du signe « ; ». Effectuez ensuite une opération similaire pour l'événement onmouseout, en saisissant le texte correspondant, ce qui signifie masquer des objets (Fig. 57).
Enregistrez le résultat sous forme de fichier SVG à l'aide de la commande Fichier => Enregistrer sous, en spécifiant le nom du fichier, en sélectionnant le format SVG dans le champ Type de fichier, puis en définissant les options d'enregistrement du fichier SVG conformément à la Fig. 58. Après l'enregistrement, le fichier Primer6.svg sera reçu (dossier Primer6). N'oubliez pas de copier le fichier Events.js dans le dossier contenant ce fichier. Si après ça tu cours parce que ce fichier, alors vous verrez le résultat montré sur la Fig. 59. C'est presque ce dont vous avez besoin. La seule chose qui n'était pas incluse dans nos plans était l'apparence initiale des objets Text 4 et Path 2 lors du chargement. Pour remédier à cette lacune, sélectionnez les deux données d'objet à la fois et créez une action pour elles elemHide(evt, "Text4"); elemHide(evt, "Path2") lors de l'événement onload (Fig. 60). Enregistrez à nouveau le fichier et assurez-vous que les objets Text4 et Path2 ne sont désormais visibles que lorsque vous survolez l'objet Text1.
Toute page Web est impensable sans animation Web, y compris les gifs animés. L'une des options pour les créer consiste à utiliser l'application Adobe ImageReady, qui permet, entre autres, de créer une animation à partir de calques. Dans ce cas, l'image multicouche elle-même peut être préparée dans différentes applications, notamment Adobe Illustrator.
Il est très simple de créer une animation à partir d'éléments de la palette Symboles, ouverte avec la commande Fenêtre=>Symboles, ou d'une des bibliothèques de symboles pouvant être ouvertes grâce à la commande Fenêtre=>Bibliothèques de symboles. ).
Par exemple, nous essaierons d'augmenter la taille de n'importe quel objet symbole, les étapes clés du processus d'augmentation de l'objet doivent être définies sur des calques séparés. Tout d’abord, placez simplement les objets symboles les uns au-dessus des autres, puis augmentez la taille de chaque objet suivant, par exemple comme le montre la Fig. 61. En conséquence, un calque avec de nombreux objets sera créé dans la palette Calques (Fig. 62). Si vous exportez directement cette image au format PSD, cela ne donnera rien, puisqu'il n'y a qu'un seul calque, et naturellement, lorsque vous ouvrirez le fichier PSD dans le programme ImageReady, il n'y aura également qu'un seul calque. Par conséquent, vous devez d’abord placer les objets sur différents calques. Ceci peut être fait différentes façons Le moyen le plus simple consiste à sélectionner d’abord le calque 1 dans la palette Calques et à utiliser la commande Relâcher vers le calque. Le résultat sera que chacun des objets sera déplacé vers son propre calque, mais ils seront tous imbriqués dans le calque 1. Par conséquent, vous devrez ensuite faire glisser manuellement tous les calques imbriqués vers le haut de la palette Calques afin qu'ils soient au-dessus du calque Calque 1, puis simplement supprimer le calque Calque 1 désormais vide (Fig. 63). Exportez l'image au format PSD en utilisant la commande Fichier=>Exporter avec les paramètres comme sur la Fig. 64.
Chargez le fichier PSD créé dans le programme ImageReady (Fig. 65 et 66). Ouvrez le menu de la palette Animation Créer des images à partir de calques. En conséquence, cinq images seront créées, chacune correspondant à son propre calque, et la fenêtre de la palette Animation ressemblera à la Fig. 67.
Après cela, définissez la durée de chacune des images créées. Dans ce cas, la durée de toutes les images est définie sur 0,2 s. Et puis enregistrez l'animation avec optimisation à l'aide de la commande File=>Save Optimized (File=>Save with optimisation). Le résultat obtenu peut ressembler à la Fig. 68.
Il est encore plus pratique d’obtenir des blancs qui peuvent ensuite être facilement convertis en animation dans ImageReady pour utiliser les fonctions Live Blends d’Illustrator. Cette utilisation combinée d'Illustrator et d'ImageReady accélère considérablement le processus de création d'animations GIF.
Par exemple, dessinez deux objets multicolores arbitraires, puis connectez-les avec un lien de fusion avec les paramètres appropriés (Fig. 69). Il est impossible d'utiliser ce fichier directement pour créer une animation, puisque l'image est sur un seul calque (Fig. 70). Par conséquent, vous devrez d’abord placer chaque élément de l’objet de fusion sur un calque séparé. Pour ce faire, dans la fenêtre Calques, sélectionnez la ligne, activez le menu de la palette en cliquant sur la flèche noire dans son coin supérieur droit et sélectionnez la commande Libérer vers la séquence de calques (Fig. 71). Maintenez la touche Maj enfoncée, sélectionnez les calques créés et placez-les au-dessus du calque Calque 1, puis supprimez le calque Calque 1 lui-même, en le déplaçant vers la corbeille. La palette des calques prendra la même forme que sur la Fig. 72.
Riz. 70. Etat initial Fenêtres Calques
Exportez le fichier créé au format PSD à l'aide de la commande Fichier=>Exporter. Ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 73). Veuillez noter que tous les calques créés dans Illustrator apparaîtront dans la fenêtre des calques (Fig. 74) et dans la fenêtre Animation, il n'y aura pour l'instant qu'une seule image.
Activez le menu de la palette Animation en cliquant sur la flèche noire dans le coin supérieur droit de la palette et sélectionnez la commande Créer des images à partir de calques. En conséquence, dans cet exemple, cinq images seront créées et la fenêtre de la palette Animation prendra la place. formulaire conforme à la fig. 75. Sélectionnez toutes les images tout en maintenant la touche Maj enfoncée et définissez la durée d'image appropriée dans cet exemple, le même temps de 0,2 s est pris pour chaque image. Enregistrez ensuite le fichier avec optimisation à l'aide de la commande Fichier=>Enregistrer optimisé (Fichier=>Enregistrer avec optimisation), en définissant l'option Images uniquement (*.gif) dans la liste Type de fichier. L'animation ressemblera à la Fig. 76.
Ce qui semble beaucoup plus intéressant, ce n'est pas le mouvement, mais le redimensionnement fluide des objets mélangés. Par exemple, vous pouvez utiliser la transition de mélange déjà créée. Dans ce cas, après avoir créé des calques séparés pour chaque élément de transition de fusion, placez tous les objets les uns sur les autres à l'aide des boutons Centre d'alignement horizontal et Centre d'alignement vertical de la palette Aligner (Fig. 77) .
Exportez le fichier créé au format PSD (Fichier=>Export File=>Export) et ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 78). Créez des images d'animation basées sur des calques (Créer des images à partir de calques Créer des images à partir de calques) et sélectionnez une durée appropriée pour elles (Fig. 79). Et puis, pour rendre l'animation plus efficace, copiez les images existantes, mais dans l'ordre inverse pour que l'image augmente d'abord puis diminue, et ainsi de suite en cercle (Fig. 80). Enregistrez ensuite le fichier d'optimisation (Fichier=>Enregistrer le fichier optimisé=>Enregistrer avec optimisation). L'animation résultante est présentée sur la Fig. 81.
Riz. 80. Etat de la fenêtre Animation après duplication d'images
Riz. 81. Animation terminée
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 (raccourci - Y). 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 |
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 |
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.
