Verzierung

Das ist der erste „do IT yourself“ Computer-Heimwerker Artikel von Völkermord ist bunt.


archivebuch

verbotenesarchive3

Das sind Vektorgrafiken ohne Copyright von openclipart.org, de.freepik.com oder ähnlichen freien Quellen heruntergeladen und mit Inkscape (inkscape.org) zusammengesetzt, angepasst und dann in passender Größe als Bitmapgrafiken exportiert. Der Aufwand hält sich in Grenzen. In der Regel macht man als Amateur die Grafiken sowieso zu voll. Deshalb loht es sich doppelt aufzuhören, sobald das Ergebnis halbwegs passt.

Die beiden Bilder hatte ich vor einem Jahr erstellt. Ich hatte sie in Schwarz-Weiß gehalten, weil sie auch für Flyer taugen sollten.

Inkscape eignet sich gut für 2D-Grafiken. Es ist etwas gewöhnungsbedürftig, da keine Bilder gemalt werden, sondern Objekte gebastelt werden, aber die Tutorien helfen bei der Einarbeitung.

Die svg (Scaleable Vector Graphics) Dateien, die Inkscape zum Abspeichern von Vektorgrafiken benutzt, enthalten eine Menge Schrott. Unter anderem auch den Verzeichnispfad des letzten Export in ein Bitmapdateiformat. Und damit unter Umständen den Namen des Erzeugers. Die (svg-)Dateien lassen sich aber in einem gewöhnlichen Texteditor angucken. Notfalls nach Umbenennung der Dateiendung in txt. Ich habe auch schon mal eine Grafik quasi als Email-Text verschickt, das wird den Empfänger aber eher irritieren, wenn er damit noch nichts zu tun gehabt hat.

Es lassen sich auch schnell und leicht Grafiken ohne Vorlagen erstellen. Die folgenden Bilder hatte ich für den Blog angefertigt:

genozid7

genozid6


Pit hat mich auf den neuen Clip von whiterabbit aufmerksam gemacht: https://www.youtube.com/embed/6dv9n9HpUQk

Der ist so schön kurz, dass ich ihn als gif-Animation haben wollte, die sich auch leicht direkt als Endlosschleife in den meisten Netzseiten einbauen lässt. Gif ist ein Bitmap-Format (d.h. jeder Punkt wird als Punkt abgespeichert. Skalieren kann man die Dinger relativ schlecht, wenn es nicht gerade um Vielfache der Orginalgröße handelt), das (Dank geschickter verlustfreier Komprimierung) hervorragend mit Wiederholungen umgehen kann. Damit die Datei nicht zu groß wird, sollte man darauf achten, das Flächen homogen sind und sich nicht zu viele Pixel neuartig ändern. Das trift für dieses Video zum größten Teil zu. Bis ungefähr in der letzte Sekunde das Bild langsam verdunkelt wird. Das hat auch noch den Nachteil, das unnötig viele Farbabstufungen verwendet werden müssen. Nachdem ich die letzte Sekunde abgeschnitten hatte, war die Animation von 4mb auf 1.3mb zusammengeschrumpft, ohne das etwas Wichtiges verlorengegangen wäre. Nachdem ich Höhe und Breite halbiert habe, ist die Animation mit 428kb für viele Einsetzungsbereiche klein genug. WordPress verkleinert sie bei der Darstellung automatisch auf 300×168:

small2anim

Ich habe aber noch kleinere Versionen erstellt.
Auf As der Schwerter hatte ich zuerst eine Version mit kleineren Fonts verlinkt. Die hier, mit der größeren Schrift, werde ich auch noch mal angeben. Zusammen mit den kleineren.

Zum Umwandeln von Videos in Gif-Animationen gibt es eine Reihe von mehr oder weniger komfortablen frei erhältlichen Programmen und auch Netzseiten. Suchmaschinen helfen weiter.

Ich wollte keinen Werbebalken von irgendwelchen unwichtigen Seiten in der Animation haben und die Datei klein und trotzdem ohne größere Verluste halten. Damit sind die Netzseiten leider nicht geeignet. Da gif-Animationen keine Toneausgabe erzeugen, musste ich auch Untertitel einblenden, die ich selbst erst noch schreiben musste. Und zu guter letzt wollte ich die Animation etwas Familientauglicher gestalten und eine EU-Flagge an eine geeignete Stelle setzen. Vieles davon lässt sich über Photoshop lösen.

