Anleitung zum einfachen erstellen eines animierten Webbanners

Es soll eine GIF Animation in Webbanner Format erstellt werden. Ich habe eine herkömliche Grösse eines Full-Size Banners in der Auflösung von 468x60px gewählt. Der Banner kann z.B. als Werbebanner verwendet werden. Als Untergrundfarbe verwende ich weiß.

 

 

 

 

Als nächstes füge ich unser Logo ein das im rechten oberen Eck leicht beschnitten platziert wird

 

 

Nun kommt der Triton Stern, er soll sich von der Mitte aus in das linke unter Ecke platzieren und nur Teils zu sehen sein. Der Stern wird dann für die komplette Animation sichtar bleiben. Damit ich die Animation ausführen kann muss ich den Stern jeweils in der benötigten Position in einer eigenen Ebene platzieren. Für eine bessere Übersicht habe ich die Sternebenen von 1-7 durchnummeriert.

 

 

Nun beginne ich die Animation von Beginn an aufzubauen, und teile jedem Frame die jeweiligen Ebenen zu. Das bedeutet das zb. bei Frame 1 (Logo und weisser Hintergrund) nur die Ebenen mit dem Logo und dem weissen Hintergrund angewählt sind. Möchte ich nun den Frame 2 bearbeiten kopiere ich von der Animationspalette aus den Frame 1 und wähle auch hier wieder die benötigten Ebenen aus. Das setze ich soweit fort wie ich mir Ebenen vorbereitet habe.

 

 

Es sind jetzt 9 Frames fertig. Zur kontrolle kann ich die Animation ruhig mal über die Palette abspielen lassen. Es muss sich das Logo einblenden und der Stern von der Mitte aus wie im Screenshot platzieren

 

 

Bei den nächsten beiden Frames möchte ich den Triton Style Schriftzug durch das platzieren des Sterns erschüttern lassen. Ich richte mir 2 Ebenen ein wobei ich einmal das Triton Style Logo nach links und beim zweiten nach rechts verdrehe. Ich kopiere den Frame 9 und blende eine der beiden Logo Ebenen ein ( Frame 10), wiederhole das ganze für die zweite Logo Ebene ( Frame 11).
Bei einer Abspielgeschwindigkeit von 0,1 Sekunde für die beiden Frames wirkt es sehr realistisch.

 

 

Als nächstes soll sich der Merchandise Schriftzug von unten ins Bild schieben (siehe rote Pfeile). Ich erstelle wieder für jede Position des Schriftzuges eine Ebene (Frame 13 - 19) und blende für den jeweiligen Frame die richtige Ebene ein. Rechts habe ich 3 Frames vergrössert.

 

 

Frame 20 ist leer bis auf den Triton Stern.

 

 

Als nächstes soll sich „you need a Bandshirt?“ Wort für Wort über den Webbanner einblenden. Wir erstellen wieder für jedes einzelne Wort eine Ebene und blenden diese wieder zu dem jeweiligen Frame ein (Frame 20 - 26). Der fertige Schriftzug soll nach dem Einblenden des Fragezeichens 2 Sekunden
stehen (Framezeit auf 2 Sekunden einstellen) bevor er sich anschliessend ausblendet. Hierfür verwenden wir den Animationsframe Tweening der sich in der Frame Palette befindet (roter Kreis). Es öffnet sich ein Fenster bei dem wir 5 Frames hinzufügen lassen, bei denen sich der Schriftzug dann Schritt für Schritt ausblendet (Frame 26-31) bis der Triton Stern auf weissen Hintergrund überbleibt (Frame 32).

 

 

Als nächstes wird das JPG eingefügt und anschliessend wieder über den Animationsframe Tweening über 5 Frames ausgeblendet. Hierbei gehen wir genau so vor wie bei Frame 26-31nur das wir anstelle des Textes das eingefügte JPG verwenden. (Frame 33-39) Frame 40 ist wieder der Triton Stern auf weissen Hintergrund.

 

 

Bei Frame 41- 43 blenden wir unsere Webadresse shop.tritonstyle.com ein ,indem wir wieder jeden Frame ein Wort der dazugehörigen Ebene einblenden. shop.tritonstyle.com lassen wir dann für 2 sekunden stehen.