Um Animationen zu erstellen, müssen Sie keine phänomenalen Kenntnisse haben, Sie müssen sich lediglich das richtige Werkzeug besorgen und es richtig verwenden. Es gibt viele solcher Lösungen, aber die bekannteste davon ist Adobe Photoshop. Dieser Artikel zeigt Ihnen, wie Sie darin schnell Animationen erstellen können.
Wenn sich Photoshop nicht auf Ihrem PC befindet, laden Sie es über den obigen Link herunter, installieren Sie es dann gemäß den Anweisungen in diesem Artikel und starten Sie es.
Stufe 1: Vorbereiten der Leinwand und der Ebenen
Jetzt können Sie darauf zeichnen, was in der Animation gezeigt wird. In unserem einfaches Beispiel Dies wird ein bewegliches Quadrat sein. Auf jeder Ebene verschiebt es sich um einige Pixel nach rechts.
Schritt 2: Arbeiten mit der Timeline
Alle! Die Animation ist fertig. Sie können das Ergebnis anzeigen, indem Sie auf die Schaltfläche klicken „Animationswiedergabe starten“. Und danach können Sie es im Format speichern GIF.
Auf diese einfache, aber bewährte Weise konnten wir in Photoshop eine GIF-Animation erstellen. Natürlich kann es erheblich verbessert werden, indem man die Frame-Zeit verkürzt, mehr Frames hinzufügt und natürlich, anstatt ein schwarzes Quadrat zu erstellen, etwas Originelleres und qualitativ Besseres schafft. Aber es hängt von Ihren Vorlieben, Wünschen und Fähigkeiten ab.
Haben Sie sich jemals gefragt, wie animierte GIFs erstellt werden? Der Autor der Lektion lädt Sie ein, mithilfe dieser Lektion an einem Abend einige Animationsgeheimnisse zu meistern. Außerdem erfahren Sie, wie Sie die Timeline verwenden, die in Photoshop CS6 verfügbar ist. Jetzt fangen wir an!
Unterrichtsergebnis.
Schritt 1
Erstellen Sie ein neues Dokument ( Strg + N) mit Dateiabmessungen von 800 x 500 Pixeln. Füllen Sie den Hintergrund mit einer beliebigen Farbe. Kommen wir nun zum Menü Lagen- StilSchicht- ÜberlagerungGradient(Ebene > Ebenenstile > Verlaufsüberlagerung). Wenden Sie die folgenden Einstellungen an: Stil Radial(Radial), Farben von Schwarz (#000000) bis Blau (#54799b), die in der Mitte verwendet werden.
Schritt 2
Erstellen Sie eine neue Ebene und benennen Sie sie Rauschschicht. Wählen Sie ein Werkzeug aus Füllen(Farbeimer-Werkzeug) und füllen Sie die erstellte Ebene mit einer dunklen Farbe (#231f20). Lassen Sie die Ebene aktiv Rauschschicht und gehen Sie zum Menü Filter – Rauschen – Rauschen hinzufügen(Filter>Rauschen>Rauschen hinzufügen). Legen Sie im Dialogfeld „Filtereinstellungen“ die folgenden Werte fest: Wirkung(Betrag) 3 %, Ausschüttung Uniform(Einheitlich) und klicken Sie auf OK.
Schritt 3
Drücken Sie die Tastenkombination (Strg +U) Geben Sie im angezeigten Dialogfeld mit den Korrektureinstellungen die Werte ein Sättigung(Sättigung) 100 %: Ändern Sie den Mischmodus dieser Ebene in Sanftes Licht(Sanftes Licht).
Anmerkung des Übersetzers: Um die gleiche Farbe wie der Autor im Screenshot zu erreichen, können Sie beim Anpassen von Farbton/Sättigung den Farbtonwert auf -140 einstellen.
Schritt 4
Fügen Sie einen beliebigen Text hinzu. Hier verwenden wir den Text des 123RF-Website-Logos. In Ebenenstilen verwenden Schlaganfall(Schlaganfall). Wählen Sie die Strichgrößenwerte entsprechend Ihren Vorlieben aus.
Anmerkung des Übersetzers: Auf dem Screenshot des Autors ist bereits gerasterter Text zusammen mit dem Strichstil zu sehen. Um das gleiche Ergebnis zu erzielen, entfernen Sie nach dem Anwenden des Strichs die Füllung (Füllen) der 0 %-Textebene, konvertieren Sie diese Ebene in ein Smartobjekt und rastern Sie es dann.
Schritt 5
In diesem Schritt erstellen wir mithilfe von Ebenenstilen einen leuchtenden Effekt für den Text. Doppelklicken Sie auf die Ebene, um das Fenster „Stiloptionen“ zu öffnen. Um Ebenenstile anzupassen, verwenden Sie die Screenshots unten.
Prägung(Abschrägung und Prägung)
Inneren Schatten(Inneren Schatten)
Inneres Glühen(Inneres Glühen)
Farbüberlagerung(Farbüberlagerung)
Äußeres Leuchten(Äußeres Leuchten)
Schatten(Schlagschatten)
Schritt 6
Wenn Sie mit der Erstellung von Lichteffekten mithilfe von Ebenenstilen fertig sind, wechseln Sie zur Ebenen-Palette und reduzieren Sie den Wert dieser Ebene Füllt(Füllen) um 0 %.
Schritt 7
Duplizieren Sie die Ebene, die Sie in Schritt 5 erstellt haben, und deaktivieren Sie alle Ebenenstile auf dieser Kopie. Stellen Sie nun die Stile wie folgt ein:
Inneren Schatten(Inneren Schatten)
Inneres Glühen(Inneres Glühen)
Schritt 8
Unten sehen Sie das Ergebnis, nachdem Sie die Ebenenstile angewendet haben.
Schritt 9
Jetzt werden wir bewegliche Lichtpunkte erzeugen. Erstellen Sie 5 Ebenen über den vorhandenen und benennen Sie sie in 1,2,3, R und F um. Wenn Sie Ihren eigenen Text haben, erstellen Sie Ebenen entsprechend Ihren Buchstaben. Gruppieren Sie diese Ebenen in einem Ordner und geben Sie ihm einen Namen Lichtflecken und ändern Sie den Mischmodus auf Aufhellung der Basis(Farbverweigerung).
Aktivieren Sie das Tool Bürste(Pinsel-Werkzeug), einen weichen Pinsel auswählen, einstellen Opazität(Deckkraft) auf 95 % und zeichnen Sie mit weißer Farbe Punkte über den Text. Für jeden Buchstaben gibt es einen eigenen Lichtfleck auf einer eigenen Ebene. Unten im Screenshot können Sie sehen, wie die Ebenen des Autors in der Ebenenpalette aussehen.
Schritt 10
Kommen wir nun zum Menü Fenster – Zeitleiste(Fenster > Zeitleiste). Sie werden feststellen, dass Ihre Ebenen bereits in dieser Palette auf der linken Seite integriert sind. Wählen Sie jede der fünf Hervorhebungsebenen aus, die sich in der Gruppe befinden. Lichtflecken und stellen Sie sicher, dass die aktuelle Zeitanzeige (blauer Schieberegler) auf Frame Null steht. Klicken Sie nun auf jeder Ebene in der Gruppe, wenn sie aktiv ist, auf die Option Position(Position), um einen Keyframe zu erstellen.
Anmerkung des Übersetzers: Um die Zeitskala zu aktivieren, klicken Sie auf die Schaltfläche Erstellen Sie eine Zeitleiste für ein Video(Video-Timeline erstellen) und alle Ihre Ebenen werden in die Timeline geladen. Es wird dieselbe Ebene oder Gruppe wie in der Ebenenpalette ausgewählt.
Schritt 11
Stellen Sie die aktuelle Zeitanzeige (blauer Schieberegler) auf ein 01:00 F und bewegen Sie die Ebenen mit Lichtpunkten entlang ihrer Bewegungsbahn relativ zum Umriss des Buchstabens.
Schritt 12
So sieht die Ausgangsposition des Lichtflecks auf den Buchstaben aus. Bewegen Sie die aktuelle Zeitmarke entlang der Skala und verschieben Sie Ebenen mit Lichtpunkten, um Keyframes zu erstellen. Bewegen Sie sie weiter, bis Sie den Fleck über den gesamten Buchstaben jeder Textebene verschoben haben. Anweisungen finden Sie in den folgenden Screenshots.
Lassen Sie uns Animationen in Photoshop erstellen
Definieren wir es von Anfang an...
Was ist GIF-Animation?
Dies ist ein animiertes Bild, d.h. ein Bild, das sich bewegen kann. Eine GIF-Animation kann aus mehreren Bildern oder einem Video erstellt werden. Heutzutage ist es möglich, Animationen online zu erstellen. Laden Sie die Bilder hoch, klicken Sie auf „Erstellen“ und Sie erhalten eine fertige GIF-Animation. Sie können aus einem Video auch eine GIF-Animation erstellen.
Heute erstellen wir GIF-Animationen in Photoshop.
Wir brauchen Fotos, Bilder, Bilder. Ich werde Ihnen nicht sagen, wie man Fotos bearbeitet! Wir werden uns mit einem Prozess der Animationserstellung befassen!
Ich musste eine GIF-Animation erstellen. Ich dachte, warum nicht basierend auf dieser Animation eine Seite schreiben, die sich dem Thema Animationserstellung in Photoshop widmet!?
Wir werden den Prozess der Animationserstellung ausführlich beschreiben!
Öffnen Sie Photoshop und erstellen Sie für jedes Bild eine separate Ebene.
Wie erstelle ich eine separate Ebene für die Animation?
Ich mache das so: Lade alle Bilder in Photoshop, schneide den gewünschten Teil des Bildes aus und füge diese Teile in eine separate Datei ein. Um nicht versehentlich ein Foto auf Ihrem Computer zu beschädigen, ist eine separate Datei erforderlich!
Wenn Sie ein ausgeschnittenes Stück in eine Animation einfügen, wird automatisch eine Ebene erstellt!
Wenn Sie den Menüpunkt „Animation“ nicht haben, klicken Sie im Dropdown-Menü auf „Alle Menüpunkte anzeigen“.
Ganz unten im Photoshop-Programm erscheint ein Menü zur Steuerung Ihrer Animation. Wir erstellen so viele Kopien der ausgewählten Frames, wie sich Ihre Animation ändert.
Meine GIF-Animation ändert das Bild neunmal. Wenn sich plötzlich herausstellt, dass die Anzahl der Frames größer ist als Sie benötigen, befindet sich direkt rechts neben der Schaltfläche „Hinzufügen“ eine Schaltfläche „Löschen“.
Wie stelle ich die Anzeigezeit jedes Frames in einer Animation ein?
Wir müssen jedes Bild zu einem anderen Zeitpunkt anzeigen. Um die Anzeigezeit zu bearbeiten, klicken Sie auf die kleine Linie – das Dreieck.
Wählen Sie im Dropdown-Menü die gewünschte Anzeigedauer für jedes Bild aus. Wenn Sie eine andere Zeit für die Anzeige des Rahmens benötigen, wählen Sie eine andere aus und stellen Sie die gewünschte Zeit ein.
Guten Abend, liebe Abonnenten und nur Leser meines Blogs! Sind Sie bereit zu lernen, wie Sie Ihrem Bild Leben einhauchen? Und das nicht mit Hilfe von Magie, sondern mit der Hilfe von allem aus unserem geliebten Photoshop! Wie lange habe ich diese Lektion aufgeschoben, ohne zu verstehen, warum. Schließlich handelt es sich hierbei um die Grundlagen von Photoshop! Aber jetzt habe ich beschlossen, mich zu verbessern.
Und verbessern Sie sich so sehr, dass Sie am Ende des Videos auch eine Videolektion dazu erhalten Animationen in Photoshop erstellen.
Ich habe schon lange keine Photoshop-Tutorials mehr geschrieben, und ich hatte Gründe dafür. Schließlich war ich gerade dabei, meine Geschichte zu beenden. Gerne könnt ihr es lesen und eure Meinung direkt in den Kommentaren äußern!
Kommen wir nun zur Lektion. Im Video unten erkläre ich Ihnen, wie Sie nach und nach Text hinzufügen, aber in einer Textlektion wird die Aufgabe etwas schwieriger sein.
Wir haben Cipollino und wir müssen ihn dazu bringen, uns mit der Hand zu winken.
Schritt 1. Zuerst müssen Sie die Animation in Photoshop „einschalten“. Dafür gehen wir „Fenster“ -> „Animation“. Es kann noch geschrieben werden "Zeitleiste".
Schritt 2. Damit sich die Hand bewegen kann, müssen wir sie ausschneiden und in verschiedene Positionen bringen. Zum Ausschneiden einer Hand verwende ich persönlich „Magnetisches Lasso“. Erstellen Sie eine Kopie des Hauptdokuments ( Strg+J) und arbeiten Sie mit einer Kopie. Wir greifen das Original nicht an.
Wählen Sie die Hand sorgfältig aus und schneiden Sie sie aus!
Schritt 3. Jetzt stecken wir unsere Hand hinein, so schrecklich es auch klingen mag, und bringen sie in verschiedene Positionen. Die Hand wird in neue Schichten eingefügt, das ist sogar zu unserem Vorteil.
Schritt 4. Dieser Schritt ist optional, aber es ist besser, das Radiergummi-Werkzeug zu verwenden, um die Hand leicht zu korrigieren und sie natürlicher zu machen. Es ist natürlich schwierig, dies mit Worten zu erklären. Wenn Sie verstehen, warum wir den Radiergummi verwenden, befolgen Sie diesen Schritt. Wenn Sie immer noch nicht verstehen, können Sie ihn überspringen. Das ist nicht wichtig, denn das Wichtigste für uns ist, zu lernen, wie man einfache Animationen erstellt!
Schritt 5. Jetzt arbeiten wir mit Personal. In jedem Frame aktivieren wir nur die Ebenen, die wir benötigen. Zum Beispiel benötigen wir in Bild 1 unser Original, und in unserem Fall „Schicht 0“.
Jetzt erstellen wir einen neuen Rahmen:
Und im neuen Rahmen schalten wir andere Ebenen ein. Das heißt, unser „Ebene 0-Kopie“ Und „Schicht 1“, also eine andere Handhaltung. Ich hoffe, Ihnen, liebe Leser, ist der Algorithmus klar.
Schritt 6. Stellen Sie die Bildverzögerung ein. Das heißt, nach welcher Zeitspanne wird das nächste Bild angezeigt.
Schritt 7 Lasst uns unsere retten. Es gibt einen Grund, warum ich diesen Schritt in mein Tutorial aufgenommen habe, da das Speichern eines GIF etwas anders ist als nur das Speichern eines Bildes.
Wählen Sie das Format (Standard ist GIF) und speichern Sie es.
Erstellen Sie eine neue Datei mit Abmessungen 700 X 300 px.
Das Fenster öffnen Zeitleiste((Fenster - Zeitleiste)).
Klicken Sie auf die Schaltfläche „ Erstellen Sie eine Frame-Animation» (Frame-Animation erstellen).
Mit dem Tool () erstellen wir 3 Ebene mit Text („Animation“, „dies“, „einfach“).
Verwenden Sie das Werkzeug (Verschieben-Werkzeug / V-Taste), um den Text wie im Bild unten zu platzieren.
Im Fenster Zeitleiste(Zeitskala) Wählen Sie das erste Bild aus und klicken Sie auf „ Dupliziert ausgewählte Frames» (Erstellen einer Kopie der ausgewählten Bilder).
Wir erstellen 4 Kopien der ausgewählten Bilder.
Im Fenster auswählen Zeitleiste(Zeitleiste) zweiter Rahmen und lassen Sie nur die Ebenen sichtbar " Animation" Und " Hintergrund».
Wählen viertes Bild und lassen Sie es sichtbar Alle Lagen.
Lassen Sie uns den Wiederholungsparameter für unsere Animation festlegen. Im Fenstermenü Zeitleiste(Zeitskala), ändern Sie den Wiederholungsparameter von „ Einmal" An " Ständig"(Bild unten).
Jetzt können wir die Animationswiedergabe starten.
Animationseinstellungen in „Datei – Für Web speichern“ (Datei – Für Web speichern) Photoshop CC. Endergebnis 
