www.tritonstyle.com
HomeOnline-ShopBlogGalleryKontakt
Design
Produktion
Vertrieb
22.02.2010
19:45

Anleitung zum einfachen erstellen eines animierten Webbanners

Es soll eine GIF Animation werden die als Werbung für unseren Onlineshop dienen soll. Ich habe eine herkömliche Grösse von 16 x 2 cm in einer Auflösung von 72 dpi gewählt. Als Untergrundfarbe verwende ich weiss.


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.

  •  
  • 0 Kommentare
  •  

Mein Kommentar

Ich möchte über jeden weiteren Kommentar in diesem Post benachrichtigt werden.

Zurück

< < Februar 2010 > >
S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28            

Kategorien

  • Allgemeines(2)
  • [-]Design(1)
  • Festival/Events(1)
  • News(10)
  • Produkte(3)

Blog rolls

Archiv

  • [-]2011(9)
    • [-]September(3)
    • [-]August(2)
    • [-]Juli(3)
    • [-]Januar(1)
  • [-]2010(7)
    • [-]Juli(2)
    • [-]April(1)
    • [-]März(1)
    • [-]Februar(3)

Kopieren Sie diesen Link in Ihren RSS Reader

RSS 0.91Posts
RSS 2.0Posts

Social Bookmarking

Bookmark bei: Mr. Wong Bookmark bei: Webnews Bookmark bei: Icio Bookmark bei: Oneview Bookmark bei: Linkarena Bookmark bei: Favoriten Bookmark bei: Seekxl Bookmark bei: Favit Bookmark bei: Social Bookmarking Tool Bookmark bei: Power Oldie Bookmark bei: Bookmarks.cc Bookmark bei: Newskick Bookmark bei: Newsider Bookmark bei: Linksilo Bookmark bei: Readster Bookmark bei: Folkd Bookmark bei: Yigg Bookmark bei: Digg Bookmark bei: Del.icio.us Bookmark bei: Reddit Bookmark bei: Simpy Bookmark bei: StumbleUpon Bookmark bei: Slashdot Bookmark bei: Netscape Bookmark bei: Furl Bookmark bei: Yahoo Bookmark bei: Spurl Bookmark bei: Google Bookmark bei: Blinklist Bookmark bei: Blogmarks Bookmark bei: Diigo Bookmark bei: Technorati Bookmark bei: Newsvine Bookmark bei: Blinkbits Bookmark bei: Ma.Gnolia Bookmark bei: Smarking Bookmark bei: Netvouz Information
TritonStyle Band-Booster
TritonStyle Kontakt
Facebook
Sitemap  |  Disclaimer  |  AGB  |  Kontakt  |  Links  |  Impressum  |  
TritonStyle Design TritonStyle Produktion TritonStyle Vertrieb