Unlimited PowerPoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Presentations

Erstellen und Zusammenstellen einer Demo-Vorlage für eine Handy-App

by
Length:LongLanguages:

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

In diesem Tutorial lernen Sie den Arbeitsablauf zum Einrichten einer Szene für eine aimierte Packung eines Telefons in CINEMA 4D und zum Zusammensetzen in After Effects. Vielleicht haben Sie eine revolutionäre iPhone-App entwickelt, die Sie der Welt präsentieren möchten, oder Sie möchten einfach nur den grundlegenden Arbeitsablauf für das Zusammensetzen von 3D-Pässen in After Effects lernen. In jedem Fall hoffe ich, dass dieses Tutorial Ihnen dabei hilft.


Zunächst richten wir die Szene in CINEMA 4D ein, animieren das Telefonmodell und gehen die erforderlichen Rendereinstellungen durch, um unsere Dateien in After Effects zu integrieren. Danach komponieren wir unsere Szene in After Effects mit Luma und Alpha Mattes. Mit ein paar einfachen Schritten erstellen wir auch einen Hintergrund und eine Reflexion auf dem Boden.

Das in diesem Tutorial verwendete Telefonmodell stammt von Anders Kjellberg, der Dogday Design betreibt. Sie können es hier kostenlos herunterladen.

Schritt 1

Erstellen Sie zunächst eine neue Szene in CINEMA 4D. Gehen Sie im oberen Menü zu Rendern > Rendereinstellungen… oder drücken Sie Befehlstaste + B. Wählen Sie in den Rendereinstellungen Ausgabe und überprüfen Sie die Kamerabreite und -höhe. Ich habe die Kamera für dieses Tutorial auf 1280 x 720 eingestellt.

.

Schritt 2

Fügen wir nun unser Handy zur Szene hinzu. Gehen Sie im oberen Menü zu Datei > Zusammenführen… oder drücken Sie Befehlstaste + Umschalttaste + O und wählen Sie Ihr Telefonmodell aus den Projektdateien aus.

.

Schritt 3

Wenn wir unser Telefon in der Szene haben, müssen wir ein neues Ebenenprimitiv erstellen, das den Inhalt unserer Anzeige darstellt.

.

Schritt 4

Doppelklicken Sie auf die Ebene, die Sie gerade im Objektmanager erstellt haben, um sie umzubenennen. Nennen wir es "Display". Übergeordnetes Element zum Telefon durch Ziehen und Ablegen innerhalb der Telefonhierarchie.

.

Schritt 5

Wechseln Sie in die Vorderansicht und ändern Sie die Ausrichtung Ihrer Ebene im Attribut-Manager auf + Z, damit sie mit Ihrem Telefon übereinstimmt. Stellen Sie sicher, dass die Ebene groß genug ist, um Ihren Bildschirm auszufüllen. In diesem Tutorial ist die Ebene 111 x 168 cm groß, die Größe kann jedoch je nach Maßstab Ihrer Szene und Modell Ihres Telefons variieren. Reduzieren Sie die Segmente Breite und Höhe auf 1.

.

Schritt 6

Wechseln Sie in die rechte Ansicht und schieben Sie die Ebene leicht nach hinten, sodass sie sich direkt hinter dem Glas unseres Bildschirms befindet. Gehen Sie zurück in die Perspektivansicht.

.

Schritt 7

Um die Daten zu erhalten, die wir zum Zusammensetzen unseres Bildschirms in After Effects benötigen, müssen wir unserer Anzeigeebene ein "Externes Compositing-Tag" hinzufügen. Wählen Sie dazu Ihre Objektebene im Objektmanager aus und gehen Sie im oberen Menü des Objektmanagers zu Tags > CINEMA 4D-Tags und suchen Sie das "Externe Compositing-Tag" in der Liste.

.

Schritt 8

