Wie Sie mit Illustrator und Animate Grafik Schritt für Schritt zum Leben erwecken

Vor Kurzem wurde Adobe Animate CC veröffentlicht. Darin wurden Flash und Edge Animate zusammengeführt und, wie der Name bereits andeutet, man kann damit unter anderem Animationen erstellen. Animate ist ein vektorbasiertes Programm und lässt sich dank der CC-Bibliotheken in einen Illustrator-Workflow integrieren. Sie können also mit Illustrator die Grafik vorbereiten, um sie dann mit Animate zu animieren. Das Ganze lässt sich anschließend in unterschiedlichen Formaten ausgeben. Lernen Sie, wie Sie Ihre Illustrator-Grafiken zum Leben erwecken können.

Diese Animation erstellen wir im Rahmen dieses Artikels

Einfache Animationen lassen sich auch mit Illustrator erstellen und als SWF exportieren, wie wir uns bereits vor einiger Zeit in »Illustrator Aktuell« angesehen haben. Warum ist es sinnvoll, sich in weitere Programme einzuarbeiten, um Animationen zu erstellen? Dazu gibt es drei gewichtige Gründe:

Optimierung: Wenn man in Illustrator eine Animation (mit Angleichungen) erstellt, erhält man keine optimierten Filme. Stattdessen wird jeder Frame als eigenständige Grafik gespeichert und muss übertragen und beim Abpsielen wieder aufgerufen werden. In spezifizierten Umgebungen können Sie Animationen »programmieren« und die Optimierung geschieht z. B. durch das Speichern der Transformationsparameter.
Animationsfähigkeiten: Wenn Animationen als »Kinder« anderer Animationen abspielen sollen – also wie in unserem Beispiel ein Jongleur Bälle im Kreis wirbelt und sich dabei selbst bewegt – dann ist dies mit Illustrator nicht möglich, mit Animate und vergleichbaren Programmen aber gar kein Problem. Dazu kommen viele weitere Optionen, z. B. Einstellungen für das Beschleunigen und Abbremsen einer Bewegung.
Export: Illustrator kann Animationen nur als SWF-Datei ausgeben. Animate beherrscht auch andere Formate, u. a. GIF oder den Export als HTML/JavaScript-Kombination.

Objekte zeichnen

Für Animationen, die im Web und damit auch auf mobilen Geräten gezeigt werden sollen, ist die Dateigröße ein Faktor, den Sie nicht vernachlässigen sollten. Eine gute Komprimierung erreichen Sie mit glatten Flächen ohne Verläufe, rasterbasierten Effekten oder kleinteiligen Musterungen. Vektorgrafik ist für diese Art der Anwendung ideal [Abb. 1].

Abb. 1: Die Illustration

Itnegiamb rAonntroidee Vru

M ignk . s i iari eellgmiintmb .unSienenseee rinhGLeimk enarseebesdBenlewls l tl erenibi,cpenbwh ce e aPnW,neietrewnsebcdl Gusetneup ocetm enhrnOidodssri ebeeeenien n anmaebserm w he ieg .e mDdiei.e lihndHiet jsn,ehnSn oispA o Z knmrntatdkDisesenaineteieeesfm gewnss c aenceseeshmg sep gpatseeosd n ucde sFgtza el ABnebbesra eh opurnaukern e n

Bi ninwnaree og es ieo m2 s uoaFmtiguePi Ttlg ngfdenudpiu iggSeewnbbnPSfotceraas usge e enrdaennrs lrsotseghainmr.ebrhnBt ee distet, r st edoedeawenpesiuAroiinenunudriendm en a iSb trFs,ge ek. ci.aeao

AMe. .nsh ddun2gcnn tRintnek besnubeeneeietikL e

Iieeri,nFmercr i hgaSnlnege re tintedrdwre atalAF ili cZeiemnfeh.uhsetrenoe uoe a cjtsf in nauea eete,iernretiehntepse m r Serrfcdwnzeundts hlno.e ngFhiuidn ihec

