Anzeige
Tutorialbeschreibung

Animierte PNG-Dateien erstellen (APNG)

Animierte PNG-Dateien erstellen (APNG)

Hier werde ich euch zeigen, wie man animierte PNGs erstellt.
Denn im Gegensatz zu den "langweiligen" GIF-Animationen kann ein APNG (Animated Portable Network Graphics) auch Ebenen mit Transparenzverlauf abspielen!
Ein erstes Beispiel, das dies zeigt, findet ihr unten! (2. Link)

Benötigte Kenntnisse:
Basiswissen in einem Bildbearbeitungsprogramm, wenn möglich Photoshop.


Übersicht:

Schritt 1: Einführung in APNGs und Vergleich zum GIF

Schritt 2: Erstellen eures eigenen APNGs
  Schritt 2.1: Erstellen des transparenten Objekts
  Schritt 2.2: Erste Schritte zur Bewegung
  Schritt 2.3: Bilder zur Fertigung vorbereiten

Schritt 3: Das APNG aus den Einzelbildern erstellen 
  Schritt 3.1: Erstellen durch den Internetanbieter "APNG"
    Schritt 3.1.1: Dateien für das Internet optimieren
    Schritt 3.1.2: Das APNG erstellen
  Schritt 3.2: Erstellen durch den APNG-Editor
    Schritt 3.2.1: Bilder laden und sortieren
    Schritt 3.2.2: Zeit -und andere Einstellungen
  Schritt 3.3: Erstellen durch das Firefox-Addon "APNG Editor"
    Schritt 3.3.1: Installation und laden der Bilder 
    Schritt 3.3.2: Einstellungen

Schritt 4: Das Weiterverarbeiten des APNG

Die Schritte 3.X haben die selbe Wertigkeit.
Es muss nur einer der 3 Schritte ausgeführt werden.



Schritt 1:
Einführung in APNGs und Vergleich zum GIF:

WICHTIG: Die APNGs funktionieren bisher NUR in den Internet-Browsern Firefox 3.0 und Opera 9.5!
Sollten trotz Firefox die APNGs NICHT funktionieren, gibt es hier das entsprechende AddOn:

addons.mozilla.org/de/firefox/addon/5519

Um noch einmal den Unterschied zwischen animiertem GIF und animiertem PNG zu zeigen, ist hier noch ein Link, wo 2 Animationen verglichen werden.
Hier könnt ihr auch eure APNG-Funktionalität testen:

www.xn--l-stck-lsungen-2pb5g.de/apng.html

Vorteile von APNGs:

    - Tranzparenz-Verläufe
    - Anders als beim animierten GIF: Statt 256 indizierten Farben (GIF) kann man beliebig viele Farben verwenden (APNG)

Nachteile von APNGs:

    - Nur in bestimmten Browsern abspielbar
 

Schritt 2:
Erstellen eures eigenen APNGs:

Zunächst öffnet ihr ein neues Dokument in Adobe Photoshop oder einem anderen Bildbearbeitungsprogramm, das PNGs exportieren kann.

Bilder


Wir erstellen eine neue Ebene und löschen die Hintergrundebene, sodass wir EINE transparente Ebene bekommen.

Bilder




Schritt 2.1:
Erstellen des transparenten Objekts:

Für unser Beispiel habe ich einen Text 
Bilder
  mit dem Inhalt "PSD" erstellt und ihn mit einem transparenten Schein nach außen belegt.
Die Werte dieser Fülloption spielen keine Rolle. Sie dienen schließlich nur dem Zweck der Transparenz:

Bilder


Dieses Bild in Form eines Textes speichern wir jetzt als "01.png" ab.



Schritt 2.2:
Erste Schritte zur Bewegung:

Wir drehen jetzt den Text um einige Grad, um am Ende eine Drehbewegung zu erhalten.
Dafür nehmen wir das Transformieren-Werkzeug (Strg+T):

Bilder


