7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Animation

So erstellen Sie Animations-Assets in Adobe Photoshop

Scroll to top
Read Time: 16 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Einführung

Willkommen zu meinem Tutorial zum Erstellen von Animations-Assets in Adobe Photoshop. In diesem Tutorial erfahren Sie nicht, wie Sie Gegenstände speziell zeichnen. Es geht mehr darum, wie man über die Elemente für die Animation nachdenkt. Was braucht mein Animator und warum? Wir werden erklären, was Title Safe ist und wie wichtig die korrekte Kennzeichnung ist.

Vermögenswerte

Unsere Geschichte zum Animieren

Für dieses Tutorial werde ich Little Miss Muffet als unsere Geschichte verwenden.

Kleines Fräulein MuffetSaß auf einem Tuffet,Essen von Quark und Molke;

Da kam eine Spinne,Wer hat sich neben sie gesetztUnd verschreckte Miss Muffet.

Assets, die wir schaffen werden

Um die Erstellung 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.

Kleines Fräulein Muffet

  • Profilwanderung
  • Profillauf
  • Sitzend
  • Kopf
  • Gesicht: Essen, Augen blinzeln
  • Waffen
  • Beine
  • Körper
  • Hände
  • Arme: keine Hände

Tuffet

  • Großes Kissen

Quark & Molke

  • Schüssel
  • Löffel
  • Hüttenkäse

Spinne: Side und Front On

  • Beine x 6; Arme x2
  • Zylinder
  • Stock
  • Augen
  • Mandibeln
  • Abdomen
  • Oberkörper

Umgebung

  • Baum
  • Hügel
  • Sonne
  • Wolke
  • Gras

PSD-Setup: Storyboard

Für unser Storyboarding können Sie das Dokument wirklich auf jede beliebige Größe einrichten. Um jedoch die Proportionen zu wahren, habe ich mich für 1920 x 1200 px bei 72 dpi entschieden, wobei der Farbmodus auf RGB (Monitorfarbe) eingestellt ist.

Storyboard Document SetupStoryboard Document SetupStoryboard Document Setup

So habe ich das Storyboard eingerichtet. Jede Zeile des Reims hat ein eigenes Panel bekommen. Dafür brauchen wir es nicht wirklich detailliert zu sein – stellen Sie es sich wie Thumbnailing vor. Wir brauchen nur eine Grundidee der Aktion, die bei Bedarf mit Pfeilen und Kommentaren dargestellt werden kann. Dies ist für den Animator nützlich, damit er weiß, was passieren muss. Diese Frames können auch verwendet werden, um herauszufinden, wie lange jede Aktion auf dem Bildschirm sein muss, und um sicherzustellen, dass sie bei der Einstellung auf Audio übereinstimmt.

Blank StoryboardBlank StoryboardBlank Storyboard

Hier ist mein grobes Storyboard, und der Animator Dave Bode ist mit seinem Aussehen zufrieden, damit ich mit der Erstellung der Assets beginnen kann.

StoryboardStoryboardStoryboard

PSD-Setup: Assets

Da sich die Szene dafür nicht ändert, werden wir alle .psds im selben Dokument erstellen. After Effects ist wie ein zeitbasiertes Photoshop, also verwendet es Ebenen und Gruppen auf die gleiche Weise. Für komplexere Animationen wäre es ratsam, Charaktere, Assets und/oder Umgebungen in separaten Dokumenten zu erstellen.

Für diese Animation möchte Dave die Dokumentgröße 3840 x 2160 px bei 72 dpi haben, was einer 4K-Auflösung entspricht. So kann er bei Bedarf ein wenig Spielraum beim Zoomen und Schwenken haben. Ich erstelle ein neues Dokument, indem ich auf Datei > Neu gehe.

Assets Document SetupAssets Document SetupAssets Document Setup

Im Ebenenbedienfeld habe ich Gruppen erstellt, in denen unsere Assets platziert werden. Gruppen können durch Klicken auf das Ordnersymbol unten im Ebenenbedienfeld erstellt werden. In diese können Sie neue Ebenen ziehen oder erstellen. So bleibt 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 alle Ebenennamen innerhalb dieser Gruppe automatisch in diese Farbe geändert. Sie können die Farbe der Ebenen innerhalb der Gruppen ändern, indem Sie mit der rechten Maustaste darauf klicken.