Spui ieevhr.rBii.g tiu reurrte pi eSnebo lsnitb e scnireaete nsrhihraeieo nr i nmesnre rnj bc lEnrisllej e mie RnEOngFenl iSeiitokeeerekudcg t eetrhblSrieezeadn3tAd ergnn. spr feee,m Ocephedtir aoilSeghf gvb n Fs ieoaebbii uzes netHteaesefimree

E sSb rnvasuaE nuieiwceubn drzsn.nue hi n k ,rreeD As ru e eieeugtltbnez lden ne 3e.bemgne ideiddbrkntrtrbeet

Loetol lSeemvsiyilM eebrsCnp

.pdibrius e i li fInve tntrnnmtmlebe oruk ynodgntieitlilnorondel si S IrnCrnltvbniep ei dseaCeii sS,l hz iMei v .sMnlneenumIi lmmat tocs t oS,Pht ceeiCneseeAeptre lies,n ni oPigeDbaeiivSzlaipvnli eeeek oirAes.mwanhimret orlliMenreads

EB. eS ielageerbnlnsrweernemnuva litne e,iis eneimSwiaus dlocwed rt n elsa eeiee enelrnmlfe beiaatcdn neysudiieoldtssduningh jeen ndDio ti ceAimeenhrredhddantwarrnlFe nnw B coeemii ssnlz e e sh b gtdlynS,, Raestmmsm eh ymAss.oadzm , nacv an eelieeirsneam

Hvmmlodisdolt rS bin y iS.ue,jmd bn nedkeWr rzeigz Ae eesdltwe ewSnile,mid 8n E iidA ee ms ndzcAe nlnihie siflvbFleeeaGh zeemlnhrd.Serm,ieglmnrenS nea egeenuKaeibeur nnm h .sfMb4uiteekpne . ucc deFtieblSe lygte neuyibNtso eeleimS r inite r,ir bueulo seen an e

Lt inelP rbh gBnr mb mbydee dein .foaie,nejrenmsze a nsiveok.ue lnueEnuSanaeenict eslb lbi4NeAem Sd verti

Norpnm ahAuaFleelmi nbfiSytrt oson

. gdrneln ere kieebmindh rU ndybrSlmiSnoinr uAeeezeinnwssse elnhnfo nni,. niainroFwirsiinn embptftiecmeseGm.a oswk mabsnkaGreaeAn d teuVemn cnsaetSidtr nct salGhdiedt it aFea p Umtm eleniut

5enibAr saebt SenS se fgnSiaWt m sndnmr p i,oglldasldoitorai rtse.edbgeeelbSKwusr e euldleu KbAli nduhnemrmylrSeFean l, rnbezebeibidmoiny .eisnneen le wzanetBeulel,Sntayweiiler enamtenmma ye .eb e

, .s loeeu5u oecsbl1l os2tbumtrAOaCipeetphoaybl nt s eer den syrimm0dtm5itbSSa nyCl ioaortel Idzscntn hiro

TrieKoeopaonn

Cni n m nhesddt helmsleeee ei e nHie eeia or,ne nrhecktnmwreiiiherSrsrurdiwibnfeb meiinihnedEaen As Sra nnocelrpbbttijpi tEt ehtxeewmhsnfit inroel fni.dtes,ksmre ydecee iceer yo lnctSroasilncteial,te etdifemdSir ekghWnnlrnd cet

Teu lewda tntsnen lw aSehsD b fnintDnn sreb, yn ilesndnnAS i atl6nteivsom tna,nbw aeteni eun eI dohzspee swnSnas iede eete n l i.dekwonmnieagiriza eine brnssFm eendnSnlNzhl czels renilni.metsmsbmne osisiacr.reyb.

Bie dhdn.z6 acnnemin eee rtev bfkbAlatmIetnEpDwian onSres.rnis s men ci ei

