Share
Was Sie erstellen werdenWillkommen zu meinem Tutorial zum Erstellen von Animationsassets in Adobe Photoshop. In diesem Tutorial lernen Sie nicht, wie Sie Elemente speziell zeichnen. Es geht eher darum, über die Elemente für die Animation nachzudenken. Was braucht mein Animator und warum? Wir werden darauf eingehen, was Title Safe ist und wie wichtig eine korrekte Kennzeichnung ist.
Für dieses Tutorial werde ich Little Miss Muffet als unsere Geschichte verwenden.
Kleines Fräulein Muffet
Saß auf einem Buffet,
Essen von Quark und Molke;
Da kam eine Spinne,
Wer setzte sich neben sie
Und verängstigte Fräulein Muffet weg.
Um das Erstellen von Assets zu vereinfachen, erstellen wir eine Liste mit dem, was wir erstellen müssen. Dies hilft uns auch, unser Photoshop-Dokument im Voraus einzurichten.
Für unser Storyboard können Sie das Dokument in jeder beliebigen Größe einrichten. Nur um die Dinge in einem angemessenen Verhältnis zu halten, habe ich 1920 x 1200 Pixel bei 72 dpi gemacht, mit dem Farbmodus einstellen RGB (Monitorfarbe)
So habe ich das Storyboard eingerichtet. Jede Zeile des Reims hat ein eigenes Panel erhalten. Dafür brauchen wir es nicht, um wirklich detailliert zu sein. Wir brauchen nur eine Grundidee der Aktion, die bei Bedarf mit Pfeilen und Kommentaren dargestellt werden kann. Dies ist für den Animator hilfreich, damit er weiß, was passiert. Diese Frames können auch verwendet werden, um zu ermitteln, wie lange jede Aktion auf dem Bildschirm angezeigt werden muss, und um sicherzustellen, dass sie mit Audio übereinstimmt.
Hier ist mein raues Storyboard, und der Animator Dave Bode ist zufrieden mit seinem Aussehen, also kann ich mit dem Erstellen der Assets beginnen.
Da sich die Szene dafür nicht ändert, werden wir alle .psds im selben Dokument erstellen. After Effects ist wie ein zeitbasiertes Photoshop. Daher werden Ebenen und Gruppen auf dieselbe Weise verwendet. Für komplexere Animationen ist es ratsam, Charaktere, Assets und / oder Umgebungen in separaten Dokumenten zu erstellen.
Für diese Animation möchte Dave, dass die Dokumentgröße 3840 x 2160 Pixel bei 72 dpi beträgt, was einer Auflösung von 4K entspricht. Dies ist so, dass er ein kleines Spielzimmer haben kann, wenn es um Zooms und Schwenks geht, falls dies erforderlich ist. Ich erstelle ein Neues Dokument durch zu gehen Datei> Neu.
In dem Schichten Panel habe ich erstellt Gruppen unser Vermögen in. Gruppen kann erstellt werden, indem Sie auf das Ordnersymbol unten im Fenster klicken Schichten Panel. In diese können Sie hineinziehen oder erstellen Neue Schichten. Das hält alles aufgeräumt.
Als zusätzlichen Bonus können Sie der Gruppe eine Farbe zuweisen, indem Sie mit der rechten Maustaste darauf klicken und eine Farbe auswählen. Dadurch werden automatisch alle Ebenennamen in dieser Gruppe in diese Farbe geändert. Sie können die Farbe der Ebenen in den Gruppen ändern, indem Sie mit der rechten Maustaste darauf klicken.
Mit Layers organisiert zu werden, ist eine großartige Zeitersparnis und besonders wichtig, wenn Sie eine knappe Frist einhalten, spät abends sind und nur den letzten Kaffee getrunken haben.
Das komplexeste Element in der Geschichte von Fräulein Muffet ist die Spinne, hauptsächlich aufgrund ihrer Anzahl an Gliedmaßen. So habe ich die Ebenen in Vorbereitung auf die Asset-Erstellung organisiert. Dies ist unser Ausgangspunkt, aber wir können in Zukunft weitere Layer für zusätzliche Ausdrücke, Requisiten usw. hinzufügen.
Es besteht eine sehr gute Chance, dass einige der Layer geändert, verschoben, aktualisiert, dupliziert und entfernt werden. Nehmen Sie diese Vorlage also nicht als wörtlich. Es ist nur eine Vorstellung davon, wie Dinge eingerichtet werden können. Beim Erstellen von Assets können Sie scheinbar einfache Dinge leicht übersehen, entweder nach Ihrer eigenen Planung oder von Ihrem Kunden oder (Kunst-) Direktor. Erwarten Sie also Änderungen!
Was ist Titel sicher? Auf der ganzen Welt benutzen Menschen Geräte mit unterschiedlichen Aspektverhältnissen und Auflösungen, und wir müssen den kleinsten gemeinsamen Nenner berücksichtigen. Die meisten Leute werden diese Animation auf einem 16: 9-Bildschirm anzeigen, aber jemand da draußen hat vielleicht noch einen 4: 3-Monitor, daher müssen wir sicherstellen, dass keine wichtigen Informationen an den Rändern abgeschnitten werden. Nachfolgend finden Sie ein Beispiel für die Titelbegrenzung.
In diesem Beispiel ist der blaue Bereich auf allen Geräten zu sehen, und der violette Bereich ist so ziemlich die Grenze, wo eine Aktion stattfinden soll. Dies muss bei der Erstellung von Assets berücksichtigt werden. Stellen Sie daher bei der Arbeit an einer Animation sicher, dass Sie die sicheren Grenzen für den Titel Ihres Animators haben.
Das Kreuz auf dem blauen Quadrat zeigt den Mittelpunkt der Szene an, und die senkrechten Linien an der Peripherie zeigen die Mittelpunkte der Szene an.
Als nächstes werde ich dieses Bild auswählen und in mein PSD einfügen. Dies hängt davon ab, wie Sie Ihren Titelsafe erhalten. Ein schneller Weg, um dieses Bild zu erhalten, besteht darin, einen Druckbildschirm von After Effects einer 4K-Szene mit Titelsicherung aufzurufen. Dies ist möglicherweise nicht so sauber und scharf wie im obigen Beispiel. Wenn Sie also das Gefühl haben, dass Sie in Photoshop eine Menge Animationsarbeit verrichten, lohnt es sich möglicherweise, die Zeilen zu säubern.
Wir beginnen mit groben Skizzen aller Elemente. Warum machen wir das? Auf diese Weise können wir die relativen Größen richtig bestimmen. Dinge wie: "Ist das Buffet groß genug für zwei Personen?" "Wie groß muss die Sonne am Himmel sein?" "Gibt es genug Platz für die Aktion?"
Für jeden Satz von Elementen zeige ich Ihnen den Prozess von der Skizzenphase bis zur vollständigen Asset-Phase. Beginnen wir mit der Einstellung der Szene: Der Hintergrund.
Zuerst habe ich mich im Hintergrund mit dem Buffett, der kleinen Fräulein Muffet und der Spinne in der sitzenden Pose aufgerauht, um sicherzustellen, dass alles passt. Jedes Element der Skizze befindet sich auf einer separaten Ebene.
Als nächstes schalte ich die Charakter- und Buffetschichten aus und beschäftige mich nur mit den Hintergrundelementen.
Jetzt, da wir unsere Basisszene rau haben, müssen wir herausfinden, was wir brauchen. Die Cloud bewegt sich, aber es werden keine Formänderungen vorgenommen. Ich denke jedoch, es wäre interessant, die Sonnenstrahlen animieren zu lassen. Ich denke, wir werden zwei Strahlengruppen haben, zwischen denen Dave schwinden kann.
Bei einigen Animationsprojekten würde es wahrscheinlich Dinge wie Modellblätter und Farben geben, die mit dem Kunden vorab vereinbart wurden, aber in diesem Fall entwerfe ich nur so, weil es zum Spaß ist!
Hier habe ich alle unnötigen Ebenen deaktiviert und die Deckkraft der Skizze verringert. Legen Sie den Skizzenordner auf fest Multiplizieren in dem Schicht Stile, so ist es einfacher zu sehen.
Ich habe beschlossen, die Sonne zu verkleinern, da sie zu groß ist. Ich tue dies, indem ich die Sonne plus die zwei Strahlenschichten auswähle und drücke Control-T zu Verwandeln. Wir müssen sicherstellen, dass die Szenenelemente die Aktion nicht überfordern.
So wurden die Umgebungsebenen organisiert.
Das Buffet ist eine ziemlich einfache Sache, die der Szene hinzugefügt werden kann, ist aber auch sehr wichtig, da sowohl Little Miss Muffet als auch die Spinne darauf sitzen müssen. Ein Buffet ist wie ein Fußhocker oder ein großes Kissen.
Im Folgenden haben wir die Szene mit dem Buffet zentral skizziert, da hier der Großteil der Aktion stattfinden muss.
Planen Sie sie beim Erstellen von Szenen immer aus. Charaktere müssen relativ zu ihrer Umgebung und untereinander bemessen werden. Wie Sie sehen können, habe ich auch einen Rough of the Bowl für Quark und einen Löffel für eine Referenz mit einem Stop hinzugefügt. Eine kleine Planung kann später viel Arbeit einsparen. Hier haben wir das Buffet zusammengestellt und anhand einer groben Skizze der Charaktere können wir überprüfen, ob beide bequem passen. Dies kann ein nützliches Bild sein, das Sie an Ihren Animator senden können.
So werden die Assets unserem Animator zur Verfügung gestellt. Ich habe etwas überlappendes Gras gezeichnet, um das Buffet zu erden, aber ich habe es auf einer separaten Ebene aufbewahrt, falls der Animator in After Effects einige Effekte darauf anwenden möchte.
.
Wenn es um Dinge wie Spinnen geht, werden Sie wiederkehrende Elemente bekommen, warum sollten Sie dann jedes von Hand zeichnen? Hier haben Sie eine einfache Möglichkeit, mehrere Funktionen in nur acht Augen zu erhalten!
Jetzt können Spinnen eine unterschiedliche Anzahl von Augen haben, und wir möchten nicht jedes einzeln zeichnen. Auf einen Neue Schicht einen Augapfel ausmalen.
Durch Halten Alt und mit der Werkzeug verschieben (V) ausgewählt, ziehen Sie das Auge noch sieben Mal heraus und positionieren Sie alle Augen auf dem Gesicht.
Auf einen Neue Schicht, malen Sie ein geschlossenes Augenlid über eines der Augen. Wiederholen Sie den Kopiervorgang für die anderen sieben Augen.
Ordnen Sie die Schichten so an, dass die entsprechenden Deckel über den Augäpfeln sitzen. Blenden Sie die geschlossenen Deckschichten aus und wählen Sie die Augen und Deckel aus. Weiter drücken Control-T um sie zu skalieren und den Vorgang mit den anderen Augen- und Lidensätzen zu wiederholen.
Sie sollten mit einem solchen Set enden. Wenn Sie die Deckschicht ein- und ausschalten, sieht es aus, als würde sie Ihnen zuwinken!
Wenn Sie nicht einen Tausendfüßler animieren, wird Mr. Spider wahrscheinlich ein Beispiel für die meisten Beinressourcen sein, die Sie erstellen müssen. Glücklicherweise sind Spinnenbeine ziemlich einheitlich, so dass wir uns etwas Zeit sparen können.
Unten sehen Sie unsere Spinnenrobben: vorne und seitlich. Aufgrund des einfachen Designs können wir die Beinformen für die Vorder- und Seitenansicht verwenden. Halten Sie Ihr Modellblatt für diesen Abschnitt bereit.
Zeichnen Sie die drei Beinabschnitte: Oberschenkel, Wade und Fuß. Ich mache jeden auf einen Neue Schicht damit Dave diese Abschnitte unabhängig animieren kann. Beim Zeichnen der drei Abschnitte stelle ich sicher, dass sie sich leicht überlappen. Er kann das Marionettenwerkzeug in After Effects verwenden, um die drei Beinabschnitte zusammenzufügen. Nach meiner Erfahrung ist es besser, dem Animator Optionen zu geben!
Wenn Sie Ihre drei Beinabschnitte bemalt haben, wählen Sie Oberschenkel, Wade und Fuß aus und kopieren Sie sie drei weitere Male. Sie können dies tun, indem Sie die drei Ebenen auswählen, indem Sie gedrückt halten Verschiebung und ziehen sie auf die Neue Schicht Symbol am unteren Rand des Schichten Tafel, die ein Quadrat mit einer gefalteten Ecke ist.
Wählen Sie zwei Beine und verwenden Sie Verwandeln, welches ist Control-T, Kippen Sie sie horizontal, indem Sie zu gehen Bearbeiten> Transformieren> Horizontal spiegeln. Gruppieren Sie jedes Bein einzeln und geben Sie ihm einen hilfreichen Namen, z. B. Leg copy 2.
Wir werden den Vorgang der Erstellung von drei Abschnitten für die Arme wiederholen: Oberarm, Unterarm und Hand. Denken Sie beim Bemalen der Abschnitte daran, dass sie sich etwas überschneiden.
Hier sind die fertiggestellten Spider-Assets. Er ist aus Bequemlichkeitsgründen in dieser Pseudo-T-Pose, und ich bin sicher, dass es für Dave einfacher sein wird, mit so angelegten Animationen zu beginnen.
Kopieren Sie anschließend alle Bein- und Armebenen, fügen Sie sie in die Side-On-Gruppe ein und ordnen Sie sie nach Bedarf neu an.
Hier kommt der nicht-kreative, organisatorische Bereich, der, obwohl er keinen großen Spaß macht, sehr notwendig ist. Sie werden sich später dafür bedanken, dass Sie überprüft haben, ob alles in Ordnung ist. Hier ist eine Aufgliederung der Front-on-Spider-Assets.
Der Stock ist einer dieser wunderbaren Vorzüge, wo wir ihn einfach für die Vorder- und Seitenansicht kopieren und einfügen können. Wir könnten dies einfach als eine Einheit nutzen, aber da sich die Front-on- und Side-on-Spinnen in ihren eigenen Gruppen befinden, bedeutet dies, dass Ihr Animator nicht nach den einzelnen Abschnitten suchen muss.
Ordnen Sie alle Armabschnitte in klar definierten Ordnern an. Es kann hilfreich sein, sie farblich zu kennzeichnen. Stellen Sie sicher, dass die Hände sowie die Unter- und Oberarme für jede Gruppe gekennzeichnet sind.
Nach wie vor ist dies eine Kennzeichnungsaufgabe, und hier habe ich das für Dave festgelegt.
Die Augen! Stellen Sie dazu sicher, dass das richtige geschlossene Auge dem richtigen offenen Auge entspricht, das sich direkt darunter befindet.
Zum Glück ist dies einfacher zu organisieren! Hier haben wir den Basiskopf und die Unterkiefer der Spinne (wenn Sie mit der Anatomie der Spinnentiere nicht vertraut sind, sind dies die Bits um den Mund der Spinne). Ich habe diese separat, damit Dave sie animieren kann, wenn er dies wünscht.
Ein weiterer einfacher Abschnitt! Hier haben wir den Bauch (den Sporn der Spinne) und den Oberkörper. Beide befinden sich auf separaten Ebenen für mögliche Animationszwecke. Teile beschriftet lassen!
Da es sich bei den meisten Assets um Kopien von einander handelt, bestehen die einzigen Unterschiede zwischen dem Profilspider und dem Front-On:
Ich habe Bildschirmgriffe des Layer-Setups für Ihre Bequemlichkeit enthalten. Denken Sie daran, alles klar zu kennzeichnen!
Dies ist die einzige massive Änderung für die Spinne, bei der die Pupille in allen Fällen nach vorne vor den Augapfel bewegt wurde und statt acht Augen nur fünf sind.
Hier haben wir unser Spinnenvermögen für Dave übersichtlich angelegt!
MERKEN: Richtige Kennzeichnung istsehrwichtig.
Molke-Hey! Die Spinnensektion ist fertig und jetzt haben wir nur noch das Mittagessen von Little Fräulein Muffet. Dies wurde in die Schüssel, Quark, einen Löffel und etwas Quark auf dem Löffel zerlegt.
"Warum?" du fragst. Weil ich dachte, dass es cool sein könnte, wenn Miss Muffet Angst bekommt, fliegt der Inhalt ihrer Schüssel!
Gruppieren Sie sie und beschriften Sie sie dann wie zuvor.
Jetzt, da die einfachen Elemente erstellt wurden, haben wir die schwierigeren Aufgaben, Vermögenswerte für Dinge zu schaffen, die sich bewegen. Für Little Miss Muffet benötigen wir zwei Elemente: Profil und Front. Die Vorderseite ist für das Essen beim Essen, und die Seite ist für die Kamera, die weg läuft.
Miss M ist etwas trickreicher als die Spinne in dem Sinne, dass sie eine andere Anatomie und Kleidung benötigt und daher im Profil anders aussieht als direkt. Hier ist eine Übersicht aller Teile, die ich erstellt habe.
So sieht das hübsche kleine Fräulein Muffet aus. Sie werden so schnell groß! *schnüffeln*
Hier sind die Hauptteile ihrer Kleidung, mit Ausnahme von Schuhen und Ärmeln. Der Einfachheit halber habe ich die Ärmel mit den Armen und die Schuhe mit den Beinen aufbewahrt.
Hier sind ihre Seitenausdrücke, die so ziemlich reiner Terror sind.
Ziemlich einfach hier. Ich habe den Arm gerade gestrichen, um reine Angst darzustellen.
Der größte Teil des Beines wird durch den Rock verdeckt, aber ich habe Dave etwas mehr gegeben, nur für den Fall.
Ich habe ihr Haar getrennt, damit Dave es laufen lassen kann, wenn sie läuft!
Um das wirklich ausdrucksstark zu halten, habe ich verschiedene Mund- und Lippenformen erstellt, damit Dave sie beim Essen und Schockieren animieren kann. Das Haar ist da drin, da sich die Mundpartien oben befinden Schichten stapeln und die Haare müssen über allem stehen.
Ähnlich wie die Spinne hat Fräulein Muffet offene und geschlossene Augen, jedoch mit zusätzlichen Augenbrauen zum Ausdruck.
Ich habe ihren Körper und ihre Kleidung hier gruppiert, da sie sich nicht viel bewegen, während sie sitzt. Wenn Sie die Rock-Sitzschicht bemerken, gibt es eine Maske, die ich mitgeliefert habe, damit die Beine durchscheinen, und wenn Dave den ganzen Rock braucht, ist er für ihn da.
Die Arme sind wie zuvor, obwohl ich das Gefühl hatte, wir brauchten Hände, wenn sie die Schüssel und den Löffel hielt.
Ich habe Arme ohne Hände in einem separaten Ordner für die Animation mit den Händen hinzugefügt.
Einfache Beine, die im Sitzen oder Stehen verwendet werden können.
Wie beim Profillauf habe ich ihre Zöpfe als ihre eigenen Teile verwendet, um sie als weiteres emotionales Werkzeug zu verwenden.
Das fasst unsere Basiselemente zusammen. Neben dem Tweak der Assets, so dass sie so gut aussehen, wie sie können!
Wir müssen auch Little Fräulein Muffet und die Spinne mahlen, also werde ich eine Grasschicht schaffen, auf der sich die Füße der Charaktere bewegen können.
Auf einen Neue Schicht, Zeichnen Sie eine grobe Linie, in die das Gras gelangen soll. Machen Sie dies in einer offensichtlichen Kontrastfarbe.
Beginnen Sie mit dem Malen von Grashalmen mit einem Pinsel Ihrer Wahl.
Sobald Sie die gesamte Linie gemalt haben, Kopieren die Schicht durch Drücken von Steuerung-C und dann Einfügen (Steuerung-V). Dann Verwandeln (Control-T) und drehen und drehen Sie das Gras manuell, um es etwas üppiger zu machen.
Als nächstes sperren Sie die Transparenz der Ebene, indem Sie auf das kleine Schachbrett-Symbol neben klicken Sperren auf der Schichten Panel. Fügen Sie in einer Vielzahl der Grüns hinzu, um Abwechslung zu geben. Entriegeln Sie die Transparenz und nehmen Sie einen weichen Radiergummi (E) und den Rand der Grasfläche weicher machen.
Ich dupliziere die Grasschichten und drehe sie um, verwandle sie und verwende sie, um sie etwas anders zu machen. Auf dem Gras, das der Kamera am nächsten ist, verwische ich das Gras mit Gaußscher Weichzeichner die Illusion der Tiefe geben. Gaußscher Weichzeichner finden Sie unter Filter> Unschärfe> Gaußsche Unschärfe. Ich habe den Horizont des Grases im verwischt Umgebung Ordner etwas, nur um ein wenig Tiefe zu geben, mit dem gleichen Gaußscher Weichzeichner Methode.
Hier habe ich zu Little Miss Muffet gewechselt, um sicherzustellen, dass es mit beiden Charakteren gut aussieht.
Ich bin sehr zufrieden mit dem Aussehen des Grases. Ich drücke die acht Grasschichten in vier einfache Grasschichten und benenne sie entsprechend.
Dave wird sich um die Credits kümmern, also habe ich einfach Text in das PSD eingefügt, um Zeit zu sparen. Die Schriftart, die ich verwende, ist Futura Handwritten.
Dafür habe ich einen Titelbildschirm, Daves Credit und meinen eigenen Credit erstellt. Sie können dies tun, indem Sie einfach das auswählen Horizontales Werkzeug (T), wählen Sie die gewünschte Schriftart aus und geben Sie auf jeder Ebene ein, was Sie benötigen. Richten Sie den Text in der Mitte des Bildschirms aus, indem Sie drücken Control-T zu Verwandeln und Ausrichten der Fadenkreuze des Texts mit den Fadenkreuzen des 4K-Titelsafes.
Der letzte Schritt besteht darin, zu überprüfen, ob alle Ebenen einen Namen haben, und es gibt keine Ebenen, die nicht vorhanden sein sollten, z. Roughs, leere Schichten, Farbpaletten.
Speichern Sie die .PSD-Datei in einem Ordner wie "Dave Animation Assets". In diesem Ordner finden Sie alles, was Ihr Animator benötigt, z. B. das Storyboard, das Skript, ein Voiceover (wenn Sie es bereitstellen) und alle Schriftarten (für die Sie verteilen können und die dazu berechtigt sind). Wenn nicht, rastern Sie alle Textebenen. Senden Sie diesen Ordner anschließend per FTP, USB-Laufwerk oder Netzwerk an Ihren Animator und verbergen Sie ihn!
Ich hoffe, es hat Ihnen Spaß gemacht, in Adobe Photoshop Animationsassets zu erstellen. Sobald Sie die organisatorische Seite dieses Modells gefunden haben, können Sie Ihrer Kreativität freien Lauf lassen! Ich kann es kaum erwarten zu sehen, was Dave Bode mit meinen Elementen schafft!
Accentsconagua