Es geht aber auch anders. Wenn man noch Arbeiten auf Shell-Ebene gewohnt ist:


Einzelbilder ausgeben:

Mit ffmpeg (ffmpeg.org) lässt sich ein Video in Einzelbilder zerlegen und gleichzeitig Untertitel einbinden.
# ffmpeg -i „videoname“ -vf „ass=diversity“ -f image2 vid%3d.png
Das „vis%3d“ seht dafür, dass die Namen der Ausgabebilder mit „vid“ anfangen und dreistellig durchnummeriert werden. Also „vid001“, „vid002“, usw.

Die Untertitel hatte ich zuvor im ass-Format in die Datei „diversity.ass“ geschrieben. Die sieht so aus:

[Script Info]
ScriptType: v4.00+

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, AlphaLevel, Encoding
Style: Default,Arial,28,&Hffffff,&Hffffff,&H0,&H0,0,0,0,1,2,0,2,10,10,10,0,0

[Events]
Format: Layer, Start, End, Style, Text
Dialogue: 0,0:00:00.15,0:00:01.90,Default,The system has failed you.
Dialogue: 0,0:00:02.00,0:00:03.10,Default,Diversity
Dialogue: 0,0:00:03.11,0:00:06.00,Default,is your greatest strength!
Dialogue: 0,0:00:03.11,0:00:06.00,Default,Diversity

Wichtig ist in der vorallem die Stelle in der Style-Zeile, wo die 28 steht (das ist die Schriftgröße) und die Dialogue-Zeilen. „Start“ und „End“ sind die Zeitrahmen in denen der Text erscheinen soll, der am Ende der Zeile steht. (Stunden:Minuten:Sekunden) (Sekunden dabei als Kommazahl mit „.“ als Komma).

Den folgenden Teil des Ausgabetexts von ffmpeg brauche ich später noch:

Duration: 00:00:06.51, start: 0.000000, bitrate: 451 kb/s
Stream #0:0: Video: vp8, yuv420p, 854×480, SAR 1:1 DAR 427:240, 1k fps, 24 tbr, 1k tbn, 1k tbc (default)

854×480 steht für die Weite und Höhe der Bilder. Das Video ist 6.51 Sekunden lang. Bei erzeugten 154 Bildern macht das 154/6.51=23.66 fps (frames per second). Das entspricht ungefähr der angegebenen Rate von tbr: 24.


Overlay-Bilder erstellen:

Mit den Bildern auf der Platte konnte ich mir ansehen wie ich am besten vorgehe, welche Bilder ich weglasse und wie ich die EU-Flagge optimal platziere, ohne die in jedem Bild von Hand einfügen zu müssen. Ich hatte mich dazu entschlossen nur die ersten 129 der 154 Bilder zu verwenden, weil ich die leicht auswählen konnte und irgendwo bei Bild 135 oder so die Verdunklung einsetzt, die die Dateigröße in die Höhe treibt. In den ersten 68 Bildern bleibt das Beil von dem Neger ungefähr in gleicher Position. Für diese Bilder reicht es, wenn ich die EU-Flagge einmal positioniere. Dann folgen 7 Bilder, in denen das Beil langsam nach oben geht. Für die musste ich jeweils die Flagge drehen und verschieben. Danach bleibt die Position bis zum Schluss. Acht mal eine Flagge einsetzen und zurechtdrehen ist ein vertretbarer Aufwand.

Die Idee ist, ein Bild zu erzeugen, das genauso groß ist wie die Bilder aus dem Video und dasselbe Format hat. Das Bild soll die EU-Flagge an der richtigen Stelle haben und sonst überall durchsichtig sein, so dass man es über jedes der ersten 68 Bilder legen kann und die Flagge an der richtigen Stelle erscheint. Anschließend werden die beiden Bilder zusammengefügt. Doch der Reihe nach.

Also die EU-Flagge mit inkscape einlesen. Bild 68 importieren. Flagge an die richtige Stelle setzen. Im „Objekt Fill and Stroke“ Menu der Bitmap-Grafik die Opacity auf 0% setzen, damit (nur) das importierte Bild komplett durchsichtig wird. Das Bild und die Flagge markieren. Exportieren. Dabei darauf achten, das sie Größe stimmt. In dem Fall 854×480. Die importierte Grafik aus inkskape entfernen. Und das nächste Bild importieren. Im Prinzip kann man die nächsten 6 Bilder auch direkt exportieren, ohne sie durchsichtig zu machen. Ich habe aber alle Bilder auf dieselbe Art bearbeitet.


Front- und Hintergundbild verschmelzen:

Die beiden Bilder lassen sich mit imagemagick (www.imagemagick.org) zusammenfügen. Vom Prinzip her:
# composite „Frondbild.png“ „Hintergrundbild.png“ „Ausgabe.png“

In drei Schritten für alle Bilder (falls man „bash“ als Shell hat, andernfalls geeignet anpassen):
# for i in `seq -w 1 68`;do composite f068.png vid0${i}.png euvid0${i}.png;done
# for i in `seq -w 69 74`;do composite f0${i}.png vid0${i}.png euvid0${i}.png;done
# for i in `seq -w 75 129`;do composite f075.png vid${i}.png euvid${i}.png;done

Die Exporte aus Inkscape hatte ich „f068.png“, …, „f075.png“ genannt. Wichtig ist für den mittleren Schritt, falls man den durchführen will, im Grunde nur, dass die Nummerierung mit den dazugehörigen Bildern aus dem Video übereinstimmt.


Bilder verkleinern:

Als nächstes wird die Größe der Bilder angepasst. Bitmapdateien lassen sich halbwegs gut in Breite und Höhe jeweils halbieren.

# for i in euvid*.png;do convert -geometry 427×240 $i small$i;done

Die ursprünglichen Bilder waren zu groß für die meisten Anwendungen als Teil einer Netzseite. Auch nach Halbierung ist es für viele Zwecke noch zu groß. Deshalb habe ich noch eine Version mit gedrittelter Größe (285×160) erstellt:
small3anim

Die kam auf 216kb.

Und eine mit geviertelter Größe (214×120):
small4anim
Diese Animation passt von der Größe her gut in die Seitenleiste. Auch der Speicherverbrauch geht in Ordnung: 132kb
Ich werde diese oder die nächstgrößere für eine Weile einfügen und auf den passenden Artike bei As der Schwerter verlinken, in der Hoffnung, dass sich andere anschließen.


Die Bilder zu einer Animation machen:

Dazu habe ich zwei kleine Programme verwendet:
sourceforge.net/projects/apngasm
sourceforge.net/projects/apng2gif

# apngasm smallanim.png euvid*.png 1 24
# apng2gif smallanim.png

Der erste Befehl erzeugt eine Animation im apng Format. Das erste Argument ist der Name der Ausgabedatei. Danach folgen die einzelnen Bilder. Das 1 24 am Schluß steht für 24 fps, die Bildfolgegeschwindigkeit die ffmpeg in dem Orginalvideo ermittelt hatte.

Der zweite Befehl wandelt die apng Animation in eine gif Animation.
Die kann man zum Testen im Browser seiner Wahl öffnen.


Fertig!

Das Aufschreiben hat länger gedauert als der Rest inklusive Recherche und Lösung anfallender Probleme. Jetzt geht es noch schneller.


Die EU-Flagge sieht aus mehreren Gründen so oberfächlich aus.

  1. Ich wollte eine kleine Datei erzeugen und das Bild möglichst homogen halten.
  2. Ich wollte Zeit sparen und habe das Bild so genommen, wie ich es gefunden habe.
  3. So auffällig ist es auch nicht. Wen einer so genau hinguckt, dann hat die Animation schon ihren Zweck erfüllt Aufmerksamkeit auf sich zu ziehen.
  4. Die EU ist selbst nur eine oberflächliche Attrappe, hinter der sich eine Menge bluternster Bedrohungen verstecken. Das Bild passt also.

Ein Gedanke zu „Verzierung

  1. Pit

    Na jedenfalls mal sehr vielen Dank… eben DAFÜR, diese Anleitung auch noch verfaßt zu haben. Ich kenne das alles gut: zusammenfummeln von allerlei Aufgaben, mit Programmen… immer wieder weitere Schritte, Probleme, rumprobieren, Anleitungen lesen. Die Ergebnisse posten… und dann auch noch: mögliche Mitmacher, Nachfolger: instruieren und befähigen.

    Also: großartige Arbeit, vielen Dank, und möge sie Frucht tragen. Will net behaupten, daß ich gleich was übernehme…. aber es ist notiert und wird, kann, bei Bedarf Einsatz finden.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s