Erstellen eines animierten GIF mit GIMP

Inhaltsverzeichnis:

Erstellen eines animierten GIF mit GIMP
Erstellen eines animierten GIF mit GIMP
Anonim

GIMP ist eine bemerkenswert leistungsfähige Software, wenn man bedenkt, dass sie kostenlos ist. Insbesondere Webdesigner sind vielleicht dankbar für die Fähigkeit, einfache animierte GIFs zu erstellen.

Animierte GIFs sind einfache Animationen, die Sie auf vielen Webseiten sehen werden, und obwohl sie viel weniger ausgefeilt sind als Flash-Animationen, sind sie von jedem mit einem grundlegenden Verständnis von GIMP sehr einfach zu erstellen.

Wie erstelle ich ein animiertes-g.webp" />

Die folgenden Schritte zeigen eine einfache Animation in der Größe eines Webbanners mit ein paar einfachen Grafiken, etwas Text und einem Logo.

Anweisungen in diesem Artikel beziehen sich auf GIMP Version 2.10.12.

  1. Neues Dokument öffnen. In diesem Beispiel haben wir die voreingestellte Vorlage Web-Banner, groß, mobil, 320 x 100,. ausgewählt.

    Für Ihre Animation können Sie eine voreingestellte Größe auswählen oder benutzerdefinierte Abmessungen festlegen, je nachdem, wie Sie Ihre endgültige Animation verwenden werden.

    Für dieses Tutorial besteht die Animation aus sieben Frames und jeder Frame wird durch eine einzelne Ebene dargestellt, was bedeutet, dass die endgültige GIMP-Datei sieben Ebenen hat, einschließlich des Hintergrunds.

  2. Rahmen Eins setzen. Die Animation beginnt mit einem Leerzeichen, sodass keine Änderungen an der eigentlichen Ebene Background erforderlich sind, da sie bereits weiß ist.

    Allerdings ist eine Änderung des Namens der Ebene in der Palette Ebenen erforderlich. Klicken Sie mit der rechten Maustaste auf die Ebene Hintergrund in der Palette und wählen Sie Ebenenattribute bearbeiten.

    Image
    Image
  3. Fügen Sie im sich öffnenden Ebenenattribute bearbeiten Dialog (250ms) an das Ende des Ebenennamens an. Damit legen Sie fest, wie lange dieser Frame in der Animation angezeigt wird. Das ms steht für Millisekunden und jede Millisekunde ist ein Tausendstel einer Sekunde. Dieses erste Bild wird eine Viertelsekunde lang angezeigt.

    Image
    Image
  4. Rahmen 2 setzen. Für das Tutorial wird für diesen Rahmen eine Footprint-Grafik verwendet. Gehen Sie zu Datei > Als Ebenen öffnen und wählen Sie die Grafikdatei aus. Dadurch wird der Footprint auf einer neuen Ebene platziert, die mit dem Verschieben-Werkzeug. beliebig positioniert werden kann.

    Image
    Image
  5. Wie bei der Hintergrundebene muss diese neue Ebene umbenannt werden, um die Anzeigezeit für den Rahmen zuzuweisen. In diesem Fall 750 ms.

    In der Palette Ebenen erscheint die neue Ebenenvorschau mit einem schwarzen Hintergrund um die Grafik herum, aber in Wirklichkeit ist dieser Bereich transparent.

    Image
    Image
  6. Setze Rahmen drei, vier und fünf. Die nächsten drei Frames sind weitere Fußabdrücke, die über das Banner laufen werden. Diese werden auf die gleiche Weise wie Rahmen zwei eingefügt, wobei dieselben Grafiken und eine andere Grafik für den anderen Fuß verwendet werden. Wie zuvor ist die Zeit für jeden Frame auf 750 ms eingestellt.

    Jeder der Footprint-Layer braucht einen weißen Hintergrund, damit immer nur ein Frame sichtbar ist – derzeit hat jeder einen transparenten Hintergrund. Wir können dies tun, indem wir direkt unter einer Footprint-Ebene eine neue Ebene erstellen, die neue Ebene mit Weiß füllen und dann mit der rechten Maustaste auf die Footprint-Ebene klicken und auf Merge Down klicken.

  7. Rahmen sechs setzen. Dieser Rahmen ist nur ein leerer Rahmen, der mit Weiß gefüllt ist und den Anschein erweckt, als ob der endgültige Fußabdruck verschwindet, bevor der letzte Rahmen erscheint. Wir haben diese Ebene Intervall genannt und uns entschieden, diese Anzeige für nur 250 ms zu haben.

    Sie müssen Ebenen nicht benennen, aber es kann die Arbeit mit Dateien mit Ebenen vereinfachen.

    Image
    Image
  8. Rahmen Sieben setzen. Dies ist das letzte Bild und zeigt etwas Text zusammen mit dem Logo von Lifewire.com. Der erste Schritt hier ist, eine weitere Ebene mit weißem Hintergrund hinzuzufügen.

    Image
    Image
  9. Verwenden Sie als Nächstes das Textwerkzeug, um den Text hinzuzufügen. Dies wird auf eine neue Ebene angewendet, aber wir kümmern uns darum, sobald Sie das Logo oder das neue Bild hinzugefügt haben, was auf die gleiche Weise erfolgen kann, wie die Fußabdruckgrafik zuvor hinzugefügt wurde.

    Image
    Image
  10. Wenn wir diese wie gewünscht angeordnet haben, können wir Merge Down verwenden, um die Logo- und Textebenen zu kombinieren und dann diese kombinierte Ebene mit der hinzugefügten weißen Ebene zusammenzuführen bisher. Dies erzeugt eine einzelne Ebene, die den endgültigen Frame bildet, und wir haben uns entschieden, dies für 4000 ms anzuzeigen.

    Image
    Image
  11. Vorschau der Animation Vor dem Speichern des animierten-g.webp" />Filter > gehenAnimation > Wiedergabe Öffnet einen Vorschaudialog mit selbsterklärenden Sch altflächen zum Abspielen der Animation. Wenn etwas nicht richtig aussieht, kann es an dieser Stelle geändert werden. Andernfalls kann es als animiertes-g.webp" />.

    Die Animationssequenz wird in der Reihenfolge festgelegt, in der die Ebenen in der Palette Ebenen gestapelt sind, beginnend mit dem Hintergrund oder der untersten Ebene und sich nach oben arbeitend. Wenn Ihre Animation nicht in der richtigen Reihenfolge abgespielt wird, müssen Sie die Reihenfolge Ihrer Ebenen anpassen, indem Sie auf eine Ebene klicken, um sie auszuwählen, und die Aufwärts- und Abwärtspfeile in der unteren Leiste der Ebenenpalette verwenden, um ihre Position zu ändern.

    Image
    Image
  12. Animiertes-g.webp" />. Das Speichern eines animierten-g.webp" />Datei > Kopie speichern und geben Sie Ihrer Datei einen passenden Namen und wählen Sie aus, wo Sie Ihre Datei speichern möchten.

    Image
    Image
  13. Gehen Sie als Nächstes zu Datei > Exportieren als, um es als animiertes-g.webp" />.

    Image
    Image
  14. Wählen Sie im sich öffnenden Bild exportieren-Dialogfeld Dateityp auswählen und scrollen Sie zum GIF-Bild und wählen Sie es aus. Wählen Sie dannExportieren . Wenn Sie eine Warnung erh alten, dass Ebenen über die eigentlichen Bildränder hinausgehen, wählen Sie die Sch altfläche Zuschneiden.

    Image
    Image
  15. Dies führt nun zum Dialog Als-g.webp" /> mit einem Abschnitt von Optionen für animierte GIFs. Sie können diese auf ihren Standardeinstellungen belassen, aber wenn Sie möchten, dass die Animation nur einmal abgespielt wird, sollten Sie Endlos wiederholen. deaktivieren.

    Image
    Image
  16. Jetzt können Sie Ihr animiertes-g.webp

Schlussfolgerung

Die hier gezeigten Schritte geben Ihnen die grundlegenden Werkzeuge, um Ihre eigenen einfachen Animationen mit verschiedenen Grafiken und Dokumentgrößen zu erstellen. Während das Endergebnis in Bezug auf die Animation recht einfach ist, ist es ein sehr einfacher Prozess, den jeder mit Grundkenntnissen in GIMP erreichen kann.

Empfohlen: