Freitag, 7. Januar 2011

Tutorial für Gimp - An die Arbeit!

---
Jetzt, wo wir alle Fenster offen haben, sind wir bereit zum Arbeiten. Wir erstellen ein neues Bild mit Datei --> Neu oder Strg+N.
Es erscheint dann folgender Reiter:
Die Standardeinstellung ist bei mir "Breite: 640 (Pixel)" und "Höhe: 400 (Pixel)", manchmal kann es auch 400 x 300 sein. Wenn ihr rechts neben "Vorlagen" klickt, erhaltet ihr, wie der Name sagt, einige Vorlagen:
Hier sind die ersten vier Angaben jeweils Pixel x Pixel, also Breite (mal) Höhe der verschiedenen Desktophintergründe. Die folgenden Vorlagen namens "A3 (399 ppi)" bis "US-Legal (300 ppi)" sind für Papier, die Zahlen in Klammern geben die pixel per inch, also die Punktdichte an (ist aber irrelevant). So könnt ihr euch auch gerne ein neues Klopapier designen:
Aber das haben wir nicht vor, wir fangen mit einem 100 x 100 px (Pixel) großen Bild an - die erweiterten Einstellungen brauchen wir nicht zu beachten - und klicken auf "OK":

Das Bild erscheint dann in eurem GIMP-Fenster und dessen Name ändert sich (vielleicht) auf "Unbennant-1.0 (RGB, 1 Ebene) 100x100 - GIMP". Im Ebenen-Fenster rechts daneben erscheint dann die Ebene "Hintergrund", die es bei jedem Bild, egal ob Animation oder nicht, vorhanden ist, noch ist sie aber weiß, da wir ein weißes Bild vorliegen haben, bemalen wir das Bild, ändert sich auch die sog. "Vorschau" des Bildes (Das weiße Quadrat links neben der Aufschrift "Hintergrund").

Nikita will mit Gimp Animationen erstellen, also werde ich euch das gleich zeigen. Wie jedes andere Bild auch, starten wir eine Animation mit einem Basis-Bild (jedenfalls nenne ich das jetzt so). also malen wir mal schön etwas auf den Hintergrund. Ihr klickt den Stift im Werkzeugkasten an:
und malt dann irgendetwas auf euer Bild. Jetzt ist  die Durchschnittsdicke eures Stifts allerdings noch 11px, aber - tadah! - da kommen die Werkzeugeinstellungen ins Spiel. Ihr klickt dahin, wo ich hingeklickt habe, nämlich auf den schwarzen Kreis. Es öffnet sich ein kleines Menü, wo ihr die sog. "Pattern" des Stifts ansehen könnt, also was für Strichformen der Stift macht, wenn ihr auf dem Bild irgendwohin klickt. So könntet ihr euer Bild mit z.B. Efeugirlanden oder Paprikas ausschmücken (wozu man letzteres brauchen könnte, ist mir aber unklar).

Das "Pattern", auf dem mein Cursor gerade liegt, ist der mit 1px Durchmesser, mit dem ich am liebsten Bilder bearbeite. Dieser und die nächsten 9 sind jeweils kreisförmig (wie man sehen kann), nehmen aber an Größe zu. Wenn ihr einen der Cursor anklickt, verschwindet das Menü und das ausgewählte Pattern erscheint jetzt im Quadrat, rechts erscheint der Name davon, bei mir wäre das "Circle (01)", die Kreise 01, 03 und 05 sind allerdings keine richtigen Kreise, sondern Rechtecke.