Mit Layers organisiert zu sein ist eine große Zeitersparnis und ist besonders wichtig, wenn Sie einen engen Termin haben, es spät in der Nacht ist und Sie gerade den letzten Kaffee getrunken haben.

Layers SetupLayers SetupLayers Setup

Das komplexeste Element in der Geschichte von Miss Muffet ist die Spinne, hauptsächlich aufgrund ihrer Anzahl von 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 Ebenen für zusätzliche Ausdrücke, Requisiten usw. hinzufügen.

Es besteht eine sehr gute Chance, dass einige der Ebenen geändert, verschoben, aktualisiert, dupliziert und entfernt werden, also nehmen Sie diese Vorlage nicht wörtlich. Es soll nur eine Vorstellung davon geben, wie die Dinge eingerichtet werden können. Bei der Erstellung von Assets übersehen Sie leicht scheinbar einfache Dinge, entweder durch Ihre eigene Planung oder von Ihrem Kunden oder(Art-)Direktor, also erwarten Sie Veränderungen!

Spider Layers SetupSpider Layers SetupSpider Layers Setup

Titelsafe: Was ist das und warum brauchen wir es?

Was ist titelsicher? Überall auf der Welt verwenden Menschen Geräte mit unterschiedlichen Seitenverhältnissen und Auflösungen, und wir müssen den kleinsten gemeinsamen Nenner berücksichtigen. Die meisten Leute sehen sich diese Animation auf einem 16:9-Bildschirm an, aber jemand da draußen hat vielleicht noch einen 4:3-Monitor, also müssen wir sicherstellen, dass keine wichtigen Informationen an den Rändern abgeschnitten werden. Unten ist ein Beispiel für sichere Titelgrenzen.

4K Title Safe4K Title Safe4K Title Safe

In diesem Beispiel wird der blaue Bereich auf allen Geräten angezeigt, und der violette Bereich ist so ziemlich die Grenze, an der eine Aktion ausgeführt werden sollte. Wir müssen dies bei der Erstellung von Assets berücksichtigen. Stellen Sie daher bei der Arbeit an einer Animation sicher, dass Sie die sicheren Grenzen des Titels von Ihrem Animator haben.

Das Kreuz auf dem blauen Quadrat zeigt die Mitte der Szene an und die senkrechten Linien am Rand zeigen die Mitten der Szene an.

4k Title Safe Highlighted Safe Zones4k Title Safe Highlighted Safe Zones4k Title Safe Highlighted Safe Zones

Als nächstes wähle ich dieses Bild aus und platziere es in meiner PSD. Dies hängt davon ab, wie Ihnen Ihr Titelsafe zur Verfügung gestellt wird. Eine schnelle Möglichkeit, dieses Bild zu erhalten, besteht darin, einen Druckbildschirm von After Effects einer 4K-Szene mit angewendetem Titelschutz zu erstellen. Dies ist möglicherweise nicht so sauber und scharf wie das obige Beispiel. Wenn Sie also das Gefühl haben, in Photoshop viel Animationsarbeit zu leisten, lohnt es sich möglicherweise, die Linien zu bereinigen.

Unser Prozess

Wir beginnen mit groben Skizzen aller Elemente. Warum tun wir das? Dies ist, damit wir die relativen Größen richtig bestimmen können. Dinge wie: "Ist das Tuffet groß genug, um zu zweit darauf zu sitzen?" "Wie groß muss die Sonne am Himmel sein?" "Gibt es genug Platz für die Aktion?"

Für jeden Elementsatz zeige ich Ihnen den Prozess von der Skizzenphase bis zur vollständigen Asset-Phase. Beginnen wir mit dem Setting der Szene: Der Hintergrund.

Beginnen Sie mit dem Hintergrund

Zuerst habe ich im Hintergrund mit dem Tuffet, Little Miss Muffet und der Spinne in der sitzenden Pose aufgeraut, um sicherzustellen, dass alles passt. Jedes Element der Skizze befindet sich der Einfachheit halber auf einer separaten Ebene.

Scene RoughScene RoughScene Rough

Als nächstes schalte ich die Charakter- und Tuffet-Ebenen aus und kümmere mich nur um die Hintergrundelemente.

Background sketchBackground sketchBackground sketch

Nachdem wir nun unsere grundlegende Szene ausgearbeitet haben, müssen wir herausfinden, was wir brauchen. Die Cloud wird verschoben, es werden jedoch keine Formularänderungen vorgenommen. Ich denke jedoch, dass es interessant wäre, die Sonnenstrahlen animieren zu lassen, also werden wir zwei Sätze von Strahlen haben, zwischen denen Dave verblassen oder schneiden kann.

Bei einigen Animationsprojekten würden wahrscheinlich Dinge wie Modellblätter und Farben mit dem Kunden im Voraus vereinbart werden, aber in diesem Fall entwerfe ich aus Spaß nur im Handumdrehen!

Hier habe ich alle unnötigen Ebenen deaktiviert und die Deckkraft der Skizze verringert. Stellen Sie den Skizzenordner in den Ebenenstilen auf Multiplizieren, damit er leichter zu sehen ist.

Background ElementsBackground ElementsBackground Elements

Ich habe beschlossen, die Sonne herunterzuskalieren, da sie zu groß ist. Dazu wähle ich die Sonne plus die beiden Strahlenebenen aus und drücke Strg-T zum Transformieren. Wir müssen sicherstellen, dass die Szenenelemente die Action nicht überwältigen.

Background - Smaller SunBackground - Smaller SunBackground - Smaller Sun

So wurden die Umgebungsebenen organisiert.

Environment LayersEnvironment LayersEnvironment Layers

Tuffet

Das Tuffet ist eine ziemlich einfache Sache, die man der Szene hinzufügen kann, aber es ist auch ziemlich wichtig, da sowohl Little Miss Muffet als auch die Spinne darauf sitzen können müssen. Ein Tuffet ist wie ein Fußschemel oder ein großes Kissen.

Unten haben wir die Szene mit dem Tuffet mittig skizziert, da hier der Großteil der Handlung stattfinden muss.

Tuffet RoughTuffet RoughTuffet Rough

Planen Sie beim Erstellen von Szenen immer diese. Die Größe der Charaktere muss relativ zu ihrer Umgebung und zueinander sein. Wie Sie sehen können, habe ich auch eine grobe Schüssel für Quark und einen Löffel als One-Stop-Referenz für uns beigefügt. Ein wenig Planung kann später viel Arbeit ersparen. Hier haben wir das Tuffet erstellt und können anhand einer groben Skizze der Charaktere überprüfen, ob beide bequem passen. Dies kann ein nützliches Bild sein, das Sie an Ihren Animator senden können.

Tuffet Rough Over Background With CharactersTuffet Rough Over Background With CharactersTuffet Rough Over Background With Characters

So werden die Assets unserem Animator zur Verfügung gestellt. Ich habe etwas überlappendes Gras gezeichnet, um das Tuffet zu erden, aber ich habe dies auf einer separaten Ebene belassen, falls der Animator in After Effects einige Effekte darauf ausführen möchte.

.Tuffet LayersTuffet LayersTuffet Layers

Spider Multiple Assets: Zeitsparender Trick!

Wenn es um Dinge wie Spinnen geht, werden Sie sich wiederholende Elemente erhalten, warum also jedes einzelne von Hand zeichnen? Hier ist eine einfache Möglichkeit, im Handumdrehen mehrere Funktionen zu erhalten!

Augen

Schritt 1

Jetzt können Spinnen eine unterschiedliche Anzahl von Augen haben, und wir möchten nicht jedes einzeln zeichnen. Auf einer neuen Ebene malen Sie einen Augapfel aus.

One EyeOne EyeOne Eye

Schritt 2

Ziehen Sie das Auge sieben Mal heraus, indem Sie Alt gedrückt halten und das Verschieben-Werkzeug (V) ausgewählt haben, und positionieren Sie alle Augen auf dem Gesicht.

EyesEyesEyes

Schritt 3

Malen Sie auf einer neuen Ebene ein geschlossenes Augenlid über eines der Augen. Wiederholen Sie den Kopiervorgang für die anderen sieben Augen.

Eyes with One LidEyes with One LidEyes with One Lid

Schritt 4

