Erwecke deinen Webcomic zum Leben: Gestalte einen animierten Comic!

1. Hallo nochmal!: Hallo wieder alle. Ich bin Sarah Anderson vom Web-Comic Sarah Scribbles, und ich habe zwei frühere Klassen auf Skillshare unterrichtet. Einer zum Erstellen eines Web-Comics und einer zum Färben. Heute werde ich Ihnen beibringen, wie Sie einen animierten Comic machen, indem Sie ein GIF erstellen. Die Verwendung von GIFs in Comics wird in der Web Comics Community immer beliebter. Viele bekannte Karikaturisten verwenden sie, darunter Jane Zei in der Pigeon Gazette und das äußerst beliebte Cyanid & Happiness. Ich persönlich benutzte sie in der Vergangenheit für meine längeren Formatartikel für College Humor. Nur ein animiertes Panel kann Ihren Comic wirklich auffällig machen. Darüber hinaus müssen GIFs nicht auf Panels beschränkt werden. GIF-Herstellung ist eine Fähigkeit, die für Künstler die ganze Zeit nützlich ist. Zum Beispiel können Sie ein animiertes Symbol wie die Künstler hinter dem Web-Comic Lae's Life erstellen . Ein weiteres Beispiel ist der Illustrator Matt Rockefeller , der diese schönen kleinen GIFs auf seiner Website als anklickbare Links verwendet hat. GIFs haben nur eine Möglichkeit, eine besondere Note zu Ihrer Arbeit hinzuzufügen. In dieser Klasse werden wir zusammen einen Comic machen und ich werde Sie durch jeden Schritt des Prozesses begleiten. Wir gehen vom Skizzieren über einen Testlauf bis hin zum Fertigstellen und Hochladen. Am Ende dieser Klasse haben Sie eine Fähigkeit gelernt, die Sie als Karikaturist und Künstler als Ganzes verbessern kann. Wenn du bereit bist, deinen Comic in Bewegung zu bringen, gehe zum nächsten Video, um loszulegen. 2. Deine Aufgabe: Ihre Aufgabe wird es sein, einen Comic zu erstellen, der mindestens einen animierten Aspekt hat. Animierte Aspekte können so einfach sein wie ein Blinzeln zu so kompliziert wie der Tintenfisch, der herumwackelt. Sie können mit verschiedenen Schwierigkeitsgraden experimentieren. Für dieses Projekt werde ich in Photoshop CC arbeiten und demonstrieren, obwohl die Schritte ziemlich einfach sind, so dass ältere Versionen von Photoshop kompatibel sind. Da ich mich in diesem Tutorial auf Animation konzentrieren werde, sollten Sie schon bequem sein, einen einfachen Comic auf eigene Faust einzurichten. Wenn Sie Hilfe benötigen, können Sie sich auf meine vorherigen Klassen beziehen. Hier ist der Comic, an dem ich arbeiten werde, und ich mache ein Geschenk meines Charakters, der in der letzten Platte tanzt. Wenn Sie eine Aufforderung für den Comic benötigen, versuchen Sie, etwas basierend auf Ihren persönlichen Erfahrungen zu machen. Denken Sie an lustige Dinge, die in Ihrem eigenen Leben passieren, die Spaß machen, in Bewegung zu sehen. Ich werde mehr darüber sprechen, welche Teile deines Comics am besten zu animieren sind im nächsten Video, also mach weiter, wenn du bereit bist. 3. Was soll animiert werden?: Bevor Sie anfangen, Ihr GIF zu erstellen, sollten Sie sich Ihre Comic-Idee vorstellen und versuchen zu bestimmen, welcher Aspekt am besten animiert funktionieren würde. Ein animiertes Element sollte entweder arbeiten, um den Comic zum Leben zu erwecken , oder es sollte helfen, eine Punchline zu liefern. Obwohl Sie wählen können, ein GIF so komplex oder so einfach zu gestalten, wie Sie möchten, verwenden Karikaturisten oft relativ einfache Animationen. Hintergrundelemente wie das Duschwasser in diesem Comic aus der Serie Boumeries, sind wirklich schöne Art, um Leben in Ihren Comic zu bringen. Ich liebe es, diese Art von GIFs als kleine Verzierungen zu verwenden, wie im Titel dieses Artikels, den ich für College Humor gemacht habe, und dann die schnelle Blinzeln direkt hier. In vielen Webcomics, die GIFs verwenden, wird das finale Panel animiert. Das letzte Panel ist oft das wichtigste für den Witz und das Hinzufügen eines GIF-Elements macht die Punchline noch lustiger. Ich liebe dieses Beispiel aus dem Webcomic, The Pigeon Gazette. Sie können sehen, dass sie ein bisschen mehr von einer komplizierten Bewegung verwendet , die wirklich hilft, diesen Comic lustig zu machen. Hier ist ein weiteres Beispiel, das ich liebe aus der Serie, Laut Devin. Es ist eine einfache Animation, aber das GIF macht die Punchline perfekt. Wenn Sie planen, was Sie animieren möchten, stellen Sie sicher, dass Sie etwas animieren, das wirklich zu Gunsten Ihres Comics funktioniert. GIF-Herstellung ist ein wenig mühsam, also machen Sie sich die Mühe wert Ihre Zeit. Wir sind auf dem nächsten Video und ich werde Ihnen zeigen, wie alles funktioniert. 4. Demo: Ich werde Ihnen jetzt zeigen, wie Sie Ihre Animation einrichten. Zuerst werde ich meine Datei einrichten, und da dies eine Demo und kein Comic ist, verwende ich nur einen einfachen Fünf-mal Fünf-Frame mit 300 Pixeln pro Zoll. Jetzt werde ich sicherstellen, dass ich im Bewegungsmodus bin. Wenn Sie diese Option auswählen, sollte die Animationszeitachse angezeigt werden. Wenn dies nicht der Fall ist, können Sie darauf zugreifen, indem Sie zu Fenster, Zeitleiste gehen. Bei älteren Versionen von Photoshop lautet das Fenster, Animation. Gehen Sie zu Ihrer Timeline und klicken Sie auf „Frame Animation erstellen“. Wir machen eine Frame-für-Frame-Animation, und hier werden Sie Ihre Keyframes organisieren. Sie machen Ihre eigentliche Zeichnung hier im Ebenenbedienfeld. Manchmal wird der Photoshop und der Motion-Modus loswerden Ihre Ebenen Wenn Sie sie also wieder sehen müssen, drücken Sie einfach F7. Ich werde zeigen, wie Sie Ihre Ebenen mit einer supereinfachen Zeichnung einrichten , und später werde ich Ihnen zeigen, wie ich diese Technik in meinem Comic verwende. Jetzt habe ich einen weißen Hintergrund und ich werde meine erste Ebene erstellen, indem ich hier klicke. Ich werde jede Ebene in der Reihenfolge der Animation benennen, um mich organisiert zu halten. Fangen wir mit diesem Gesicht an, das ich zum Blinken bringen möchte. Jetzt, da ich dieses erste Gesicht gezeichnet habe, möchte ich den ersten Schritt beim Blinken zeichnen, also werde ich diese Ebene duplizieren, indem ich auf „Steuerung“, Ebene duplizieren“ klicke, und dann werde ich das Original deaktivieren, indem ich auf die Schaltfläche Augenknopf daneben. Jetzt werde ich die Augen halb geschlossen zeichnen. Als nächstes wiederhole ich die gleichen Schritte wie zuvor und zeichne die letzte Ebene, in der ihre Augen geschlossen sind. Wir haben drei einfache Schritte: Öffnen, Mitte blinzeln und Auge geschlossen. Eins, zwei, drei. Als Nächstes werde ich meine Frames einrichten. In meiner Timeline und in meinem ersten Frame gehe ich zu meinen Ebenen und stelle sicher meine erste Ebene über die Augentaste eingeschaltet ist. Alles andere außer dem Hintergrund sollte abgeschaltet werden. Jetzt werde ich einen neuen Frame erstellen, indem ich hier klicke, und ich aktiviere die zweite Ebene. Auch hier sollte alles außer dieser Ebene ausgeschaltet werden. Schließlich füge ich den dritten Frame hinzu. Ihre Augen müssen sich danach wieder öffnen, also erstelle ich einen anderen Rahmen und gehe zurück zu Ebene 2. Endlich, wieder zu den Augen offen. Bevor wir es testen, lassen Sie uns einfach noch einmal durch diese Frames gehen. Eins, zwei, drei, und dann wieder zurück. Mal sehen, wie es aussieht. Drücken Sie die „Play“ -Taste, um es zu testen. Jetzt sahen wir gerade meinen Charakter blinzeln. Aber nur für eine Sekunde, wenn Sie sehen möchten, dass sich Ihre Animation wiederholt, gehen Sie hier, wo es „einmal“ steht, und ändern Sie sie in „für immer“. Sie können auch die Geschwindigkeit der Animation ändern, indem Sie die Verzögerungszeit zwischen den Frames ändern. Dies sind alle grundlegenden Schritte, um ein GIF zu erstellen. Gehen Sie zum nächsten Video, um zu sehen, wie ich ein GIF speziell für einen Comic erstelle. 5. Comic-Applikation: Ich bewege mich jetzt auf meinen Comic, der eine schwierigere Animation darin hat. Wie Sie sehen können, habe ich meinen Comic bereits vorgezogen , mit Ausnahme der endgültigen Figur. Die Schritte, die ich befolgen werde, sind die gleichen Schritte, die ich im vorherigen Video verwendet habe. Nur ich werde mehr Ebenen und Frames verwenden, um die komplexere Bewegung zu erstellen. Ich werde auch in rosa skizzieren, damit ich zuerst einen Testlauf machen kann und später gehe ich rüber und tinte es. Eine komplizierte Bewegung wie Tanzen sieht immer besser und glatter aus, wenn es mehr Rahmen hat. Aber es kann schwierig sein, herauszufinden, was Rahmen für Rahmen zu zeichnen ist. Deshalb werde ich für diese Animation eine Technik verwenden, die Zwiebelhäuten genannt wird. Ich werde damit beginnen, meine erste Ebene zu zeichnen. Dann werde ich die Deckkraft dieser Ebene abdrehen. Als nächstes werde ich den letzten Rahmen zeichnen, wo ich will, dass sie landet. Ich benenne diese Schichten auch entsprechend. Die Deckkraft dieser Ebene wird ebenfalls abgeschaltet. Sie können sehen, warum diese Technik Zwiebelhäuten genannt wird. Jetzt ist es einfacher für mich, das zu zeichnen, was zwischen diesen Bewegungen kommt. Ich werde zwei Schichten nehmen und zwischen meiner letzten und der ersten Ebene ziehen. Jetzt, wo ich die ersten Bewegungen habe, gehe ich rein und drehe alles um, also bewegt sie sich auch auf die andere Seite. Sobald ich das erledigt habe, teste ich, dass ich alles in Ordnung habe, und natürlich benenne ich meine Ebenen um, um sie organisiert zu halten. Schließlich werde ich reingehen und alles aus meiner Timeline setzen und dann die Testskizze ansehen. Drücken Sie auf Play, um zu testen. Das ist also meine erste Version und es gibt einige Dinge, die ich eigentlich ändern möchte. Zum einen möchte ich nicht, dass ihr Arm sich nach oben und unten bewegt, und ich möchte mehr Rahmen hinzufügen, um ihre Bewegung glatter zu machen. Ich möchte auch einige Notennoten im Hintergrund hinzufügen. Deshalb mache ich gerne einen Test, bevor ich reingehe und Tinte. Es gibt immer wenigstens eine Sache, die ich optimieren muss. Also werde ich voran gehen und diese Änderungen vornehmen, meine Zeitachse neu organisieren und Ihnen dann die endgültige Skizze zeigen. Okay, springe vorwärts zu den Bearbeitungen und das ist die Geschenkskizze, die ich mag. Ich denke, es ist viel besser und läuft viel reibungsloser. Ich fühle mich jetzt wohl, um es fertig zu stellen. Für mich halte ich diesen Comic einfach und mache nur kleinere. Was ich also mache, ist auf jede Skizzenebene zu gehen, eine neue Ebene darüber zu erstellen und meine Ebene direkt dort zu machen meine Ebene direkt . Dann gehe ich zurück zu meinem Skizzen-Layer und lösche die Skizze und verschmelze die Ebenen, indem Befehl E klicke. Ich habe das alles getan, während meine Timeline noch abgelaufen war, aber es gibt ein Problem damit. Die neuen Ebenen, die Sie gezeichnet haben, werden weiterhin in Ihren anderen Frames angezeigt. Also müssen Sie manuell durchgehen und sie abschalten, was ein Ärgernis ist. Wenn Sie dieses Problem vermeiden möchten, löschen Sie einfach Ihre Frames in der Timeline, erstellen Sie Ihre Linienart-Layer und gehen Sie danach zurück und erstellen Sie Ihre Timeline neu. Nachdem ich alles fertig gestellt habe, werde ich nur ein paar letzte Details hinzufügen, wie einen Hintergrund zeichnen und meine Signatur zeichnen. Da haben wir es. Jetzt bleibt nur noch das Speichern und Hochladen. Gehen Sie zum nächsten Video und ich werde Ihnen zeigen, wie. 6. Fertigstellung und Hochladen: Zeit zu sparen. GIFs müssen auf eine bestimmte Weise gespeichert werden, um online zu funktionieren. Zunächst müssen Sie sicherstellen, dass Sie Ihre Auflösung auf 72 dpi senken, um sicherzustellen, dass sie für die Webanzeige kompatibel ist. Sie können dies tun, indem Sie zu Bild, Bildgröße gehen und es dann eingeben. Als nächstes gehen Sie zu Datei, Für Web speichern, und stellen Sie sicher, dass die obere rechte Ecke auf GIF gesetzt ist. Jetzt können Sie voran gehen und sparen. Jetzt gehen wir weiter und laden Sie es in die Projektgalerie hoch. Also, jetzt haben Sie sich selbst einen animierten Web-Comic. Denken Sie daran, es in die Projektgalerie hochzuladen, damit wir einen Blick werfen und Feedback hinterlassen können. Denken Sie daran, GIF-Herstellung ist eine Fähigkeit, die über Ihren Web-Comic hinausgehen und andere Aspekte Ihrer Kunst verschönern kann . Sie können animierte Symbole und Banner erstellen, um Ihre Website zu verbessern oder Sie können sie einfach zum Spaß machen. Ich hoffe, Sie haben die Klasse genossen. Wir sehen uns nächstes Mal.