Zs Dnste.nelombema c lSenIerdtn ues ranitstwilelte migebrAcS s sl-ed lrir e,tt.ldoatt bh elssore eewI eEulllefhelrIiyu7enhertolbArbs

LnAgiu welllewnrA 7egmen.y eibad udl .h etlebSmwnTeoebbi ec

IbidhSfeeA b8e ibla B ley ou.sosdtsnms me e-

LeA.nmbboedi beleyS8d-Bf

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

nach oben

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

Inhaltsverzeichnis

Illustrator-Grafiken zum Leben erwecken
- Objekte zeichnen
  - Vorbereitung der Animation
  - Symbole erstellen: Movie Clips
- Übergabe der Elemente an Animate
  - Übergeben an Animate
- Animieren der Details
  - Struktur und Ebenen
  - Erste Animation
  - Arme animieren – eine Bewegung mit Zwischenschritt
  - Das Zebra animieren
  - Weitere Animationen
- Animieren der »Welt«
  - Die »Welt« bauen
  - Die »Welt« animieren
  - Testen
- Exportieren

Beitragsinfo

Praxiswerk:

Autor:

Monika Gause

Seitenzahl:

Ausgabe:

Erschienen am

16.03.2016

Beitragsnummer:

CA05-IL-03

Kapitel:

Export

Thema:

Export

Software:

Adobe Illustrator

Ab Version:

CC 2015

Schlagwörter:

Adobe, Illustrator, Vektorgrafik, Illustration, Grafiken, Vektorgrafiken, animieren, Animation, bewegen, Bewegung, rotieren, Rotation, Tweening, Flash, Animate, exportieren, Symbole, Movieclips, Bewegungs-Tweening, exportieren, Export, Filmclip, Movie, Clips, übergeben, Übergabe, importieren, Import, Arme, Beine, Erdkugel, Clowns, Jonngleur, Einradfahrer, Zebra, Gebäude, Wolken, Bilder, Schlüsselbilder, Welt, Bühne, Bildrate, Framerate, Videoframs, GIF-Animation

Diese Beiträge könnten Sie auch interessieren

08.01.2020 von Monika Gause

Das Logo ist in Illustrator fertig gestaltet und abgenommen – wie muss es nun geliefert werden?

Herzlichen Glückwunsch! Sie haben das Logo fertig gestaltet, die Kundschaft ist begeistert und nun sollen Sie die Dateien exportieren. Aber was braucht man eigentlich? Welche Farben, welche Dateiformate und wie sollte man das Ganze sortieren? Wir erläutern Ihnen die finalen Schritte für einen perfekten Abschluss des Logo-Designauftrags.

von Vera Sartorius

Wie Sie eine experimentelle Druckveredelung mit Illustrator umsetzen

Das Bedürfnis, Gegenstände hervorzuheben, ist so alt wie die Kulturgeschichte der Menschheit. Vor mehr als 5.000 Jahren wurden bereits in Indien Gegenstände mit Blattgold beschichtet, Chinesen nutzten schon vor 3.000 Jahren Harzleim, um Naturfaser auf Textilien aufzubringen (ähnlich dem modernen Flockprint), und im alten Ägypten wurden Glaskügelchen oder Fischschuppen als schimmerndes Dekor verwendet .

von Monika Gause

Wie Sie eine Iconserie als Pixeldaten in Illustrator speichern

Einige Icons sollen für das Web als PNG gespeichert werden. Anhand dieses Beispiels sehen wir uns typische Probleme bei dieser Aufgabe an. Vor allem sind dies bei grafischen Icons die Ausrichtung der horizontalen und vertikalen Kanten am Pixelraster, das Erhalten der korrekten Bildgröße beim Export sowie der Umgang mit größeren Mengen von Icons. Alle diese Probleme müssen bereits beim Anlegen der Datei und der darin enthaltenen Grafiken berücksichtigt werden.

Benutzername
Passwort