Ordnen Sie die Schichten so an, dass die entsprechenden Lider über den Augäpfeln sitzen. Blenden Sie die geschlossenen Lidschichten aus und wählen Sie jeden Satz von Augen und Lidern aus. Drücken Sie als nächstes Strg-T, um sie zu skalieren, und wiederholen Sie den Vorgang mit den anderen Augen- und Liderpaaren.

Eye Balls ScaledEye Balls ScaledEye Balls Scaled

Sie sollten mit einem Set wie diesem enden. Wenn Sie die Lidschicht ein- und ausschalten, sieht es so aus, als würde sie Ihnen zuzwinkern!

Eye Lids - ScaledEye Lids - ScaledEye Lids - Scaled

Arme und Beine

Schritt 1

Wenn Sie keinen Tausendfüßler animieren, ist Mr. Spider wahrscheinlich ein Beispiel für die meisten Bein-Assets, die Sie erstellen müssen. Zum Glück sind Spinnenbeine ziemlich einheitlich, sodass wir uns etwas Zeit sparen können.

Unten sind unsere Spinnen-Roughs: front on und side on. Aufgrund des schlichten Designs können wir die Beinformen für die Vorder- und Seitenansicht verwenden. Halten Sie Ihre Modellblatt-Roughs für diesen Abschnitt bereit.

Spider Roughs BSpider Roughs BSpider Roughs B

Schritt 2

Zeichne die drei Abschnitte des Beins: den Oberschenkel, die Wade und den Fuß. Ich werde jeden auf einer neuen Ebene erstellen, damit Dave diese Abschnitte unabhängig animieren kann. Beim Zeichnen der drei Abschnitte achte ich darauf, dass sie sich leicht überlappen. Er kann das Marionettenwerkzeug in After Effects verwenden, damit er die drei Beinabschnitte zusammenfügen kann. Meiner Erfahrung nach ist es besser, dem Animator Optionen zu geben!

Leg SectionsLeg SectionsLeg Sections

Schritt 3

Nachdem Sie Ihre drei Beinabschnitte bemalt haben, wählen Sie Oberschenkel, Wade und Fuß aus und kopieren Sie sie noch dreimal. Sie können dies tun, indem Sie die drei Ebenen auswählen, indem Sie die Umschalttaste gedrückt halten und sie auf das Symbol Neue Ebene unten im Ebenenbedienfeld ziehen, das ein Quadrat mit einer gefalteten Ecke ist.

Painted Copied LegsPainted Copied LegsPainted Copied Legs

Schritt 4

Wählen Sie zwei Beine aus und verwenden Sie Transform (Strg-T), um sie horizontal zu spiegeln, indem Sie zu Bearbeiten > Transformieren > Horizontal spiegeln gehen. Gruppieren Sie jedes Bein einzeln und geben Sie ihnen einen hilfreichen Namen wie Beinkopie 2.

Schritt 5

Wir wiederholen den Vorgang des Erstellens von drei Abschnitten für die Arme: Oberarm, Unterarm und Hand. Denken Sie daran, wenn Sie die Abschnitte bemalen, um eine kleine Überlappung zu ermöglichen.

Schritt 6

Hier sind die fertiggestellten Front-on-Spider-Assets. Er ist der Einfachheit halber in dieser Pseudo-T-Pose und ich bin sicher, Dave wird es einfacher finden, mit ihm zu animieren, wenn er so angelegt ist.

Spider Front OnSpider Front OnSpider Front On

Kopieren Sie als nächstes alle Bein- und Armebenen, fügen Sie sie in die seitliche Gruppe ein und ordnen Sie sie nach Bedarf neu an.

Spinnen-Asset-Organisation: Frontseitige Spinne

Hier kommt der nicht-kreative, organisatorische Abschnitt, der, obwohl er nicht sehr lustig ist, sehr notwendig ist. Sie werden sich später dafür bedanken, dass Sie überprüft haben, ob alles in Ordnung ist. Hier ist eine Aufschlüsselung der Front-On-Spider-Assets.

Der Stock

Der Stock ist eines dieser wunderbaren Assets, bei dem wir ihn einfach für die Vorder- und Seitenansicht kopieren und einfügen können. Wir könnten dies nur als einen Vorteil haben, aber da die Front-On- und Side-On-Spider in eigenen Gruppen sind, bedeutet dies, dass Ihr Animator nicht nach den einzelnen Abschnitten suchen muss.

