Du zeich­nest für dein Leben gern? Wie toll wäre es dann, wenn du mit dei­nen Zeich­nun­gen Bewe­gun­gen dar­stel­len könn­test? Mit dem Gra­tis-Gra­fik­pro­gramm Kri­ta erstellst du Ani­ma­tio­nen mit weni­gen Klicks. UPDATED führt dich in einem Schritt-für-Schritt-Tuto­ri­al durch die Erstel­lung.

Die fol­gen­den Anlei­tun­gen bezie­hen sich auf das Vor­ge­hen unter macOS Cata­li­na und die Ver­wen­dung von Kri­ta 4.2.9.

Schritt 1: Neu­es Pro­jekt erstel­len und Arbeits­be­reich aus­wäh­len

Willst du mit Kri­ta eine Ani­ma­ti­on erstel­len, musst du zuerst ein neu­es Pro­jekt anle­gen und anschlie­ßend den rich­ti­gen Arbeits­be­reich aus­wäh­len. So gehst du dabei vor:

Pro­jekt erstel­len und benen­nen

  1. Öff­ne Kri­ta.
  2. Kli­cke oben links in der Menü­leis­te auf Datei > Neu, um ein neu­es Pro­jekt zu erstel­len.
  3. Wäh­le im neu­en Fens­ter Benut­zer­de­fi­nier­tes Doku­ment aus. (Du hast hier auch die Opti­on, direkt das Ani­ma­ti­on Tem­pla­te zu ver­wen­den. Die damit ver­bun­de­nen Mög­lich­kei­ten brauchst du zu Beginn aller­dings nicht, um die grund­le­gen­den Funk­tio­nen ken­nen­zu­ler­nen.)
  4. Gib dei­nem Pro­jekt im Rei­ter Inhalt im Feld Name einen Titel und lege die Hin­ter­grund­far­be sowie die Anzahl der Ebe­nen für dei­ne Ani­ma­ti­on fest. Möch­test du zum Bei­spiel eine Land­schaft im Hin­ter­grund und eine Figur im Vor­der­grund unab­hän­gig von­ein­an­der ani­mie­ren, brauchst du min­des­tens zwei Ebe­nen.
  5. Wäh­le bei Hin­ter­grund die Opti­on Als Lein­wand­far­be. Das hat den Vor­teil, dass Kri­ta alle trans­pa­ren­ten Parts mit der gewähl­ten und nicht irgend­ei­ner belie­bi­gen Hin­ter­grund­far­be füllt, wenn Vide­os gespei­chert wer­den, da die­se nicht mit trans­pa­ren­tem Hin­ter­grund gesi­chert wer­den kön­nen.

6. Bestim­me anschlie­ßend im Rei­ter Abmes­sun­gen die Bild­grö­ße. Du kannst dabei ent­we­der ein vor­de­fi­nier­tes For­mat aus­wäh­len oder dei­ne eige­ne Bild­grö­ße bestim­men. Ach­te bei der Auf­lö­sung dar­auf, dass die­se nicht höher als nötig ist, da sonst die Datei sehr groß wird. Für die Dar­stel­lung dei­ner Ani­ma­ti­on auf einem Com­pu­ter­bild­schirm reicht eine Auf­lö­sung von 72dpi. Prak­tisch: Unten im Rei­ter Abmes­sun­gen kannst du nach dem Ein­tra­gen gleich sehen, wie groß die Datei vor­aus­sicht­lich aus­fal­len wird.

7. Kli­cke auf Erstel­len.

Arbeits­be­reich aus­wäh­len

Nun wird dir dei­ne neue “Lein­wand” ange­zeigt. Bevor du mit dei­ner Ani­ma­ti­on los­le­gen kannst, gilt es aller­dings noch, den Arbeits­be­reich zu bestim­men. Die­ser ist mit nur zwei Klicks aus­ge­wählt:

  1. Kli­cke oben rechts auf den But­ton Arbeits­be­reich aus­wäh­len.
  2. Wäh­le im Drop-down-Menü Ani­ma­ti­on.

