GIF transparent dans Adobe Illustrator se fait comme suit. Accédez au menu Fichier\u003e Enregistrer pour le Web et les appareils (Alt + Ctrl + Maj + S). Dans la fenêtre qui s'ouvre, dans le champ Format de fichier optimisé, vous devez d'abord aller dans l'onglet Taille de l'image (Taille de l'image). Le fait est que par défaut, la page entière entre dans la fenêtre d'optimisation, ce qui n'est généralement pas nécessaire. Par conséquent, dans l'onglet Taille de l'image, décochez la case Clip sur plan de travail (Recadrer à la taille de la page) et cliquez sur le bouton Appliquer.
Ensuite, dans la liste de sélection de format, sélectionnez GIF et cochez la case Transparence.
Après cela, nous définirons quelles couleurs seront transparentes. Toutes les couleurs présentes dans l'image sont contenues dans l'onglet Table des couleurs (Table des couleurs) et s'affichent sous forme de carrés colorés. Sélectionnez l'outil dans la barre d'outils sur le côté gauche de la fenêtre Pipette (pipette).
Il existe deux façons de définir les couleurs. Le moyen le plus simple est de spécifier une couleur avec une pipette directement sur l'image - après cela, la couleur sera mise en surbrillance dans la table des couleurs avec un trait sombre. Eh bien, si vous savez exactement quelle couleur doit être transparente, vous pouvez la sélectionner directement sur la table des couleurs en cliquant sur le carré de couleur correspondant. Et dans le premier et 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 Mappe les couleurs sélectionnées sur Transparent (Ajouter les couleurs sélectionnées à la transparence). Dans l'illustration, ce bouton est entouré et le rouge est sélectionné comme transparent. Une zone transparente apparaîtra sur l'image et le carré de la table des couleurs changera d'aspect - une partie deviendra un triangle blanc. Pour annuler la couleur sélectionnée, vous devez la sélectionner dans la table des couleurs, puis cliquer à nouveau sur l'icône Mapper les couleurs sélectionnées en transparent.
Quelques mots sur la manière de définir la transparence. Le menu déroulant en est responsable. Spécifier l'algorithme de tramage de transparence, en russe - Algorithme de simulation de transparence (Fig. ci-dessous). Quatre choix peuvent être faits: No Transparency Dither - pas d'algorithme, Diffusion Transparency Dither - algorithme diffus, Pattern Transparency Dither - algorithme basé sur un modèle et Noise Transparency Dither - algorithme basé sur le bruit. En mode algorithme diffus, le curseur devient actif Montant (Montant) qui vous permet de modifier la valeur de diffusion. Que mettre en pratique? Selon le but et l'image. Je n'utilise pas cette option et laisse toujours la valeur par défaut - No Transparency Dither.
Cliquez sur Enregistrer - le GIF transparent est prêt. Le travail a été effectué dans Adobe Illustrator version CS4 (v. 14), mais toutes les actions et raccourcis clavier sont pertinents pour la version antérieure de CS3 (v. 13).
Maintenant, compliquons un peu la tâche - nous allons créer une bannière Flash animée. Bien sûr, il n'est pas nécessaire de parler d'animation Flash à part entière - il existe des packages spécialisés pour cela. Mais vous pouvez également utiliser Illustrator pour créer une vidéo amateur simple.
Il n'y a pas d'outils spéciaux ni d'outils d'interface, comme la chronologie, qui sont typiques des programmes de développement d'animation, dans Adobe Illustrator. Mais il y a une subtilité: vous pouvez utiliser des calques comme cadres.
Créez une bannière avec uniquement du texte.
- Groupez les personnages avec la commande Objet ›Groupe (Objet ›Groupe).
- La tâche suivante consiste à créer des objets de contour à partir des caractères de police, sinon la formation correcte des calques ne fonctionnera pas. Pour ce faire, sélectionnez le groupe et sélectionnez Tapez ›Créer des contours (Police ›Trace).
- Après cela, ouvrez le menu de la palette Couches (Calques) en cliquant sur le bouton fléché de la palette (Fig. 8.11).
Figure: 8.11... Menu de la palette Calques
Nous sommes intéressés par la commande de ce menu Relâcher vers le calque (séquence) (Convertir en couches (séquentiellement)), qui convertit chaque objet individuel en nouvelle Couche... Veuillez noter que le groupe doit être sélectionné lors de l'utilisation de la commande Groupe, pas une couche Couche 1.
À quoi devrait ressembler la palette Couches (Couches) après exécution Relâcher vers le calque (séquence) (Convertir en couches (séquentiel)), illustré à la Fig. 8.12.
Figure: 8.12... Palette des calques après l'exécution de Release to Layer (Sequence)
Ceci termine la préparation, vous pouvez économiser avec Enregistrer pour le Web (Enregistrer pour le Web) dans SWF. SWF est le format graphique grand public basé sur les technologies Flash. Il serait plus exact de dire qu'il s'agit du format Flash (Fig. 8.13).
Probablement, aujourd'hui, tous les utilisateurs sont déjà plus ou moins familiers avec Flash. C'est actuellement le format d'animation le plus répandu sur Internet et il est utilisé pour créer la grande majorité des pages Internet multimédias.
Bien sûr, Adobe Illustrator n'a même pas un dixième des capacités de Flash, car le programme n'est pas destiné à cela. Cependant, vous pouvez y faire une image statique ou animation simple.
Figure: 8,13... Paramètres d'optimisation pour le format SWF
Les paramètres suivants existent.
- Lecture seulement (Seulement lecture). Si vous cochez la case, le fichier sera écrit de telle manière qu'il ne pourra plus être ouvert pour être édité dans aucun programme. Cela, d'une part, réduit la taille des fichiers et, d'autre part, protège vos droits d'auteur.
- Le paramètre indiqué par 1. Le paramètre définissant le type d'enregistrement est une image ou une animation.
- Si vous choisissez l'option Fichier AI vers fichier SWF (Fichier Illustrator dans un fichier SWF), l'image sera enregistrée en tant qu'image statique qui répète complètement ce que vous voyez à l'écran lorsque vous travaillez dans Illustrator.
- Calques en cadres SWF (Calques vers cadres SWF) vous permet d'animer des calques existants pour les présenter sous forme de cadres. Nous devons choisir cette option particulière.
- Qualité de la courbe (Qualité de la courbe). Précision des courbes du fichier pour répéter les courbes de l'image d'origine. La diminution de ce paramètre diminue considérablement la qualité, en particulier dans le domaine des détails fins, mais la taille du fichier diminue. Pour notre cas, la valeur optimale est "7".
- Fréquence d'images (Délai de trame). Fréquence d'images et, par conséquent, vitesse d'animation. Pour que l'effet soit correct, ne définissez pas plus de 4 images par seconde.
- Boucle (Répéter). Jouez une animation plusieurs fois. Convient aux animations où une boucle répétitive est importante. La bannière est de ce type.
Récemment, divers types de graphiques SVG (Scalable Vector Graphics) sont devenus très populaires sur les sites Web et les applications. Cela est dû au fait que tous les derniers navigateurs prennent déjà en charge ce format. Voici une information sur la prise en charge du navigateur SVG.
Cet article couvre l'exemple le plus simple d'animation d'un vecteur SVG à l'aide du plugin léger Jquery Lazy Line Painter.
La sourcePour terminer et bien comprendre cette tâche, des connaissances de base en HTML, CSS, Jquery sont souhaitables, mais pas obligatoires si vous souhaitez simplement animer SVG) Commençons!
Et il en va de même pour les étapes que nous devons suivre:
- Créer une structure de fichiers correcte
- Téléchargez et connectez le plugin
- Dessiner des contours sympas dans Adobe Illustrator
- Convertissez 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 aidera avec cela, où vous devez sélectionner les paramètres comme dans l'image ci-dessous.
- H5BP classique (plaque de chaudière HTML5)
- Aucun modèle
- Juste HTML5 Shiv
- Minifié
- Classes IE
- Cadre chromé
- Cliquez ensuite sur Télécharger!
2. Téléchargez et connectez le plugin
Étant donné qu'initializr est livré avec la dernière bibliothèque jquery, à partir de l'archive que nous devons télécharger à partir du référentiel du projet Lazy Line Painter, nous n'avons besoin de transférer que 2 fichiers vers notre projet. Le premier est «jquery.lazylinepainter-1.1.min.js» (la version du plugin peut différer) et se trouve à la racine du dossier résultant. Le second est example / js / vendor / raphael-min.js.
Placez ces 2 fichiers dans le dossier js. Et nous les connectons à notre index.html avant main.js comme ceci:
3. Dessinez une image de contour sympa dans Adobe Illustrator
- Dessinez notre image de contour dans Illustrator (le moyen le plus simple de le faire avec l'outil Stylo)
- Il faut que les contours de notre dessin ne soient pas fermés car pour notre effet un début et une fin sont nécessaires
- Il ne devrait y avoir aucun remplissage
- Taille maximale du fichier - 1000 × 1000 px, 40 Ko
- Recadrer sur objet\u003e Plans de travail\u003e Ajuster aux limites des plans de travail
- Enregistrer au format SVG (les paramètres d'enregistrement standard fonctionneront)
Par exemple, vous pouvez utiliser les icônes de la pièce jointe.
4. Convertissez notre image en Lazy Line Converter
Faites simplement glisser votre icône dans la case ci-dessous.
L'épaisseur, la couleur du contour et la vitesse de l'animation peuvent être modifiées dans le code lui-même qui apparaîtra après la conversion!
5. Collez le code résultant dans main.js
Maintenant, nous collons simplement le code résultant dans un fichier main.js vide
Paramètres:
strokeWidth - épaisseur du contour
strokeColor - couleur du contour
Vous pouvez également modifier la vitesse de dessin de chaque vecteur en modifiant les valeurs du paramètre de durée (par défaut 600)
6. Ajoutez du CSS au goût
Supprimer le paragraphe de index.html
Bonjour le monde! C'est HTML5 Boilerplate.
Et au lieu de cela, nous insérons un bloc dans lequel notre animation aura lieu
puis ajoutez du CSS au fichier main.css pour un meilleur look:
Corps (arrière-plan: # F3B71C;) #icons (position: fixe; haut: 50%; gauche: 50%; marge: -300px 0 0 -400px;)
enregistrez tous les fichiers.
Maintenant, ouvrez simplement index.html dans un navigateur moderne et profitez de l'effet.
P.S. lors du lancement sur une machine locale, le démarrage de l'animation peut être retardé de plusieurs secondes.
Aujourd'hui, nous avons un didacticiel Adobe Illustrator inhabituel. Parce que cette fois, nous ne ferons pas une image statique, mais une véritable animation. Imagine se révèle avec avec Adobe Illustrator peut également dessiner des dessins animés :)
Et nous n'avons besoin de rien du tout pour cela. Organisation compétente 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 de style film rétro. La sortie devrait être une vidéo flash avec ce compte à rebours.
La première chose à faire est de dessiner tous les éléments nécessaires à la future animation. Pour ce faire, dans un document séparé, j'ai fait deux positions du cadre du film, un cercle pour la référence, qui a été découpé en 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 le faire dans un nouveau document. Dans ce cas, les calques joueront le rôle de cadres d'animation. Et dans la toute première couche, il vous suffit de copier le cadre de la bande de film. Placez-le au milieu de la zone de travail.
Créez maintenant un deuxième calque et copiez-y la bande de film, dans laquelle les trous le long des bords sont décalés. Il doit également être centré.
À partir de ces deux couches, vous pouvez déjà obtenir une animation de film en mouvement. Mais plus tard, nous avons 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 même, nous devons accumuler 12 couches d'images animées du film.
Maintenant, nous avons tout un tas de couches et elles sont toutes visibles. En ce sens que les couches supérieures obstruent les couches inférieures, ce qui n'est pas très 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 désactiver ou activer tous les calques à la fois, 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 certaine image de notre future animation. Et maintenant, pour ajouter un léger tremblement au mouvement du film, nous devons décaler un peu les images résultantes dans des directions différentes. Pour ce faire, activez uniquement le calque avec lequel vous allez travailler pour le moment, puis déplacez le cadre de quelques pixels dans n'importe quelle direction.
Lorsque vous avez parcouru tous les calques et ajouté un léger décalage, vous pouvez commencer à créer l'animation du cercle en mouvement. Pour ce faire, copiez le cercle, composé de secteurs, du document avec des parties de dessin animé et placez-le sur le premier calque au-dessus du cadre de la bande de film.
Si vous désélectionnez le cercle, il ressemblera à un seul tout. C'est exactement ce dont nous avons besoin.
Mais comme il se compose de secteurs séparés, vous pouvez créer des animations très rapidement et facilement en changeant leur couleur. Pour ce faire, copiez ce cercle dans le deuxième calque et éclaircissez le premier secteur. Vous vous souviendrez que notre film tremble en se déplaçant, il n'est donc pas du tout nécessaire de placer le cercle exactement au centre du cadre. Placez-le à l'œil nu.
De même, vous devez copier le cercle sur chaque calque suivant, tout en peignant avec une couleur plus claire un secteur de plus que la fois précédente. Ensemble, ces 12 couches forment un film interpolé avec un cercle de remplissage.
Ensuite, nous devons ajouter de la texture à nos calques. Activez le premier calque et copiez-y la texture à partir du fichier d'origine avec des pièces de rechange.
Ensuite, activez les couches suivantes à tour de rôle et copiez-y la même texture. Pour le rendre différent sur 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 cadres.
Si vous êtes déjà fatigué de copier, alors je peux vous plaire - il en reste très peu. Le plus dur est terminé. Il reste à ajouter des rayures verticales, et presque tout. Pour ce faire, copiez à nouveau la rayure d'origine et placez-la à un endroit arbitraire en plusieurs couches. Dans mon cas, les rayures n'apparaissent que sur deux couches.
Maintenant que la boucle principale avec l'animation du film est prête, il reste à additionner les chiffres. Puisque nous comptons de 3 à 1 plus le mot Go !!!, nous avons besoin d'encore plus de couches. Pas 12, mais pas moins de 48. Pour ce faire, vous devez faire trois autres copies des calques prêts à l'emploi avec animation de film.
Et puis tout est simple. Allumez la toute première couche et mettez-y le numéro trois.
Ensuite, vous devez copier ce numéro dans les calques suivants jusqu'à la fin de l'animation du cercle. Lorsque vous arrivez à la prochaine copie des calques, où le cercle sera à nouveau complètement rempli, vous devez déjà mettre le numéro deux. De la même manière, copiez le numéro un sur les calques souhaités. Et lorsque vous arrivez aux calques finaux pour la légende Go !!!, supprimez simplement le cercle avant de copier la légende sur le calque souhaité.
C'est tout avec l'animation. L'essentiel ici est de ne pas se confondre. Vous pouvez donner aux calques des noms pratiques, mais j'étais en quelque sorte trop paresseux :) Et pourtant, lorsque vous avez fini de travailler, assurez-vous de retourner tous les calques en cliquant sur l'icône en forme d'œil.
Assurez-vous de définir Exporter en tant que: couches AI vers cadres SWF dans la fenêtre avec les paramètres d'exportation. C'est cette option qui transforme les calques d'illustrateur en cadres d'animation. Cliquez ensuite sur le bouton Avancé.
Ouvrira paramètres additionnels... Ici, vous devez définir la fréquence d'images Frame Rate. J'ai 12 images par seconde. La case à cocher Bouclage est responsable de la boucle de l'animation. Grâce à elle, 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.
En sortie, nous obtenons une vidéo flash avec notre animation.
Vous pouvez maintenant voir qu'une simple animation dans Adobe Illustrator n'est pas si difficile qu'il n'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 créé ce chat dans un ancien Macromedia Flash, que j'ai déterré à mon travail.
De plus, récemment, HTML5 et CSS3 ont été 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 aka dacascas spécifiquement pour le blog
Abonnez-vous à notre newsletter pour ne rien manquer de nouveau:
Optimisation des graphiques Web
Les informations graphiques sont transmises beaucoup plus lentement que les informations textuelles et le temps de chargement des images est proportionnel à la taille de leurs fichiers graphiques. donc chargement rapide Les pages Web prennent une petite taille intégrée images graphiques, ce qui est réalisé en les optimisant. L'optimisation de l'image est comprise comme sa transformation qui garantit la taille de fichier minimale tout en conservant la qualité d'image requise dans ce cas, ce qui est obtenu principalement en réduisant le nombre de couleurs dans les images graphiques, en utilisant des formats de fichier compressés et spéciaux, et en optimisant les paramètres de compression pour des fragments d'image individuels.
Illustrator dispose d'outils d'optimisation d'image intégrés qui fournissent un 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 permet d'évaluer le résultat de l'optimisation et de faire une bonne sélection. paramètres souhaités... Et vous pouvez optimiser à la fois les images créées directement dans Illustrator et d'autres, par exemple, les photographies qui sont censées être publiées sur un site Web.
Les paramètres d'optimisation sont définis dans la fenêtre Enregistrer pour le Web (Enregistrer pour le Web) appelé par la commande du même nom dans le menu Fichier (Fichier). Le programme suggère d'utiliser l'un des quatre modes de prévisualisation, mais deux sont les mieux adaptés pour évaluer la qualité de l'optimisation:
- 2 en 1 (deux options) - visualisation simultanée de l'original et de l'image optimisée conformément aux paramètres spécifiés (Fig. 1);
- 4 poses (quatre options) - dans ce mode, la zone de visualisation est divisée en quatre fenêtres (Fig.2) pour afficher l'image d'origine et trois versions de l'image optimisée: la première version est créée en fonction des valeurs d'optimisation définies et les deux autres sont des variantes des paramètres d'optimisation actuels.
Les deux modes peuvent considérablement gagner du temps lors de la recherche de la meilleure option d'optimisation, car ils éliminent le besoin d'enregistrer des images avec différents paramètres d'optimisation, puis de les comparer visuellement. 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 pour différentes options de connexion. À 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 la palette sur la qualité de l'image et sa taille, et finalement meilleurs paramètres optimisation.
Illustrator vous permet d'optimiser les graphiques Web non seulement aux formats GIF, JPG, PNG-8 et PNG-24, mais également aux formats SWF et SVG. Les images indexées avec un petit nombre de couleurs sont stockées dans format GIF... Utilisez format JPG... Pour les images en couleur avec des zones transparentes, appliquez format PNGqui 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 d'une image optimisée est de 256, tandis qu'au format PNG-24 une image peut avoir des millions de couleurs, et par conséquent, elle est similaire au format JPEG. PNG-24 diffère de JPEG en ce que la méthode de compression utilisée pour optimiser les images PNG-24 n'entraîne pas de perte de qualité, mais la taille du fichier est augmentée. Les formats SVG et SWF combinent des graphiques, du texte et des composants interactifs et peuvent également être optimisés.
Considérer exemple spécifique l'optimisation de l'image. Disons qu'un logo de site Web a été développé dans Illustrator (Fig.3), initialement enregistré au format AI. Une tentative d'optimisation immédiate pour le Web ne conduira à rien de bon, car dans ce cas un recadrage automatique de l'image se produira, qui ne tiendra pas compte de la position réelle du lettrage obtenue à la suite d'une déformation (Fig.4 et 5).
Par conséquent, essayons d'exporter le logo au format PSD avec la commande Fichier \u003d\u003e Exporter (Fichier \u003d\u003e Exporter) - la taille de l'image créée sera de 143 Ko. Ouvrez le fichier PSD résultant et utilisez la commande Fichier \u003d\u003e Enregistrer pour le Web (Fichier \u003d\u003e Enregistrer pour le Web). Compte tenu du nombre limité de couleurs impliquées dans l'image, dans ce cas, le format GIF est optimal, avec les paramètres spécifiques dont vous devez décider. En expérimentant les paramètres, vous pouvez vous assurer que la meilleure qualité donne l'algorithme de compression par défaut du programme Sélectif (Sélectif). Quant à l'anti-crénelage, étant donné la présence d'un remplissage dégradé, il vaut mieux choisir un algorithme avec génération de bruit - Bruit (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). Par conséquent, dans cet exemple, les fichiers emblem.html et emblem.gif ont été obtenus dans le dossier Primer1.
Boutons
Un élément spécifique irremplaçable de la conception de toute page Web sont les contrôles graphiques - les boutons. Il est tout simplement impossible d'imaginer une page sans eux. Les boutons de dessin sont devenus un genre spécial aujourd'hui, et Illustrator vous permet de créer les options les plus complexes. Par exemple, les boutons conçus comme des objets de grille et / ou avec des masques de superposition sont beaucoup plus impressionnants que les boutons habituels.
Considérons la possibilité de créer un bouton rond convexe dans Illustrator. Dessinez un objet vectoriel en forme de cercle rempli de n'importe quelle couleur (Fig.9) et convertissez-le en un maillage à l'aide de la commande Object \u003d\u003e Créer un filet de dégradé (Object \u003d\u003e Create Gradient Mesh) en spécifiant quatre lignes et quatre colonnes, et dans la liste Apparence (Afficher) en choisissant une option Centrer Surligner (Rétroéclairage) égal à 60 (Fig.10). Sélectionner l'outil Sélection directe et cliquez à gauche coin supérieur objet, en mettant en évidence les points de nœud 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 un outil Ellipse (Ellipse), placez le marqueur de la souris au centre du cercle créé avant et, tout en maintenant les touches Alt et Décalage, faites glisser le nouveau cercle sur l'ancien afin qu'il soit 1 à 2 pixels plus grand que l'ancien de tous les côtés. Faites-lui une bordure noire ( Accident vasculaire cérébral) 1 à 2 pixels de large et remplir avec un dégradé radial du rouge au blanc (Figure 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 sélectionnez la commande dans le menu contextuel Organiser \u003d\u003e Envoyer à l'arrière (Organiser \u003d\u003e Renvoyer). En conséquence, vous obtenez un blanc pour le bouton, illustré à la Fig. Quatorze.
En règle générale, sur toute page Web, il existe plusieurs boutons du même type, qui ne diffèrent, par exemple, que dans le sens des flèches dessinées dessus, indiquant le sens du mouvement à travers 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, à la précédente. Comme une flèche vide, prenez un triangle ordinaire dessiné par l'outil Polygone (Polygone), rempli de noir et également décoré comme un objet maillé pour plus d'effet. 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 de la palette Aligner (Alignement). Le premier des boutons obtenus est illustré à la Fig. 15.Faites une copie du calque de bouton en choisissant la commande Dupliquer le calque Couches, - en conséquence, nous obtenons deux couches identiques. Ensuite, sur la copie du calque, sélectionnez la flèche et faites-la pivoter de 180 ° en choisissant la commande Transformer \u003d\u003e Faire pivoter - Transformation \u003d\u003e Rotation. Nous obtenons le même bouton que celui indiqué sur la fig. 16. Veuillez noter qu'il est beaucoup plus pratique de stocker tous les boutons du même type d'un projet dans un fichier sur des couches différentes, ce qui est démontré dans ce cas.
Vous devez maintenant enregistrer les versions optimisées de chacun des boutons. Rendez d'abord le calque inférieur invisible - dans ce cas, le bouton du calque supérieur sera enregistré. Choisis une équipe Fichier \u003d\u003e Enregistrer pour le Web (Fichier \u003d\u003e Enregistrer pour le Web), configurez les options d'optimisation des boutons, par exemple, comme illustré dans la Figure 1-4. 17, cliquez sur le bouton sauver (Enregistrer) et entrez le nom du fichier. Le bouton enregistré comme résultat est illustré à la Fig. 18. Rendez maintenant la visibilité du calque inférieur, rendez le haut invisible et enregistrez de la même manière le deuxième bouton en lui donnant un nom différent. Le résultat est illustré à la Fig. dix-neuf.
Il ne reste plus qu'à vous assurer que les boutons apparaissent correctement sur la page Web et à les placer sur une page personnalisée (Figure 20). Par conséquent, dans cet exemple, le fichier Primer2.html et deux images graphiques ont été obtenus dans le dossier images (le Primer2).
Si vous le souhaitez, pendant le processus d'optimisation, le bouton peut être facilement transformé en une tranche. Dans ce cas, après avoir choisi la commande Fichier \u003d\u003e Enregistrer pour le Web (Fichier \u003d\u003e Enregistrer pour le Web) et en définissant les paramètres d'optimisation, sélectionnez l'outil dans la palette d'outils Sélection de tranche(Sélectionnez une tranche) et double-cliquez sur l'image, qui finira par se transformer automatiquement en une tranche avec le numéro de série 1 (Fig. 21). Double-cliquez à nouveau sur la souris pour ouvrir la fenêtre Options de tranche (Options de tranche), dans laquelle vous devrez spécifier un lien et, si vous le souhaitez, changer le nom de la tranche (Fig.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).
Éléments interactifs
Une façon de donner vie à une page est d'introduire des éléments de conception qui modifient leur 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 - to roll, roll over) - éléments qui changent d'apparence sous l'influence d'une souris. Les boutons animés sont des exemples de survols typiques. Les survols sont souvent utilisés lors de la création d'autres éléments de navigation du site. En fait, tout survol n'est pas une, mais plusieurs images (jusqu'à quatre), chacune correspondant à un événement spécifique. Les principaux événements sont considérés comme les suivants: Normal - état normal, Survolant le curseur de la souris sur un élément et Bas - appuyer sur le bouton gauche de la souris tout en déplaçant le curseur dessus. Théoriquement, des événements tels que Click - relâcher le bouton gauche de la souris après avoir appuyé sur, Up - après avoir relâché le bouton, Out - en quittant la zone active, peuvent être impliqués. Cependant, dans la pratique, ils se limitent souvent à ne changer l'élément que pour les trois premiers voire deux événements.
Rollovers classiques
Au sens classique, un survol est une série d'images GIF et du 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 conçu pour créer directement des survols classiques, mais il peut vous aider à concevoir les éléments initiaux pour eux. L'idée dans ce cas est de créer un calque avec une 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, etc. L'image multicouche résultante est exportée vers un fichier PSD avec des couches préservées, sur la base desquelles le survol est créé dans le programme Image Ready. L'avantage d'utiliser Illustrator, comme dans de nombreux autres cas, réside dans un certain nombre de ses fonctionnalités intéressantes qui ne sont pas disponibles dans d'autres. outils logiciels, combiné avec la commodité de la transformation des graphiques vectoriels.
Essayons de créer un rollover sous la forme d'une inscription qui change de couleur en fonction du comportement de la souris. Ouvrez Illustrator et créez un rectangle arrondi rempli de noir (Figure 24), faites-en une copie et placez-le dans une zone libre de l'écran. Convertit la première copie du rectangle en objet de grille avec une surbrillance au centre (commande Object \u003d\u003e Créer un filet de dégradé - Object \u003d\u003e Create Gradient Mesh) en spécifiant quatre lignes et dix colonnes (Figure 25). Activez la deuxième copie du rectangle et ajustez le remplissage en dégradé approximativement comme indiqué dans la Fig. 26. Fusionnez l'objet dégradé sur le dessus du maillage, réduisez l'opacité de l'objet dégradé à environ 80% et sa taille d'environ 1 pixel pour imiter l'effet de relief. Et puis imprimez sur les objets. Dans sa forme d'origine, laissez-lui une couleur blanche, qui correspondra à l'état Normal (Fig.27), puis lorsque l'état de survol change, la couleur de la légende changera, par exemple, en vert - lorsque vous survolez avec le pointeur de la souris (état Over) et en bleu - lorsque le bouton de la souris est enfoncé (état bas).
Faites attention à la palette Couches - à ce stade, il n'y a qu'une seule couche. Faites deux copies de ce calque à l'aide de la commande Dupliquer le calque (Dupliquer le calque) dans le menu de la palette Couches, - il y aura trois couches dans la palette (fig. 28). Ensuite, dans la première copie du calque, changez la couleur de la légende en vert et dans la deuxième copie en bleu (Fig. 29). En conséquence, vous obtiendrez le blanc nécessaire pour le roulement.
Exportez votre pop cette image au format PSD avec des couches préservées à l'aide de la commande Fichier \u003d\u003e Exporter (Fichier \u003d\u003e Exporter) et en choisissant le modèle de couleur RVB (Fig.30). Ouvrez le fichier PSD créé dans ImageReady (figures 31 et 32). Créez des cadres à partir de calques en choisissant la commande Créer des cadres à partir de calques (Créer des cadres à partir de calques) dans le menu de la palette Animation... La fenêtre d'animation ressemblera à celle de la Fig. 33. En même temps dans la palette Rollovers initialement, un seul état Normal sera créé.
Puis dans la fenêtre Animationsélectionnez le cadre correspondant à l'état de survol, dans la palette Couches le calque est automatiquement sélectionné Copie de la couche 1 (fig.34). Aller à la palette Rolloverset cliquez sur le bouton Créer un état de survol (Créer un état de retournement) - fig. 35, ce qui entraînera une condition Sur l'étatdans la palette Rollovers(fig.36). Créez l'état de la même manière État bas... Activer l'état Ordinaire dans la palette Rollovers et supprimer dans la palette Animation tous les cadres, sauf celui qui doit correspondre à l'état Ordinaire... Par conséquent, pour chaque état de survol dans la palette Animationun seul cadre existera (fig. 37, 38 et 39).
Figure: 38. Vue de l'image, des fenêtres 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 (Aperçu du navigateur) dans la barre d'outils et accédez à la fenêtre du navigateur (Figure 40). Après cela, enregistrez le fichier à l'aide de la commande Fichier \u003d\u003e Enregistrer optimisé (Fichier \u003d\u003e Enregistrer optimisé) et en spécifiant une option HTML et images (* .html)... En conséquence, dans cet exemple, un fichier Primer4.html et une série d'images graphiques ont été obtenus dans le dossier images.
Figure: 40. Fenêtre du navigateur avec élément Rollover
Survols SVG
La popularité croissante du format SVG (Scalable Vector Graphics - scalable vector graphics), créé sur la base de la norme XML, vous permet également de recevoir une variété d'éléments interactifs, en particulier des rollovers, seulement en pratique, il est mis en œuvre de manière complètement différente. Il est à noter que la création de rollovers SVG interactifs, contrairement aux classiques, lorsque le code HTML correspondant est généré de manière complètement automatique, nécessite la connaissance du langage JavaScript et la compréhension des principes de base de la programmation orientée objet.
Il existe une palette spéciale pour travailler avec des objets SVG. Interactivité SVG, qui est facile à ouvrir à l'aide de la commande Window \u003d\u003e Interactivité SVG (Fenêtre \u003d\u003e interactivité SVG) - fig. 41.
Considérer cette option création d'un survol à l'aide de l'exemple d'un bouton interactif, la couleur de la légende sur laquelle passera du noir au bleu lorsque la souris survole encore et encore convertie en noir lorsque la souris quitte la zone active.
Créez un bouton rectangulaire avec des bords arrondis et sélectionnez un remplissage dégradé approprié, par exemple, comme illustré à la Fig. 42. Ajuster la transparence du bouton dans la palette Transparence (Transparence) - dans cet exemple, la valeur du paramètre Opacité (Opacité) réglé sur 50%. Dupliquez le bouton, remplissez-le d'une couleur vert foncé (Figure 43), puis convertissez-le en objet maillé avec la commande Object \u003d\u003e Créer un filet de dégradé(Object \u003d\u003e Create Gradient Mesh) en spécifiant quatre lignes et dix colonnes, et dans la liste Apparence(Afficher) en choisissant une option Centrer (Centre) et réglage de la valeur Surligner (Surbrillance) égal à 100. Réduisez l'opacité du calque de l'objet maillé d'environ 40% (Fig. 44). Placez l'objet maillé au-dessus du dégradé et le bouton ressemblera à celui illustré à la Fig. 45.
Figure: 44. Transformer une copie d'un bouton en objet maillé
Complétez le bouton avec la légende voulue et ajustez sa position à l'aide des boutons correspondants sur la palette Aligner (Alignement). L'image résultante contiendra un calque avec trois objets superposés (Figure 46). Les événements planifiés feront référence à l'objet texte, donc pour plus de commodité, changez son nom en Texteen double-cliquant sur l'objet et en entrant un nouveau nom. Modifiez le nom du calque de la même manière à partir de De la couche 1 à la couche (fig.47).
La gestion des événements suppose 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 Fichiers JavaScript Interactivité SVG (fig.48). Ensuite, vous devez appuyer sur le bouton Ajouter (Ajouter) et recherchez le fichier souhaité sur votre disque dur. Quand son nom apparaît dans le champ URL (fig.49), cliquez sur le bouton Terminé (Se déconnecter).
Figure: 48. Choix de la commande Fichiers JavaScript
Après cela, vous devez définir la réaction aux événements de souris pour l'objet Texte... Sélectionnez l'objet Texte, dans le champ un événement (Événement) palettes Interactivité SVG sélectionner un événement onmouseover elemColor (evt, "Texte", "# 3333FF") - cela signifie que lorsque la souris est sur l'objet Textesa couleur vire au bleu (fig. 50). Pour que la couleur du texte devienne noire après que la souris quitte la zone active, vous devrez créer un autre événement à la souris- sélectionnez-le dans le champ un événement (Événement) palettes Interactivité SVG... Ensuite, dans la ligne d'action, entrez le texte elemColor (evt, "Texte", "# 000000")- cela entraînera le retour du noir (fig. 51).
Figure: 51. La vue finale de la palette d'interactivité SVG pour l'objet Texte
Enregistrez le survol créé en tant que fichier SVG avec la commande Fichier \u003d\u003e Enregistrer sous (Fichier \u003d\u003e Type de fichier format SVG, puis en configurant les options d'enregistrement du fichier SVG comme illustré à la Fig. 52. Après l'enregistrement, vous ne recevrez qu'un seul fichier avec l'extension SVG, et non deux, comme dans le cas du rollover classique - dans ce cas, le fichier Primer5.svg (dossier Primer5) a été obtenu. Cependant, pour que le rollover fonctionne vraiment, vous devez en plus copier le fichier Events.js avec la description des procédures JavaScript dans le dossier contenant le fichier SVG. Après cela, vous pouvez vérifier si le rollover fonctionne - le résultat ressemblera à celui illustré à la Fig. 53.
Animation SVG
Le format SVG peut également être utilisé pour transmettre une animation. Essayons de créer un élément d'animation simple (dans ce cas, il s'agira d'informations sur l'entreprise), qui apparaîtra à l'écran lorsque vous passez la souris sur l'objet graphique correspondant et disparaîtra lorsque la souris sera retirée de l'élément interactif.
Créons une série de graphiques et d'objets texte comme celui illustré à la Fig. 54. Renommons de manière pratique tous les objets créés en cliquant séquentiellement sur le nom de l'objet suivant dans la palette Couches et saisissez le nom souhaité (fig. 55). Veuillez noter que le surligné dans la Fig. 56 objets - Texte1, Texte2, Texte3 et Chemin1 - sera toujours visible, et tous les autres - uniquement lorsque vous passez la souris sur l'objet Texte1.
Figure: 54. Vue originale de l'image
Incluez le fichier Events.js décrivant les procédures JavaScript à l'aide de la commande Fichiers JavaScript (Fichiers JavaScript) de la palette Interactivité SVGen appuyant sur le bouton Ajouter(Ajouter) en sélectionnant le fichier souhaité sur votre disque dur et en cliquant sur le bouton Terminé (Se déconnecter).
Définir une réaction aux événements de souris pour un objet Texte1... Sélectionnez l'objet Texte, sur le terrain un événement (Événement) palettes Interactivité SVGsélectionner un événement onmouseover et dans la ligne ci-dessous entrez le texte elemShow (evt, "Texte4"); elemShow (evt, "Chemin2")... En conséquence, lorsque la souris est sur l'objet Texte1 les objets deviendront visibles Texte4 et Chemin2... Veuillez noter que si plusieurs actions doivent être effectuées lors d'un événement, elles doivent être spécifiées par le signe ";". Puis effectuez une opération similaire sur l'événement à la sourisen saisissant du texte, ce qui signifie masquer les objets (Fig. 57).
Enregistrez le résultat sous forme de fichier SVG avec la commande Fichier \u003d\u003e Enregistrer sous (Fichier \u003d\u003e Enregistrer sous) en spécifiant le nom du fichier en sélectionnant dans le champ Type de fichier Format SVG, puis configurer les options pour enregistrer le fichier SVG comme indiqué dans la Fig. 58. Après l'enregistrement, le fichier Primer6.svg sera obtenu (dossier Primer6). N'oubliez pas de copier le fichier Events.js dans le dossier contenant ce fichier. Si après ça tu cours cos ce fichier, vous verrez alors le résultat illustré à la Fig. 59. C'est presque ce dont vous avez besoin. La seule chose qui n'était pas incluse dans nos plans était l'apparition initiale des objets Texte4 et Chemin2 au démarrage. Pour éliminer cet inconvénient, sélectionnez les deux objets de données à la fois et créez une action pour eux elemHide (evt, "Texte4"); elemHide (evt, "Chemin2") à l'événement en charge (fig.60). Enregistrez à nouveau le fichier et assurez-vous que les objets sont maintenant Texte4 et Chemin2 visible uniquement lorsque vous passez la souris sur l'objet Texte1.
Animation GIF
Toute page Web est impensable sans animations Web, y compris les gifs animés. L'une des options pour les créer consiste à utiliser l'application Adobe ImageReady, qui vous permet, entre autres, de créer des animations à partir de calques. Dans le même temps, l'image multicouche elle-même peut être préparée dans différentes applications, y compris Adobe Illustrator.
Il est très facile de créer une animation basée sur des éléments de la palette Symboles (Symboles) ouverts par la commande Fenêtre \u003d\u003e Symboles (Fenêtre \u003d\u003e Symboles) ou depuis l'une des bibliothèques de symboles qui peuvent être ouvertes à l'aide de la commande Window \u003d\u003e Bibliothèques de symboles (Fenêtre \u003d\u003e Bibliothèques de symboles).
Par exemple, nous allons essayer d'augmenter la taille de tout objet symbole; les étapes clés du processus d'agrandissement d'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 illustré à la Fig. 61. En conséquence, dans la palette Couches un seul calque avec de nombreux objets sera créé (Fig. 62). Si vous exportez directement cette image au format PSD, cela ne fera rien, car il n'y a qu'un seul calque, et bien sûr, lorsque vous ouvrez 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 est de sélectionner d'abord le calque Couche 1 dans la palette Calques et utilisez la commande Relâcher au calque (Relâchez les couches). Le résultat sera le mouvement de chacun des objets vers son propre calque, mais tous seront imbriqués dans le calque Couche 1... Par conséquent, vous devez faire glisser manuellement tous les calques imbriqués dans partie supérieure la palette Calques afin qu'ils soient au-dessus du calque Couche 1puis la couche vide Couche 1 il suffit de le retirer (fig. 63). Exportez l'image au format PSD à l'aide de la commande Fichier \u003d\u003e Exporter (Fichier \u003d\u003e Exporter) avec des réglages comme dans la fig. 64.
Chargez le fichier PSD créé dans ImageReady (figures 65 et 66). Ouvrez le menu de la palette Animation Créer des cadres à partir de calques (Créer des cadres à partir de calques). En conséquence, cinq cadres seront créés, chacun correspondant à son propre calque, et la fenêtre de la palette Animation ressemblera à la fig. 67.
Ensuite, 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 optimisée avec la commande Fichier \u003d\u003e Enregistrer optimisé (Fichier \u003d\u003e Enregistrer optimisé). Le résultat peut ressembler à la Fig. 68.
Il est encore plus pratique d'obtenir des blancs, qui sont faciles à transformer en animation dans ImageReady, utilisez les fonctions Mélanges en direct Logiciel 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 mélangez-les avec des paramètres appropriés (Fig. 69). Il est impossible d'utiliser ce fichier directement pour créer une animation, car l'image est sur un seul calque (Fig. 70). Par conséquent, vous devez d'abord placer chaque élément de l'objet de fusion sur un calque séparé. Pour cela dans la fenêtre Couches mettre en évidence la ligne
Figure: 70. État initial de la fenêtre Calques
Exportez le fichier créé au format PSD avec la commande Fichier \u003d\u003e Exporter (Fichier \u003d\u003e 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 qu'une seule image pour l'instant.
Activer le menu de la palette Animationen cliquant sur la flèche noire dans le coin supérieur droit de la palette et choisissez la commande Créer des cadres à partir de calques (Créer des cadres à partir de calques) - par conséquent, dans cet exemple, cinq cadres seront créés et la fenêtre de la palette Animation prendra la forme conforme à la Fig. 75. Sélectionnez toutes les images tout en maintenant la touche Décalageet définissez la durée de trame appropriée - dans cet exemple, pour chacune des trames, le même temps de 0,2 s est pris. Enregistrez ensuite le fichier optimisé avec la commande Fichier \u003d\u003e Enregistrer optimisé(Fichier \u003d\u003e Enregistrer optimisé) en définissant dans la liste Type de fichier option Images uniquement (* .gif)... L'animation ressemblera à la Fig. 76.
Il est beaucoup plus intéressant de ne pas déplacer, mais de redimensionner en douceur les objets de fusion. Par exemple, vous pouvez utiliser la transition de fusion 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(Alignement central horizontal) et Centre d'alignement vertical Palette (Alignement vertical au centre) Aligner (fig.77).
Exportez le fichier créé au format PSD ( Fichier \u003d\u003e Exporter- File \u003d\u003e Export) et ouvrez le fichier PSD créé dans le programme ImageReady (fig. 78). Créer des images d'animation ( Créer des cadres à partir de calques - Créez des cadres à partir de calques) et sélectionnez-leur une durée appropriée (fig. 79). Et puis, pour rendre l'animation plus efficace, copiez les images existantes, mais dans l'ordre inverse - de sorte que l'image d'abord augmente, puis diminue, et ainsi de suite en cercle (Fig. 80). Enregistrez ensuite le fichier optimisé ( Fichier \u003d\u003e Enregistrer optimisé- Fichier \u003d\u003e Enregistrer optimisé). L'animation résultante est illustrée à la Fig. 81.
Figure: 80. État de la fenêtre d'animation après la duplication des images
Figure: 81. Animation terminée