Spider Cane ASpider Cane ASpider Cane A

Die Arme

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 jeder Gruppe beschriftet sind.

Spider Arms ASpider Arms ASpider Arms A

Die Beine

Nach wie vor ist dies eine Kennzeichnungsaufgabe und so habe ich das für Dave ausgelegt.

Spider Legs ASpider Legs ASpider Legs A

Die Augen

Die Augen! Achten Sie dabei darauf, dass das richtige geschlossene Auge mit dem richtigen offenen Auge übereinstimmt, das direkt darunter liegen sollte.

Spider Eyes ASpider Eyes ASpider Eyes A

Der Kopf

Dies ist zum Glück einfacher zu organisieren! Hier haben wir den Basiskopf und die Mandibeln der Spinne (wenn Sie mit der Anatomie der Spinnentiere nicht vertraut sind, sind dies die Teile um das Maul der Spinne). Ich habe diese separat, damit Dave sie animieren kann, wenn er es wünscht.

Spider Head ASpider Head ASpider Head A

Der Körper

Ein weiterer einfacher Abschnitt! Hier haben wir den Bauch (den Hintern der Spinne) und den Oberkörper. Beide befinden sich für mögliche Animationszwecke auf separaten Ebenen. Teile beschriftet aufbewahren!

Spider Body ASpider Body ASpider Body A

Spider-Asset-Organisation: Profil

Da die meisten Assets Kopien voneinander sind, sind die einzigen Unterschiede zwischen der Profilspinne und der Front-On:

  • Die Pupillen der Augen wurden an die Vorderseite der Augäpfel verschoben.
  • Es gibt nur fünf Augen, da einige aus diesem Blickwinkel nicht zu sehen wären.
  • Die Platzierung der Anatomie wurde verschoben.

Ich habe Screenshots des Layer-Setups für Ihre Bequemlichkeit eingefügt. Denken Sie daran, alles deutlich zu beschriften!

Der Stock

Spider Cane BSpider Cane BSpider Cane B

Die Arme

Spider Arms BSpider Arms BSpider Arms B

Der Kopf

Spider Head BSpider Head BSpider Head B

Die Augen

Dies ist die einzige massive Änderung für die Spinne, bei der die Pupille in allen Fällen nach vorne verschoben wurde und statt acht Augen nur fünf sind.

Spider Eyes BSpider Eyes BSpider Eyes B

Die Beine

Spider Legs BSpider Legs BSpider Legs B

Endlich: Der Körper

Spider Body BSpider Body BSpider Body B

Hier haben wir unsere Spinnen-Assets für Dave übersichtlich dargestellt!

Spiders CompleteSpiders CompleteSpiders Complete

Denken Sie daran: Die richtige Kennzeichnung ist sehr wichtig.

Quark und Molke

Molke-hey! Die Spinnenabteilung ist fertig und jetzt haben wir nur noch Little Miss Muffets Mittagessen zu erledigen. Dies wurde in die Schüssel, Quark, einen Löffel und etwas Quark auf dem Löffel aufgeteilt.

"Warum?" du fragst. Weil ich dachte, es könnte cool sein, wenn Miss Muffet Angst hat, der Inhalt ihrer Schüssel fliegt!

Gruppieren Sie sie und beschriften Sie sie wie zuvor.

Curds and Whey AssetsCurds and Whey AssetsCurds and Whey Assets

Side-On-Assets von Little Miss Muffet

Nachdem die einfachen Elemente jetzt erstellt wurden, haben wir die kniffligeren Aufgaben, Assets für Dinge zu erstellen, die sich bewegen. Für Little Miss Muffet benötigen wir zwei viele Elemente: Profil und Front-On. Die Vorderseite ist für sie sitzend beim Essen und die Seite ist für ihre wegrennende Kamera.

Miss M ist insofern etwas kniffliger als die Spinne, da sie eine andere Anatomie und Kleidung braucht und daher im Profil anders aussieht als geradeaus. Hier ist eine Aufschlüsselung aller Teile, die ich erstellt habe.