Time­li­ne, Ani­ma­ti­on und Oni­on Docker kurz erklärt

Bei Kri­ta steht dir eine gan­ze Rei­he von Dia­log­fens­tern mit diver­sen Werk­zeu­gen zur Ver­fü­gung, mit denen du dei­ne Ani­ma­ti­on erstel­len und bear­bei­ten kannst. Die wich­tigs­ten Dia­log­fens­ter stellt dir UPDATED hier kurz vor.

Zeit­leis­te

Die Zeit­leis­te zeigt dir nicht nur die chro­no­lo­gi­sche Abfol­ge dei­ner Frames an, sie ist die Grund­la­ge für die Erstel­lung dei­ner Ani­ma­ti­on. Über sie kannst du auf jeder Ebe­ne von einem Frame zum nächs­ten wech­seln, Frames hin­zu­fü­gen, bear­bei­ten und ver­schie­ben.

Ani­ma­ti­on

  • In die­ser Tool­box fin­dest du alles, um dei­ne Ani­ma­ti­on abspie­len zu kön­nen.
  • Neben der übli­chen Start-/Stop-/Vor­lauf-/Rück­lauf-Schalt­flä­che kannst du rechts bei Start und Ende ange­ben, bei wel­chem Frame die Wie­der­ga­be star­ten und bei wel­chem sie enden soll.
  • Unter Play Speed kannst du die Wie­der­ga­be­ge­schwin­dig­keit ein­stel­len und über die Bild­wie­der­hol­ra­te bestim­men, wie vie­le Frames pro Sekun­de (fps) abge­spielt wer­den sol­len. 24 fps sind hier ein guter Richt­wert. Mehr machen für das Auge kei­nen gro­ßen Unter­schied. Weni­ger las­sen die Ani­ma­ti­on rucke­lig erschei­nen.
  • Das gro­ße Käst­chen links oben zeigt dir den Frame an, in dem du dich gera­de befin­dest. Du kannst dar­über aber auch von einem Frame zum nächs­ten wech­seln, was sich in der Zeit­leis­te wider­spie­gelt.

Oni­on Skins

Inte­griert im Ani­ma­ti­on-Modul fin­dest du zudem den Oni­on Skins-But­ton, der sei­nem Namen alle Ehre macht und wie eine Zwie­bel aus­sieht. Über ihn kannst du dir die Zeich­nun­gen der vor­he­ri­gen und fol­gen­den Frames auf dei­ner aktu­el­len Skiz­ze mit anzei­gen las­sen. Ein prak­ti­sches Fea­ture, da sich bei einer Ani­ma­ti­on die auf­ein­an­der­fol­gen­den Zeich­nun­gen immer nur ein wenig von­ein­an­der unter­schei­den und du so bes­ser sehen kannst, wel­chen Strich du als Nächs­tes set­zen soll­test.

Vor­he­ri­ge Frames wer­den dabei rot und fol­gen­de grün dar­ge­stellt. Du kannst die Far­ben aber auch ändern, wenn du möch­test. Wie vie­le vor­he­ri­ge und wie vie­le fol­gen­de Frames auf dei­ner aktu­el­len Skiz­ze ange­zeigt wer­den sol­len, bestimmst du über das Ankli­cken des Oni­on Skins-But­tons und das Aus­wäh­len der gewünsch­ten Bal­ken. Eben­so, wie stark die Deck­kraft sein soll, indem du die Höhe der Bal­ken fest­legst.

Ach­tung: Die Mög­lich­keit, dir vor­he­ri­ge oder fol­gen­de Frames in dei­ner aktu­el­len Skiz­ze anzei­gen zu las­sen, hängt davon ab, ob du auf einer Ebe­ne bereits zwei Frames erstellt hast. Dann erscheint in der Zeit­leis­te neben der jewei­li­gen Ebe­ne eine klei­ne Glüh­bir­ne. Ein­fach ankli­cken und schon siehst du dei­ne vor­he­ri­gen und fol­gen­den Skiz­zen.

