mdot

Webshop Bild 2

 

Unser Service - Ihr Erfolg!

 

Einen Web-Shop zu betreiben erfordert viel Know-How in den unterschiedlichsten Gebieten.

 

Zerbrechen Sie sich nicht mehr länger UNSEREN Kopf.

 

Wir gestalten und betreiben Ihren Web-Shop - schnell, kompetent und unkompliziert.

Home Bild

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ß.

 

Bild1 cc821b22e5

 

 

Bild2 2be2f186b4

 

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

 

Bild3 5086ad02f2

 

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.

 

Bild4 ae1db3f9db

 

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.

 

Bild5 52fb09910b

 

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

 

Bild6 6bf16d4e75

 

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.

 

Bild7 0e64450996

 

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.

 

Bild8 e1466d4f09

 

Frame 20 ist leer bis auf den Triton Stern.

 

Bild9 535586d256

 

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).

 

Bild10 d2645c1dd8

 

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.

 

Bild11 524fb56d0c

 

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.