Little Miss Muffet - Starting poseLittle Miss Muffet - Starting poseLittle Miss Muffet - Starting pose

So sieht die hübsche Little Miss Muffet bemalt aus. Sie werden so schnell groß! *schnüffeln*

Little Miss Muffet - Assets TogetherLittle Miss Muffet - Assets TogetherLittle Miss Muffet - Assets Together

Kleidung

Hier sind die Hauptteile ihrer Kleidung, mit Ausnahme ihrer Schuhe und Ärmel. Der Einfachheit halber habe ich die Ärmel mit den Armen und die Schuhe mit den Beinen behalten.

BibBibBib
Skirt and Top LayersSkirt and Top LayersSkirt and Top Layers

Kopf und Ausdrücke

Hier sind ihre Seitenausdrücke, die so ziemlich nur purer Terror sind.

Head and ExpressionsHead and ExpressionsHead and Expressions

Waffen

Ziemlich unkompliziert hier. Ich habe den Arm gerade ausgemalt, um pure Angst darzustellen.

Left ArmLeft ArmLeft Arm
Right ArmRight ArmRight Arm

Beine

Der größte Teil des Beins wird vom Rock verdeckt, aber ich habe Dave für alle Fälle etwas mehr gegeben.

Left LegLeft LegLeft Leg
Right LegRight LegRight Leg

Haar

Ich habe ihre Haare getrennt gehalten, damit Dave sie beim Laufen animieren kann, wenn sie hinter ihr läuft!

Pigtails - SidePigtails - SidePigtails - Side

Die Face-On-Assets von Little Miss Muffet

Mund und Haare

Um dies wirklich ausdrucksstark zu halten, habe ich eine Vielzahl von Mund- und Lippenformen kreiert, damit Dave sie beim Essen und Schock animieren kann. Die Haare sind da drin, da sich die Mundwerkzeuge ganz oben auf dem Layer-Stapel befinden und die Haare über allem sein müssen.

Moth and Hair LayersMoth and Hair LayersMoth and Hair Layers

Augen

Ähnlich wie die Spinne hat Miss Muffet offene und geschlossene Augen, aber mit zusätzlichen Augenbrauen zum Ausdruck.

Eyes Face OnEyes Face OnEyes Face On

Gesichtsbasis und Körper

Ich habe ihren Körper und ihre Kleidung hier gruppiert, da sie sich nicht viel bewegen, während sie sitzt. Wenn Sie die Sitzschicht des Rocks beachten, gibt es eine Maske, die ich beigefügt habe, damit die Beine durchscheinen, und wenn Dave den ganzen Rock braucht, ist sie für ihn da.

Face Base and BodyFace Base and BodyFace Base and Body

Waffen

Die Arme sind wie zuvor, obwohl ich das Gefühl hatte, dass wir ihre eigenen Hände brauchten, wenn sie die Schüssel und den Löffel hält.

Left ArmLeft ArmLeft Arm

Right ArmRight ArmRight Arm

Ich habe Arme ohne Hände in einem separaten Ordner für die Animation mit den Händen hinzugefügt.

Arms - No HandsArms - No HandsArms - No Hands

Beine

Einfache Beine, die im Sitzen oder Stehen verwendet werden können.

Left Leg - Front OnLeft Leg - Front OnLeft Leg - Front On

Right Leg - Front OnRight Leg - Front OnRight Leg - Front On

Zöpfe

Wie beim Profillauf habe ich ihre Zöpfe als eigene Stücke verwendet, um sie als weiteres emotionales Werkzeug zu verwenden.

Pigtails - Front OnPigtails - Front OnPigtails - Front On

Das fasst unsere Basiselemente zusammen. Als nächstes optimieren Sie die Assets, damit sie so gut wie möglich aussehen!

Letzter Schliff

Wir müssen auch Little Miss Muffet und die Spinne erden, also werde ich eine Grasschicht erstellen, damit die Füße der Charaktere sich dahinter bewegen können.

Schritt 1

Zeichnen Sie auf einer neuen Ebene eine grobe Linie, wo das Gras hingehen soll. Machen Sie dies in einer offensichtlichen Kontrastfarbe.

Grass LineGrass LineGrass Line

Schritt 2

