Share
In diesem Tutorial werfen wir einen Blick auf die Photoshop-Animationsfunktion, um eine schöne animierte GIF zu erstellen. Ich bin sicher, dass Sie alle die Anzeigen auf der rechten Seite dieser Seite bereits gesehen haben. Für einige von Ihnen sind sie ärgerlich, andere klicken sogar darauf, weshalb sie da sind. Ich persönlich glaube, dass nichts gegen sie gesagt werden kann. Deshalb dachte ich mir, warum nicht eine schöne Anzeige mit 125 x 125 Pixeln erstellt werden soll, um zu zeigen, wie einfach es ist, schöne Animationen in Photoshop zu erstellen.
Alles, was wir tun müssen, ist Photoshop zu öffnen, unser endgültiges Bild zu erstellen und es so zu animieren, wie wir es wünschen, um die einzelnen Elemente zu verschieben, um den endgültigen Effekt zu erzielen. Darüber hinaus besuchen wir die schöne GraphicRiver-Website, auf der wir ihr Logo herunterladen, mit dem wir unsere GIF erstellen.
Sehen Sie sich die animierte GIF an, die wir unten erstellen werden.
Öffnen Sie zunächst Photoshop und erstellen Sie ein neues Dokument mit 125 x 125 Pixeln. In unserem Fall reichen eine Auflösung von 72 Pixel / Zoll und der RGB-Farbmodus mit weißem Hintergrund aus, da wir ihn im Web verwenden.
Entsperre jetzt die Hintergrundebene, nenne sie "Hintergrundbild" und wähle das Farbeimerwerkzeug (G). Anstatt das satte Schwarz (# 000000) für den Hintergrund zu verwenden, verwende ich die etwas hellere schwarze # 111111, die besser aussieht. Klicken Sie, um die Ebene zu füllen.
Farbverläufe in Designs, Layouts oder Bildern sind sehr beliebt und geben Ihrem Endprodukt einen zusätzlichen Einblick. Deshalb wählen wir jetzt das Verlaufswerkzeug (G). Wählen Sie den radialen Verlauf aus der Optionsleiste aus und stellen Sie sicher, dass der Verlauf von weiß zu transparent geht. Die Bilder unten zeigen Ihnen, wie es geht.
Nach der Auswahl des Radialverlaufs von weiß auf transparent ist es Zeit für den Betrieb. Setzen Sie Ihre Maus in die Mitte, halten Sie sie gedrückt und ziehen Sie sie nach rechts. Um eine gerade Linie und eine bessere Kontrolle zu erhalten, drücken Sie beim Ziehen die Umschalttaste. Das Bild unten zeigt Ihnen, wie es danach aussehen soll. Vergewissern Sie sich, dass Sie dieser Ebene einen Namen wie "Verlauf" geben, und spielen Sie mit ihrer Deckkraft, um ein glatteres Aussehen zu erzielen.
Sie haben es vielleicht nicht bemerkt, aber unser abschließendes Bild enthält einen schönen dunkelgrauen Einpixelrand, der das Logo und den Text unterstreicht, die wir später hinzufügen werden. Es gibt mehrere Möglichkeiten, diese Grenze zu erstellen, aber ich habe es in diesem Tutorial so gemacht:
Wähle zuerst das Rechteckwerkzeug (U) aus. Öffnen Sie anschließend die Rechteck-Optionen in der Optionsleiste, um eine feste Größe von 123 x 123 Pixel festzulegen. Die Farbe ist nicht wichtig, stellen Sie nur sicher, dass Sie sie richtig ausrichten. Klicken Sie in die Leinwand, um ein Quadrat zu erstellen. Stellen Sie sicher, dass die Hintergrundebene bedeckt ist, sie jedoch an den Rändern sichtbar wird. Ich habe diese Schicht "Extra" genannt.
Nun ist es Zeit, das Ebenenstilfenster zu öffnen. Doppelklicken Sie dazu auf die Extra-Ebene. Was wir tun müssen, ist, die Fülldeckkraft auf 0 zu reduzieren und einen inneren 1-Pixel-Strich mit dunkelgrauer Farbe (# 4d4d4d) zu erhalten. Schauen Sie sich die Bilder unten als Referenz an.
Wie bereits erwähnt, werden wir jetzt zu graphicriver.net wechseln, um die vorgefertigten Logodateien herunterzuladen. Ich empfehle Ihnen dringend, sich bei graphicriver.net anzumelden, um am Author-Programm teilzunehmen oder einfach schöne Grafiken zu kaufen.
Wenn Sie bereits Mitglied sind, lesen Sie das Referral-Programm, bei dem Sie eine Provision von 30% von der ersten Bareinzahlung erhalten, die ein verwiesener Benutzer tätigt! Durch den Verkauf oder Kauf verschiedener Grafiken und Layer-Dateien können Sie entweder Geld verdienen oder andere Designer bei Ihrer Arbeit unterstützen.
Klicken Sie nun in der Hauptnavigation auf die Schaltfläche Make Money, um die Unternavigation anzuzeigen. Klicken Sie auf Verweisprogramm und scrollen Sie nach unten, bis Sie die Verweisgrafik sehen. Sie können zwischen den verschiedenen Marktplätzen wählen und deren Logos und Grafiken in hoher Qualität herunterladen. Ich habe das Logo von graphicriver.net gewählt, aber von diesem Punkt aus können Sie das Logo auswählen, das Ihnen am besten gefällt. Bitte lesen Sie die Urheberrechtsrichtlinie, um Probleme zu vermeiden.
So sieht das Logo in Photoshop aus. Wie Sie bemerkt haben, enthält jedes Grafikpaket PSD-Dateien mit mehreren Ebenen. Was wir jetzt machen, ist das Logo per Drag-oder-Copy in unser Animationsprojekt einzufügen.
In diesem Fall passt das Logo perfekt, sollte es jedoch zu groß oder zu klein sein, muss es einfach umgewandelt werden. Wie Sie in der Abbildung unten sehen können, habe ich das Logo oben platziert und unten links zusätzlichen Text eingefügt. Dies sind nur einige Dinge, die Sie auf graphicriver.net finden und kaufen können. Stellen Sie sicher, dass sich Logo und Text auf separaten Ebenen befinden. Es ist wichtig, sie auf separaten Ebenen zu platzieren, da wir später einzelne Ebenen aktivieren oder deaktivieren möchten, um unsere Animation zu erstellen.
Im nächsten Schritt verwende ich Illustrator zum Erstellen der Wellen, die wir unten rechts platzieren. Einige von Ihnen denken vielleicht: Warum macht er das nicht einfach in Photoshop? Ich könnte, aber der Grund, warum ich dies in Illustrator mache, ist, dass ich beim Importieren den Unterschied zwischen intelligenten Objekten, Pixeln, Pfaden und Formebenen erklären möchte. Wenn Sie nicht die Möglichkeit haben, Illustrator zu verwenden, greifen Sie einfach mit dem Stiftwerkzeug in Photoshop zu oder verwenden Sie eine andere Methode, um die schönen Wellen zu erstellen.
Wie Sie im Bild unten sehen können, habe ich das Stiftwerkzeug zum Zeichnen von zwei dreieckigen, aber gekrümmten Formen genommen. Stellen Sie sicher, dass kein Rahmen festgelegt ist und die Formfarbe blau ist.
Wir möchten nicht zwei gleichfarbige Wellen, also stellen Sie sicher, dass Sie zwei verschiedene Töne verwenden. Diese habe ich benutzt.
Und so sollte es aussehen. Es ist egal, wie groß es momentan ist, da wir nur den gekrümmten Teil davon verwenden und der Rest außer Sicht ist. Wählen Sie beide Formen aus und kopieren Sie sie, fügen Sie sie ein oder ziehen Sie sie in Photoshop.
Photoshop fragt Sie sofort, wie Sie das Objekt einfügen möchten. Wie bereits erwähnt, können Sie zwischen folgenden Optionen wählen: Intelligentes Objekt, Pixel, Pfad oder Formebene. Einige von ihnen erhalten Qualität, während andere spätere Änderungen - ohne Qualitätsverlust - unmöglich machen.
Intelligentes Objekt: Fügt die Grafik als Vector Smart-Objekt ein, das skaliert, transformiert oder verschoben werden kann, ohne das Bild zu beeinträchtigen. Beim Platzieren der Grafik werden die Dateidaten auf einer separaten Ebene in das Photoshop-Dokument eingebettet.
Pixel: Fügt die Grafik als Pixel ein, die skaliert, transformiert oder verschoben werden können, bevor sie gerastert und auf einer eigenen Ebene im Photoshop-Dokument platziert werden. Sobald Sie die Änderungen bestätigen, wird das Objekt gerastert, was zu einem Qualitätsverlust führen kann, falls Sie es zu einem späteren Zeitpunkt ändern möchten.
Pfad: Fügt die Grafik als Pfad ein, der mit den Stiftwerkzeugen, dem Pfadauswahlwerkzeug oder dem Direktauswahlwerkzeug bearbeitet werden kann. Der Pfad wird in die im Ebenenbedienfeld ausgewählte Ebene eingefügt.
Formschicht: Fügt die Grafik als neue Formebene ein (eine Ebene, die einen Pfad enthält, der mit der Vordergrundfarbe gefüllt ist). Dies kann in einigen Fällen nützlich sein, aber für dieses Projekt brauchen wir das nicht.
Wählen Sie die Option Smart Object und klicken Sie auf OK.
Wir benötigen nicht das gesamte Objekt, Sie können es also beliebig ändern und positionieren. Ich habe es wie unten gezeigt gemacht.
Nun ist es an der Zeit, den coolen Glanzeffekt zu erzeugen, der über unserem Logo und unseren Wellen schwebt. Es ist eine sehr einfache Technik, aber das Ergebnis ist cool. Der erste Schritt ist die Auswahl des elliptischen Marquee-Tools mit einer 10-Pixel-Feder. Ich verwende eine Feder mit 10 Pixeln, weil wir nicht wollen, dass sie scharfkantig ist, was definitiv nicht gut aussehen würde. Vergewissern Sie sich, dass sich die Auswahl immer noch in unserer Leinwand mit 125 x 125 Pixeln befindet und genügend Platz um sie herum vorhanden ist, um sie mit einer hellen Farbe zu füllen. Wählen Sie das Paint Bucket Tool aus und klicken Sie in die aktive Auswahl.
Wie Sie sehen, haben wir jetzt eine helle, glatte und hervorgehobene Ellipse, die den schönen Leuchteffekt aufbaut. Aber eines ist sicher, so sieht es nicht schön aus. Wir müssen den hervorgehobenen Bereich auf das Logo, den Text und die Wellen beschränken.
So habe ich es gemacht, indem Sie die einzelnen Objekte nacheinander auswählen, indem Sie bei gedrückter Umschalttaste auf die entsprechenden Ebenenminiaturen klicken, um eine schnelle Auswahl der Elemente zu erstellen. Wählen Sie nun die Auswahl aus, klicken Sie auf die Ebene "Glow" und wählen Sie Ebenenmaske hinzufügen.
Die Ebenenmaske wird schwarz und der nicht ausgewählte Bereich wird ausgeblendet, während der weiße Bereich den Glüheffekt auf Logo, Text und Wellen zeigt. Wenn das Glühen zu intensiv ist, passen Sie die Helligkeit einfach an, indem Sie die Deckkraft ändern. Das ist es. Unser endgültiges Bild ist fertig. Im nächsten Schritt wird gezeigt, wie Sie dieses Design animieren können.
Normalerweise ist das Animationsfenster nicht sichtbar, aber Sie können es öffnen, indem Sie auf Fenster> Animation gehen. Standardmäßig wird das Animationsfenster unten geöffnet.
So wird es standardmäßig aussehen. Es ist die Timeline-Ansicht, die wir in diesem Projekt nicht verwenden möchten. Stattdessen arbeiten wir in der Frame-Ansicht, in der jeder animierte Frame im Animationsfenster aufgelistet ist. Um die Ansicht zu ändern, klicken Sie auf die kleine Flyout-Menüschaltfläche und wählen Sie In Frame-Animation konvertieren. Die Bilder unten zeigen Ihnen, wie es geht.
In Photoshop verwenden Sie das Animationsbedienfeld, um Animationsrahmen zu erstellen. Jeder Frame repräsentiert eine Konfiguration von Ebenen. Das erste Bild unten zeigt die oben erwähnte Frame-Liste. Das zweite Bild zeigt Ihnen genau, wie Sie Ihre Ebenen für die endgültige Animation konfigurieren.
Wählen Sie einfach das erste Bild aus, schalten Sie die Elemente ein, aus oder verschieben Sie sie wie unten beschrieben, und Sie sind fertig. Bearbeiten Sie jeden Frame nach dem anderen, bis im Animationsbereich sechs Frames angezeigt werden. Im nächsten Schritt erstellen wir das Tweening, durch das zusätzliche Frames hinzugefügt werden, um das sanfte Einblenden oder Bewegen von Animationseffekten zu erzeugen.
Der erste Schritt des Animationsprozesses besteht darin, eine Verzögerung (die Zeit, zu der ein Frame angezeigt wird) für einzelne Frames oder für mehrere Frames in einer Animation und für das Tween festzulegen. Wie Sie sehen, habe ich die Frame-Verzögerungszeit auf 0 geändert, was zu einem abrupten Wechsel zwischen den Frames führt.
Um den Wechsel reibungsloser zu gestalten, verwenden wir den Tween-Befehl, um automatisch eine Reihe von Frames zwischen zwei vorhandenen Frames hinzuzufügen oder zu ändern. Sie können entweder mit dem vorherigen oder dem nächsten Bild tweenen. In diesem Fall wechseln wir mit dem vorherigen Frame. Auf diese Weise erzeugt Photoshop Bewegung und glatte Überblendung.
Um weitere Bilder hinzuzufügen, klicken Sie auf den Befehl Tween, geben Sie eine Nummer ein und klicken Sie auf OK.
Rahmen 1 - Rahmen 2: Fügen Sie zwei zusätzliche Bilder hinzu.
Rahmen 2 - Rahmen 3: Fügen Sie zwei zusätzliche Bilder hinzu.
Rahmen 3 - Rahmen 4: Keiner.
Rahmen 4 - Rahmen 5: Fügen Sie fünf zusätzliche Rahmen hinzu.
Rahmen 5 - Rahmen 6: Fügen Sie keine zusätzlichen Frames hinzu, aber stellen Sie sicher, dass Sie dem sechsten Frame eine Verzögerung von zwei Sekunden geben, da wir möchten, dass er dort bleibt, bevor Sie die Animation wiederholen.
Sie können natürlich die Abspieloption unten im Animationsbereich verwenden, um die Animation abzuspielen. Wir überspringen dies jedoch und exportieren die Animation direkt als GIF. Wir speichern unser Projekt als GIF-Datei zur Anzeige im Internet.
Um das Fenster "Für Web und Geräte speichern" zu öffnen, wählen Sie Datei> Für Web und Geräte speichern. Es gibt viele verschiedene Optionen, mit denen Sie spielen können, aber für dieses Projekt können wir eine vordefinierte Einstellung verwenden. Stellen Sie sicher, dass Sie GIF als Ausgabedateityp gewählt haben, spielen Sie mit den Einstellungen und klicken Sie auf Speichern. Geben Sie Ihrem GIF einen Namen und speichern Sie es in einem Verzeichnis, das Sie mögen. Das ist es!
Ich hoffe, dass Sie alle, die dieses Tutorial lesen, die Tipps und Tricks verwenden werden, um Ihre eigenen animierten Bilder in Photoshop zu erstellen. Am besten laden Sie sie später zu Graphic River hoch, damit die anderen sie sehen und kaufen können.
Leider gibt es auf Graphic River noch nicht viele GIFs oder animierte Bilder. Sie müssen das ändern! Stellen Sie sicher, dass Sie sich bei GraphicRiver anmelden und Ihre Designs hochladen. Das ist jetzt alles und ich hoffe, dieses Tutorial war für Sie nützlich und informativ. Fühlen Sie sich frei, einen Kommentar zu hinterlassen. Ich werde versuchen, Ihre Fragen zu beantworten, falls es welche gibt. Vielen Dank!
Accentsconagua