Natürlich könnte man jetzt auch die Farbe des Textes ändern oder die Werte der Fülloption. Der Fantasie sind keine Grenzen gesetzt!

Um aber nicht nur eine Drehung zu erzielen, drehen wir den Text jetzt immer ein kleines Stückchen weiter
und speichern zwischendurch jedes Bild als "02.png", "03.png", usw. ab, bis es uns dann zu viel wird.
Ich habe beim 9ten Bild aufgehört. Mittlerweile ist der Text um 180° gedreht:

Bilder




Schritt 2.3:
Bilder zur Fertigung vorbereiten:

Diese 9 Bilder lege ich nun zur besseren Handhabung in einen eigenen Ordner namens "PNG":
Bilder


Im diesem "PNG"-Ordner befinden sich dann die Bilder:
Bilder


Wenn ich die Miniaturansicht aktiviere, sieht man die schrittweise durchgeführte Drehung sehr deutlich!

Bilder



Schritt 3:
Das APNG aus den Einzelbildern erstellen 

Schritt 3.1:
Erstellen durch den Internetanbieter "APNG"

Schritt 3.1.1:
Dateien für das Internet optimieren:

Für die Weiterverarbeitung müssen alle 9 Bilder jetzt als ZIP-Datei verpackt werden.
Das geht mit nahezu jedem ZIP-Programm. (Ich habe dafür WIN-RAR verwendet):

Bilder


Nachdem ich die Bilder ausgewählt habe, klicke ich auf den Button "Hinzufügen". Die PNGs sind jetzt für ein neues ZIP-Archiv markiert.
Die Bilder werden hier jetzt als ZIP verpackt:

Bilder


Nachdem ich auf "OK" geklickt habe, erscheint schon die "PNG.zip"-Datei.
Diese liegt nun im selben Ordner wie die Einzelbilder.

Bilder




Schritt 3.1.2:
Das APNG erstellen:

Um letztendlich aber eine Animation zu bekommen, müssen wir uns an den Internetanbieter "apng" wenden.
Hier können wir unsere ZIP-Datei hochladen und bekommen das APNG zurück!

Den Link für die Konvertierung findet ihr hier: http://littlesvr.ca/apng/assembler-2.0/assembler2.php. Wenn ihr den Link geöffnet habt, sollte etwas in dieser Richtung kommen:


Bilder


Um das ZIP-Archiv hochzuladen, klickt ihr einfach auf "Durchsuchen" und wählt eure Datei aus.

Bilder


Jetzt könnt ihr noch die Millisekunden eingeben, in denen die einzelnen Bilder abgespielt werden sollen:

Bilder


Das Ganze bestätigt ihr mit einem Klick auf "Create APNG"!

Um das Bild nun wirklich auch nutzen zu können, müsst ihr es zuerst auf eurem Computer abspeichern und danach erneut ins Internet hochladen.
(Der Server, der den APNG-Assembler hostet löscht euere APNGs nach einer Weile wieder. Daher Schritt 3 auf keinen Fall auslassen!)
Hier könnt ihr den Abspeichervorgang sehen:

Bilder



Auf eurem Desktop (oder anderem Speicherort) könnt ihr nun das "animated.png" anschauen.
VORSICHT: Kein standardmäßiges, lokales Programm kann das Bild als ANIMATION ausgeben.
Das APNG wird beispielsweise im Windows Bildbetrachter oder in IrfanView als normales PNG angezeigt.

Bilder
(Desktop)


Schritt 3.2:    
Bilder

Erstellen durch den APNG-Editor (Software nur für Windows und Linux in Kombination mit Wine)

Schritt 3.2.1:
Bilder laden und sortieren