Wir müssen einige Anpassungen an den Einstellungen des Tags vornehmen. Klicken Sie daher im Objekt-Manager neben unserer Anzeigeebene auf das Tag, um die Einstellungen im Attribut-Manager anzuzeigen. Stellen Sie sicher, dass das Kontrollkästchen "Solid" aktiviert ist, und passen Sie die Größe X und Y so an, dass sie der Größe unserer Anzeigeebene entspricht. In diesem Fall wäre die Größe X 111 und die Größe Y 168.

.

Schritt 9

Wir müssen unserer Anzeigeebene auch einen Objektpuffer hinzufügen. Mit dem Objektpuffer können wir die Anzeige später in After Effects separat zusammenstellen. Wählen Sie dazu im Objekte-Manager die Anzeigeebene aus, gehen Sie zu Tags > CINEMA 4D-Tags und wählen Sie "Compositing Tag" aus der Liste.

.

Schritt 10

Klicken Sie im Objekt-Manager auf das "Compositing-Tag", um die Einstellungen anzuzeigen, und klicken Sie auf die Registerkarte "Objektpuffer". Aktivieren Sie das Kontrollkästchen für "Puffer 1".

.

Schritt 11

Da der Rahmen um das Telefon aus einem anderen Material besteht als das Glas an der Vorder- und Rückseite des Telefons, möchten wir ihn möglicherweise in After Effects separat zusammensetzen. Daher gruppieren wir die Teile "Frame", "On/Off", "Ring/Silent" und "Volume up", indem wir alle Elemente auswählen und Alt + G drücken. Dadurch wird ein Nullobjekt erstellt, das alle Teile des Rahmens enthält. Doppelklicken Sie auf die Null, um sie umzubenennen. Nennen wir es "Frame".

.

Schritt 12

Fügen Sie der Frame-Gruppe einen weiteren Objektpuffer hinzu, indem Sie ein Compositing-Tag hinzufügen. Dieses Mal aktivieren wir "Buffer 2".

.

Schritt 13

Um diese Aufnahme interessant zu machen, werden wir unser Handy animieren und unserer Szene eine Kamera hinzufügen. Schließen Sie die Rendereinstellungen und wählen Sie im Objektmanager die Gruppe "iPhone" aus. Im Attribut-Manager unter der Registerkarte "Koord." Legen Sie mit Befehlstaste + Klicken auf das kleine "o" neben der Einstellung einen Keyframe für die Kursdrehung (R.H.) fest. Stellen Sie sicher, dass die Zeitanzeige auf Bild 0 steht.

.

Schritt 14

Bewegen Sie nun die Zeitanzeige auf Bild 25 und schreiben Sie 360 ° in die Kursdrehung. Erstellen Sie einen weiteren Keyframe mit Befehl + Klicken Sie erneut auf das kleine "o". Wir sollten jetzt das Telefon um seine eigene Achse um 360° drehen lassen.

.

Schritt 15

Wir möchten auch die Skalierung des Telefons so animieren, dass es beim Drehen vergrößert wird. Stellen Sie dazu sicher, dass Sie die iPhone-Gruppe ausgewählt haben und dass die Zeitanzeige auf Frame 25 eingestellt ist, und fügen Sie allen Achsen der Skalierungseinstellungen (S. X/Y/Z) einen Keyframe hinzu, genau wie bei der Drehung.

.

Schritt 16

Bewegen Sie nun die Zeitanzeige zurück zu Bild 1, ändern Sie die Skalierungseinstellungen in allen Achsen auf 0 und fügen Sie neue Keyframes hinzu.

.

Schritt 17

Fügen Sie der Szene über das Menü "Lichtobjekte" eine Kamera hinzu.

.

Schritt 18

Aktivieren Sie Ihre Kamera, indem Sie im Objektmanager auf das kleine schwarze Symbol klicken.

.

Schritt 19

Ändern Sie im Attribut-Manager Ihrer Kamera die Brennweite auf ca. 15 und positionieren Sie die Kamera näher und etwas unterhalb des Telefons. Dies gibt uns ein wenig Verkürzung und eine interessantere Perspektive für unsere Animation.

.

Schritt 20

Fügen Sie im Menü "Lichtobjekt" ein Flächenlicht hinzu.

.

Schritt 21

Stellen Sie im Attibutes Manager des Bereichslichts auf der Registerkarte "Details" sicher, dass das Kontrollkästchen In Reflexion anzeigen aktiviert ist. Ändern Sie auch die Größe für X und Y auf 500.

.

Schritt 22

Wechseln Sie zwischen der Draufsicht und der rechten Ansicht, um das Flächenlicht hinter der Kamera zu entfernen. Drehen Sie es so, dass es zum Telefon zeigt. Dies gibt uns ein gut aussehendes Spiegelbild im Hochglanzdisplay. Sie können mit der Position und der Drehung des Flächenlichts sowie der X- und Y-Größe herumspielen, bis Sie ein Aussehen erhalten, das Ihnen gefällt.

.

Schritt 23

Kopieren Sie das Flächenlicht, indem Sie die Befehlstaste gedrückt halten, während Sie das Licht im Objektmanager ziehen.

.

Schritt 24

Bewegen und drehen Sie das neue Flächenlicht so, dass es die Position des anderen Lichts widerspiegelt. Bewegen Sie es jedoch weiter von der Kamera weg und weiter nach oben, um das Licht ein wenig auszugleichen. Möglicherweise möchten Sie auch das Kontrollkästchen In Reflexion anzeigen deaktivieren, damit die Reflexion unseres vorherigen Flächenlichts nicht beeinträchtigt wird.

.

Schritt 25

Gehen Sie nun in die Rendereinstellungen, indem Sie im oberen Menü Render > Rendereinstellungen… wählen oder Befehl + B drücken. Klicken Sie auf die Schaltfläche "Multi-Pass..." und wählen Sie "Objektpuffer" aus der Liste.

.

Schritt 26

Aktivieren Sie das Kontrollkästchen für Multi-Pass und stellen Sie sicher, dass die Objektpuffer-Gruppen-ID auf dieselbe Nummer eingestellt ist wie die, die Sie im Compositing-Tag der Anzeigeebene aktiviert haben. In diesem Fall sollte die Gruppen-ID auf 1 gesetzt werden.

.

Schritt 27

Fügen Sie einen zweiten Objektpuffer für unsere Frame-Gruppe hinzu, indem Sie den Vorgang wiederholen und die Gruppen-ID auf 2 setzen.

.

Schritt 28

Um die vollständige Kontrolle über unser Rendering in After Effects zu erhalten, müssen wir mehrere Durchgänge für Reflection, Diffuse, Specular und Shadow hinzufügen. Fügen Sie sie über die Schaltfläche "Multi-Pass..." hinzu.

.

Schritt 29

Stellen Sie unter "Ausgabe" sicher, dass der Rahmenbereich auf Alle Rahmen eingestellt ist

.

Schritt 30

Geben Sie unter "Speichern" einen Ausgabepfad für Ihr reguläres Image an und kopieren Sie den Pfad für Ihre Multi-Pass-Images. Aktivieren Sie das Kontrollkästchen für Alpha Channel und deaktivieren Sie das Kontrollkästchen für Multi-Layer-Datei.

.

Schritt 31

Aktivieren Sie unter "Compositing Project File" die Kontrollkästchen "Speichern" und "3D-Daten einschließen". Stellen Sie außerdem sicher, dass die Zielanwendung auf After Effects eingestellt ist. Klicken Sie dann auf die Schaltfläche "Projektdatei speichern..." und geben Sie einen Pfad für die Datei an, unter der gespeichert werden soll.

Dadurch wird eine Projektdatei für After Effects gespeichert, die alle Ihre Multi-Passes und exportierten 3D-Daten aus CINEMA 4D enthält. Dazu gehören Ihre Kamera und alle Lichter, die Sie möglicherweise in der Szene haben. Damit die Daten ordnungsgemäß exportiert werden können, müssen Sie die Exchange-Plugins für After Effects installieren. Sie finden sie in Ihrem Maxon-Verzeichnis.

.

Schritt 32

Rendern Sie die Szene in den Bildbetrachter, indem Sie Umschalt + R drücken oder im oberen Menü auf Rendern > In Bildbetrachter rendern klicken.

.

Schritt 33

Öffnen Sie beim Rendern Ihrer Szene das After Effects-Projekt, das Sie in den Rendereinstellungen in CINEMA 4D gespeichert haben. Ihre Projektdateien enthalten drei Ordner. Zeigen Sie die Dateien des Ordners an, der nach Ihrer Projektdatei benannt ist. Öffnen Sie die Komposition in.

.

Schritt 34

Sie werden feststellen, dass Ihre Komposition bereits eine Kamera und zwei Lichter enthält. Diese repräsentieren die Kamera und die Bereichsbeleuchtung, die wir in CINEMA 4D hinzugefügt haben. Es gibt auch einen Solid namens "Display". Der Volumenkörper ist ein Ergebnis des externen Compositing-Tags, das wir in der 3D-Software zu unserer Anzeigeebene hinzugefügt haben. Wir haben auch einige der verschiedenen Multi-Passes, die wir in den Rendereinstellungen hinzugefügt haben.

.

Schritt 35

Wenn Sie durch die Zeitleiste scrubben, werden Sie feststellen, dass das rote "Display"-Sild gut zum Bildschirm unseres Telefons passt, obwohl es nicht mit dem Telefon skaliert.

.

Schritt 36

Um dies zu lösen, wählen Sie einfach "Display"-Solid und drücken Sie "S" auf Ihrer Tastatur, um die Skala für das Display aufzurufen. Gehen Sie dann zu Frame 25 in der Timeline (dem Ende unserer Animation in CINEMA 4D) und fügen Sie einen Keyframe hinzu, indem Sie auf das Stoppuhr-Symbol drücken.

.

Schritt 37

Gehen Sie zurück zu Bild 0 und stellen Sie die Skalierung der Anzeige auf "0%", um einen weiteren Keyframe hinzuzufügen.

.

Schritt 38

Wenn Sie jetzt die Timeline schrubben, werden Sie feststellen, dass der Solid nicht ganz so auf den Bildschirm passt, wie er sollte. Dies liegt daran, dass CINEMA 4D Keyframes standardmäßig vereinfacht. Daher müssen wir unsere Keyframes auch in After Effects vereinfachen. Wählen Sie dazu beide neu hinzugefügten Keyframes aus, klicken Sie mit der rechten Maustaste auf einen von ihnen und wählen Sie im Menü Keyframe-Assistent > Einfache Bedienung.

.

Schritt 39

Jetzt sollte das "Display"-Solid perfekt auf den Bildschirm des Telefons passen, aber wir möchten keinen roten Solid in unserem Telefon haben, oder? Wir möchten es durch die Grafik ersetzen, die wir auf unserem Telefon haben möchten, sei es ein Bild oder ein Film. Dazu fügen wir dem Projekt unsere Grafiken durch Doppelklicken in unserem Fenster "Projektdateien" hinzu. Wählen Sie das Bild oder den Film aus, den Sie verwenden möchten, und importieren Sie es in das Projekt. In diesem Fall ist es die "display.jpg", die Sie in den Projektdateien finden.

.

Schritt 40

Um den roten Volumenkörper durch unser Bild zu ersetzen, wählen Sie den "Anzeige"-Solid in der Komposition und Alt + Ziehen Sie das Bild aus unseren Projektdateien auf den Volumenkörper in der Komposition.

.

Schritt 41

