Wie ein einfaches Banner erstellt wird, ist meisten klar, ein Grafikprogramm öffen, Datei Neu auswählen und die gewünschte Größe, dann den Hintergrund und einen Text eintragen. Etwas komplizierter, aber ähnlich ist es wenn das Banner animiert werden soll, da werden paar Bilder im gleichen Format erstellt und dann in ein GIF Bild zusammen gefügt. Zum Beispiel, das Banner soll 468 Pixel breit und 80 Pixel hoch werden, die Einzelbilder müssen dann auch die gleiche Größe haben.
Auf dem ersten Bild ist z.B. ein großer Text zu sehen, das bekommt den Dateinamen frame_0001.gif, das zweite Bild hat zwei kleine Textzeilen und wird als frame_0002.gif gespeicht, das dritte heißt frame_0003.gif und ein Logo ist darauf zusehen.
Und mit dem Linuxbefehl "gifsicle --delay=10 --loop frame*.gif > ani.gif" wird daraus das animierte Bild erstellt, bzw. herstellen, für die nach animiertes Bild herstellen gesucht haben, dass aber in diesem Zusammenhang eigentlich falsch ist, da das Bild nur aus den vorhandenen Daten heraus generiert wird.
Aber hier möchte ich aufzeigen wie ein animiertes GIF Bild mit einen Text erstellt wird.
animiertes Banner:
Und selbstverständlich habe ich das mit Python gemacht, nach dieser Anleitung:
http://www.mbeckler.org/inkscape/svgani/.
In diesem wird das Bild mit einem Farbverlauf animiert und ist der Quellcode für das Beispiel zu Download
(Python 2.7) bereitgestellt.
Dabei habe ich eine skalierbare Vektorgrafik (engl. Scalable Vector Graphics) kurz SVG erstellt
mit meinem Text, diese Editiert und einen Ablauf geschrieben, diese Daten dann als einzelne Bilder
ausgegeben und als animiertes GIF gewandelt.
Also mit Inkscape eine .svg Grafik erstellt mit dem Text, die x und y Werte im Texteditor umbenannt,
unter dem Link ist der Text der SVG Datei.
- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
- <!-- Created with Inkscape (http://www.inkscape.org/) -->
- <svg
- xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="468px"
- height="60px">
- <defs />
- <sodipodi:namedview
- id="base"
- pagecolor="#ffffff"
- bordercolor="#000000"
- borderopacity="1.0"/>
- <text
- style="font-size:30px;"
- x="x_position"
- y="y_position"
- sodipodi:linespacing="110%"><tspan
- style="font-weight:bold;fill:#a02c2c">markush.cwsurf.de</tspan><tspan
- style="fill:#a02c2c">Python programmieren</tspan></text>
- <rect x="10" y="55" width="458" height="2" stroke="black"/>
- </svg>
Die Datei sieht in Inkscape nicht besonders ansprechend aus,
da sie Positionsangaben mit x_position und y_position deklariert sind und somit setzt
Inkscape die Werte auf Null in die rechte obere Ecke:
Banner bearbeitet mit Inkscape
In die Setting Datei den Dateinamen der .svg Datei eingetragen und mit meinen Animationablauf gefüllt:
Die Animation startet mit dem Wert 50 und wird in 14 Schritten auf
140 erhöht, der Index Wert in in die XY Position geschrieben
und der Text wandet dabei nach oben links aus dem Bild heraus.
Die zweite Phase startet rechts ausserhalb vom Bild und die Textposition
wandert nach links und durch die cosinus Funktion wird eine leichte
auf/ab Bewegung erzeugt.
Und wie beschrieben das Pythonscript starten, dann werden die viele frame_xxxx.gif Daten erzeugt, und mit
in eine animierte gif Datei wandeln. Wer diesen Befehl nicht zur
Verfügung hat, kann das Bild auch mit dem Grafikprogramm Gimp erstellen.