Je mehr Frames du bereits gefüllt hast, des­to unüber­sicht­li­cher kann die Anzei­ge dabei wer­den. Über­le­ge also, wie vie­le Frames vor­her und nach­her du dir anzei­gen las­sen willst.

Schritt 2: Figu­ren zeich­nen Part 1 – Kör­per und Kopf

Nun kannst du dich an dei­nen ers­ten Frame, sprich dein ers­tes Bild machen. Ange­nom­men, du möch­test eine win­ken­de Figur zeich­nen, kannst du fol­gen­der­ma­ßen vor­ge­hen:

  1. Wäh­le die gewünsch­te Ebe­ne aus und kli­cke in der Zeit­leis­te auf den ers­ten Frame die­ser Ebe­ne. Wird die gewünsch­te Ebe­ne nicht in der Zeit­leis­te ange­zeigt, genügt ein Rechtsklick auf die Ebe­ne und die Aus­wahl von In Zeit­leis­te anzei­gen.
  2. Wäh­le im Werk­zeug­kas­ten den Frei­hand­pin­sel, wenn du frei skiz­zie­ren und kei­ne der vor­han­de­nen Form­vor­la­gen wie Kreis, Vier­eck oder Gera­de nut­zen möch­test.

Tipp: Per Rechtsklick auf dei­ne Lein­wand kannst du schnell zwi­schen diver­sen Zei­chen­werk­zeu­gen wie Pin­sel, Blei­stift und Radier­gum­mi wech­seln. Eben­so kannst du hier die Zei­chenfarbe aus­wäh­len. Wel­che Zei­chen­werk­zeu­ge dir bei Kri­ta gene­rell zur Ver­fü­gung ste­hen, erfährst du im UPDATED-Rat­ge­ber Kri­ta-Tuto­ri­al: Ein­füh­rung zur Gra­tis-Gra­fik­soft­ware. 

3. Zeich­ne nun zunächst den Part dei­ner Figur, der beim Lau­fen weit­ge­hend sta­tisch bleibt: Kopf und Kör­per. Ein Kreis als Kopf sowie eine davon aus­ge­hen­de gera­de Linie nach unten – schon hast du die Grund­la­ge für alle wei­te­ren Bil­der geschaf­fen. 

Ani­miert ist die Gra­fik damit natür­lich noch nicht. Das geschieht erst durch das Hin­zu­fü­gen wei­te­rer Frames. 

Key Frames in der Ani­ma­ti­on und bei Kri­ta

In der klas­si­schen Ani­ma­ti­on wer­den zunächst Key Frames – sprich Schlüs­sel­bil­der – ange­legt und anschlie­ßend die Lücken dazwi­schen mit wei­te­ren Bil­dern gefüllt. Im Fal­le einer win­ken­den Figur kön­nen das bei­spiels­wei­se die äuße­ren Enden und die Mit­te der Wink­be­we­gung sein.

Lass dich dabei nicht davon irri­tie­ren, dass alle von dir erstell­ten Frames bei Kri­ta als Key Frame bezeich­net wer­den. Das Prin­zip, sich Eck­punk­te anzu­le­gen und dann dazwi­schen wei­te­re Bil­der zu inte­grie­ren, kann dir so oder so bei dei­ner Ani­ma­ti­on hel­fen.

Bei frei­en, also nicht von dir bear­bei­te­ten Frames zwi­schen den Key Frames geht Kri­ta übri­gens davon aus, dass die­se wie der vor­he­ri­ge Key Frame gefüllt sind.

Schritt 3: Neue Frames hin­zu­fü­gen und ver­schie­ben

Um die Ani­ma­ti­on wei­ter zu gestal­ten, gehst du fol­gen­der­ma­ßen vor:

Frames hin­zu­fü­gen

Wei­te­re Frames fügst du hin­zu, indem du in der Zeit­leis­te mit der rech­ten Maus­tas­te auf einen frei­en Frame klickst.

Anschlie­ßend kannst du ent­we­der via Crea­te Blank Frame einen neu­en Frame mit lee­rer Lein­wand erzeu­gen. Oder aber über Crea­te Dupli­ca­te Frame den Inhalt des vor­he­ri­gen Frames kopie­ren.

