So erstellen Sie eine einfache Animation in Illustrator. Illustriertes Tutorial zu Adobe Illustrator CS. Isometrien mit Grafikstilen
Heute haben wir eine ungewöhnliche Adobe Illustrator-Lektion. Denn dieses Mal werden wir kein statisches Bild erstellen, sondern eine echte Animation. Stellen Sie sich vor, es stellt sich heraus, dass Sie mit Adobe Illustrator auch Cartoons zeichnen können :)
Und dafür brauchen wir überhaupt nichts. Korrekte Organisation der Ebenen und Export der endgültigen Arbeit in das SWF-Format, wobei jede Ebene in einen Animationsrahmen umgewandelt wird. Im heutigen Tutorial zeichnen wir eine Countdown-Animation im Stil eines Retro-Films. Die Ausgabe sollte ein Flash-Video mit demselben Countdown sein.
Als Erstes müssen Sie alle notwendigen Elemente für zukünftige Animationen zeichnen. Zu diesem Zweck habe ich in einem separaten Dokument zwei Positionen eines Filmrahmens erstellt, einen Kreis als Referenz, der in separate Sektoren geschnitten ist, eine Textur und einen vertikalen Kratzer, um den Effekt der Antike hinzuzufügen, sowie alle Zahlen und Inschriften.
Wenn alle Teile unseres Cartoons fertig sind, können wir mit der Erstellung der Animation selbst beginnen. Der Einfachheit halber ist es besser, dies in einem neuen Dokument zu tun. In diesem Fall übernehmen unsere Ebenen die Rolle von Animationsrahmen. Und in der allerersten Ebene müssen Sie nur ein Filmbild kopieren. Platzieren Sie es in der Mitte Ihres Arbeitsbereichs.
Erstellen Sie nun eine zweite Ebene und kopieren Sie einen Filmrahmen hinein, in den die Löcher entlang der Kanten versetzt eingebracht werden. Es muss auch in der Mitte platziert werden.
Aus diesen beiden Ebenen können Sie bereits Animationen von bewegten Filmen erstellen. Aber später werden wir noch viel mehr Schichten brauchen. Wählen Sie also die ersten beiden Ebenen aus, gehen Sie zu den Bedienfeldoptionen und erstellen Sie eine Kopie der Ebenen.
Auf ähnliche Weise müssen wir 12 Schichten von Filmbildern ansammeln, die seine Bewegung definieren.
Jetzt haben wir eine ganze Reihe von Ebenen und sie sind alle sichtbar. In dem Sinne, dass die oberen Schichten die unteren blockieren, was für die Arbeit nicht ganz praktisch ist. Daher können Sie einige Ebenen deaktivieren, indem Sie auf das Symbol mit dem Auge links neben dem Ebenennamen klicken. Um alle Ebenen gleichzeitig ein- oder auszuschalten, halten Sie die Alt-Taste gedrückt, während Sie auf das Augensymbol klicken. Durch das Ein- und Ausschalten von Ebenen können Sie genau sehen, was sich in einem bestimmten Frame unserer zukünftigen Animation befindet. Und damit wir der Bewegung des Films leichtes Zittern hinzufügen können, müssen wir die resultierenden Bilder leicht in verschiedene Richtungen verschieben. Aktivieren Sie dazu nur die Ebene, mit der Sie arbeiten möchten. dieser Moment, und verschieben Sie dann den Rahmen um ein paar Pixel in eine beliebige Richtung.
Sobald Sie alle Ebenen durchgegangen sind und eine kleine Verschiebung hinzugefügt haben, können Sie mit der Erstellung der Animation des sich bewegenden Kreises beginnen. Kopieren Sie dazu den aus Sektoren bestehenden Kreis aus dem Dokument mit den Cartoon-Teilen und platzieren Sie ihn auf der ersten Ebene über dem Filmrahmen.
Wenn Sie die Auswahl des Kreises deaktivieren, sieht er wie ein Ganzes aus. Das ist genau das, was wir brauchen.
Da es aber aus einzelnen Sektoren besteht, können Sie durch Ändern der Farbe sehr schnell und einfach Animationen erstellen. Kopieren Sie dazu diesen Kreis auf die zweite Ebene und machen Sie den ersten Sektor heller. Sie erinnern sich, dass unser Film wackelt, wenn er sich bewegt, sodass es überhaupt nicht notwendig ist, den Kreis genau in der Mitte des Bildes zu platzieren. Positionieren Sie es nach Augenmaß.
Auf ähnliche Weise müssen Sie den Kreis in jede nächste Ebene kopieren und dabei einen Sektor mehr mit einer helleren Farbe als beim vorherigen Mal malen. Zusammen bilden diese 12 Ebenen eine Animation des Films, der sich mit einem Füllkreis bewegt.
Als nächstes müssen wir unseren Ebenen Textur hinzufügen. Schalten Sie die erste Ebene ein und kopieren Sie die Textur aus der Originaldatei mit Ersatzteilen dort.
Schalten Sie dann nacheinander die nächsten Ebenen ein und kopieren Sie dort die gleiche Textur. Damit es in jedem Bild anders aussieht, drehen Sie es einfach um 90 Grad. Wie Sie vielleicht schon erraten haben, müssen wir allen 12 Frames eine Textur hinzufügen.
Wenn Sie das Kopieren schon ziemlich satt haben, dann kann ich Sie erfreuen – es ist nur noch sehr wenig übrig. Der schwierigste Teil ist vorbei. Jetzt müssen nur noch vertikale Kratzer hinzugefügt werden, und das ist fast alles. Dazu kopieren wir erneut den ursprünglichen Kratzer und platzieren ihn in mehreren Schichten an einer beliebigen Stelle. In meinem Fall treten Kratzer nur in zwei Schichten auf.
Nachdem nun der Hauptzyklus mit Filmanimation fertig ist, müssen nur noch die Zahlen addiert werden. Da unser Countdown von 3 auf 1 plus dem Wort Los!!! geht, brauchen wir noch mehr Schichten. Nicht 12, sondern ganze 48. Dazu müssen Sie drei weitere Kopien vorgefertigter Ebenen mit Filmanimation erstellen.
Und dann ist alles einfach. Schalten Sie die allererste Ebene ein und platzieren Sie dort die Nummer drei.
Dann müssen Sie diese Figur auf die nächsten Ebenen kopieren, bis die Kreisanimation endet. Wenn Sie zur nächsten Kopie der Ebenen gelangen, wo der Kreis wieder vollständig ausgefüllt wird, müssen Sie die Nummer zwei eingeben. Kopieren Sie auf die gleiche Weise die Nummer eins auf die gewünschten Ebenen. Und wenn Sie die letzten Ebenen für die Go!!!-Inschrift erreicht haben, löschen Sie einfach den Kreis, bevor Sie die Inschrift auf die gewünschte Ebene kopieren.
Das ist alles für die Animation. Die Hauptsache hier ist, sich nicht zu verwirren. Sie können den Ebenen einige praktische Namen geben, aber ich war etwas faul :) Und wenn Sie mit Ihrer Arbeit fertig sind, schalten Sie außerdem alle Ebenen wieder ein, indem Sie auf das Augensymbol klicken.
Stellen Sie im Fenster „Exporteinstellungen“ sicher, dass „Exportieren als: AI-Ebenen“ auf „SWF-Frames“ eingestellt ist. Mit dieser Option werden Illustrator-Ebenen in Animationsrahmen umgewandelt. Klicken Sie anschließend auf die Schaltfläche „Erweitert“.
Wird Öffnen zusätzliche Einstellungen. Hier müssen Sie die Bildrate einstellen. Ich habe 12 Bilder pro Sekunde. Für die zyklische Animation ist die Checkbox „Looping“ zuständig. Dadurch wird das Video im Kreis abgespielt. Und die Option „Ebenenreihenfolge: Von unten nach oben“ reproduziert Illustratorebenen von unten nach oben im Bedienfeld. Genau so haben wir unsere Animation aufgebaut.
Die Ausgabe ist ein Flash-Video mit unserer Animation.
Jetzt sehen Sie, dass das Erstellen einfacher Animationen in Adobe Illustrator nicht so schwierig ist, wie es auf den ersten Blick scheint.
Für die Erstellung langer Videos oder interaktiver Anwendungen ist es jedoch immer noch besser zu verwenden Adobe Flash oder andere Flash-Editoren. Diese Katze habe ich zum Beispiel in einem alten gemacht Macromedia Flash, das ich bei meiner Arbeit ausgegraben habe.
Außerdem werden in letzter Zeit zunehmend HTML5 und CSS3 zum Erstellen von Animationen verwendet. Dieser Code wird von modernen Browsern unterstützt und erfordert keinen Flash-Player.
Roman, auch bekannt als Dacascas, speziell für den Blog
Abonnieren Sie unseren Newsletter, um nichts Neues zu verpassen:
Ist in letzter Zeit sehr beliebt geworden verschiedene Sorten Animation von SVG-Grafiken (Scalable Vector Graphics) auf Websites und Anwendungen. Das liegt daran, dass alles neueste Browser unterstützen dieses Format bereits. Hier finden Sie Informationen zur Browserunterstützung für SVG.
Dieser Artikel behandelt einfachstes Beispiel Animieren Sie SVG-Vektoren mit Easy Jquery-Plugin Lazy Line Painter.
QuelleUm diese Aufgabe abzuschließen und vollständig zu verstehen, sind Grundkenntnisse in HTML, CSS und JQuery wünschenswert, aber nicht erforderlich, wenn Sie nur SVG animieren möchten.) Lasst uns beginnen!
Und das sind die Schritte, die wir befolgen müssen:
1. Erstellen Sie die richtige Dateistruktur
Dabei hilft uns der Initializr-Dienst, bei dem wir Parameter wie im Bild unten auswählen müssen.
- Classic H5BP (HTML5-Kesselplatte)
- Keine Vorlage
- Nur HTML5 Shiv
- Minimiert
- IE-Klassen
- Chromrahmen
- Klicken Sie dann auf „Herunterladen“!
2. Laden Sie das Plugin herunter und verbinden Sie es
Da initializr mit der neuesten Version geliefert wird Jquery-Bibliothek Aus dem Archiv, das wir aus dem Lazy Line Painter-Projekt-Repository herunterladen müssen, müssen wir nur 2 Dateien in unser Projekt übertragen. Das erste ist „jquery.lazylinepainter-1.1.min.js“ (die Plugin-Version kann unterschiedlich sein) und befindet sich im Stammverzeichnis des resultierenden Ordners. Die zweite ist example/js/vendor/raphael-min.js.
Wir legen diese beiden Dateien im js-Ordner ab. Und wir verbinden sie wie folgt mit unserer index.html vor main.js:
3. Zeichnen Sie ein cooles Umrissbild in Adobe Illustrator
Sie können beispielsweise die Symbole im Anhang verwenden.
4. Konvertieren Sie unser Bild in den Lazy Line Converter
Ziehen Sie einfach Ihr Symbol in das Fenster im Bild unten.
Die Dicke, die Farbe des Umrisses und die Animationsgeschwindigkeit können im Code selbst geändert werden, der nach der Konvertierung angezeigt wird!
5. Fügen Sie den resultierenden Code in main.js ein
Jetzt fügen wir den resultierenden Code einfach in eine leere main.js-Datei ein
Optionen:
StrokeWidth – Umrissstärke
StrokeColor – Umrissfarbe
Sie können auch die Zeichengeschwindigkeit jedes Vektors ändern, indem Sie die Werte des Dauerparameters ändern (Standard 600).
6. Fügen Sie nach Geschmack etwas CSS hinzu
Entfernen eines Absatzes aus index.html
Hallo Welt! Dies ist ein HTML5-Boilerplate.
Und stattdessen fügen wir einen Block ein, in dem unsere Animation stattfinden wird
Dann fügen wir der Datei main.css etwas CSS hinzu, damit sie schöner aussieht:
Körper (Hintergrund:#F3B71C;) #icons (Position: fest; oben:50%; links:50%; Rand: -300px 0 0 -400px;)
Speichern Sie alle Dateien.
Öffnen Sie jetzt einfach index.html in einem modernen Browser und genießen Sie den Effekt.
P.S. Bei der Ausführung auf einem lokalen Computer kann sich der Start der Animation um mehrere Sekunden verzögern.
Import und einfache Animation Hallo. Heute schauen wir uns einfache Animationen in After Effects an.
Ressourcen: Adobe Illustrator CC
Adobe After Effects CC
Beginnen wir mit dem Lernen, indem wir in Illustrator zeichnen.
Lass uns malen
1) Zeichnen Sie ein gelbes Rechteck als Hintergrund
Abbildung 1 – Rechteck
2) Zeichnen Sie einen Kreis und füllen Sie ihn mit einem Farbverlauf
Lassen Sie uns ein wenig am Kreis arbeiten:
- Löschen Sie den unteren Punkt der Kontur, wir erhalten einen Bogen;
- Zeichnen Sie eine gerade Linie und schließen Sie den unteren Teil des Bogens. Wir erhalten einen Halbkreis
Abbildung 2 - 1) Kreis zeichnen; 2) Gefälle; 3) Punkt löschen
3) Zeichnen Sie ein Rechteck und erstellen Sie eine Kopie davon
- ein graues Rechteck;
- Ein weiteres Rechteck ist dunkelgrau
4) Zeichnen Sie ein Dreieck aus einem Sternchen, indem Sie die Anzahl der Strahlen auf 3 setzen
Abbildung 3 - 1) Rechtecklicht; 2) rekt dunkel; 3) Dreieck
5) Zeichnen Sie eine Katze mit einem Stift und einfachen Formen 
Abbildung 4 - 1) Kopf; 2) Hals; 3) Körper; 4) Bein; 5) Schwanz
Und jetzt der WICHTIGSTE Moment
Verteilen wir die Bilder wie folgt auf Ebenen (was animiert wird, befindet sich auf einer separaten Ebene): 
Abbildung 5 – alle Bilder (wichtige Ebenen rot markieren)
Das war's, jetzt lasst uns speichern.
Schauen wir uns die Speichereinstellungen an
Abbildung 6 – Speichern
Und jetzt der nächste Schritt. Schließen Sie Adobe Illustrator und öffnen Sie After Effects.
In After Effects importieren
Datei – Importieren – Datei – wählen Sie unsere gespeicherte Illustrator-Datei aus.
Wählen wir den Import von Ebenen aus Illustrator. Wenn wir Filmmaterial einfügen, erhalten wir ein Bild mit zusammengeführten Ebenen, aber das brauchen wir nicht.
Abbildung 7 – Als Komposition importieren
Das ist es, importiert.
Nun wollen wir sehen, was wir haben. Doppelklicken Sie auf die Komposition, damit sie sich öffnet und wir die Ebenen sehen (wenn alles richtig gemacht ist, gibt es mehrere Ebenen). Wir bekommen das, siehe Abbildung
Abbildung 8 – Offene Komposition
Und was uns heute hier beschäftigt, ist die Animation.
Animation in After Effects
Legen Sie den Drehpunkt am oberen Rand des Pfeils fest, indem Sie das Pan Behind-Werkzeug (Tastenkürzel - Y) verwenden. Wir nehmen einfach einen Punkt und verschieben ihn dort, wo es nötig ist. Als Ergebnis wird es so aussehen.. 
Abbildung 9 – Schwenkwerkzeug und Ebenen
Das war's, jetzt kommen wir zu den Animationsebenen.
Wir benötigen eine Pfeil- und eine Head_cat-Ebene.
Beginnen wir mit dem Pfeil.
Erweitern wir die Liste, suchen sie und klicken auf die Uhr. Also setzen wir den ersten Punkt auf null Sekunde. Die Animation dauert insgesamt 2 Sekunden.
Das sind also die Einstellungen, die Sie vornehmen müssen (wir geben insgesamt 3 Punkte):
| Zweite | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Abbildung 10 – Rotationspfeil
Lassen Sie uns nun den Kopf der Katze animieren.
Erweitern wir head_cat und suchen wir nach Position .
Hier werden 4 Punkte angezeigt.
Nur die letzte Koordinate wird geändert, ohne dass sich dies auf die anderen auswirkt.
| Zweite | 0.1 | 0.17 | 1.12 | 2.0 |
| Position | 689.3 | 729.3 | 729.3 | 689.3 |
Abbildung 11 – Kopf positionieren
Das Animationsprinzip war also so. Der Pfeil schwingt von einer Seite zur anderen, sobald er sich dem Kätzchen nähert, zieht es seinen Kopf ein, verweilt eine Weile in dieser Position und bringt ihn dann wieder an seinen Platz.
Die letzte Etappe
Produktion
Sie müssen aus Ihrer Arbeit ein fertiges Produkt erstellen.
Gehen Sie zum Menü - Zur Render-Warteschlange hinzufügen
Das Render-Bedienfeld wird geöffnet und im Ausgabemodul (zwei Klicks) wählen Sie das Ausgabeformat aus. Ich habe *.mov genommen
Abbildung 12 – Rendern
Klicken Sie auf die Schaltfläche RENDER und erhalten Sie das Ergebnis (vergessen Sie nur nicht, den Pfad anzugeben).
Das ist alles.
Hallo zusammen! Heute werde ich versuchen, die Möglichkeiten zu beschreiben Adobe-Programme Illustrator und vergleicht es mit den Fähigkeiten von Flash. Dies ist keine globale Analyse des Programms, sondern eine Beschreibung einiger interessanter Funktionen, die ich in diesem Programm entdeckt habe. Ich habe beim Studium Stück für Stück Informationen gesammelt, um alles in einem Beitrag zu veröffentlichen. Ich gebe gleich zu, dass ich kein besonders erfahrener Benutzer von Illustrator bin, ich verwende es seit sechs Monaten nur zum Zeichnen (davor habe ich alles in Flash gezeichnet). Viele Leute beschweren sich darüber, dass der Illustrator komplex und nicht immer intuitiv ist. Bis zu einem gewissen Grad stimme ich zu, dass dieses Programm nach dem Flush komplex ist. Aber hier kommt es vor allem darauf an, nicht aufzugeben, sondern weiter zu lernen. Und nach ein paar Wochen kommt mir der Gedanke, wie ich vorher ohne ausgekommen bin!
Was hat mir an dem Illustrator gefallen und was habe ich gefunden, das nicht in Flash enthalten war?
1. Ich beginne mit dem Einfachsten, aber gleichzeitig Notwendigsten. Versuchen Sie, Objekte in Flash kreisförmig anzuordnen. Zuvor gab es ein Deko-Tool, das jedoch entfernt wurde, da es offenbar als unnötig erachtet wurde. Wir entschieden, dass es mehr Spaß machen würde, es mit den Händen zu machen. Illustrator verfügt über diese Funktion: Effekt – Verzerren und Transformieren – Transformieren.
Alles geht schnell und einfach; wir legen die Werte (Abstand zwischen Objekten, Anzahl der Kopien) selbst in den Einstellungen fest.
2. Zickzack
Eine noch einfachere, aber dennoch nützliche Sache. Es scheint eine kleine Sache zu sein, aber in Flash muss man von Hand zeichnen, in Illustrator ist es eine Sache von Sekunden.
3. Verformung von Objekten (Warp)
In Flash gibt es nichts Vergleichbares. Im folgenden Beispiel habe ich nur zwei Möglichkeiten gezeigt, einfache Formen zu verformen (Effekt – Verzerrung – Bogen/Fisch). Tatsächlich sind es 15 davon letzte Version Programme.
4. Automatisches Abrunden von Ecken (Round Corners)
Sie können dies manuell tun: Wenn Sie ein Grafikobjekt auswählen, werden in der Ecke (in allen Ecken) ein weißer Punkt und ein abgerundetes Linienzeichen angezeigt. Wir ziehen mit der Maus und passen es Ihrem Geschmack an.
Dies gilt jedoch nur für Formen. Mit einer Bleistiftlinie machen wir es etwas anders – wir wenden einen Rundungseffekt an (Effekt – Stilisieren – Runde Ecken). Am Ausgang erhalten wir das gleiche Ergebnis.
5. Aufrauen
Der Effekt wird auf einfache Formen angewendet (Effekt – Verzerren und Transformieren – Aufrauen). Die Ausgabe ähnelt in etwa Low-Poly-3D-Modellen. Ich finde es cool :) Und vor allem ist es sehr einfach.
6. Pucker&Bloat (Ziehen und Blähungen)
Beispiel im Bild unten:
7. Formerweiterung (Offset Path)
Flash verfügt über eine Funktion zum Erweitern von Füllungen; im Gegensatz zu Illustrator funktioniert es überhaupt nicht mit Bleistiftlinien.
8. Pinsel (Kunstpinsel, Musterpinsel, Streupinsel)
Schauen Sie sich das Bild unten mit Beispielen an:
9.Texturpinsel
Illustrator bietet auch viele Texturpinsel, über die ich geschrieben habe und wie sie darin aussehen neue Version Blitz - . Es wurde festgestellt, dass die Verwendung von Pinseln in Adobe Animate furchtbar langsam ist. Das ist es:(
10. Ich bin mir nicht sicher, ob das ein echter Trick ist, aber ich möchte mich auf einen Pinsel mit dem lustigen Namen Blob Brush konzentrieren. Dieser Pinsel befindet sich in der Symbolleiste und ist sehr praktisch. Es hat eine Menge Einstellungen, es gefällt mir besser als das Übliche. Es ist schwer, seine Vorteile in Worte zu fassen, es ist besser, es einmal auszuprobieren.
10. Auf Raster aufteilen
Eine weitere nützliche Funktion ist die Funktion „In Raster teilen“ (Objekt-Pfad-in Raster aufteilen). Sie ermöglicht es Ihnen, die Form in gleiche Segmente zu schneiden. Woran erinnert uns das? Das ist richtig – Fenster in einem Hochhaus. Ich finde es eine coole Sache, um zum Beispiel Stadtlandschaften zu zeichnen;)
Noch einer nützliches Werkzeug, wahrscheinlich seit seiner ersten Veröffentlichung im Illustrator enthalten. Mit seiner Hilfe können Sie beispielsweise Holztexturen erstellen:
12. Bewegen (rechts – Transformieren – Bewegen)
Objektversatz um angegebenen Abstand. Auf Wunsch können Sie sofort eine Kopie erstellen, die horizontal/oder vertikal im gewünschten Abstand zum ausgewählten Objekt platziert wird. Eine frühere Version von Flash verfügte über ein Plugin, das dies tat diese Funktion. Leider fällt mir der Name nicht mehr ein.
Illustrator eignet sich sehr gut zum Erstellen nahtloser Muster (Object-Pattern-Make). Ich erinnere mich, wie wütend ich mit der Schaffung von blitzschnell Raffinesse entwickelt habe. In der SS 2015-Version von Illustrator ist alles automatisiert; eine Reihe von Einstellungen helfen Ihnen, mit nur wenigen grafischen Elementen ein Muster in Dutzenden Variationen zu erstellen. In mehr frühere Versionen Alle Programme mussten manuell durchgeführt werden, genau wie bisher in Flash.
(Hinweis: Das Muster kann mithilfe der Funktion „Objekt – Darstellung erweitern“ in ein vektorbearbeitbares Objekt umgewandelt werden.
14. Objektmosaik
Erstellen einer Farbpalette basierend auf einem vorhandenen Bild. Importieren Sie das gewünschte Bild in die Illustration (Öffnen), dann Objekt – Objektmosaik erstellen. In den Einstellungen legen wir die Häufigkeit der Teilung in Höhe und Breite fest.
Und am Ausgang erhalten wir:
15.Mischen
Wird zum Erstellen von Farbverläufen verwendet. Sie können schrittweise Übergänge erstellen, z. B. im Bild. Ich werde nicht sagen, dass ich es oft benutze, aber es könnte für jemanden nützlich sein. Mir scheint, dass man damit einfache Hintergrundbilder erstellen kann.
Das Tool kann auch zum Klonen von Objekten verwendet werden. Platzieren Sie zwei Objekte in einem Abstand voneinander und wenden Sie die Überblendungsoptionen an. Wählen Sie die Anzahl der Schritte (die Anzahl der geklonten Objekte) aus.
16. Werkzeug „Form erstellen“. Eine sehr praktische Sache für die Arbeit mit Grundelementen. Im Moment schien es mir weniger bequem zu sein.
Halten Sie die Alt-Taste gedrückt und klicken Sie auf die ausgewählten Segmente, um diese zu löschen. Wenn wir einfach mit der Maus über mehrere ausgewählte Bereiche ziehen – Verbindungen.
Add-on ist ein Tool, das beim automatischen Schneiden, Verbinden usw. hilft. hervorgehobene Formulare. Für mich ist es nicht sehr praktisch; ich verwende oft das Build Shape Tool.
(Zeichenflächen)
18. Benutzerdefiniertes Werkzeugfenster
Die Möglichkeit, Ihre eigene Symbolleiste zu erstellen, unnötige zu verwerfen und nur diejenigen auszuwählen, die Sie verwenden.
In Flash sind Zeichenflächen, nämlich Szenen (Szene 1,2,3...), separat angeordnet und Sie müssen zwischen ihnen wechseln (Umschalt+F2). In Illustrator können sie alle vor Ihren Augen platziert werden. Es ist praktisch, wenn Sie mehrere Versionen derselben Zeichnung erstellen, sodass Sie alle Optionen zum Vergleich vor Augen haben.
19. Isometrien mit Grafikstilen
Und das Letzte ist, Isometrien zu erstellen, ohne sie mit einem Klick (oder genauer gesagt mit 3 Klicks, weil wir 3 Seiten haben;) mithilfe von Grafikstilen (Grafikstilen) zu verwenden. Ich werde das nächste Mal beschreiben, wie das gemacht wird.
Was der Illustrator mit Flash gemeinsam hat, ist die Möglichkeit, ein Objekt in einem Symbol zu speichern, und dieses Symbol kann genauso einfach in Flash übertragen werden (öffnen Sie die Datei in flash.ai mit Import – In Bühne importieren).
Das Symbol in Illustrator hat die gleichen Eigenschaften wie in Flash.
Abschließend möchte ich schreiben, dass Illustrator meiner Meinung nach Flash unterlegen ist. Ja, ja, so etwas gibt es. Und das ist das Füllwerkzeug (Farbeimer). Egal wie sehr ich versuche, mich in Illa daran zu gewöhnen, in Flash ist es bequemer.
Wenn meine Notizen für Sie nützlich geworden sind oder Sie etwas Eigenes hinzufügen möchten, freuen wir uns über die Kommentare! Allen viel Glück;)
Optimierung von Webgrafiken
Grafische Informationen wird viel langsamer übertragen als Text und die Ladezeit für Bilder ist proportional zur Größe ihrer Grafikdateien. Deshalb schnelles Laden Webseiten erfordern eine geringe Größe der darin eingebetteten Grafikbilder, was durch ihre Optimierung erreicht wird. Unter Bildoptimierung versteht man deren Konvertierung, die Gewährleistung einer minimalen Dateigröße bei gleichzeitiger Beibehaltung der in diesem Fall erforderlichen Bildqualität, was vor allem durch die Reduzierung der Farbanzahl in Grafikbildern, die Verwendung komprimierter und spezieller Dateiformate sowie die Optimierung der Komprimierungsparameter für einzelne erreicht wird Bildfragmente.
Illustrator verfügt über integrierte Bildoptimierungstools, die den Optimierungsprozess mit einer Vielzahl von Vorschaumethoden schnell und effizient gestalten. Vorschau gibt in Echtzeit eine ziemlich genaue Vorstellung davon, wie das optimierte Bild aussehen wird, was dabei hilft, das Optimierungsergebnis zu bewerten und erfolgreich auszuwählen erforderlichen Einstellungen. Und Sie können sowohl direkt in Illustrator erstellte Bilder als auch andere, beispielsweise Fotos, die auf einer Website platziert werden sollen, optimieren.
Optimierungsparameter werden im Fenster „Speichern“ eingestellt für Web(Für Web speichern), aufgerufen durch den gleichnamigen Befehl aus dem Menü „Datei“. Das Programm bietet Ihnen die Möglichkeit, einen von vier Vorschaumodi zu verwenden, zwei eignen sich jedoch am besten zur Beurteilung der Optimierungsqualität:
- 2-Up (zwei Optionen) gleichzeitige Anzeige des Original- und des optimierten Bildes gemäß den angegebenen Einstellungen (Abb. 1);
- 4-Up (vier Optionen) In diesem Modus ist das Ansichtsfenster in vier Fenster unterteilt (Abb. 2), um das Originalbild und drei Versionen des optimierten Bildes anzuzeigen: Die erste Version wird basierend auf den festgelegten Optimierungswerten erstellt und die Die anderen beiden sind Variationen der aktuellen Optimierungseinstellungen.
Mit beiden Modi können Sie bei der Suche nach der besten Optimierungsoption erheblich Zeit sparen, da Bilder nicht mehr mit unterschiedlichen Optimierungseinstellungen gespeichert werden müssen visueller Vergleich. Darüber hinaus ist es möglich, nicht nur die Qualität des optimierten Bildes zu bewerten, sondern auch dessen Größe und Ladezeit verschiedene Optionen Verbindungen. Zum Vergleich: Der bequemste Modus ist 4-Up (vier Optionen), mit dem Sie die Auswirkung der Komprimierung oder Palettenreduzierung auf die Bildqualität und -größe visuell bewerten und letztendlich bestimmen können beste Parameter Optimierung.
Mit Illustrator können Sie Webgrafiken nicht nur in den Formaten GIF, JPG, PNG-8 und PNG-24, sondern auch SWF und SVG optimieren. Indizierte Bilder mit wenigen Farben werden im GIF-Format gespeichert. Das JPG-Format wird zum Speichern von Vollfarb- und Graustufenbildern, Fotos und farbintensiven Grafiken wie Verlaufsfüllungen verwendet. Für Vollfarbbilder mit transparenten Bereichen wird das PNG-Format verwendet, mit dem Sie sowohl indizierte als auch Vollfarbbilder speichern können, während im PNG-8-Format die maximal mögliche Anzahl von Farben des optimierten Bildes 256 beträgt Im PNG-24-Format kann das Bild Millionen von Farben haben, und deshalb sieht es so aus JPEG-Format. Der Unterschied zwischen PNG-24 und JPEG besteht darin, dass das zur Optimierung von Bildern im PNG-24-Format verwendete Komprimierungsverfahren nicht zu Qualitätsverlusten führt, die Dateigröße dadurch jedoch zunimmt. SVG- und SWF-Formate kombinieren Grafiken, Text und interaktive Komponenten und können auch optimiert werden.
Lassen Sie uns überlegen konkretes Beispiel Bildoptimierung. Nehmen wir an, ein Website-Logo wurde in Illustrator entwickelt (Abb. 3) und zunächst im AI-Format gespeichert. Ein Versuch, es sofort für das Web zu optimieren, wird zu nichts Gutem führen, da in diesem Fall das Bild automatisch zugeschnitten wird, wodurch die wahre Position der resultierenden Beschriftung aufgrund der Verformung nicht berücksichtigt wird (Abb. 4 und 5).
Versuchen wir daher, das Logo mit dem Befehl Datei=>Exportieren (Datei=>Exportieren) in das PSD-Format zu exportieren. Die Größe des erstellten Bildes beträgt 143 KB. Öffnen Sie die resultierende PSD-Datei und verwenden Sie den Befehl Datei=>Für Web speichern. Unter Berücksichtigung der begrenzten Anzahl der im Bild enthaltenen Farben ist in diesem Fall das GIF-Format optimal, dessen spezifische Einstellungen festgelegt werden müssen. Durch Experimentieren mit den Einstellungen können Sie sicherstellen, dass der standardmäßige Komprimierungsalgorithmus des Programms, Selective, die beste Qualität erzeugt. Was die Glättung betrifft, ist es angesichts des Vorhandenseins einer Gradientenfüllung besser, einen Algorithmus mit Rauschen zu wählen (Abb. 6). Die Größe der resultierenden Optimierungsdatei beträgt 6,729 KB (Abb. 7), während die Transparenz des Hintergrunds erhalten bleibt, was leicht überprüft werden kann, indem das Bild zusammen mit der HTML-Datei im GIF-Format gespeichert wird (Abb. 8). Infolgedessen in in diesem Beispiel Die Dateien emblem.html und emblem.gif wurden im Primer1-Ordner empfangen.
Ein unverzichtbares spezifisches Element des Designs jeder Webseite sind grafische Steuerschaltflächen. Eine Seite ohne sie ist einfach nicht vorstellbar. Das Zeichnen von Schaltflächen ist heute zu einem besonderen Genre geworden, und mit Illustrator können Sie die kompliziertesten Optionen erstellen. Beispielsweise sehen Schaltflächen, die als Mesh-Objekte und/oder mit Overlay-Masken gestaltet sind, viel beeindruckender aus als normale Schaltflächen.
Erwägen Sie die Möglichkeit, in Illustrator eine runde, konvexe Schaltfläche zu erstellen. Zeichnen Sie ein Vektorobjekt in Form eines Kreises, der mit einer beliebigen Farbe gefüllt ist (Abb. 9) und wandeln Sie es mit dem Befehl Objekt => Verlaufsnetz erstellen (Objekt => Verlaufsnetz erstellen) in ein Netz um, indem Sie vier Zeilen und vier angeben Spalten und wählen Sie in der Liste „Darstellung“ die Option „To Center Highlight“ gleich 60 aus (Abb. 10). Wählen Sie das Direktauswahl-Werkzeug und klicken Sie in die obere linke Ecke des Objekts, um die dort befindlichen Ankerpunkte auszuwählen (Abb. 11). Ändern Sie die Farbe der entsprechenden Zelle in Weiß, indem Sie sie in der Farbfeldpalette auswählen (Abb. 12).
Nehmen Sie das Ellipse-Werkzeug, platzieren Sie die Mausmarkierung in der Mitte des zuvor erstellten Kreises und halten Sie sie gedrückt Alt-Tasten und Shift spannen Sie den neuen Kreis über den alten, sodass er auf allen Seiten 1-2 Pixel größer als der alte ist. Geben Sie ihm einen 1-2 Pixel breiten schwarzen Rand (Strich) und füllen Sie ihn mit einem radialen Farbverlauf in Richtung von Rot nach Weiß (Abb. 13). Ziehen Sie das erstellte Vektorobjekt 1-2 Pixel nach rechts und nach unten, und klicken Sie dann mit der rechten Maustaste darauf und dann heraus, ohne die Auswahl zu entfernen Kontextmenü Wählen Sie Anordnen=>Nach hinten senden. Das Ergebnis ist ein Leerzeichen für die Schaltfläche, wie in Abb. 14.
In der Regel gibt es auf jeder Webseite mehrere Schaltflächen des gleichen Typs, die sich beispielsweise nur in der Richtung der darauf gezeichneten Pfeile unterscheiden, die die Bewegungsrichtung auf der Website angeben. Betrachten wir den einfachsten Fall mit zwei Schaltflächen, von denen eine mit einem Abwärtspfeil das Wechseln zur nächsten Seite und eine Schaltfläche mit einem Aufwärtspfeil das Wechseln zur vorherigen Seite bedeutet. Als Pfeilvorlage nehmen wir ein regelmäßiges Dreieck, gezeichnet mit dem Polygon-Werkzeug, schwarz bemalt und für eine größere Wirkung auch als Netzobjekt gestaltet. Bewegen Sie den Pfeil auf die Schaltfläche und passen Sie die Position aller Objekte relativ zueinander mithilfe der entsprechenden Schaltflächen in der Ausrichten-Palette an. Die erste der resultierenden Schaltflächen ist in Abb. dargestellt. 15. Erstellen wir eine Kopie der Ebene mit der Schaltfläche, indem wir den Befehl „Ebenenebenen duplizieren“ auswählen. Als Ergebnis erhalten wir zwei identische Ebenen. Wählen Sie dann den Pfeil auf der Kopie der Ebene aus und drehen Sie sie um 180°, indem Sie im Kontextmenü den Befehl Transformieren=>Rotieren Transformation=>Rotieren auswählen. Wir erhalten die gleiche Schaltfläche wie in Abb. 16. Bitte beachten Sie, dass es viel bequemer ist, alle gleichen Schaltflächentypen für ein Projekt in einer Datei auf verschiedenen Ebenen zu speichern, was in diesem Fall gezeigt wird.
Jetzt müssen Sie die optimierten Versionen jeder Schaltfläche speichern. Machen Sie zunächst die untere Ebene unsichtbar. In diesem Fall bleibt die Schaltfläche auf der oberen Ebene erhalten. Wählen Sie den Befehl „Datei=>Für Web speichern“ und konfigurieren Sie die Schaltflächenoptimierungsparameter, z. B. wie in Abb. 17, klicken Sie auf die Schaltfläche „Speichern“ und geben Sie einen Dateinamen ein. Die letztendlich gespeicherte Schaltfläche ist in Abb. dargestellt. 18. Stellen Sie nun die Sichtbarkeit der unteren Ebene wieder her, machen Sie die obere Ebene unsichtbar und speichern Sie die zweite Schaltfläche auf die gleiche Weise, indem Sie ihr einen anderen Namen geben. Das Ergebnis ist in Abb. dargestellt. 19.
Jetzt müssen Sie nur noch sicherstellen, dass die Schaltflächen auf der Webseite gut aussehen, und sie auf einer benutzerdefinierten Seite platzieren (Abb. 20). Als Ergebnis wurden in diesem Beispiel die Datei Primer2.html und zwei Grafikbilder im Bilderordner (Primer2-Ordner) abgerufen.
Bei Bedarf lässt sich ein Button während des Optimierungsprozesses ganz einfach in einen Slice umwandeln. In diesem Fall sollten Sie nach Auswahl des Befehls „Datei=>Für Web speichern“ (Datei=>Für Web speichern) und dem Festlegen der Optimierungsparameter das Werkzeug „Slice Select“ aus der Werkzeugpalette auswählen und auf das Bild doppelklicken, was schließlich geschieht verwandelt sich automatisch in eine Scheibe mit der Seriennummer 1 (Abb. 21). Durch erneutes Doppelklicken wird das Fenster „Slice-Optionen“ geöffnet, in dem Sie einen Link angeben und optional den Namen des Slice ändern müssen (Abbildung 22) und dann das optimierte Bild speichern müssen. Das Ergebnis sind in diesem Fall die Dateien Primer3.html (Abb. 23) und Primer3.gif (Ordner Primer3).
Eine Möglichkeit, einer Seite Leben einzuhauchen, besteht darin, Designelemente einzuführen, die sie verändern Aussehen(oder Status) abhängig vom Verhalten der Maus oder, seltener, im Falle anderer Situationen: Skalierung, Scrollen, Laden, Fehler usw.
Unter diesen Elementen sind die Rollover-Elemente (von englisch roll over, roll over, umdrehen) am bekanntesten, die unter dem Einfluss der Maus ihr Aussehen ändern. Beispiele für typische Rollover sind animierte Schaltflächen. Rollovers werden häufig bei der Erstellung anderer Website-Navigationselemente verwendet. In Wirklichkeit handelt es sich bei jedem Überschlag nicht um eins, sondern um mehrere (bis zu vier) Bilder, von denen jedes einem bestimmten Ereignis entspricht. Als Hauptereignisse gelten die folgenden: Normaler Normalzustand, Überfahren des Mauszeigers über ein Element und Herunterdrücken der linken Maustaste, wenn der Mauszeiger darüber bewegt wird. Theoretisch können Ereignisse wie „Klick“ beim Loslassen der linken Maustaste nach dem Klicken, „Auf“ nach dem Loslassen der Taste und „Aus“ beim Verlassen der aktiven Zone beteiligt sein. In der Praxis beschränken sie sich jedoch oft darauf, das Element nur für die ersten drei oder sogar zwei Ereignisse zu wechseln.
Klassische ÜberschlägeIm klassischen Sinne handelt es sich bei einem Rollover um eine Aneinanderreihung von grafischen Bildern im GIF-Format und dem dazugehörigen HTML-Code, dank derer je nach Mausverhalten ein Bild ein anderes im Browserfenster ersetzt.
Illustrator ist nicht für die direkte Erstellung von Rollovers im klassischen Sinne gedacht, kann aber dabei helfen, die ersten Elemente dafür zu entwickeln. Die Idee in diesem Fall besteht darin, eine Ebene mit dem Bild zu erstellen, das dem ersten Ereignis entspricht. Erstellen Sie dann eine Kopie der Ebene und transformieren Sie das Bild so, dass es zum zweiten Ereignis passt, und so weiter. Das resultierende mehrschichtige Bild wird in eine PSD-Datei exportiert, wobei die Ebenen erhalten bleiben, auf deren Grundlage ein Rollover erstellt wird Bildprogramm Bereit. Der Vorteil der Verwendung des Illustrator-Programms liegt wie in vielen anderen Fällen in einer Reihe interessanter Funktionen, die in anderen Programmen nicht verfügbar sind Software, kombiniert mit der Bequemlichkeit, Vektorgrafiken zu transformieren.
Versuchen wir, einen Rollover in Form einer Inschrift zu erstellen, deren Farbe sich je nach Mausverhalten ändert. Öffnen Sie Illustrator und erstellen Sie eine Form in Form eines abgerundeten, mit Schwarz gefüllten Rechtecks (Abb. 24), erstellen Sie eine Kopie davon und platzieren Sie sie an einem freien Teil des Bildschirms. Konvertieren Sie die erste Kopie des Rechtecks in ein Netzobjekt mit einer Hervorhebung in der Mitte (Befehl Objekt=>Verlaufsnetzobjekt erstellen=>Verlaufsnetz erstellen) und geben Sie dabei vier Zeilen und zehn Spalten an (Abb. 25). Aktivieren Sie die zweite Kopie des Rechtecks und stellen Sie eine Verlaufsfüllung ein, etwa wie in Abb. 26. Legen Sie das Verlaufsobjekt über das Netzobjekt, reduzieren Sie die Deckkraft des Verlaufsobjekts auf etwa 80 % und die Größe um etwa 1 Pixel, um schließlich den Effekt einer Erhebung zu simulieren. Und dann drucken Sie die Inschrift auf die Gegenstände. Lassen Sie es in seiner ursprünglichen Form eine weiße Farbe haben, die dem Normalzustand entspricht (Abb. 27), und wenn sich dann der Rollover-Zustand ändert, ändert sich die Farbe der Beschriftung beispielsweise zu Grün, wenn die Mausmarkierung erfolgt wird mit der Maus darüber bewegt (Over-Zustand) und wird blau, wenn die Maustaste gedrückt wird (Down-Zustand).
Achten Sie in diesem Stadium auf die Ebenen-Palette. Sie enthält nur eine einzige Ebene. Erstellen Sie zwei Kopien dieser Ebene, indem Sie den Befehl „Ebene duplizieren“ im Menü der Ebenen-Palette verwenden. Die Palette enthält dann drei Ebenen (Abb. 28). Ändern Sie dann in der ersten Kopie der Ebene die Farbe der Inschrift in Grün und in der zweiten Kopie in Blau (Abb. 29). Dadurch wird der für den Überschlag notwendige Rohling erhalten.
Exportieren Sie das erstellte Bild unter Beibehaltung der Ebenen in das PSD-Format, indem Sie den Befehl „Datei=>Exportieren“ verwenden und auswählen Farbmodell RGB(Abb. 30). Öffnen Sie die erstellte PSD-Datei im ImageReady-Programm (Abb. 31 und 32). Erstellen Sie Frames basierend auf Ebenen, indem Sie im Menü der Animationspalette den Befehl „Frames aus Ebenen erstellen“ auswählen. Das Animationsfenster sieht wie in Abb. aus. 33. In diesem Fall wird zunächst ein einzelner Normalzustand in der Rollover-Palette erstellt.
Wählen Sie dann im Animationsfenster den Frame aus, der dem induzierten Zustand entspricht, und die Ebene „Ebene 1 kopieren“ wird automatisch in der Ebenenpalette ausgewählt (Abb. 34). Gehen Sie zur Rollover-Palette und klicken Sie auf die Schaltfläche „Rollover-Status erstellen“ (Rollover-Status erstellen) Abb. 35, wodurch der Over State-Status in der Rollover-Palette angezeigt wird (Abb. 36). Erstellen Sie auf die gleiche Weise einen Down State. Aktivieren Sie den Normalzustand in der Rollover-Palette und löschen Sie alle Frames in der Animationspalette außer dem, der dem Normalzustand entsprechen sollte. Dadurch gibt es für jeden Rollover-Zustand nur einen Frame in der Animationspalette (Abb. 37, 38 und 39).
Reis. 38. Ansicht des Bildes, des Animationsfensters und der Ebenen- und Rollover-Paletten für den Over State-Status
Überprüfen Sie das Ergebnis, indem Sie in der Symbolleiste auf die Schaltfläche „Vorschau im Standardbrowser“ klicken und zum Browserfenster wechseln (Abbildung 40). Speichern Sie anschließend die Datei mit dem Befehl „Datei=>Optimiert speichern“ und geben Sie die Option „HTML und Bilder (*.html)“ an. Als Ergebnis wurden in diesem Beispiel die Datei Primer4.html und eine Reihe von Grafikbildern im Bilderordner abgerufen.
Reis. 40. Browserfenster mit Rollover-Element
SVG-RolloverImmer beliebter SVG-Format(Skalierbare Vektorgrafiken skalierbar Vektorgrafiken), erstellt auf Basis des XML-Standards, ermöglicht auch den Empfang vielfältiger interaktiver Elemente, insbesondere Rollovers, wird in der Praxis jedoch völlig anders umgesetzt. Es ist erwähnenswert, dass die Erstellung interaktiver SVG-Rollovers im Gegensatz zu klassischen, bei denen der entsprechende HTML-Code vollständig automatisch generiert wird, Kenntnisse der JavaScript-Sprache und ein Verständnis der Grundprinzipien der objektorientierten Programmierung erfordert.
Für die Arbeit mit SVG-Objekten gibt es eine spezielle Palette SVG-Interaktivität, die einfach mit dem Befehl Fenster => SVG-Interaktivität (Fenster => SVG-Interaktivität) Abb. geöffnet werden kann. 41.
Betrachten wir diese Option zum Erstellen eines Rollovers am Beispiel einer interaktiven Schaltfläche, deren Farbe sich beim Bewegen der Maus von Schwarz nach Blau ändert und beim Verlassen der aktiven Zone wieder in Schwarz wechselt.
Erstellen Sie eine rechteckige Schaltfläche mit abgerundeten Kanten und wählen Sie eine geeignete Verlaufsfüllung dafür aus, zum Beispiel wie in Abb. 42. Passen Sie die Transparenz der Schaltfläche in der Transparenzpalette an. In diesem Beispiel ist der Wert für die Deckkraft auf 50 % eingestellt. Erstellen Sie eine Kopie der Schaltfläche, füllen Sie sie mit Dunkelgrün (Abbildung 43) und konvertieren Sie sie dann mit dem Befehl „Objekt => Verlaufsnetz erstellen“ in ein Netzobjekt, indem Sie vier Zeilen und zehn Spalten angeben und in der Liste „Darstellung“ (Ansicht) angeben. indem Sie die Option „In die Mitte“ auswählen und den Hervorhebungswert auf 100 einstellen. Reduzieren Sie die Deckkraft der Ebene mit dem Netzobjekt auf etwa 40 % (Abb. 44). Platzieren Sie ein Netzobjekt über einem Farbverlaufsobjekt, und die Schaltfläche ähnelt der in Abb. 45.
Reis. 44. Verwandeln Sie eine Kopie einer Schaltfläche in ein Mesh-Objekt
Vervollständigen Sie die Schaltfläche mit der gewünschten Beschriftung und passen Sie ihre Position mithilfe der entsprechenden Schaltflächen in der Ausrichten-Palette an. Das resultierende Bild enthält eine Ebene mit drei übereinander liegenden Objekten (Abb. 46). Geplante Ereignisse sind relativ zu einem Textobjekt. Ändern Sie den Namen der Einfachheit halber in „Text“, indem Sie auf das Objekt doppelklicken und einen neuen Namen eingeben. Ändern Sie auf ähnliche Weise den Ebenennamen von Ebene 1 in Ebene (Abb. 47).
Bei der Ereignisverarbeitung werden JavaScript-Prozeduren verwendet. Daher müssen Sie eine Datei hinzufügen, die diese Prozeduren beschreibt. Es heißt Events.js und wird bei der Installation von Adobe Illustrator im Ordner „Sample Files\Sample Art\SVG\SVG“ auf der Festplatte gespeichert. Um die Datei Events.js zu verbinden, verwenden Sie den Befehl „JavaScript Files SVG Interactivity“ (Abb. 48). Als nächstes müssen Sie auf die Schaltfläche „Hinzufügen“ klicken und suchen erforderliche Datei auf Ihrer Festplatte. Wenn sein Name im URL-Feld erscheint (Abbildung 49), klicken Sie auf die Schaltfläche „Fertig“.
Reis. 48. Auswählen des Befehls „JavaScript-Dateien“.
Als nächstes müssen Sie eine Reaktion auf Mausereignisse für das Textobjekt definieren. Wählen Sie das Textobjekt aus. Wählen Sie im Ereignisfeld der SVG-Interaktivitätspalette das Ereignis onmouseover elemColor(evt, "Text", "#3333FF") aus. Dies bedeutet, dass sich die Farbe ändert, wenn sich die Maus über dem Textobjekt befindet blau (Abb. 50 ). Damit die Textfarbe zu Schwarz wechselt, nachdem die Maus den aktiven Bereich verlässt, müssen Sie ein weiteres Onmouseout-Ereignis erstellen und es im Feld „Ereignis“ der SVG-Interaktivitätspalette auswählen. Geben Sie dann in der Aktionszeile den Text elemColor(evt, „Text“, „#000000“) ein. Dadurch wird die Farbe auf Schwarz zurückgesetzt (Abbildung 51).
Reis. 51. Endgültiges Aussehen der SVG-Interaktivitätspalette für das Textobjekt
Speichern Sie den erstellten Rollover als SVG-Datei mit dem Befehl Datei=>Speichern unter (Datei=>Dateityp SVG-Format und legen Sie dann die Optionen zum Speichern der SVG-Datei fest, wie in Abb. 52 gezeigt. Nach dem Speichern erhalten Sie nur eine einzelne Datei mit der Endung SVG, und nicht zwei, wie bei einem klassischen Rollover, in diesem Fall wurde die Datei Primer5.svg (Primer5-Ordner) empfangen. Damit der Rollover jedoch wirklich funktioniert, müssen Sie zusätzlich kopieren die Datei Events.js aus der Beschreibung der JavaScript-Prozeduren. Danach können Sie die Funktionalität des Rollovers überprüfen. Das Ergebnis sieht wie in Abb. 53 aus.
Das SVG-Format kann auch zur Übertragung von Animationen verwendet werden. Versuchen wir, ein einfaches animiertes Element zu erstellen (in diesem Fall handelt es sich um Informationen über das Unternehmen), das auf dem Bildschirm erscheint, wenn Sie mit der Maus über das entsprechende Grafikobjekt fahren, und verschwindet, wenn Sie die Maus vom interaktiven Element entfernen.
Lassen Sie uns ungefähr die folgende Reihe von Grafik- und Textobjekten erstellen, wie in Abb. 54. Benennen wir alle erstellten Objekte auf bequeme Weise um, indem wir nacheinander auf den Namen des nächsten Objekts in der Ebenenpalette klicken und den gewünschten Namen eingeben (Abb. 55). Bitte beachten Sie, dass die in Abb. Die 56 Objekte Text1, Text2, Text3 und Path1 sind immer sichtbar, alle anderen nur, wenn Sie mit der Maus über das Text1-Objekt fahren.
Reis. 54. Originalansicht des Bildes
Fügen Sie die Datei „Events.js“ mit einer Beschreibung der JavaScript-Prozeduren ein, indem Sie den Befehl „JavaScript-Dateien“ verwenden ( JavaScript-Dateien) aus der SVG-Interaktivitätspalette, indem Sie auf die Schaltfläche „Hinzufügen“ klicken, auf die gewünschte Datei auf Ihrer Festplatte zeigen und auf die Schaltfläche „Fertig“ klicken.
Definieren Sie eine Reaktion auf Mausereignisse für das Text1-Objekt. Wählen Sie das Textobjekt aus, wählen Sie im Feld „Ereignis“ der SVG-Interaktivitätspalette das Ereignis „onmouseover“ aus und geben Sie in der Zeile darunter den Text elemShow(evt, „Text4“); ein. elemShow(evt, "Path2") . Wenn sich die Maus über dem Objekt „Text1“ befindet, werden daher die Objekte „Text4“ und „Pfad2“ sichtbar. Bitte beachten Sie, dass, wenn beim Eintreten eines Ereignisses mehrere Aktionen ausgeführt werden müssen, diese mit dem „;“-Zeichen angegeben werden müssen. Führen Sie dann einen ähnlichen Vorgang für das Ereignis onmouseout durch und geben Sie den Text dafür ein, was das Ausblenden von Objekten bedeutet (Abb. 57).
Speichern Sie das Ergebnis als SVG-Datei mit dem Befehl Datei=>Speichern unter, geben Sie den Dateinamen an, wählen Sie im Feld Dateityp das SVG-Format aus und stellen Sie dann die Optionen zum Speichern der SVG-Datei gemäß Abb. ein. 58. Nach dem Speichern wird die Datei Primer6.svg empfangen (Ordner Primer6). Vergessen Sie nicht, die Datei Events.js in den Ordner mit dieser Datei zu kopieren. Wenn Sie danach laufen, coz Diese Datei, dann sehen Sie das in Abb. gezeigte Ergebnis. 59. Das ist fast das, was Sie brauchen. Das Einzige, was in unseren Plänen nicht vorgesehen war, war das anfängliche Erscheinen der Objekte „Text 4“ und „Pfad 2“ beim Laden. Um diesen Mangel zu beheben, wählen Sie beide Objektdaten gleichzeitig aus und erstellen Sie eine Aktion für sie elemHide(evt, "Text4"); elemHide(evt, „Path2“) beim onload-Ereignis (Abb. 60). Speichern Sie die Datei erneut und stellen Sie sicher, dass die Objekte Text4 und Path2 jetzt nur sichtbar sind, wenn Sie mit der Maus über das Objekt Text1 fahren.
Jede Webseite ist ohne Webanimationen, einschließlich animierter GIFs, undenkbar. Eine Möglichkeit zur Erstellung besteht darin, die Anwendung Adobe ImageReady zu verwenden, mit der unter anderem Animationen aus Ebenen erstellt werden können. In diesem Fall kann das mehrschichtige Bild selbst vorbereitet werden verschiedene Anwendungen, auch in Adobe Illustrator.
Es ist sehr einfach, eine Animation basierend auf Elementen aus der Symbolpalette zu erstellen, die mit dem Befehl „Fenster=>Symbole“ geöffnet wird, oder aus einer der Symbolbibliotheken, die mit dem Befehl „Fenster=>Symbolbibliotheken“ geöffnet werden können. ).
Wir werden beispielsweise versuchen, die Größe eines beliebigen Symbolobjekts zu erhöhen; die wichtigsten Phasen des Prozesses der Objektvergrößerung müssen auf separaten Ebenen festgelegt werden. Platzieren Sie zunächst einfach die Symbolobjekte übereinander und vergrößern Sie dann jedes weitere Objekt, z. B. wie in Abb. 61. Als Ergebnis wird in der Ebenenpalette eine Ebene mit vielen Objekten erstellt (Abb. 62). Wenn Sie dieses Bild direkt in das PSD-Format exportieren, gibt es nichts, da es nur eine Ebene gibt und natürlich auch nur eine Ebene vorhanden ist, wenn Sie die PSD-Datei im ImageReady-Programm öffnen. Daher müssen Sie Objekte zunächst auf verschiedenen Ebenen platzieren. Das kann gemacht werden verschiedene Wege Am einfachsten ist es, zunächst Ebene 1 in der Ebenenpalette auszuwählen und den Befehl „Auf Ebene freigeben“ zu verwenden. Das Ergebnis ist, dass jedes Objekt auf seine eigene Ebene verschoben wird, sie jedoch alle in Ebene 1 verschachtelt sind. Daher müssen Sie dann alle verschachtelten Ebenen manuell an den oberen Rand der Ebenenpalette ziehen, sodass sie sich über der Ebene Ebene 1 befinden, und dann einfach die jetzt leere Ebene Ebene 1 löschen (Abb. 63). Exportieren Sie das Bild mit dem Befehl „Datei=>Exportieren“ in das PSD-Format mit den Einstellungen wie in Abb. 64.
Laden Sie die erstellte PSD-Datei in das ImageReady-Programm (Abb. 65 und 66). Öffnen Sie das Palettenmenü „Animation: Frames aus Ebenen erstellen“. Als Ergebnis werden fünf Frames erstellt, von denen jeder einer eigenen Ebene entspricht, und das Fenster der Animationspalette sieht wie in Abb. aus. 67.
Stellen Sie anschließend die Dauer jedes einzelnen erstellten Frames ein. In diesem Fall ist die Dauer für alle Frames auf 0,2 s festgelegt. Und dann speichern Sie die Animation mit Optimierung mit dem Befehl Datei=>Optimiert speichern (Datei=>Mit Optimierung speichern). Das resultierende Ergebnis ähnelt möglicherweise Abb. 68.
Noch bequemer ist es, Rohlinge zu erhalten, die dann in ImageReady einfach in Animationen umgewandelt werden können, um die Live Blends-Funktionen von Illustrator zu nutzen. Diese kombinierte Verwendung von Illustrator und ImageReady beschleunigt den Prozess der Erstellung von GIF-Animationen erheblich.
Zeichnen Sie beispielsweise zwei beliebige mehrfarbige Objekte und verbinden Sie sie dann mit einem Blend-Link mit den entsprechenden Parametern (Abb. 69). Es ist nicht möglich, diese Datei direkt zum Erstellen einer Animation zu verwenden, da sich das Bild auf einer einzigen Ebene befindet (Abb. 70). Daher müssen Sie zunächst jedes Element des Mischobjekts auf einer separaten Ebene platzieren. Wählen Sie dazu im Fenster „Ebenen“ die Zeile aus, aktivieren Sie das Palettenmenü, indem Sie auf den schwarzen Pfeil in der oberen rechten Ecke klicken, und wählen Sie den Befehl „In Ebenenreihenfolge freigeben“ (Abb. 71). Halten Sie die Umschalttaste gedrückt, wählen Sie die erstellten Ebenen aus und platzieren Sie sie über der Ebene Ebene 1. Löschen Sie dann die Ebene Ebene 1 selbst und verschieben Sie sie in den Papierkorb. Die Ebenenpalette nimmt dann die gleiche Form an wie in Abb. 72.
Reis. 70. Ausgangszustand des Ebenenfensters
Exportieren Sie die erstellte Datei mit dem Befehl Datei=>Exportieren in das PSD-Format. Öffnen Sie die erstellte PSD-Datei im ImageReady-Programm (Abb. 73). Bitte beachten Sie, dass alle in Illustrator erstellten Ebenen im Ebenenfenster angezeigt werden (Abb. 74) und im Animationsfenster vorerst nur ein Frame vorhanden ist.
Aktivieren Sie das Menü der Animationspalette, indem Sie auf den schwarzen Pfeil in der oberen rechten Ecke der Palette klicken und den Befehl „Frames aus Ebenen erstellen“ auswählen. Als Ergebnis werden in diesem Beispiel fünf Frames erstellt und das Fenster der Animationspalette übernimmt die Formular gemäß Abb. 75. Wählen Sie alle Bilder aus, während Sie die Umschalttaste gedrückt halten, und stellen Sie die entsprechende Bilddauer ein. In diesem Beispiel wird für jedes Bild die gleiche Zeit von 0,2 s benötigt. Speichern Sie dann die Datei mit Optimierung mit dem Befehl Datei=>Optimiert speichern (Datei=>Mit Optimierung speichern) und stellen Sie in der Liste Dateityp die Option Nur Bilder (*.gif) ein. Die Animation ähnelt Abb. 76.
Was viel interessanter aussieht, ist nicht die Bewegung, sondern die sanfte Größenänderung von Mischobjekten. Sie können beispielsweise den bereits erstellten Überblendungsübergang verwenden. In diesem Fall platzieren Sie nach dem Erstellen separater Ebenen für jedes Übergangselement der Mischung alle Objekte übereinander, indem Sie die Schaltflächen „Horizontales Ausrichtungszentrum“ und „Vertikales Ausrichtungszentrum“ der Ausrichten-Palette verwenden (Abb. 77).
Exportieren Sie die erstellte Datei in das PSD-Format (Datei=>Datei exportieren=>Exportieren) und öffnen Sie die erstellte PSD-Datei im ImageReady-Programm (Abb. 78). Erstellen Sie Animationsframes basierend auf Ebenen (Frames aus Ebenen erstellen. Frames aus Ebenen erstellen) und wählen Sie eine geeignete Dauer für sie aus (Abb. 79). Um die Animation effektiver zu gestalten, kopieren Sie dann die vorhandenen Frames, jedoch in umgekehrter Reihenfolge, sodass das Bild zuerst größer und dann kleiner wird und so weiter im Kreis (Abb. 80). Anschließend speichern Sie die Optimierungsdatei (Datei=>Optimierte Datei speichern=>Mit Optimierung speichern). Die resultierende Animation ist in Abb. dargestellt. 81.
Reis. 80. Status des Animationsfensters nach dem Duplizieren von Frames
Reis. 81. Fertige Animation