Wenn Ihre Footage-Datei zu groß ist, gehen Sie einfach zu Bild 25 in der Zeitleiste, wo wir das Ende der Skalierungsanimation haben, und verkleinern Sie das Filmmaterial, bis es in den Bildschirm passt, ohne Lücken zu hinterlassen. Für das Bild in diesem Tutorial habe ich die Skalierung auf 18% verringert.

.

Schritt 42

Trotzdem stimmt etwas mit unserem Display nicht ganz. Wenn wir durch die Animation scrubben, können wir immer noch die Anzeige sehen, obwohl das Telefon von uns abgewandt ist. Hier bietet sich unser Objektpuffer an. Es funktioniert als Matt für unser Display und entfernt die Teile der Animation, die von der Kamera nicht gesehen werden.

.

Schritt 43

Sie finden den gerenderten Objektpuffer im Ordner Special Passes. Ziehen Sie den Pass namens object_1 in die Komposition und platzieren Sie ihn über das "Display"-Layer.

.

Schritt 44

Wir werden den Objektpuffer als Luma Matte für unser "Display"-Layer verwenden. Drücken Sie also die "Kippschalter/Modi"-Taste, um die Track Matte-Einstellung in der Komposition anzuzeigen. Wählen Sie Luma Matte aus dem Dropdown-Menü in dem "Display"-Layer.

.

Schritt 45

Jetzt bleibt das "Display"-Layer verborgen, wenn das Telefon abgewiesen wird, aber wir haben keine Reflexionen auf dem Bildschirm. Um dies zu lösen, nehmen Sie einfach den Reflection-Pass und platzieren Sie ihn über dem Object Buffer-Pass.

.

Schritt 46

Ich denke, das "Display"-Layer sieht im Vergleich zum Rest des Telefons etwas zu hell aus, deshalb möchte ich sie etwas abdunkeln. Da das "Anzeige"-Layer ein 3D-Objekt ist, wird sie von den Lichtern in der Komposition beeinflusst. Ich werde daher die Intensität beider Lichter in der Komposition verringern, um die Anzeige weniger hell zu machen. Doppelklicken Sie dazu nacheinander auf die Lichter, um die Lichteinstellungen aufzurufen und die Intensität bei beiden Lichtern auf etwa 60% zu senken. Denken Sie daran, alle Keyframes zu entfernen, bevor Sie die Lichter anpassen, da alle Animationen der Lichtintensität aus CINEMA 4D exportiert werden.

.

Schritt 47

Ich möchte auch die Glanzlichter des Rahmens auf dem Telefon aufhellen, um ihm ein bisschen mehr Metallgefühl zu verleihen. Hier verwenden wir den zweiten Objektpuffer, den "object_2" in den Projektdateien. Ziehen Sie es also in die Komposition und platzieren Sie es über dem "Specular"-Layer.

.

Schritt 48

Verwenden Sie es als Luma Matte für das Specular, indem Sie auf die Track Matte-Einstellung in dem "Specular"-Layer drücken und Luma Matte aus dem Dropdown-Menü auswählen.

.

Schritt 49

Dadurch wird das Spiegelbild von allem außer dem Rahmen des Telefons entfernt, sodass wir eine Kopie der "Spiegel"-Layer zusammen mit der Luma Matte erstellen müssen. Wählen Sie dazu beide Layers aus und drücken Sie Befehlstaste + D auf Ihrer Tastatur.

.

Schritt 50

Trotzdem haben wir nur ein Specular für den Rahmen des Telefons. Um dies zu beheben, drücken Sie die Track Matte-Einstellung auf dem soeben kopierten "Specular"-Layer und wählen Sie Luma Inverted Matte. Jetzt haben wir ein Specular sowohl für den Rahmen als auch für die Glasstücke des Telefons, aber wir können beide separat steuern.

.

Schritt 51