Beginnen Sie mit dem Malen von Grashalmen entlang der Linie mit einem Pinsel Ihrer Wahl.

Lower Opacity BackgroundLower Opacity BackgroundLower Opacity Background

Schritt 3

Nachdem Sie die gesamte Linie gemalt haben, kopieren Sie die Ebene, indem Sie Strg-C und dann Einfügen (Strg-V) drücken. Dann Transformiere (Strg-T) und drehe und drehe das Gras manuell, um es etwas üppiger zu machen.

Draw in Grass - TransformDraw in Grass - TransformDraw in Grass - Transform

Schritt 4

Sperren Sie als Nächstes die Transparenz der Ebene, indem Sie im Ebenenbedienfeld auf das kleine Schachbrettsymbol neben Sperren klicken. Fügen Sie eine Vielzahl von Grüns hinzu, um Abwechslung zu schaffen. Entriegeln Sie die Folie, nehmen Sie einen weichen Radiergummi (E) und glätten Sie die Kante des Grassockels.

Grass over Characters feetGrass over Characters feetGrass over Characters feet

Schritt 5

Ich dupliziere die Grasschichten und drehe, transformiere und verforme sie dann, um sie etwas anders zu machen. Auf dem Gras, das der Kamera am nächsten ist, verwische ich das Gras mit Gaussian Blur, um die Illusion von Tiefe zu erzeugen. Gaussian Blur finden Sie unter Filter > Blur > Gaussian Blur. Ich habe den Horizont des Grases im Environment-Ordner leicht unscharf gemacht, nur um ein wenig Tiefe zu geben, mit der gleichen Gaußschen Unschärfe-Methode.

Hier habe ich zu Little Miss Muffet gewechselt, um sicherzustellen, dass es mit beiden Charakteren gut aussieht.

Blurred Foreground GrassBlurred Foreground GrassBlurred Foreground Grass

Schritt 6

Ich bin sehr zufrieden mit dem Aussehen des Grases, also glätte ich die acht Grasschichten in vier einfache Grasschichten und benenne sie entsprechend.

Grass LayersGrass LayersGrass Layers

Credits

Dave wird sich um die Credits kümmern, also habe ich einfach etwas Text in die PSD eingefügt, um ihm Zeit zu sparen. Die Schriftart, die ich verwende, ist Futura Handgeschrieben.

Dafür habe ich einen Titelbildschirm, Daves Credit und meinen eigenen Credit erstellt. Sie können dies tun, indem Sie einfach das horizontale Schriftwerkzeug (T) auswählen, die gewünschte Schriftart auswählen und auf jeder Ebene eingeben, was Sie benötigen. Richten Sie den Text in der Mitte des Bildschirms aus, indem Sie zum Transformieren Strg-T drücken und das Fadenkreuz des Textes am Fadenkreuz des 4K-Titelsafes ausrichten.

Title ScreenTitle ScreenTitle Screen

After Effects CreditAfter Effects CreditAfter Effects Credit

Animation Assets CreditAnimation Assets CreditAnimation Assets Credit

Text LayersText LayersText Layers

Letzter Schritt

Unser letzter Schritt besteht darin, zu überprüfen, ob alle Ebenen benannt sind und keine Ebenen vorhanden sind, die nicht vorhanden sein sollten, z. Roughs, leere Ebenen, Farbpaletten.

Speichern Sie die .PSD in einem Ordner wie "Dave Animation Assets". Legen Sie in diesem Ordner alles ab, was Ihr Animator benötigt, wie das Storyboard, das Skript, ein Voiceover (wenn Sie es bereitstellen) und alle Schriftarten (die Sie verteilen können und an denen Sie Rechte haben). Wenn nicht, rastern Sie alle Textebenen. Senden Sie diesen Ordner als Nächstes per FTP, USB-Laufwerk oder Netzwerk an Ihren Animator und verstecken Sie ihn dann!

Abschluss

Ich hoffe, es hat Ihnen Spaß gemacht, zu lernen, wie Sie Animationselemente in Adobe Photoshop erstellen. Sobald Sie die organisatorische Seite dieser Aufgabe genagelt haben, können Sie Ihrer Kreativität freien Lauf lassen! Ich kann es kaum erwarten zu sehen, was Dave Bode mit meinen Elementen kreiert!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.