Anders als bei der letzten Möglichkeit wenden wir uns hier jetzt nicht an einen Internetanbieter,
sondern erstellen das APNG direkt durch eine kostenfreie Software auf unserem Computer.
Dazu ladet ihr euch zuerst diesen Editor herunter: www.xn--l-stck-lsungen-2pb5g.de/APNG Anime Maker.exe
Das ist jetzt nur eine .exe Datei OHNE Installation.
Den Editor ruft ihr jetzt auf, worauf ihr dieses Fenster zu sehen bekommt:

Bilder


Nun klickt ihr auf "Open" und könnt nun so viele kompatible Dateien auswählen wie ihr wollt.
Wenn ihr z.B. Nach Schritt 2 9 Bilder vorliegen habt, könnt ihr diese nun alle auswählen:

Bilder


Im 2. Teilbild des Bildes oben sieht man jetzt schon die geöffneten Bilder.


Schritt 3.2.2:
Zeit -und andere Einstellungen

Hier kann man jetzt noch die Zeit einstellen, in der die einzelnen Bilder abgespielt werden sollen:

Bilder


Des weiteren kann man noch einige Überlagerungs-Modi oder anderes einstellen.
Eine genauere Beschreibung zu den Funktionen gibt es hier: sites.google.com/site/cphktool/apng-anime-maker (In Englisch)
Jetzt noch schnell abspeichern:

Bilder



Schritt 3.3:
Erstellen durch das Firefox-Addon "APNG Editor"

Schritt 3.3.1:
Installation und laden der Bilder

Man kann APNGs auch ohne einen Internetanbieter oder eine Software lösen.
Dafür installiert ihr uns das Firefox-Addon "APNG Editor": addons.mozilla.org/en-US/firefox/addon/5519
Dieser Editor funktioniert Firefox-intern. Hier die Installation:

Bilder


Bilder


Danach Firefox neu starten.
Jetzt kann man den Editor über "Extras -> APNG Editor" aufrufen:

Bilder

Nun erscheint folgendes Fenster.
Hier sieht man jetzt gleich das öffnen der 1. Datei, indem man unten links auf "Open File" klickt:

Bilder



Schritt 3.3.2:
Einstellungen

Nach dem öffnen der 9ten und (hier) letzten Datei, seid ihr auf folgendem Stand.
Jetzt kann man noch bei jedem Bild einzeln die Zeit in Millisekunden eingeben, in der das jeweilige Bild angezeigt werden soll:

Bilder

(Layer-Symbol: Anzeigeoptionen; Pfeile: Abstand links/oben; Sanduhr: Anzeigezeit ändern)

Über "Safe Animation" könnt ihr das Ganze - sofern es uns gefällt - auf dem Computer abspeichern.


Schritt 4:
Das Weiterverarbeiten des APNG:

Jetzt ladet ihr das PNG noch schnell bei einem BildUploader, wie www.bilder-hochladen.net oder tinypic.de hoch:

Bilder


Beispielsweise nach dem Upload auf Tinypic:

Bilder


Hier ist jetzt mein Endergebnis für den "Beweis" der Transparenz:

www.xn--l-stck-lsungen-2pb5g.de/psd.html

Jetzt könnt ihr den Link zum APNG in Foren, Profilen und sonstigen Online-Machenschaften verwenden.
Aber wie schon vorhin erwähnt: Es funktioniert nur mit Mozilla Firefox 3.0 und Opera 9.5. Den anderen Browsern wird das APNG als NORMALES PNG angezeigt!
Daher ist es ratsam, den 1. Frame (Einzelbild) der Animation von vorn herein so zu gestalten, dass dieser auch im unanimierten Zustand gut aussieht.
Selbstverständlich könnt ihr auch mehr Bilder zur Animation verwenden und andere Effekte einbauen!

Ich hoffe, ihr könnt etwas damit anfangen, denn APNGs sind hauptsächlich für den Webbereich sinnvoll!
 


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von LaVelveta
  • 09.06.2013 - 01:23