Das hat den Vor­teil, dass du nicht voll­kom­men neu zeich­nen musst, son­dern den Part weg­ra­die­ren und neu zeich­nen kannst, den du ändern möch­test.

Frames ver­schie­ben

Stellst du zwi­schen­durch fest, dass ein Frame nicht an der Stel­le ist, an der du ihn haben möch­test, kannst du ihn ganz leicht via Drag & Drop ver­schie­ben.

Dafür klickst du ein­fach mit der lin­ken Maus­tas­te auf den jewei­li­gen Frame, hältst die Maus­tas­te gedrückt und ziehst den Frame dort­hin, wohin er soll.

Das Glei­che kannst du auch mit meh­re­ren Frames auf ein­mal tun. Mar­kie­re dafür die gewünsch­ten und zie­he sie nach dem glei­chen Prin­zip an die anvi­sier­te Stel­le. Ach­te dabei aber unbe­dingt dar­auf, dass alle Frames oran­ge sind, die mit­ver­scho­ben wer­den sol­len, denn nur die­se wer­den auch tat­säch­lich mit­ge­nom­men.

Schritt 3: Figu­ren zeich­nen Part 2 – Extre­mi­tä­ten

Jetzt kannst du mit dem win­ken­den Arm star­ten. Da der Unter­arm beim Win­ken eben­falls sta­tisch blei­ben kann, kannst du mit ihm begin­nen. Zie­he dafür eine Linie von dem Punkt, an dem sich Kopf und Kör­per tref­fen, nach links oder rechts unten.

Anschlie­ßend kannst du die ers­ten Key Frames erstel­len.

4. Füge dafür zum Bei­spiel an Posi­ti­on 6 und 12 je einen neu­en Frame via Crea­te Dupli­ca­te Frame hin­zu. Hin­weis: Die Zäh­lung der Frames beginnt bei 0.

5. Bei Frame 0 kannst du vom Ellen­bo­gen aus den Unter­arm samt Hand so weit links wie bei der Wink­be­we­gung gewünscht zeich­nen, bei Frame 12 so weit rechts wie gewünscht und bei Frame 6 die Posi­ti­on in der Mit­te.

Ver­giss nicht: Sobald du zwei Frames erstellt hast, kli­cke auf die klei­ne Glüh­bir­ne auf dei­ner Ebe­ne, um dir dank Oni­on Skins die vor­he­ri­gen und fol­gen­den Frames auf dei­nem aktu­el­len mit anzei­gen zu las­sen.

Wür­dest du die Ani­ma­ti­on jetzt schon abspie­len, wür­de sie noch sehr ruckeln. Über das Hin­zu­fü­gen wei­te­rer Frames zwi­schen dei­nen bis­he­ri­gen Key Frames kannst du die Lücken fül­len und die Ani­ma­ti­on flüs­si­ger wer­den las­sen.

Dafür ein­fach wie­der über Crea­te Dupli­ca­te Frame wei­te­re Frames erzeu­gen, die vor­he­ri­ge Posi­ti­on des Unter­arms weg­ra­die­ren und ihn samt Hand Stück für Stück ver­rü­cken.

Schritt 4: Frames kopie­ren

Du kannst Frames nicht nur auf die bereits beschrie­be­ne Art und Wei­se dupli­zie­ren, son­dern auch anders kopie­ren. Der Unter­schied: Du klickst nicht direkt mit der rech­ten Maus­tas­te auf den lee­ren Frame, den du fül­len möch­test, und erzeugst via Crea­te Dupli­ca­te Frame eine Kopie des vor­he­ri­gen Frames.

Statt­des­sen klickst du mit der rech­ten Maus­tas­te auf den bereits exis­tie­ren­den Frame, den du kopie­ren möch­test, und wählst In die Zwi­schen­ab­la­ge kopie­ren.

Anschlie­ßend suchst du dir den Frame aus, wo die Kopie ein­ge­fügt wer­den soll, und wählst per Rechtsklick Aus Zwi­schen­ab­la­ge ein­fü­gen aus. Möch­test du meh­re­re Frames auf ein­mal kopie­ren, mar­kierst du die­se vor­her und gehst dann wie beschrie­ben vor.

