So fügen Sie GIF-Animationen in Illustrator ein GIF mit transparentem Hintergrund in Illustrator erstellen. Importieren von Illustrator-Dateien in eine Flash-Anwendung
Das Dateiformat Flash (SWF) basiert auf Vektorgrafiken und ist für skalierbare, kompakte Grafiken für das Web gedacht. Da dieses Dateiformat auf Vektorgrafiken basiert, behält das Objekt die Bildqualität bei jeder Auflösung bei und eignet sich ideal zum Erstellen von Animationsframes. In Illustrator können Sie einzelne Animationsframes auf Ebenen erstellen und die Bildebenen dann als einzelne Frames zur Verwendung auf der Website exportieren. Sie können auch definieren Symbole in einer Illustrator-Datei, um die Größe der Animation zu reduzieren. Beim Export wird jedes Symbol nur einmal in der SWF-Datei definiert.
Exportbefehl (SWF)
Bietet die größte Kontrolle über Animation und Bitkomprimierung.
Bietet mehr Kontrolle über die Mischung von SWF- und Bitmap-Formaten in einem fragmentierten Layout. Dieser Befehl bietet weniger Bildoptionen als der Befehl Exportieren (SWF), verwendet jedoch die zuletzt verwendeten Exportbefehlsoptionen (siehe ).
Beachten Sie die folgenden Richtlinien, wenn Sie ein Objekt zum Speichern als SWF-Datei vorbereiten.
Verwenden Sie die Device Central-App, um zu sehen, wie eine Illustrator-Grafik in der App aussieht Flash Player auf verschiedenen Handheld-Geräten.
Einfügen einer Illustrator-Grafik
In Illustrator erstellte Grafiken können schnell, einfach und problemlos kopiert und eingefügt werden Flash-Anwendung.
Wenn Sie eine Illustrator-Grafik in eine Flash-Anwendung einfügen, bleiben die folgenden Attribute erhalten.
Strichstärke
Definitionen von Gradienten
Text (einschließlich OpenType-Schriftarten)
Verwandte Bilder
Mischmodi
Konturen und Formen
Darüber hinaus unterstützen Illustrator und Flash die folgenden Funktionen beim Einfügen einer Grafik.
Beim Auswählen von Ebenen in einem Illustrator-Bildmaterial Höchststufe Beim vollständigen Einfügen in eine Flash-Anwendung bleiben die Ebenen und ihre Eigenschaften (Sichtbarkeit und Blockierung) erhalten.
Andere Illustrator-Farbformate als RGB (CMYK, Graustufen und benutzerdefinierte Formate) werden von Flash in RGB konvertiert. RGB-Farben wie gewohnt eingefügt.
Beim Importieren oder Einfügen von Illustrator-Bildmaterial können Sie verschiedene Optionen verwenden, um bestimmte Effekte (z. B. einen von Text geworfenen Schatten) als Flash-Filter zu speichern.
Flash speichert Illustrator-Masken.
Exportieren Sie SWF-Dateien aus Illustrator
Aus Illustrator exportierte SWF-Dateien haben die gleiche Qualität und Komprimierung wie aus Flash exportierte SWF-Dateien.
Beim Exportieren können Sie aus einer Vielzahl vordefinierter Stile für eine optimale Ausgabe auswählen und festlegen, wie mehrere Zeichenflächen verwendet werden, wie Zeichen, Ebenen, Text und Masken konvertiert werden. Beispielsweise können Sie Illustrator-Symbole als Filme oder Grafiken exportieren und SWF-Symbole aus Illustrator-Ebenen erstellen.
Importieren von Illustrator-Dateien in eine Flash-Anwendung
Um ein vollständiges Layout in Illustrator zu erstellen und es dann in einem Schritt in Flash zu importieren, können Sie Ihre Grafik im nativen Illustrator-Format (AI) speichern und sie mit den Befehlen „Datei“ > „In Arbeitsbereich importieren“ mit hoher Wiedergabetreue in Flash importieren. Datei“ > „In Bibliothek importieren“.
Wenn die Illustrator-Datei mehrere Zeichenflächen enthält, wählen Sie die zu importierende Zeichenfläche aus dem Dialogfeld „Flash-Import“ aus und legen Sie die Einstellungen für jede Ebene in dieser Zeichenfläche fest. Alle Objekte in der ausgewählten Zeichenfläche werden als einzelne Ebene in Flash importiert. Wenn Sie eine andere Zeichenfläche aus derselben AI-Datei importieren, werden Objekte von dieser Zeichenfläche als neue Ebene in Flash importiert.
Wenn Sie Illustrator-Bildmaterial als AI-, EPS- oder PDF-Dateien importieren, behält Flash dieselben Attribute bei wie beim Einfügen von Illustrator-Bildmaterial. Wenn die zu importierende Illustrator-Datei Ebenen enthält, können Sie diese auch mit einer der folgenden Methoden importieren.
Konvertieren Sie Illustrator-Ebenen in Flash-Ebenen.
Konvertieren Sie Illustrator-Ebenen in Flash-Frames.
Konvertieren Sie alle Illustrator-Ebenen in eine Flash-Ebene.
Heute haben wir eine ungewöhnliche Stunde. Adobe Illustrator. Denn dieses Mal werden wir kein statisches Bild machen, sondern eine echte Animation. Stellen Sie sich vor, es stellt sich heraus, dass Sie mit Hilfe von Adobe Illustrator auch Cartoons zeichnen können :)
Und dafür brauchen wir nichts. Kompetente Ebenenorganisation und Export der fertigen Arbeit ins swf-Format, wo jede Ebene in ein Animationsframe umgewandelt wird. Im heutigen Tutorial zeichnen wir eine Countdown-Animation im Retro-Filmstil. Die Ausgabe sollte ein Flash-Film mit demselben Countdown sein.
Das erste, was Sie tun müssen, ist, alle notwendigen Elemente für zukünftige Animationen zu zeichnen. Zu diesem Zweck habe ich in einem separaten Dokument zwei Filmrahmenpositionen erstellt, einen Referenzkreis, der in einzelne 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 Sie mit der Erstellung der eigentlichen Animation beginnen. Der Einfachheit halber geschieht dies am besten in einem neuen Dokument. In diesem Fall spielen die Ebenen die Rolle von Animationsframes. Und in der allerersten Ebene müssen Sie nur das Bild des Films kopieren. Positionieren Sie es in der Mitte des Arbeitsbereichs.
Erstellen Sie nun eine zweite Ebene und kopieren Sie den Filmrahmen hinein, in dem die Löcher an den Rändern mit einer Verschiebung gemacht werden. Es muss auch zentriert werden.
Aus diesen beiden Schichten können Sie bereits die Animation eines bewegten Films erhalten. 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 mit Filmrahmen 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 sehr praktisch ist. Daher können Sie einige Ebenen deaktivieren, indem Sie auf das Augensymbol 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. Wenn Sie Ebenen ein- und ausschalten, können Sie genau sehen, was sich in einem bestimmten Frame unserer zukünftigen Animation befindet. Und jetzt, damit wir der Filmbewegung ein leichtes Wackeln hinzufügen, müssen wir die empfangenen Frames 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 zu beiden Seiten.
Wenn 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 Cartoon-Teile-Dokument und legen Sie ihn auf die erste Ebene über dem Filmrahmen.
Wenn Sie die Auswahl aus dem Kreis entfernen, sieht sie wie ein einziges Ganzes aus. Genau das brauchen wir.
Da es aber aus separaten Sektoren besteht, ist es möglich, durch Änderung ihrer Farbe sehr schnell und einfach Animationen zu erstellen. Kopieren Sie dazu diesen Kreis auf die zweite Ebene und machen Sie den ersten Sektor heller. Sie erinnern sich, dass der Film während der Bewegung zittert, daher ist es nicht notwendig, den Kreis genau in die Mitte des Rahmens zu legen. Legen Sie es auf das Auge.
In ähnlicher Weise müssen Sie den Kreis auf jede nächste Ebene kopieren, während Sie mit einer helleren Farbe einen Sektor mehr als beim vorherigen Mal malen. Zusammen bilden diese 12 Schichten eine Animation der Bewegung des Films mit einem Füllkreis.
Als nächstes müssen wir unseren Ebenen Textur hinzufügen. Schalten Sie die erste Ebene ein und kopieren Sie die Textur aus der Quelldatei mit Ersatzteilen dorthin.
Schalten Sie dann nacheinander die nächsten Ebenen ein und kopieren Sie dort die gleiche Textur. Damit es auf jedem Bild anders aussieht, drehen Sie es einfach um 90 Grad. Wie Sie vielleicht erraten haben, müssen wir allen 12 Frames Textur hinzufügen.
Wenn Sie das Kopieren schon ziemlich satt haben, kann ich Ihnen eine Freude machen - es ist sehr wenig übrig. Der schwierigste Teil ist vorbei. Es bleiben vertikale Kratzer und fast alles hinzuzufügen. Kopieren Sie dazu wieder den ursprünglichen Kratzer und legen Sie ihn in mehreren Ebenen an einer beliebigen Stelle ab. In meinem Fall erscheinen Kratzer in nur zwei Schichten.
Nachdem der Hauptzyklus mit der Filmanimation fertig ist, müssen noch die Zahlen hinzugefügt werden. Da wir von 3 bis 1 plus dem Wort Go!!! zählen, brauchen wir noch mehr Schichten. Nicht 12, sondern bis zu 48. Dazu müssen Sie drei weitere Kopien fertiger 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 Zahl Eins in die gewünschten Ebenen. Und wenn Sie zu den letzten Ebenen für das Go!!!-Etikett gelangen, löschen Sie einfach den Kreis, bevor Sie das Etikett auf die gewünschte Ebene kopieren.
Das ist alles mit Animation. Die Hauptsache hier ist, sich nicht verwirren zu lassen. Sie können den Ebenen einige praktische Namen geben, aber ich war irgendwie zu faul :) Und wenn Sie fertig sind, schalten Sie alle Ebenen wieder ein, indem Sie auf das Augensymbol klicken.
Stellen Sie im Fenster mit den Exporteinstellungen sicher, dass Exportieren als: AI-Ebenen auf SWF-Frames eingestellt ist. Diese Option verwandelt Illustrator-Ebenen in Animationsframes. Klicken Sie anschließend auf die Schaltfläche Erweitert.
Zusätzliche Einstellungen werden geöffnet. Hier müssen Sie die Framerate einstellen. Ich habe 12 Bilder pro Sekunde. Das Kontrollkästchen Looping ist für das Durchlaufen der Animation verantwortlich. Dank ihr wird das Video im Kreis abgespielt. Und die Option Ebenenreihenfolge: Von unten nach oben rendert die Illustrator-Ebenen im Panel von unten nach oben. Genau so haben wir unsere Animation aufgebaut.
Als Ergebnis erhalten wir einen Flash-Film mit unserer Animation.
Jetzt sehen Sie, dass das Erstellen einer einfachen Animation in Adobe Illustrator nicht so schwierig ist, wie es auf den ersten Blick scheint.
Aber zum Erstellen langer Videos oder interaktiver Anwendungen ist es immer noch besser zu verwenden Adobe Flash oder andere Flash-Editoren. Zum Beispiel habe ich diese Katze in einem alten gemacht Macromedia-Flash die ich bei der Arbeit ausgegraben habe.
Auch HTML5 und CSS3 werden in letzter Zeit zunehmend zum Erstellen von Animationen verwendet. Gegebener Code wird von modernen Browsern unterstützt und erfordert keinen Flash-Player.
Roman alias Dacascas speziell für den Blog Notizen eines Microstock-Illustrators
Abonnieren Sie unseren Newsletter, um nichts Neues zu verpassen:
Optimierung von Webgrafiken
Grafische Informationen ist viel langsamer als Text, und die Ladezeit von Bildern ist proportional zur Größe ihrer Grafikdateien. Deshalb schnelles Laden Webseiten erfordern eine geringe Größe der darin eingebetteten grafischen Bilder, was durch ihre Optimierung erreicht wird. Unter Bildoptimierung versteht man deren Transformation, die die minimale Dateigröße bei gleichzeitiger Beibehaltung der hierfür erforderlichen Bildqualität bereitstellt, was vor allem durch die Reduzierung der Farbanzahl in grafischen Bildern, die Verwendung komprimierter und spezieller Dateiformate sowie die individuelle Optimierung der Komprimierungseinstellungen erreicht wird Bildfragmente.
Illustrator verfügt über integrierte Bildoptimierungswerkzeuge, die einen schnellen und effizienten Optimierungsprozess durch eine Vielzahl von Vorschaumethoden ermöglichen. Vorschau gibt eine ziemlich genaue Vorstellung davon, wie das optimierte Bild in Echtzeit aussehen wird, was hilft, das Optimierungsergebnis zu bewerten und das richtige auszuwählen gewünschten Einstellungen. Und Sie können sowohl direkt in Illustrator erstellte Bilder als auch andere optimieren, z. B. Fotos, die Sie auf einer Website veröffentlichen möchten.
Im Fenster werden Optimierungsparameter eingestellt Speichern für Web (Save for Web), aufgerufen durch den gleichnamigen Befehl aus dem Menü Datei(Datei). Das Programm bietet die Verwendung eines von vier Vorschaumodi an, aber zwei sind am besten geeignet, um die Qualität der Optimierung zu bewerten:
- 2-Up(zwei Optionen) gleichzeitiges Betrachten des Originals und des optimierten Bildes gemäß den festgelegten Einstellungen (Abb. 1);
- 4-Up(vier Optionen) In diesem Modus ist der Ansichtsbereich in vier Fenster (Abb. 2) unterteilt, um das Originalbild und drei Versionen des optimierten Bildes anzuzeigen: Die erste Version wird basierend auf den eingestellten Optimierungswerten erstellt, die anderen zwei sind Optionen für die aktuellen Optimierungseinstellungen.
Mit beiden Modi können Sie erheblich Zeit sparen, um die beste Optimierungsoption zu finden, da sie das Speichern von Bildern mit unterschiedlichen Optimierungseinstellungen und deren Folge überflüssig machen visueller Vergleich. Darüber hinaus ist es möglich, nicht nur die Qualität des optimierten Bildes, sondern auch dessen Größe und Ladezeit zu bewerten verschiedene Optionen Verbindungen. Zum Vergleich ist der bequemste Modus 4-Up (vier Optionen), mit dem Sie die Auswirkung der Komprimierung oder Reduzierung der Palette 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 optimieren, sondern auch in SWF und SVG. Indizierte Bilder mit einer geringen Anzahl von Farben werden im GIF-Format gespeichert. Zum Speichern von Vollfarb- und Graustufenbildern, Fotos und farbintensiven Grafiken wie Verlaufsfüllungen wird das JPG-Format verwendet. Für Vollfarbbilder mit transparenten Bereichen anwenden PNG-Format, mit dem Sie sowohl indizierte als auch Vollfarbbilder speichern können, während in PNG-8 die maximal mögliche Anzahl von Farben eines optimierten Bildes 256 beträgt und in PNG-24 ein Bild Millionen von Farben haben kann und daher so aussieht JPEG-Format. Der Unterschied zwischen PNG-24 und JPEG besteht darin, dass die zur Optimierung von PNG-24-Bildern verwendete Komprimierungsmethode nicht zu Qualitätsverlusten führt, sondern die Dateigröße erhöht. Die Formate SVG und SWF vereinen Grafik, Text und interaktive Komponenten und können zusätzlich optimiert werden.
In Betracht ziehen konkretes Beispiel Bildoptimierung. Nehmen wir an, im Illustrator-Programm wurde ein Site-Emblem entwickelt (Abb. 3), das ursprünglich im AI-Format gespeichert wurde. Ein Versuch, es sofort für das Web zu optimieren, führt zu nichts Gutem, da in diesem Fall das Bild automatisch beschnitten wird, wodurch die tatsächliche Position der durch die Verformung erhaltenen Beschriftung nicht berücksichtigt wird (Abb. 4 und 5).
Versuchen wir daher, das Emblem mit dem Befehl in das PSD-Format zu exportieren Datei=>Exportieren(Datei=>Exportieren) Die Größe des generierten Bildes beträgt 143 KB. Öffnen Sie die resultierende PSD-Datei und verwenden Sie den Befehl Datei=>Für Web speichern(Datei=>Für Web speichern). Angesichts der begrenzten Anzahl von Farben, die im Bild enthalten sind, ist in diesem Fall das GIF-Format optimal, mit dessen spezifischen Einstellungen Sie sich entscheiden müssen. Indem Sie mit den Einstellungen experimentieren, können Sie sicherstellen, dass der vom Programm standardmäßig ausgewählte Komprimierungsalgorithmus die beste Qualität liefert. selektiv(Selektiv). Was die Glättung betrifft, so ist es angesichts des Vorhandenseins einer Gradientenfüllung besser, einen Algorithmus mit Rauscherzeugung zu wählen Lärm(Abb. 6). Die Größe der resultierenden Optimierungsdatei beträgt 6,729 KB (Abb. 7), während die Hintergrundtransparenz erhalten bleibt, was leicht zu überprüfen ist, indem das GIF-Bild zusammen mit der HTML-Datei gespeichert wird (Abb. 8). Als Ergebnis im dieses Beispiel die Dateien emblem.html und emblem.gif wurden im Ordner Primer1 erhalten.
Tasten
Ein unverzichtbares spezifisches Gestaltungselement jeder Webseite sind Schaltflächen zur grafischen Steuerung. Sie sind von einer Seite einfach nicht mehr wegzudenken. Das Zeichnen von Schaltflächen ist heute zu einem besonderen Genre geworden, und Illustrator ermöglicht es Ihnen, die kompliziertesten Optionen zu erstellen. Beispielsweise sehen Buttons, die als Rasterobjekte und (oder) mit Masken gestaltet sind, viel effektiver aus als gewöhnliche.
Erwägen Sie die Option, in Illustrator eine runde erhabene Schaltfläche zu erstellen. Zeichnen Sie ein mit einer beliebigen Farbe gefülltes Vektorobjekt in Form eines Kreises (Abb. 9) und wandeln Sie es mit dem Befehl in ein Gitter um Objekt => Verlaufsgitter erstellen(Objekt=>Verlaufsgitter erstellen) durch Angabe von vier Zeilen und vier Spalten und in der Liste Aussehen(Anzeigen), indem Sie eine Option auswählen Zum Zentrum Markieren(Hintergrundbeleuchtung) auf 60 (Abbildung 10). Wähle ein Werkzeug Direktauswahl und klicken Sie in die obere linke Ecke des Objekts und wählen Sie die dort befindlichen Ankerpunkte aus (Abb. 11). Ändern Sie die Farbe der entsprechenden Zelle in Weiß, indem Sie sie in der Palette auswählen Farbfelder(Abb. 12).
Nimm ein Werkzeug Ellipse(Ellipse), den Mauszeiger auf die Mitte des zuvor erstellten Kreises setzen und bei gedrückten Tasten alt und Wechsel, ziehen Sie den neuen Kreis über den alten, sodass er an allen Seiten um 1-2 Pixel größer ist als der alte. Machen Sie es zu einem schwarzen Rand Streicheln) 1-2 px breit und füllen Sie es mit einem radialen Farbverlauf von Rot nach Weiß (Abbildung 13). Ziehen Sie das erstellte Vektorobjekt 1-2 Pixel nach rechts und unten, klicken Sie dann, ohne die Auswahl zu entfernen, mit der rechten Maustaste darauf und von Kontextmenü eine Mannschaft auswählen Anordnen=>Nach hinten senden(Organisieren=>Zurücksenden). Als Ergebnis erhalten wir ein Leerzeichen für den in Abb. vierzehn.
In der Regel gibt es auf jeder Webseite mehrere gleichartige Schaltflächen, die sich beispielsweise nur in der Richtung der darauf gezeichneten Pfeile unterscheiden, die die Bewegungsrichtung auf der Website angeben. Stellen Sie sich den einfachsten Fall mit zwei Schaltflächen vor, von denen eine mit einem Abwärtspfeil zur nächsten Seite und die Schaltfläche mit einem Aufwärtspfeil zur vorherigen Seite führt. Als Leerzeichen für den Pfeil nehmen wir ein mit dem Werkzeug gezeichnetes regelmäßiges Dreieck Vieleck(Polygon) mit Schwarz gefüllt und für eine größere Wirkung auch als Netzobjekt gestylt. Bewegen Sie den Pfeil auf die Schaltfläche und passen Sie die Position aller Objekte relativ zueinander mit den entsprechenden Palettenschaltflächen an Ausrichten(Ausrichtung). Die erste der empfangenen Schaltflächen ist in Abb. 2 dargestellt. 15. Erstellen Sie eine Kopie der Ebene mit der Schaltfläche, indem Sie den Befehl auswählen Ebene duplizieren Schichten, als Ergebnis erhalten wir zwei identische Schichten. Wählen Sie dann den Pfeil auf der Kopie der Ebene aus und drehen Sie sie um 180°, indem Sie den Befehl aus dem Kontextmenü auswählen Transformieren => Drehen Verwandlung=>Drehen. Wir erhalten dieselbe Schaltfläche wie in Abb. 16. Bitte beachten Sie, dass es viel bequemer ist, alle gleichartigen Schaltflächen eines Projekts in einer Datei auf verschiedenen Ebenen zu speichern, was in diesem Fall demonstriert wird.
Jetzt müssen Sie die optimierten Optionen für jede der Schaltflächen speichern. Machen Sie zuerst die unterste Ebene unsichtbar, in diesem Fall bleibt die Schaltfläche auf der obersten Ebene erhalten. Wähle ein Team Datei=>Für Web speichern(Datei=>Für Web speichern) konfigurieren Sie die Schaltflächenoptimierungsparameter, zum Beispiel wie in Abb. 17, klicken Sie auf die Schaltfläche Speichern(Speichern) und geben Sie einen Dateinamen ein. Die dadurch gespeicherte Schaltfläche ist in Abb. 18. Machen Sie nun die unterste Ebene sichtbar, machen Sie die obere unsichtbar und speichern Sie die zweite Schaltfläche auf die gleiche Weise, geben Sie ihr einen anderen Namen. Das Ergebnis ist in Abb. 1 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 (Abbildung 20). Als Ergebnis wurden in diesem Beispiel die Datei Primer2.html und zwei Grafikbilder im Ordner images (folder Primer2).
Auf Wunsch kann der Button während des Optimierungsprozesses einfach in ein Slice umgewandelt werden. In diesem Fall nach Auswahl des Befehls Datei=>Für Web speichern(Datei => Für Web speichern) und die Optimierungseinstellungen sollten aus der Werkzeugpalette ausgewählt werden Slice-Auswahl(Schichtauswahl) und doppelklicken Sie auf das Bild, das automatisch in eine Schicht mit der Seriennummer 1 umgewandelt wird (Abb. 21). Ein erneuter Doppelklick öffnet das Fenster Slice-Optionen(Slice Options), in dem Sie einen Link angeben und ggf. den Namen des Slice ändern müssen (Abb. 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).
Interaktive Elemente
Eine Möglichkeit, eine Seite aufzupeppen, besteht darin, Designelemente einzuführen, die ihre Wirkung ändern Aussehen(oder Zustand) abhängig vom Verhalten der Maus oder seltener bei anderen Situationen: Zoomen, Scrollen, Laden, Fehler usw.
Unter diesen Elementen sind die Rollover-Elemente (von englisch roll over to roll, roll over) die bekanntesten, die ihr Aussehen unter dem Einfluss der Maus verändern. Animierte Schaltflächen sind Beispiele für typische Rollover. Rollover werden häufig beim Erstellen anderer Website-Navigationselemente verwendet. Tatsächlich ist jeder Rollover nicht ein, sondern mehrere (bis zu vier) Bilder, von denen jedes einem bestimmten Ereignis entspricht. Als Hauptereignisse werden die folgenden angesehen: Normal Normalzustand, Überfahren des Mauszeigers über das Element und Drücken der linken Maustaste beim Überfahren des Elements. Theoretisch können Ereignisse wie Click beim Loslassen der linken Maustaste nach dem Klicken, Up nach dem Loslassen der Taste, Out beim Verlassen der aktiven Zone beteiligt sein. In der Praxis beschränkt man sich jedoch häufiger darauf, das Element nur für die ersten drei oder sogar zwei Ereignisse zu ändern.
Klassische Überschläge
Ein Rollover im klassischen Sinne ist eine Aneinanderreihung von Grafiken im GIF-Format und der dazugehörige HTML-Code, durch die je nach Mausverhalten im Browserfenster ein Bild durch ein anderes ersetzt wird.
Illustrator ist nicht darauf ausgelegt, Rollover im klassischen Sinne direkt zu erstellen, kann aber bei der Entwicklung der ersten Elemente dafür helfen. Die Idee in diesem Fall ist, eine Ebene mit einem Bild zu erstellen, das dem ersten Ereignis entspricht. Erstellen Sie dann eine Kopie der Ebene und transformieren Sie das Bild so, dass es mit dem zweiten Ereignis übereinstimmt, und so weiter. Das resultierende Ebenenbild wird in eine PSD-Datei mit erhaltenen Ebenen exportiert, auf deren Grundlage ein Rollover erstellt wird Bildprogramm Bereit. Der Vorteil der Verwendung von Illustrator liegt, wie in vielen anderen Fällen, in einer Reihe interessanter Funktionen, die in anderen nicht verfügbar sind. Software-Tools, zusammen mit der Bequemlichkeit der Vektorgrafiktransformation.
Versuchen wir, ein Rollover in Form einer Beschriftung zu erstellen, die je nach Verhalten der Maus die Farbe ändert. Öffnen Sie Illustrator und erstellen Sie eine Form in Form eines abgerundeten und mit schwarzem Rechteck gefüllten Rechtecks (Abb. 24), erstellen Sie eine Kopie davon und platzieren Sie sie in einem freien Teil des Bildschirms. Konvertieren Sie die erste Kopie des Rechtecks in ein Rasterobjekt mit einer Hervorhebung in der Mitte (Befehl Objekt => Verlaufsgitter erstellen Object=>Create Gradient Mesh), wobei vier Zeilen und zehn Spalten angegeben werden (Abb. 25). Aktivieren Sie die zweite Kopie des Rechtecks und legen Sie eine Verlaufsfüllung dafür fest, ähnlich wie in Abb. 26. Legen Sie das Verlaufsobjekt über das Netz, reduzieren Sie die Deckkraft des Verlaufsobjekts auf etwa 80 % und die Größe des Verlaufsobjekts auf etwa 1 Pixel, um am Ende einen Wölbungseffekt zu simulieren. Und dann über die Objekte die Inschrift drucken. Lassen Sie es in seiner ursprünglichen Form eine weiße Farbe haben, die dem Normalzustand entspricht (Abb. 27), und wenn sich der Rollover-Zustand ändert, ändert sich die Farbe der Beschriftung beispielsweise zu Grün, wenn die Mausmarkierung ist darüber bewegt (Zustand Over) und blau, wenn die Maustaste gedrückt wird (Zustand Down).
Achten Sie auf die Palette Schichten In diesem Stadium hat es nur eine einzige Schicht. Erstellen Sie mit dem Befehl zwei Kopien dieser Ebene Ebene duplizieren(Ebene duplizieren) aus dem Palettenmenü Schichten, enthält die Palette drei Ebenen (Abb. 28). Ändern Sie dann in der ersten Kopie der Ebene die Farbe der Beschriftung in Grün und in der zweiten in Blau (Abb. 29). Als Ergebnis wird der notwendige Rohling für den Rollover erhalten.
Exportieren Sie das erstellte Bild mit dem Befehl in das PSD-Format, wobei die Ebenen erhalten bleiben Datei=>Exportieren(Datei=>Exportieren) und auswählen Farbmodell RGB (Abb. 30). Öffnen Sie die erstellte PSD-Datei in ImageReady (Abbildungen 31 und 32). Erstellen Sie Rahmen basierend auf Ebenen, indem Sie den Befehl auswählen Erstellen Sie Rahmen aus Ebenen(Rahmen aus Ebenen erstellen) aus dem Palettenmenü Animation. Das Animationsfenster sieht aus wie in Abb. 33. Gleichzeitig in der Palette Überschläge Zunächst wird ein einzelner normaler Zustand erstellt.
Dann im Fenster Animation Wählen Sie in der Palette den Rahmen aus, der dem schwebenden Zustand entspricht Schichten Die Ebene wird automatisch ausgewählt Ebene 1 kopieren(Abb. 34). Gehen Sie zur Palette Überschläge und klicken Sie auf die Schaltfläche Rollover-Status erstellen(Rollover-Zustand erstellen) Abb. 35, wodurch der Zustand angezeigt wird Über Staat in der Palette Überschläge(Abb. 36). Erstellen Sie den Zustand auf die gleiche Weise Down-Zustand. Zustand aktivieren Normal in der Palette Überschläge und in der Palette löschen Animation alle Frames außer demjenigen, der dem Zustand entsprechen soll Normal. Als Ergebnis für jeden Rollover-Zustand in der Palette Animation es wird nur ein Frame angezeigt (Abb. 37, 38 und 39).
Reis. 38. Ansicht des Bildes, des Animationsfensters und der Ebenen- und Rollover-Paletten für den Over-Zustand
Überprüfen Sie das Ergebnis, indem Sie auf die Schaltfläche klicken Vorschau im Standardbrowser(Browser-Vorschau) auf der Symbolleiste und durch Aufrufen des Browserfensters (Abbildung 40). Speichern Sie danach die Datei mit dem Befehl Datei=>Optimiert speichern(Datei=>Mit Optimierung speichern) und Angabe der Option HTML und Bilder (*.html). Als Ergebnis wurden in diesem Beispiel die Datei Primer4.html und eine Reihe von Grafikbildern im Bilderordner erhalten.
Reis. 40. Browserfenster mit Rollover-Element
SVG-Rollover
Das immer beliebter werdende SVG-Format (Scalable Vector Graphics Scalable Vektorgrafiken), das auf Basis des XML-Standards erstellt wurde, ermöglicht auch eine Vielzahl von interaktiven Elementen, insbesondere Rollovers, nur wird dies in der Praxis ganz anders umgesetzt. Bemerkenswert ist, dass die Erstellung von interaktiven SVG-Rollovern im Gegensatz zu klassischen, bei denen der entsprechende HTML-Code vollautomatisch generiert wird, Kenntnisse der JavaScript-Sprache und ein Verständnis der Grundprinzipien der objektorientierten Programmierung erfordert.
Eine spezielle Palette wurde entwickelt, um mit SVG-Objekten zu arbeiten. SVG-Interaktivität, die mit dem Befehl einfach zu öffnen ist Fenster=>SVG-Interaktivität(Fenster=>SVG-Interaktivität) Abb. 41.
Betrachten wir diese Variante der Erstellung eines Rollovers am Beispiel eines interaktiven Buttons, dessen Beschriftung sich beim Überfahren mit der Maus von Schwarz auf Blau ändert und beim Verlassen der aktiven Zone wieder auf Schwarz wechselt.
Erstellen Sie eine rechteckige Schaltfläche mit abgerundeten Kanten und wählen Sie einen geeigneten Farbverlauf dafür aus, z. B. wie in Abb. 42. Passen Sie die Transparenz der Schaltfläche in der Palette an Transparenz(Transparenz) in diesem Beispiel der Wert des Parameters Opazität(Deckkraft) ist auf 50 % eingestellt. Erstellen Sie eine Kopie der Schaltfläche, füllen Sie sie mit Dunkelgrün (Abb. 43) und wandeln Sie sie dann mit dem Befehl in ein Netzobjekt um Objekt => Verlaufsgitter erstellen(Objekt=>Verlaufsgitter erstellen) durch Angabe von vier Zeilen und zehn Spalten und in der Liste Aussehen(Anzeigen), indem Sie eine Option auswählen Zum Zentrum(Richtung Mitte) und Einstellen des Wertes Markieren(Hervorheben) auf 100. Verringern Sie die Deckkraft der Netzobjektebene auf etwa 40 % (Abbildung 44). Platzieren Sie das Netzobjekt auf dem Verlaufsobjekt, und die Schaltfläche sieht aus wie in Abb. 45.
Reis. 44. Umwandeln einer Kopie einer Schaltfläche in ein Rasterobjekt
Vervollständigen Sie die Schaltfläche mit der vorgesehenen Beschriftung und passen Sie ihre Position mit den entsprechenden Palettenschaltflächen an Ausrichten(Ausrichtung). Das resultierende Bild enthält eine Ebene mit drei überlagerten Objekten (Abb. 46). Geplante Ereignisse beziehen sich auf ein Textobjekt, also ändern Sie seinen Namen der Einfachheit halber in Text indem Sie auf das Objekt doppelklicken und einen neuen Namen eingeben. Ändern Sie in ähnlicher Weise den Ebenennamen von Schicht 1 zu Schicht(Abb. 47).
Die Ereignisverarbeitung beinhaltet die Verwendung von JavaScript-Prozeduren, daher müssen Sie eine Datei mit einer Beschreibung dieser Prozeduren einschließen. Es heißt Events.js und wird bei der Installation im Ordner Sample Files\Sample Art\SVG\SVG auf der Festplatte gespeichert Adobe-Software Illustrator. Um die Datei Events.js einzuschließen, verwenden Sie den Befehl JavaScript-Dateien SVG-Interaktivität(Abb. 48). Als nächstes müssen Sie die Taste drücken Hinzufügen(hinzufügen) und finden gewünschte Datei auf der Festplatte. Wenn sein Name im Feld erscheint URL(Abb. 49), klicken Sie auf die Schaltfläche Fertig(Hinausgehen).
Reis. 48. Auswählen des JavaScript-Dateien-Befehls
Danach sollten Sie die Reaktion auf Mausereignisse für das Objekt definieren Text. Wählen Sie das Textobjekt im Feld aus Veranstaltung(Ereignis-)Paletten SVG-Interaktivität wählen Sie eine Veranstaltung aus onmouseover elemColor(evt, "Text", "#3333FF") Dies bedeutet, dass wenn sich die Maus über dem Objekt befindet Text seine Farbe ändert sich zu blau (Abb. 50). Damit die Textfarbe schwarz wird, nachdem die Maus die aktive Zone verlassen hat, müssen Sie ein weiteres Ereignis erstellen onmouseout wählen Sie es im Feld aus Veranstaltung(Ereignis-)Paletten SVG-Interaktivität. Geben Sie dann in der Aktionszeile den Text ein elemColor(evt, "Text", "#000000") dies gibt Schwarz zurück (Abb. 51).
Reis. 51. Das endgültige Aussehen der SVG-Interaktivitätspalette für das Textobjekt
Speichern Sie das generierte Rollover mit dem Befehl als SVG-Datei Datei=>Speichern unter(Datei=> Dateityp Format SVG, und stellen Sie dann die Optionen zum Speichern der SVG-Datei ein, wie in Abb. 52. Nach dem Speichern wird nur eine einzige Datei mit der SVG-Endung erhalten und nicht zwei, wie beim klassischen Rollover, in diesem Fall wurde die Datei Primer5.svg (Ordner Primer5) erhalten. Damit das Rollover aber wirklich funktioniert, müssen Sie zusätzlich die Datei Events.js mit der Beschreibung von JavaScript-Prozeduren in den Ordner mit der SVG-Datei kopieren. Danach können Sie die Leistung des Rollovers überprüfen, das Ergebnis sieht wie in Abb. 53.
SVG-Animation
Das SVG-Format kann auch zur Übermittlung von Animationen verwendet werden. Versuchen wir, ein einfaches Animationselement zu erstellen (in diesem Fall Informationen über das Unternehmen), das auf dem Bildschirm erscheint, wenn die Maus über das entsprechende Grafikobjekt bewegt wird, und verschwindet, wenn die Maus vom interaktiven Element entfernt wird.
Lassen Sie uns ungefähr eine solche Reihe von Grafik- und Textobjekten erstellen, wie in Abb. 54. Benennen Sie alle erstellten Objekte bequem um, indem Sie nacheinander auf den Namen des nächsten Objekts in der Palette klicken Schichten und Eingabe des gewünschten Namens (Abb. 55). Beachten Sie, dass in Abb. 56 Artikel Text1, Text2, Text3 und Pfad1 sind immer sichtbar, alle anderen nur, wenn Sie mit der Maus über das Objekt fahren Text 1.
Reis. 54. Originalansicht des Bildes
Fügen Sie die Datei Events.js mit einer Beschreibung der JavaScript-Prozeduren ein, indem Sie den Befehl verwenden JavaScript-Dateien (JavaScript-Dateien) aus der Palette SVG-Interaktivität durch Drücken der Taste Hinzufügen(Hinzufügen), indem Sie die gewünschte Datei auf der Festplatte auswählen und auf die Schaltfläche klicken Fertig(Hinausgehen).
Definieren Sie eine Mausereignisantwort für ein Objekt Text 1. Objekt auswählen Text, auf dem Feld Veranstaltung(Ereignis-)Paletten SVG-Interaktivität wählen Sie eine Veranstaltung aus onmouseover und geben Sie in der Zeile darunter den Text ein elemShow(evt, "Text4"); elemShow(evt, "Pfad2"). Als Ergebnis, wenn sich die Maus über dem Objekt befindet Text 1 Objekte werden sichtbar Text4 und Pfad2. Bitte beachten Sie, dass wenn beim Eintreten eines Ereignisses mehrere Aktionen ausgeführt werden müssen, diese über das „;“-Zeichen angegeben werden müssen. Dann machen Sie dasselbe für das Ereignis onmouseout, geben Sie den Text dafür ein, was bedeutet, dass Objekte ausgeblendet werden (Abb. 57).
Speichern Sie das Ergebnis mit dem Befehl als SVG-Datei Datei=>Speichern unter(Datei=>Speichern unter), Angabe des Dateinamens, Auswahl im Feld Dateityp SVG-Format und anschließend die Optionen zum Speichern der SVG-Datei gemäß Abb. 58. Nach dem Speichern erhalten Sie die Datei Primer6.svg (Ordner Primer6). Vergessen Sie nicht, die Datei Events.js in den Ordner mit dieser Datei zu kopieren. Wenn Sie danach coz ausführen angegebene Datei, sehen Sie das Ergebnis in Abb. 59. Das ist fast das, was Sie brauchen. Das einzige, was nicht in unseren Plänen enthalten war, war das anfängliche Erscheinen von Objekten Text 4 und Weg 2 beim Laden. Um diesen Mangel zu beseitigen, wählen Sie beide Objekte gleichzeitig aus und erstellen Sie eine Aktion für sie elemHide(evt, "Text4"); elemHide(evt, "Pfad2") auf Veranstaltung laden(Abb. 60). Speichern Sie die Datei erneut und vergewissern Sie sich, dass die Objekte jetzt vorhanden sind Text4 und Pfad2 nur sichtbar, wenn die Maus über das Objekt bewegt wird Text 1.
GIF-Animation
Jede Webseite ist ohne Webanimation, einschließlich animierter Gifs, undenkbar. Eine Möglichkeit, sie zu erstellen, ist die Verwendung der Anwendung Adobe ImageReady, mit der Sie unter anderem Animationen aus Ebenen erstellen können. In diesem Fall kann das Mehrschichtbild selbst hergestellt werden verschiedene Anwendungen, einschließlich in Adobe Illustrator.
Es ist sehr einfach, eine Animation basierend auf Elementen aus der Palette zu erstellen Symbole(Symbole) durch den Befehl geöffnet Fenster=>Symbole(Fenster=>Symbole) oder aus einer der Symbolbibliotheken, die mit dem Befehl geöffnet werden können Fenster=>Symbolbibliotheken(Fenster=>Symbolbibliotheken).
Versuchen wir beispielsweise, die Größe eines beliebigen Objektsymbols zu erhöhen. Die Schlüsselphasen des Prozesses zum Vergrößern des Objekts müssen auf separaten Ebenen festgelegt werden. Platzieren Sie zunächst einfach die Symbolobjekte übereinander und vergrößern Sie dann jedes nachfolgende Objekt, beispielsweise wie in Abb. 61. Als Ergebnis in der Palette Schichten Es wird eine Ebene mit vielen Objekten erstellt (Abb. 62). Wenn Sie dieses Bild direkt in das PSD-Format exportieren, funktioniert dies nicht, da es nur eine Ebene gibt, und natürlich gibt es auch nur eine Ebene, wenn Sie die PSD-Datei in ImageReady öffnen. Daher müssen Sie zuerst Objekte auf verschiedenen Ebenen platzieren. Das kann gemacht werden verschiedene Wege Am einfachsten ist es, zuerst die Ebene auszuwählen Schicht 1 in der Palette Ebenen und verwenden Sie den Befehl Auf Ebene freigeben(Freigabe in Schichten). Als Ergebnis wird jedes der Objekte auf eine eigene Ebene verschoben, aber sie werden alle in der Ebene verschachtelt Schicht 1. Daher müssen Sie dann alle verschachtelten Ebenen manuell an den oberen Rand der Ebenenpalette ziehen, sodass sie sich über der Ebene befinden Schicht 1, und dann die leere Ebene Schicht 1 leicht zu entfernen (Abb. 63). Exportieren Sie das Bild mit dem Befehl in das PSD-Format Datei=>Exportieren(Datei=>Export) mit Einstellungen wie in Abb. 64.
Laden Sie die erstellte PSD-Datei in das Programm ImageReady (Abb. 65 und 66). Öffnen Sie das Palettenmenü AnimationErstellen Sie Rahmen aus Ebenen(Rahmen aus Ebenen erstellen). Als Ergebnis werden fünf Rahmen erstellt, von denen jeder seiner Ebene und dem Palettenfenster entspricht Animation wird aussehen wie in Abb. 67.
Stellen Sie danach die Dauer jedes der erstellten Frames ein. In diesem Fall wird die Dauer aller Frames auf 0,2 s festgelegt. Und speichern Sie dann die optimierte Animation mit dem Befehl Datei=>Optimiert speichern(Datei=>Mit Optimierung speichern). Das erhaltene Ergebnis kann Abb. 68.
Es ist noch komfortabler, die Funktionen zu nutzen Live-Mischungen Illustrator-Software. Diese kombinierte Verwendung von Illustrator und ImageReady beschleunigt den Prozess der Erstellung von GIF-Animationen erheblich.
Zeichnen Sie beispielsweise zwei beliebige mehrfarbige Objekte und mischen Sie sie dann 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 einzelnen Ebene befindet (Abb. 70). Daher müssen Sie zunächst jedes Element des Mischobjekts auf einer separaten Ebene platzieren. Dazu im Fenster Schichten markieren Sie die Linie
Reis. 70. Anfangszustand des Layers-Fensters
Exportieren Sie die erstellte Datei mit dem Befehl in das PSD-Format Datei=>Exportieren(Datei=>Exportieren). Öffnen Sie die erstellte PSD-Datei in ImageReady (Abb. 73). Bitte beachten Sie, dass alle im Illustrator-Programm erstellten Ebenen im Ebenenfenster (Abb. 74) und im Fenster erscheinen Animation es wird nur einen Rahmen geben.
Aktivieren Sie das Palettenmenü Animation, indem Sie auf den schwarzen Pfeil in der oberen rechten Ecke der Palette klicken und den Befehl auswählen Erstellen Sie Rahmen aus Ebenen(Rahmen aus Ebenen erstellen) Am Ende werden in diesem Beispiel fünf Rahmen erstellt und das Palettenfenster Animation nimmt die Form gemäß Abb. 75. Wählen Sie alle Frames aus, indem Sie die Taste gedrückt halten Wechsel, und legen Sie in diesem Beispiel eine geeignete Rahmendauer fest, wird für jeden der Rahmen die gleiche Zeit von 0,2 s genommen. Speichern Sie dann die Datei mit dem Optimierungsbefehl Datei=>Optimiert speichern(Datei=>Mit Optimierung speichern) in der Liste Dateityp Möglichkeit Nur Bilder (*.gif). Die Animation ähnelt Abb. 76.
Viel interessanter ist nicht die Bewegung, sondern die stufenlose Größenänderung von Blend-Objekten. Sie können beispielsweise den bereits erstellten Blend-Übergang verwenden. In diesem Fall platzieren Sie nach dem Erstellen separater Ebenen für jedes Element des Blend-Übergangs alle Objekte mit den Schaltflächen übereinander Horizontales Ausrichtungszentrum(Ausrichtung relativ zur horizontalen Mitte) und Vertikales Ausrichtungszentrum(Vertikale Ausrichtung in der Mitte) Paletten Ausrichten(Abb. 77).
Exportieren Sie die erstellte Datei in das PSD-Format ( Datei=>Exportieren File=>Export) und öffnen Sie die erstellte PSD-Datei im Programm ImageReady (Abb. 78). Erstellen Sie Animationsframes basierend auf Ebenen ( Erstellen Sie Rahmen aus Ebenen Erstellen Sie Frames aus Ebenen) und wählen Sie die entsprechende Dauer für sie (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). Speichern Sie dann die Optimierungsdatei ( Datei=>Optimiert speichern Datei=>Mit Optimierung speichern). Die resultierende Animation ist in Abb. 1 gezeigt. 81.
Reis. 80. Zustand des Animationsfensters nach dem Duplizieren von Frames
Reis. 81. Fertige Animation
Transparentes GIF in Adobe Illustrator wird wie folgt erstellt. Gehen Sie zum Menü Datei > Für Web und Geräte speichern (Alt+Strg+Umschalt+S). In dem sich öffnenden Fenster müssen Sie im Feld Optimiertes Dateiformat zunächst auf die Registerkarte wechseln Bildgröße(Bildgröße). Tatsache ist, dass standardmäßig die gesamte Seite in das Optimierungsfenster gelangt, und dies ist normalerweise nicht erforderlich. Deaktivieren Sie daher auf der Registerkarte Bildgröße das Kontrollkästchen Clip an Zeichenfläche(Auf Seitengröße zuschneiden) und klicken Sie auf die Schaltfläche Anwenden.
Wählen Sie dann in der Formatauswahlliste GIF und aktivieren Sie das Kontrollkästchen Transparenz.
Danach bestimmen wir, welche Farben transparent sein werden. Alle im Bild vorhandenen Farben sind in der Registerkarte enthalten Farbtabelle(Farbkarte) und werden als farbige Quadrate angezeigt. Wählen Sie ein Werkzeug aus der Symbolleiste auf der linken Seite des Fensters aus Pipette(Pipette).
Farben können auf zwei Arten definiert werden. Am einfachsten ist es, die Farbe mit einer Pipette direkt auf dem Bild anzugeben – danach wird die Farbe auf der Farbtabelle mit einem dunklen Strich hervorgehoben. Nun, wenn Sie genau wissen, welche Farbe transparent sein soll, können Sie diese direkt in der Farbtabelle auswählen, indem Sie auf das entsprechende farbige Kästchen klicken. Und im ersten und zweiten Fall müssen Sie, wenn Sie mehrere Farben auswählen müssen, mit gedrückter Umschalt- (oder Strg-) Taste arbeiten. Nachdem Sie eine Farbe ausgewählt haben, müssen Sie das Programm anweisen, sie transparent zu machen. Klicken Sie dazu auf das Symbol Ordnet ausgewählte Farben Transparent zu(Ausgewählte Farben zur Transparenz hinzufügen). In der Abbildung ist diese Schaltfläche eingekreist, und die rote Farbe ist auf transparent eingestellt. Auf dem Bild erscheint ein transparenter Bereich, und das Quadrat auf der Farbtabelle ändert sein Aussehen - ein Teil davon wird zu einem weißen Dreieck. Um die ausgewählte Farbe abzubrechen, müssen Sie sie in der Farbtabelle auswählen und dann erneut auf das Symbol „Ausgewählte Farben auf Transparent abbilden“ klicken.
Ein paar Worte zur Methode der Transparenzeinstellung. Dafür ist das Dropdown-Menü zuständig. Geben Sie den Transparenz-Dither-Algorithmus an, auf Russisch - Transparenz-Simulationsalgorithmus (Abb. unten). Es gibt vier Auswahlmöglichkeiten: Kein Transparenz-Dither – kein Algorithmus, Diffusion-Transparenz-Dither – diffuser Algorithmus, Muster-Transparenz-Dither – musterbasierter Algorithmus und Rausch-Transparenz-Dither – rauschbasierter Algorithmus. Im diffusen Algorithmusmodus wird der Schieberegler aktiv Menge(Betrag), mit dem Sie den Diffusionswert ändern können. Was gilt in der Praxis? Je nach Zweck und Image. Ich verwende diese Option nicht und belasse immer die Standardeinstellung – Kein Transparenzdither.
Drücken Sie Speichern - transparentes GIF ist fertig. Die Arbeit wurde in Adobe Illustrator Version CS4 (v.14) durchgeführt, aber alle Aktionen und Tastaturkürzel sind für mehr relevant frühe Version CS3 (Vers 13).