Weiß eigentlich jemand, ob es mittlerweile auch bei anderen Browsern wie chrome funktioniert? Ich würde es wirklich gern aus probieren, da ich gerne für einen Foren-Ava einen animierten Transparenzverlauf machen würde. Firefox und Opera benutze ich nach einigen Problemen überhaupt nicht mehr.

Portrait von jerryme76
  • 07.01.2013 - 22:19

Naja.,. ich hatte gehofft, ich entdecke wie ich in PS APNG ertselle. Aber zumindest ist das eine Alternative zu animated GIFs. Zu schade dass der IE keine APNGs animiert.

Portrait von jochenburckhardt
  • 28.08.2012 - 12:09

Super Anleitung, danke!

Der Link zum Assembler geht nicht mehr, hier der Neue:
http://littlesvr.ca/apng/assembler-2.0/assembler2.php

Portrait von Fidelis_jpg
  • 23.09.2012 - 21:03

Danke! Auch die toten Links zu meiner Website bessere ich gleich nach!

Portrait von ipoder
  • 24.03.2012 - 14:04

Super easy!
Vielen Dank für dieses Tutorial.

Portrait von stubser
  • 07.01.2012 - 16:31

Sehr schönes Tutorial, einfach und verständlich erklärt.
Mal schauen ob mir ein paar gute Ideen Einfallen um dies auszuprobieren.

MfG stubser

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 15.10.2011 - 13:20

würde es gerne ausprobieren aber firefox 7.1 geht es gar nicht..und wieder zu 3 na das muss ich mir überlegen sonst wäre es sehr spannend für mich ..vielleicht wird es ja bald standard...Lieben Dank ..

Portrait von Sil3nt_Hunt3r
Portrait von Gilling
  • 09.06.2011 - 23:22

Tausend Dank!

Hast mir sehr geholfen!

Portrait von Whisper1775
  • 12.05.2011 - 20:04

Echt klasse Tutorial!
Danke dir ;)

Portrait von Waegi
  • 15.02.2011 - 16:00

Danke für das Tutorial, kann ich gut gebrauchen, nur schade dass es noch nicht alle Browser unterstützen.

Mfg Waegi

Portrait von Daniel_Knecht
  • 08.02.2011 - 01:39

GENIAL... Endlich nicht mehr mit dem elenden GIF rumschlagen :)

Portrait von worona
  • 30.12.2010 - 23:52

klasse! danke! mal sehen, ob ich das hin bekomme

Portrait von Betchy
  • 30.12.2010 - 18:21

Werd ich sofort ausprobieren! Danke für den Tut

Portrait von erziehermail
  • 19.11.2010 - 00:21

sehr schön erklärt;gefällt mir gut

Portrait von SYR

SYR

  • 15.11.2010 - 19:07

klasse tut. wäre nie auf die idee gekommen animierte pngs zu machen... thx

Portrait von begima
  • 08.11.2010 - 05:42

Gut erklärt, Dankeschön

Portrait von Der_Morph
  • 22.10.2010 - 18:25

Das ist genau das, worauf ich gehofft habe, eine Alternative zu dem doch etwas angegraute GIF Format!

Das Tutorial ist relativ simpel und gut verständlich geschrieben, zudem bietet es mehrere Lösungswege (Umwandlung über Webdienst, Standalone Programm und Browserplugin).

Portrait von HeavyNoisez
  • 20.09.2010 - 15:35

Leider zeigt mir die Seite nach dem "wandeln" immer eine Fehlercode an -.-'
Muss ich mir nochmal anschauen...

Portrait von Fidelis_jpg
  • 20.09.2010 - 15:44

Hallo,
ich habe die Website noch einmal getestet, bei mir funktioniert alles wunderbar.
Die Dateien müssen alle in der richtigen Reihenfolge benannt in einer ZIP-Datei hochgeladen werden. Wenn das der Fall ist, sollte es bei normalgroßen APNGs funktionieren.
Die ZIP Datei darf allerdings nich größer als 2MB sein!
Viele Grüße

x
×
×