Beson­ders prak­tisch bei einer Wink­be­we­gung, denn bis­lang winkt der Arm nur von der einen zur ande­ren Sei­te, aber nicht wie­der zurück. Für die Rück­wärts­be­we­gung kannst du ent­we­der den Unter­arm samt Hand wie­der Stück für Stück neu zeich­nen. Oder aber du kopierst die Frames von der Hin­be­we­gung einen nach dem ande­ren und fügst sie in umge­kehr­ter Rei­hen­fol­ge in dei­ner Zeit­leis­te ein.

Klickst du nun auf den Play-But­ton winkt dei­ne Figur hin und zurück.

Wei­te­re Ebe­nen für dei­ne Ani­ma­ti­on

Möch­test du wei­te­re Ebe­nen wie bei­spiels­wei­se einen Hin­ter­grund mit dahin­zie­hen­den Wol­ken für dei­ne win­ken­de Figur ani­mie­ren, wählst du in der Zeit­leis­te die zwei­te Ebe­ne aus und gehst wie gewohnt vor, sprich du erstellst Stück für Stück dei­ne Frames.

Prak­tisch, wenn du zum Bei­spiel die Wol­ke immer nur ein biss­chen wei­ter nach links oder rechts ver­rü­cken möch­test: Wäh­le in der Werk­zeugleis­te – oder über den Short­cut T – das Ver­schie­bungs­werk­zeug, kli­cke auf dei­ne Wol­ke und ver­schie­be die­se dann an die gewünsch­te Stel­le.

Schritt 5: Kri­ta-Ani­ma­ti­on expor­tie­ren

Möch­test du dein Werk nach Voll­endung spei­chern, gehst du fol­gen­der­ma­ßen vor:

Gehe im Menü auf Datei > Ani­ma­ti­on ren­dern. Anschlie­ßend kannst du ent­schei­den, ob du dei­ne Ani­ma­ti­on als Bild­se­quenz, Video oder bei­des expor­tie­ren möch­test.

Wich­tig ist, dass du in bei­den Fäl­len den Spei­cher­ort angibst. Für das Video unter Video Loca­ti­on, für die Bild­se­quenz unter Bild­adres­se. Das Video braucht zusätz­lich den Datei­pfad zu FFM­peg. Ist die­ser Audio- und Video-Codec noch nicht auf dei­nem Rech­ner instal­liert, hole dies nach und gib den Datei­pfad unter FFM­peg an.

Drückst du nun auf Okwird dei­ne Ani­ma­ti­on expor­tiert – und das kann etwas dau­ern. Beim Export als Video gene­riert das Pro­gramm schließ­lich für jeden Frame ein Bild und fügt die Bil­der anschlie­ßend zu einer Sequenz zusam­men. 

Ani­ma­tio­nen ein­fach und schnell erstel­len

Mit Kri­ta kön­nen auch Anfän­ger spie­lend leicht Ani­ma­tio­nen erstel­len. Bei einem so rudi­men­tä­ren Bei­spiel wie in die­ser Anlei­tung musst du es natür­lich nicht belas­sen. Dank der Mög­lich­keit, ver­schie­de­ne Ebe­nen, Zei­chen­in­stru­men­te und vie­le wei­te­ren Optio­nen zu ver­wen­den, sind dei­ner Fan­ta­sie kei­ne Gren­zen gesetzt.

Disclaimer Die OTTO (GmbH & Co KG) übernimmt keine Gewähr für die Richtigkeit, Aktualität, Vollständigkeit, Wirksamkeit und Unbedenklichkeit der auf updated.de zur Verfügung gestellten Informationen und Empfehlungen. Es wird ausdrücklich darauf hingewiesen, dass die offiziellen Herstellervorgaben vorrangig vor allen anderen Informationen und Empfehlungen zu beachten sind und nur diese eine sichere und ordnungsgemäße Nutzung der jeweiligen Kaufgegenstände gewährleisten können.