Um den Spiegel für den Rahmen des Telefons glänzender zu machen, fügen Sie dem ersten "Spiegel"-Layer eine Kurve hinzu, indem Sie sie in der Komposition auswählen und im oberen Menü zu Effekt > Farbkorrektur > Kurven navigieren.

.

Schritt 52

Spielen Sie ein bisschen mit der Kurve herum, bis Sie einen Blick bekommen, mit dem Sie zufrieden sind. Hellen Sie die Glanzlichter des Spiegels auf, indem Sie in die obere linke Ecke der Kurve drücken.

.

Schritt 53

Ich möchte auch die Reflexion etwas aufhellen, also füge dem "Reflection"-Layer eine Kurve hinzu, indem du zu Effekt > Farbkorrektur > Kurven navigierst. Nehmen Sie eine sehr kleine Anpassung am leichtesten Teil der Reflexion vor, indem Sie in den oberen Teil der Kurve nahe der rechten Ecke klicken.

.

Schritt 54

Das Letzte, was wir tun werden, ist, unserer Animation einen Hintergrund hinzuzufügen und die Illusion eines Bodens hinzuzufügen, indem wir eine Reflexion unter dem Telefon erzeugen. Dazu müssen wir unserem Telefon ein Alpha geben, um den Hintergrund transparent zu machen. Ziehen Sie dazu die Komposition aus dem Fenster "Projektdateien" nach unten auf das kleine Symbol, das wie eine Filmrolle aussieht. Dadurch wird die Komposition in eine neue Komposition mit denselben Abmessungen und Längen wie die vorherige eingefügt.

.

Schritt 55

Drücken Sie Befehlstaste + K, um die Kompositionseinstellungen zu öffnen und die neue Komposition umzubenennen. Nennen wir es "Main Comp".

.

Schritt 56

Wir benötigen ein Alpha für unsere Komposition und da wir das Kontrollkästchen für Alpha in unseren Rendereinstellungen in CINEMA 4D aktiviert haben, hat das 3D-Programm das RGB-Bild mit einem Alpha-Kanal gerendert. Wir können diesen Alpha-Kanal mit Hilfe einer Track Matte verwenden, um unseren Hintergrund transparent zu machen. Ziehen Sie das RGB-Bild aus Ihrem Special Passes-Ordner nach unten in Ihre Komposition und platzieren Sie es über der Komposition Ihres Telefons.

.

Schritt 57

Wählen Sie Alpha Matte aus den Track Matte-Einstellungen Ihrer Telefonzusammensetzung. Das sollte den Hintergrund transparent machen.

.

Schritt 58

Fügen Sie nun das Bild "background.png" zur Szene hinzu und platzieren Sie es unter den anderen Layers in der Komposition.

.

Schritt 59

Duplizieren Sie die Telefonzusammensetzung und die Alpha-Matte, indem Sie beide Layers auswählen und Befehlstaste + D drücken.

.

Schritt 60

Wenn beide Layers ausgewählt sind, drücken Sie "S" auf Ihrer Tastatur, um die Skalierung für beide Layers aufzurufen.

.

Schritt 61

Deaktivieren Sie das Symbol "Proportionen beschränken" auf beiden Layers und ändern Sie die Skalierung für Y auf "-100%".

.

Schritt 62

Bewegen Sie beide Layers entlang der Y-Achse nach unten und platzieren Sie sie direkt unter Ihrem Telefon.

.

Schritt 63

Drücken Sie "T" auf Ihrer Tastatur, um die Opazitäteinstellungen für beide Layers anzuzeigen. Reduzieren Sie die Opazität auf ca. "40%".

.

Schritt 64

So, das war es! Wenn Sie alle oben genannten Schritte ausgeführt haben, sollte Ihr Ergebnis ungefähr so aussehen.

Ich hoffe, Sie fanden dieses Tutorial hilfreich und/oder inspirierend. Wenn Sie Fragen haben, schreiben Sie einen Kommentar und ich werde mein Bestes geben, um sie zu beantworten.

.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.