Jetzt malen wir ein Bild. Malt auf die Hintergrund-Ebene (also das Bild), was ihr wollt. Dies wird euch vereinfacht, indem ihr auf der Tastatur Steuerung gedrückt haltet und dabei mit dem Mausrad dreht und somit weiter in das Bild hinein zoomt oder heraus (je nachdem in welche Richtung ihr dreht). Wenn ihr kein Mausrad habt, gibt es diese Funktion auf im Werkzeugkasten:
Je nachdem, was ihr in den Werkzeugeinstellungen eingestellt habt, wird beim Klick auf das Bild dieses entweder vergrößert oder verkleinert (dafür braucht ihr jetzt aber kein Bild, oder?).
Ich habe mich für ein Strichmännchen was kämpft entschieden, weil das das einzige war, was einer anderen Person auf die Schnelle eingefallen ist (ich weiß es sieht hässlich aus, aber für das Tutorial reichts!).
Speichert jetzt sicherheitshalber schoneinmal ab.
Wichtig: wenn ihr mit mehreren Ebenen arbeitet, speichert das Bild immer im ".xcf"-Format, damit ihr bei späterem Öffnen die Ebenen evtl. nocheinmal verändern könnt. Das .xcf-Format wird außerdem automatisch angehängt,  falls ihr keine andere Dateiendung eingetippt habt.
Wenn ihr einen Fehler beim Bilderstellen gemacht habt, könnt ihr natürlich Strg+Z (für Rückgängig) drücken, ihr könnt allerdings auch den Radierer benutzen:
Geht dann in den Werkzeugeinstellungen sicher,  dass ihr bei "Harte Kanten" ein Häkchen gesetzt habt, um besonders präzise arbeiten zu können. Hier gibt es die selben Pattern wie beim Stift, ich radiere am liebsten mit 1px. Zum Radieren müsst ihr einfach auf den/die betreffenden Pixel im Bild löschen, die ihr weg haben wollt,  dabei beachten müsst ihr, dass nach dem Radieren dort die Hintergrundfarbe oder bei einer Ebene, die nicht die Hintergrundebene ist, die darunter liegende Ebene sichtbar ist.

Die Farbe eures Stifts könnt ihr ändern, indem ihr im Werkzeugkasten auf auf eines der beiden Rechtecke klickt:
Das zu Beginn schwarze, große Rechteck stellt die Vordergrundfarbe dar, das weiße große Rechteck die Hintergrundfarbe, also welche Farbe die Hintergrundebene hat und, wenn ihr auf dieser radiert, was dann erscheinen wird.
Wenn ihr auf den geknickten Doppelpfeil rechts oben drückt, werden die beiden Farben vertauscht, also die vorherige Vordergrundfarbe wird Hintergrundfarbe und umgekehrt.
Beim Klicken auf das Symbol mit dem schwarzen und weißen Quardrat erscheinen wieder die Farben wie zu Beginn, also schwarz als Vordergrund- und weiß als Hintergrundfarbe.

Wenn ihr nun auf eines der großen Rechtecke geklickt habt, erscheint folgendes Fenster:
Hier könnt ihr mit den Farben rumspielen und euch eine schöne heraussuchen. Die letzten 12 Farben, die ihr verwendet habt, sind in den Rechtecken unter der HTML-Notation erkennbar. Zu Beginn sind dort keine Farben, aber da ich das Programm schon länger besitze, sind sie da. wenn ihr mit eurer Farbe, die ihr ausgewählt habt, einverstanden seid (ihr seht sie im breiten Rechteck neben "Aktuell", im vergleich zur vorherigen Farbe im Kasten darunter), klickt auf OK und alles, was ihr jetzt malt, wird in dieser Farbe zu sehen sein.

Wenn ihr eine Farbe, die ihr schon einmal benutzt habt, wieder aufnehmen wollt, könnt ihr auch einfach die Pipette benutzen, auf die alte Farbe klicken, dann wieder auf das Stift-Werkzeug und mit der neuen-alten Farbe weitermalen:

