Mittlerweile haben wir viele Methoden zum Erstellen von Animationen kennengelernt, sind uns aber immer noch nicht ganz im Klaren über die endgültige Form der Animation. Wie wird eine Animation ausgegeben? Wo wird es verwendet? Worauf sollten wir bei der Anwendung achten? In dieser Lektion werden wir diese Probleme im Detail erklären.
Derzeit ist GIF das wichtigste animierte Bildformat auf Windows-Systemen, das auch direkt auf Webseiten angezeigt werden kann. Es ist derzeit das am weitesten verbreitete animierte Bildformat. Auch das Einbinden von Animationen in die mittlerweile beliebten Handy-MMS-Nachrichten gehört zum GIF-Format. Das GIF-Format unterstützt sowohl Standbilder als auch animierte Ausdrücke. Ob Standbild oder animiert, die Eigenschaften sind die gleichen.
Das Implementierungsprinzip der Animation im GIF-Format ist nicht kompliziert. Sie können es so verstehen, dass mehrere Standbilder (Frames) nacheinander kombiniert werden. Es gibt auch operative Beziehungen zwischen diesen Bildern (Frames), die den Operationen jedes ausgewählten Pfads ähneln, nämlich Addition, Subtraktion und Eliminierung. Dies dient dazu, die Byteanzahl der Animation zu optimieren.
Wenn ein bestimmter Rahmen hinzugefügt wird, bleibt der vorherige Rahmen erhalten und der Inhalt dieses Rahmens wird zu einem neuen Bild hinzugefügt. Ein typisches Beispiel ist die übliche Fortschrittsbalkenanimation, wie in der folgenden Abbildung dargestellt. Angenommen, ein Fortschrittsbalken besteht aus drei Frames. In Bezug auf die theoretische Frameform, die wir sehen, scheinen die kürzesten und mittleren Frames gespeichert zu sein in diesen 3 Frames und das Bild des längsten Fortschrittsbalkens. Tatsächlich enthält der zweite Frame jedoch nur die Pixel, die nicht im ersten Frame enthalten sind, und wirkt dann additiv auf den ersten Frame ein, wodurch ein „1 + 2“-Bild entsteht. Das Gleiche gilt für Bild 3. Durch diese Optimierung wird die Anzahl der Bildbytes effektiv reduziert.
Die Subtraktionsmethode ist genau das Gegenteil. Sie löscht bestimmte Pixel im vorherigen Bild des Bildes, was an der „umgekehrten Fortschrittsleiste“ zu erkennen ist. Die Eliminierungsmethode besteht darin, das vorherige Bild vollständig zu löschen. Sie wird hauptsächlich verwendet, wenn keine Korrelation zwischen den beiden Bildern davor und danach besteht, wenn beispielsweise von ganz Rot auf ganz Grün gewechselt wird, wenn zwischen ihnen keine gleichen Pixel vorhanden sind Im vorherigen und nächsten Frame wird die Eliminierungsmethode verwendet.
In der tatsächlichen Produktion entscheidet Photoshop automatisch und ohne manuelles Eingreifen anhand der Bildsituation, welche Methode angewendet werden soll. Es reicht aus, diese Berechnungsmethoden als Wissen zu verstehen. Es kann auch als Referenz bei der Konzeption von Animationen verwendet werden.
Lassen Sie uns nun über das folgende wichtige Merkmal des GIF-Formats sprechen, nämlich die Beschränkung der Anzahl der Farben. GIF kann maximal 256 Farben unterstützen , was bedeutet, dass ein GIF-Bild nur maximal 256 Farben haben kann. Dies ist besonders bei statischen GIFs deutlich zu erkennen, da einige Bilder mit satten Farben, wie z. B. Farbverläufen in mehreren Farben, nur schwer in GIFs dargestellt werden können. Wie im linken Bild unten gezeigt, ist ein Teil eines Fotos (beachten Sie, dass es sich um einen Teil und nicht um das vollständige Bild handelt) ein Bild in PNG24-Bit und GIF256 ohne Dithering und Diffusionsdithering. Das gesamte Bild ist ein in Venedig aufgenommenes Schaufenster, wie unten rechts gezeigt.
Es ist deutlich zu erkennen, dass PNG24-Bit die beste Farbe hat und als Originalbild angesehen werden kann. Das GIF-Format weist eine schlechte Farbdarstellung auf. Ohne Dithering treten in einigen Bereichen Farbflecken mit Farbübergängen im Originalbild auf. Beim Diffusionsdithering werden die Flecken etwas aufgehellt, die Körnigkeit ist jedoch stärker. Dies ist auf das Dithering-Prinzip selbst zurückzuführen. Das Konzept des Ditherings wurde im Basis-Tutorial eingeführt.
Es ist zu beachten, dass sich 256 Farben auf das gesamte Bild beziehen. Wenn das gesamte Originalbild die unten gezeigte Größe hat, ist der Unterschied zwischen den 256 Farben und dem Originalbild nicht sehr groß. Dies liegt daran, dass Photoshop die Farben beim Reduzieren auf 256 Farben entsprechend den Farben im Originalbild anordnet. Dieser Vorgang wird auch Indizierung genannt, bei dem ähnliche Farben zu einer zusammengefasst werden.
Wenn die Farben im Originalbild mehrere Farbtöne enthalten, ist die einem einzelnen Farbton zugeordnete Anzahl bei der Mittelung der 256 Farben sehr gering. Im Gegenteil: Wenn der Farbton im Originalbild grundsätzlich gleich oder nahezu gleich ist, können auch 256 Farben gut ausgedrückt werden. Aus diesem Grund sah es bei der vorherigen Nichtimitationsfarbe 256 so aus, als wären die Flecken offensichtlich, aber jetzt sind die Flecken weniger offensichtlich. Da das Originalbild des ersteren mehr Farbtöne enthält, werden einige Farben Blau, Rot usw. zugeordnet und weniger Farben werden der Gelbphase zugeordnet. Letzteres weist im Originalbild grundsätzlich nur die Gelbphase auf, eine Zuordnung von Farben zu anderen Farbtönen ist daher nicht erforderlich.
Das Bild unten ist ein Streetview-Foto, aufgenommen in Piacenca. Wir vergleichen verschiedene Teile davon. Die folgenden Quadrate sind Farbtabellen und die Farbblöcke stellen die 256 verwendeten Farben dar. Der Einfluss der Farbzusammensetzung des Originalbildes auf den Farbindex lässt sich leicht in der Farbtabelle erkennen. Im Bild links sind mehr Farbtöne zu sehen, sodass die Anzahl der Blauphasen, die dem Himmel unter den 256 Farben zugeordnet sind, kleiner ist und es im Bild deutliche Farbflecken am Himmel gibt. Das Bild rechts enthält im Grunde nur den Himmelsteil, sodass die meisten der 256 Farben der Blauphase zugeordnet sind, wodurch der Himmel im Bild besser zur Geltung kommt.
Verwenden Sie [Datei > Für Web und Geräte speichern] [STRG+UMSCHALT+ALT+S] und das Feld zum Speichern der Einstellungen wird angezeigt. Dies ist unsere am häufigsten verwendete Ausgabefunktion, insbesondere in den Webdesign-Erweiterungs-Tutorials, die wir in Zukunft lernen werden.
Achten Sie nach dem Aufrufen der Einstellungsoberfläche auf den roten Pfeil. Was Sie im Reiter „Optimierung“ sehen müssen, ist der tatsächliche Effekt nach der Ausgabe, also der Effekt im Browser oder in der Bildbetrachtungssoftware. Die Registerkarte „Original“ ist der Effekt in Photoshop und kann nicht als Referenzstandard verwendet werden. Dies sollte beachtet werden.
Der grüne Pfeil ist der entsprechende Einstellungsbereich, von dem aus wir das Bildformat auf GIF einstellen, die Anzahl der Farben auf 256 setzen und die Dither-Option ausschalten. Seine Einstellungen entsprechen dem Effekt auf der linken Seite des Bildes oben.
Achten Sie auf die Anzeige der Bytezahl am blauen Pfeil. Dies ist ein sehr wichtiger Indikator, wenn wir diese Zahl so klein wie möglich halten müssen, da wir sonst Bilder oder Animationen nicht effektiv nutzen können.
Um die Anzahl der Bytes zu verringern, muss die Anzahl der Farben reduziert werden, und die Anzahl der Farbblöcke in der Farbtabelle wird entsprechend reduziert. Es liegt jedoch auf der Hand, dass zu wenig Farben die Bildqualität erheblich beeinträchtigen und leicht zu Farbflecken führen können. Durch die Aktivierung von Dithering können zwar Farbflecken reduziert werden, es erhöht aber auch die Anzahl der Bytes. Es ist wie eine Wippe zwischen Byteanzahl und Qualität. Man kann nicht beides haben. Bei Bildern, die über das Internet übertragen werden sollen, ist die Anzahl der Bytes oft wichtiger, da die meisten Besucher nicht die Geduld haben, mehrere Minuten auf die Anzeige einer Webseite zu warten. Neben Bildern verfügen Webseiten auch über andere Codes, die ebenfalls Bytes belegen müssen. Daher ist die Minimierung der Anzahl an Bytes ein Grundprinzip. Natürlich steht dieses Prinzip im Widerspruch zur Bildqualität, was von uns ausreichende Fähigkeiten erfordert, um beides im Prozess der Konzeption und Produktion in Einklang zu bringen. Zu diesen Techniken gehören:
1. Verwenden Sie in Animationen keine zu kräftigen Farben. Der Grund wurde bereits genannt. Mehr Farben führen nach der Indizierung zu einer Verschlechterung der Bildqualität und bilden unschöne Farbflecken. In diesem Fall ist es besser, eine einzelne Farbe zu verwenden, auch wenn sie möglicherweise nicht schön genug ist, kann dadurch jedoch das Auftreten von Fehlern wie Flecken vermieden werden.
2. Wenn satte Farben erforderlich sind, sollten die Pixel in den farbenprächtigen Teilen in der Animation stationär bleiben. Da zwischen dem vorherigen und dem nächsten Frame der GIF-Animation eine operative Beziehung besteht, kann der Teil im Standbild in nachfolgenden Frames verwendet werden und es besteht keine Notwendigkeit, diesen Teil des Bildes in diesen nachfolgenden Frames zu speichern. Dadurch kann die Anzahl der Bytes effektiv reduziert werden, während die satte Farbe der gesamten Animation erhalten bleibt. Wenn sich dagegen auch die reicheren Pixel bewegen, müssen die reicheren Pixel in nachfolgenden Frames gespeichert werden, was die Gesamtbytezahl der Animation erheblich erhöht.
Vergleich der beiden Animationen unten: Bei der ersten bleiben das äußere Leuchten, die Projektion und andere Teile des Balls unverändert, nur der hervorgehobene Teil ändert sich. Der zweite Faktor ist die Gesamtbewegung des Balls. Unter der Voraussetzung der gleichen Bildrate, der gleichen Dauer und jeweils 256 und ohne Dithering beträgt die Anzahl der Bytes des ersteren 9,29 KB und die des letzteren 57,1 KB. Der Unterschied beträgt das Sechsfache. Dann unterscheidet sich die Zeit, die für die Übertragung im Netzwerk benötigt wird, um das Sechsfache.
Wenn wir eine Animation konzipieren, müssen wir ihren Zweck im Voraus berücksichtigen. Wenn sie auf einer Webseite verwendet werden soll, müssen wir auch auf ihre Bedeutung auf der Webseite hinweisen. Wenn sie nicht sehr wichtig und dekorativ ist, versuchen Sie, sie zu reduzieren Bytes so viel wie möglich. Dies kann durch zwei Aspekte erreicht werden: Reduzierung der Anzahl der Farben bei der Lagerung und gute Produktionsplanung. Wenn Sie auf eine Animation mit wichtigen Anweisungen stoßen, die farbenfroh oder dynamisch sein muss, sollten Sie die Größe der Animation so weit wie möglich reduzieren. Da die Gesamtzahl der Pixel in einem kleinen Bild ebenfalls gering ist, erscheint die Indizierung mit 256 Farben nicht so eng. Das können Sie durch eigene Experimente lernen.
Ein weiteres wichtiges Merkmal von GIF ist, dass es Hintergrundtransparenz unterstützt , wodurch es gut mit dem Hintergrund der Webseite harmoniert. Sie können ein GIF auch mit transparentem Hintergrund ausgeben, indem Sie die Hintergrundebene deaktivieren. Die Hintergrundtransparenz von GIF kann jedoch nur in zwei Zuständen vorliegen, entweder vollständig transparent oder vollständig undurchsichtig, aber dazwischen nicht durchscheinend. Sofern es sich bei den Bildrändern nicht um horizontale, vertikale oder 45-Grad-Diagonallinien handelt, kommt es daher aufgrund der Transparenz zu offensichtlichem Aliasing. Wie in der folgenden Abbildung dargestellt, wird eine Reihe von Grafiken mit unterschiedlichen Grenzen unter unterschiedlichen Hintergrundfarben angezeigt. Es ist nicht schwer, den Unterschied zwischen den beiden zu erkennen.
Es ist zu beachten, dass das Bildungsprinzip der Kantenzacken nicht nur ein Bildproblem ist, sondern auch Faktoren im Zusammenhang mit den physikalischen Einschränkungen der Anzeige. Das entsprechende Wissen wird im grundlegenden Tutorial erwähnt.
Wenn Sie Bilder mit halbtransparenten Pixeln (z. B. Schlagschattenstile) als transparenten Hintergrund speichern möchten, müssen Sie das Transparenz-Dithering-Projekt aktivieren, damit winzige Streupunkte unterschiedlicher Dichte zur Simulation der Transluzenz verwendet werden können . Wie in der Abbildung unten gezeigt. Es ist ersichtlich, dass das GIF unter „No Transparency Dithering“ zwar auch einen transparenten Hintergrund hat, der ursprüngliche durchscheinende Teil jedoch immer noch weiß bleibt und daher nur auf einen weißen Hintergrund angewendet werden kann. Letzteres kann auf jeden Hintergrund angewendet werden. Wie unten rechts gezeigt.
Es sollte beachtet werden, dass Transparenzdithering keine perfekte Lösung ist, man kann sogar sagen, dass es eine sehr schlechte Lösung ist. Aber aufgrund der eingeschränkten Transparenz von GIF selbst ist es auch eine Lösung. Wenn Sie sich in der tatsächlichen Produktion für die Verwendung des GIF-Formats entscheiden, sollten Sie die Erzeugung halbtransparenter Pixel an den Bildrändern vermeiden. Mit anderen Worten: Vermeiden Sie die Verwendung von Transparenz-Dithering.
Beachten Sie außerdem, dass sich die Berechnungsbeziehung jedes Frames im nicht transparenten Zustand ändern kann, wenn die Ausgabeanimation einen transparenten Hintergrund hat, und dass sich auch die Anzahl der Bytes der Animation erhöhen kann.
Lassen Sie uns nun kurz über die Verwendung von Animationen als MMS-Nachrichten auf Mobiltelefonen sprechen.
China Mobile erlaubt derzeit maximal 100.000 MMS-Nachrichten. Es ist am besten, Animationen unter 95.000 zu steuern und etwas Platz für Text und den Code der SMS selbst zu lassen. Zu beachten ist auch die Größe der Animationen. Verschiedene Mobiltelefonmodelle verfügen über unterschiedliche Animationsgrößen, die aufgrund ihrer unterschiedlichen Bildschirmauflösungen perfekt angezeigt werden können. Die sogenannte perfekte Anzeige bedeutet, dass die Bildschirmauflösung des Mobiltelefons gleich oder größer als die Animationsgröße ist. Wenn die Größe der Animation die Auflösung des Mobiltelefonbildschirms überschreitet, wird sie vom Mobiltelefon für die Anzeige verkleinert. Die Qualität der reduzierten Animation wird jedoch sehr schlecht. Gängige Bildschirmgrößen sind:
128×128: Üblich bei frühen und aktuellen Mobiltelefonen der unteren Preisklasse. Dies ist die Grundgröße von MMS-Animationen. Die meisten aus dem Internet heruntergeladenen MMS-Animationen haben diese Größe, da sie auf fast allen Mobiltelefonen laufen können, die MMS unterstützen.
128×160: Obwohl es ein paar mehr Pixel als das vorherige hat, wird es hauptsächlich zur Anzeige einiger Informationen verwendet, sodass die meisten Animationsgrößen, die ausgeführt werden können, immer noch 128×128 sind.
176×208, 240×320: Wird häufig in Mobiltelefonen mit offenen Betriebssystemen wie Symbian und Windows Mobile verwendet und kann Vollbildanimationen abspielen. Es gibt auch normale Mobiltelefone, die diese Auflösung verwenden, es ist jedoch nicht sicher, ob sie die Vollbildwiedergabe unterstützen.
480×640: Üblich bei High-End-Mobiltelefonmodellen. Obwohl es theoretisch die Vollbildwiedergabe von Animationen derselben Größe unterstützen kann, ist die flüssige Wiedergabe aufgrund der Einschränkungen von GIF selbst nicht garantiert.
Beim Erstellen von MMS-Animationen sollte die Größe 128×128 als primäre Größe in Betracht gezogen werden, da sie die beste Kompatibilität aufweist und aufgrund ihrer geringen Größe die Anzahl der Animationsbytes für denselben Inhalt geringer ist als bei größeren Größen. Wenn die Bildschirmauflösung des Receivers festgelegt ist, kann dieser natürlich auch in einer damit vergleichbaren Größe hergestellt werden. Der Hintergrund der Animation ist am besten weiß, so dass kein erkennbarer Rand entsteht. Denn Weiß ist auch die Hintergrundfarbe, wenn Mobiltelefone MMS-Nachrichten anzeigen, genau wie der Hintergrund von Webseiten. Natürlich ist es manchmal notwendig, bewusst eine Abgrenzung zu schaffen (z. B. den Umriss eines Siegels). Sie können Ihre eigene Entscheidung basierend auf der spezifischen Situation treffen. Da die meisten Mobiltelefone außerdem den Hintergrund bei der Anzeige von MMS-Nachrichten nicht ändern können, macht es wenig Sinn, bei der Animation von MMS-Nachrichten einen transparenten Hintergrund zu verwenden.
In der unteren rechten Ecke von „Für Web und Geräte speichern“ befindet sich die Schaltfläche „Gerätezentrale“. Nachdem Sie darauf gedrückt haben, können Sie eine Vorschau der Wirkung der Animation auf dem ausgewählten Mobiltelefongerät anzeigen. Wie unten gezeigt. Sie können es aus der Geräteliste auf der linken Seite auswählen. Das im Bild ausgewählte Gerät ist das Nokia 3110. Adobe Device Central ist eigentlich eine Datenbank für mobile Geräte, die eine zentralisierte Umgebung für diejenigen bietet, die für mobile Geräte produzieren. Zusätzlich zur normalen Anzeige kann auch die Anzeigesituation simuliert werden, wenn die Hintergrundbeleuchtung des Mobiltelefonbildschirms ausgeschaltet ist und der Außenbildschirm von hinten beleuchtet ist. Allerdings sind diese Features für uns derzeit kaum von Bedeutung.
Ein weiteres zu beachtendes Problem ist die Bildrate der Animation. Auf einem Computer können Animationen mit 30 Bildern pro Sekunde grundsätzlich flüssig abgespielt werden, aber der Prozessor eines Mobiltelefons ist nicht besser als ein Desktop-Computer und seine Ressourcen sind begrenzt. Die Bildrate der Animation sollte auf 2 bis 5 Bilder pro Sekunde eingestellt werden, da ihre Prozessorleistung besser ist als bei normalen Mobiltelefonen. Sie kann auf 10 Bilder pro Sekunde oder höher eingestellt werden. Gleichzeitig beeinflussen auch Faktoren wie Größe, Gesamtdauer, Anzahl der Bytes usw. den Wiedergabeeffekt auf Mobiltelefonen. Probieren Sie die Animation am besten auf Ihrem Mobiltelefon aus, um zu sehen, wie flüssig sie ist.
Wenn Sie Animationen in mehreren verschiedenen Größen ausgeben möchten, verwenden Sie am besten das Vektorformat für die Produktion. Das Vektorformat ist auch das beste Format zum Speichern des Originalbilds, im Einklang mit dem Grundsatz „Maximale Bearbeitbarkeit erhalten“, den wir immer vertreten haben befürwortet.