Um gerade Linien zu malen, aber nicht jeden Pixel einzeln setzen zu müssen, könnt ihr auch einmal einen Pixel setzen und dann Shift drücken (die Taste oberhalb von Steuerung), wenn ihr dann das nächste mal wohin klickt, wurde vom ersten zum zweiten Punkt eine Linie gezogen. 
---
Um jetzt mit der eigentlichen Animation zu beginnen, benötigen wir eine neue Ebene, da die Veränderungen, die während einer Animation auftreten, immmer in den unterschiedlichen Ebenen aufeinander gelagert werden.
Eine neue Ebene erstellen wir, indem wir im Ebenen-Fenster einen Rechtsklick auf die Hintergrundebene ausüben und dann auf "Neue Ebene" klicken.
Danach öffnet sich folgendes Fenster:
Die Standardeinstellungen können wir so lassen und klicken auf OK. Im Ebenenfenster seht ihr nun eine zweite Ebene namens "Neue Ebene" (oder so ähnlich). Per Doppelklick könnt ihr, falls erwünscht, den Namen der Ebene ändern, es ist aber nicht notwendig, - ich habe meine "Schwertarm" genannt. In der Vorschau des Ebenenfensters seht ihr bei Schwertarm jetzt noch hell- und dunkelgraue Quadrate. Wenn ihr auf das Auge ganz links neben der Vorschau des Hintergrunds klickt, ist die Hintergrundebene nicht mehr sichtbar,  alle anderen Ebenen schon. Da ich in "Schwertarm" noch nichts gemalt habe, sieht das Bild jetzt so aus:
Ihr braucht euch aber keine Sorgen zu machen, das sieht man später nicht mehr. Wir klicken nochmal das Auge beim Hintergrund an, um die Hintergrundebene wieder sichtbar zu machen.
Ich will mein Strichmännchen dadurch animieren, dass es den Arm mit dem Schwert immer hoch und runter bewegt. Dazu müssen wir den Arm zunächst mit dem Stift verdecken. Geht sicher, dass ihr die Hintergrundfarbe der Hintergrund-Ebene diesmal als Vordergrundfarbe aufgenommen habt (Achtung, wenn ihr hier den Pipetten-Trick anwenden wollt, müsst ihr erst in die Hintergrund-Ebene gehen, und zwar, indem ihr im Ebenenfenster auf "Hintergrund" klickt, sodass es (blau) markiert ist).
Den Arm verdecken wir in der Neuen Ebene, sodass es so aussieht (ich habe auf 200 % herangezoomt):
Rechts in der Ebenenvorschau könnt ihr den getätigten Strich ebenfalls sehen. Übrigens, wenn ihr in die Titel-Leiste des GIMP-Fensters mit dem Bild darin seht, werdet ihr ein "*" (Sternchen) am Anfang sehen, dieses symbolisiert euch, dass ihr seit dem letzten Speichervorgang Änderungen am Bild vorgenommen habt.
Jetzt werden wir einfach einen neuen Arm mit Schwert hinmalen, allerdings diesmal etwas weiter unten, damit man einen Unterschied erkennen kann:
Wenn ihr alles richtig gemacht habt, könnt ihr jetzt schonmal eine kleine Vorschau eurer Animation sehen, indem ihr neben der Neuen Ebene (bei mir "Schwertarm") auf das Auge klickt, ihr müsstet abwechselnd das Bild im alten und im neuen Zustand sehen können, bei mir sieht das also so aus:
Das hier oben wäre schon eine Animation, doch ich werde noch einen dritten Schritt hinzufügen, bei der Arm noch etwas weiter herunter zeigt. Dabei gehen wir genauso vor wie bei der Schwertarm-Ebene: Rechtsklick auf die oberste Ebene (die, die im Ebenen-Fenster zuerst angezeigt wird) --> Neue Ebene. Wieder überdecken wir den Arm mit dem Schwert und malen einen neuen darüber:

Mit den drei Animationsebenen sind wir für den Anfang mal zufrieden und hören auf. Jetzt speichern wir. Erst einmal mit Strg+S die .xcf-Datei und dann Strg+Shift+S, um das Bild unter einem anderen Namen zu speichern, diesmal hängen wir statt .xcf ".gif" an.
Wichtig: Alle Animationen und Bilder, die im Hintergrund transparent sind, müssen mit .gif gespeichert werden (oder eben .xcf), um die Transparenz, bzw.  die Ebenen zu erhalten! 
Wenn ihr  den Namen der Datei (bei mir strichmaennchen.gif) eingetippt und auf OK geklickt habt, erscheint das folgende Fenster, bei dem wir "Als Animation speichern" anklicken, da wir eben eine Animation wollen, und kein Bild, somit werden die einzelnen Eben erhalten und NICHT zusammengefügt:

Die andere Einstellung werden wir so lassen wie sie ist und auf "Exportieren" klicken. Danach erscheint ein weiteres Fenster, nämlich dieses hier:
Als GIF-Kommentar könnt ihr eingeben was auch immer ihr wollt, ich könnt das Häkchen aber auch wegnehmen und den Kommentar ganz weglassen, ich lasse dort immer das Voreingestellte. Wenn ihr wollt, dass die Animation nur ein einziges Mal abgespielt wird, nehmt ihr den Haken bei "Unendlich-Schleife" weg, aber wir lassen ihn da.
Die Standardeinstellung bei der Schnelligkeit des Erscheinens der Ebenen ist 100 Millisekunden, wenn ihr die Animation herauszögern wollt, könnt ihr die Zahl vergrößern, am Besten ist es aber, wenn ihr es so lasst. Wenn ihr euch entschließt, einen Text blinken zu lassen, solltet ihr die Zahl aber vergrößern, sonst wird der Betrachter kirre im Kopf. Die restlichen Einstellungen könnt ihr eigentlich so lassen wie sie sind (Eigentlich beim kompletten Fenster)  und dann auf "Speichern" klicken.
Jetzt habt ihr erfolgreich eure erste Animation erstellt :D.
Hier ist mein krüppeliges Strichmännchen was kämpft:

Keine Kommentare:

Kommentar veröffentlichen