So erstellen Sie ein Video-Bildschirmmodell in Photoshop

Mockups sind eine großartige Möglichkeit, Ihre Arbeit schnell und in einem idealen Umfeld zu zeigen. Während die meisten Menschen Bildmodelle verwenden, wird ein Videomodell die Aufmerksamkeit auf sich ziehen und die Menschen an Ihrer Arbeit beteiligen. Das Hinzufügen eines Videos zu einem Bildschirm ist eine coole Möglichkeit, Ihre Arbeit zu zeigen, und es ist auch nicht sehr schwierig.

Was ist ein Videobildschirm-Mockup?

Ein Mockup ist eine digitale Möglichkeit, ein Design zu prototypisieren oder ein Design auf sein Echtzeitprodukt anzuwenden, ohne es zu produzieren. Dafür gibt es viele Gründe, aber ein Hauptgrund für die Erstellung eines Mockups ist es, Ihre Designs, Illustrationen oder alles, was Sie zeigen möchten, realistischer aussehen zu lassen. Es hilft Ihrem Publikum, sich vorzustellen, wie das Stück am Ende aussehen wird.

Anstelle der zusätzlichen Zeit, des Geldes und der Mühe, die für die Herstellung eines tatsächlichen Produkts erforderlich wären, können Sie ein digitales Mockup mit Ihrer Kunst, Ihrem Design, Ihrer Website usw. erstellen.

Nun, ein animiertes Bildschirmmodell ist ein sehr ähnliches Konzept, aber mit einem Modell auf einem Bildschirm, wie einem Telefon oder einem Computer. Und anstelle eines Bildes zeigt das Mockup ein sich bewegendes Design oder Video.

Diese bewegenden Designs können alles sein, von einem Video bis hin zu einem UX/UI-Design-Prototyp oder einer Bildschirmaufnahme.

Warum sollten Sie ein animiertes Bildschirmmodell verwenden?

Einer der besten Gründe für die Erstellung eines animierten Bildschirmmodells ist die Präsentation einer Website. Es ist eine großartige Möglichkeit, eine von Ihnen entworfene Website in Ihrem Portfolio zu präsentieren.

Die Verwendung eines Modells verleiht Ihrem Portfolio etwas mehr Kreativität als einfache Screenshots Ihrer Website. Es ist eine großartige Möglichkeit, das Aussehen Ihrer Mockups zu variieren.

Wenn Sie ein von Ihnen erstelltes Video anzeigen möchten, kann dies auch eine kreative Möglichkeit sein, es anzuzeigen, anstatt nur das Video von YouTube usw. einzubetten. Insgesamt ist ein animiertes Bildschirmmodell eine unterhaltsame Möglichkeit, Ihre Arbeit zu präsentieren.

So erstellen Sie ein animiertes Bildschirmmodell in Photoshop

Während die meisten Leute Photoshop als Bildbearbeitungstool kennen, können Sie damit auch Animationen und Videos erstellen. Hier sind also die Schritte zum Erstellen eines Videomodells mit Photoshop.

Welche Art von Video sollten Sie verwenden?

Es gibt viele Optionen für Ihr animiertes Bildschirmmodell. Eine kleinere Videodatei funktioniert am besten. Während Sie diese Technik verwenden können, um echtes Videomaterial anzuzeigen, erschwert die Größe das Rendern in Photoshop.

Aus diesem Grund erstellen wir ein Mockup, das eine Webseite scrollt. Die Verwendung eines kürzeren Videos ohne andere Designaspekte wird schneller gerendert und liefert ein qualitativ hochwertiges Ergebnis.

Verwenden Sie einen Bildschirmrekorder, um ein Video Ihres Bildschirms zu erstellen. Dies kann auf einem Mobilgerät oder Desktop erfolgen, je nachdem, worauf Sie Ihr Mockup haben möchten. Wir verwenden Quicktime Player auf dem Mac und dem Neue Bildschirmaufnahme Option, aber es gibt viele andere Mac-Optionen. Wenn Sie ein iPhone haben, können Sie sehen Wie man auf einem iPhone Bildschirmaufnahmen macht. Sie benötigen kein Audio in dieser Aufnahme.

Für unser Video haben wir die Website Makeuseof.com aufgezeichnet, die eine Reihe von Artikeln über Grafikdesign zeigt. Sie können alles aufzeichnen, was für Sie sinnvoll ist. Scrollen Sie ruhig und stellen Sie sicher, dass es weder zu schnell noch zu langsam ist.

Sobald Ihre kurze Aufnahme fertig ist, speichern Sie sie als MP4 und legen Sie sie in einem leicht zugänglichen Ordner ab.

Welche Art von Foto sollten Sie verwenden?

Für die besten Ergebnisse in diesem Mockup sollten Sie ein Foto verwenden, das einen freien Bildschirm zeigt. Dies kann ein mobiler Bildschirm, ein Computer oder sogar ein Fernsehbildschirm sein. Obwohl Ihr Bild eine gewisse Perspektive zeigen kann, ist es am besten, wenn der Bildschirm hauptsächlich direkt auf Sie gerichtet ist.

Es ist möglich zu Verwenden Sie einen versperrten Bildschirm oder ein Bild mit starker Perspektive für ein komplizierteres Modell, aber wir werden es heute einfach halten.

Sie können Ihr eigenes Foto machen oder eines von einer lizenzfreien Website herunterladen, z Unsplash. Wir werden für dieses Tutorial kein vorgefertigtes PSD-Modell verwenden, sodass Sie nicht mühsam versuchen müssen, eines zu finden.

So erstellen Sie das Video-Mockup

Öffnen Sie Ihr Bild in Photoshop.

Wenn Sie das Bild von einer lizenzfreien Website heruntergeladen oder mit einer hochwertigen Kamera aufgenommen haben, kann die Größe ziemlich groß sein. Sie können die Bildgröße verringern.

Klicken Bild > Bildgröße. Die endgültigen Maße sind Ihnen überlassen, wir empfehlen jedoch eine Breite von ca. 1200. Behalten Sie die Bildbeschränkungen im Verhältnis, wenn Sie die Größe ändern. Klicken OK.

Erstellen Sie nun den Platz, an dem das Video sitzen wird. Finden Sie die Abmessungen Ihres Originalvideos; Wenn Sie eine Bildschirmaufnahme von einem Telefon machen, finden Sie die Bildschirmabmessungen des Telefons heraus, und wenn Sie eine Bildschirmaufnahme einer Website machen, können Sie eine Standardauflösung von 1680 x 1050 verwenden, es sei denn, Sie kennen die genauen Abmessungen.

Klicken Sie mit dem Rechteck-Werkzeug (U) auf Ihre Leinwand. Dies bringt ein Popup, in dem Sie die Abmessungen angeben können. Geben Sie die Breite und Höhe Ihrer Bildschirmaufnahme ein und klicken Sie OK. Entfernen Sie den Strich und wählen Sie eine Füllfarbe aus Schwarz oder Dunkelgrau.

Klicken Sie auf der Ebene des Rechtecks ​​mit der rechten Maustaste und gehen Sie zu In Smart-Objekt konvertieren. Jetzt können Sie das Rechteck so transformieren, dass es perfekt in den Bildschirm passt. Dies bedeutet, dass jedes auf dem Smart-Objekt platzierte Bild der gleichen Formtransformation folgt.

Um Ihr Rechteck zu transformieren, verwenden Sie das Transformieren-Werkzeug. Sie können dies finden, indem Sie zu gehen Bearbeiten > Kostenlose Transformation oder durch Schlagen cmd + T (Mac) bzw Strg + T (Windows).

Das Transformationswerkzeug ändert nur die Größe des Rechtecks. Ändern Sie die Größe so ähnlich wie möglich auf dem Bildschirm. Verwenden Sie dann die Verzerrungsfunktion.

Gehen Sie erneut zu Bearbeiten Menü, dann Verwandeln > Verzerren. Auf diese Weise können Sie die Ecken ziehen und strecken, damit sie perfekt zu Ihrem Bildschirm passen. Dies funktioniert hervorragend, wenn Ihr Bild eine zusätzliche Perspektive hat. Doppelklicken Sie auf das Rechteck, sobald Sie alle Ecken und Kanten ausgerichtet haben. Wenn die Kanten nicht richtig ausgerichtet sind, verwenden Sie das Transformationswerkzeug und die Option „Verzerren“ erneut, bis dies der Fall ist.

Sie können Ihr Video in Ihr intelligentes Objekt mit der richtigen Größe und Form einfügen. Klicken Fenster > Zeitleiste, um die Animationszeitleiste zu öffnen. Stellen Sie sicher, dass es sich auf der Video-Timeline und nicht auf der Frame-Animation befindet.

Doppelklicken Sie auf das Smart-Objekt im Ebenenbedienfeld, indem Sie auf das Symbol mit einem Papier und einem Quadrat auf der Miniaturansicht Ihres Smart-Objekts klicken. Dies öffnet sich in einem neuen Fenster.

Ziehen Sie Ihr Video in das Smart-Objekt-Fenster. Ihr Video sollte die gleiche Größe wie Ihr Rechteck haben. Wenn die Abmessungen nicht stimmen, können Sie dies leicht beheben: Ziehen Sie die Ecken, bis sie auf das gesamte Fenster passen.

Wenn Sie Kanten abschneiden müssen, können Sie das tun. Was auch immer Sie sehen können, wird im endgültigen Mockup gezeigt. Wenn Sie zufrieden sind, doppelklicken Sie, um die Größe und Platzierung zu bestätigen.

Sie sehen jetzt zwei Zeitachsenebenen auf der Videozeitachse: eine für das Rechteck und eine für das neue Video. Ziehen Sie die Länge der Zeitachse des Rechtecks, um sie an die Länge des Videos anzupassen. Dadurch wird sichergestellt, dass das Video für seine Dauer gesehen wird.

Klicken Sie auf die Wiedergabeschaltfläche, um Ihr Video zu überprüfen. Das Laden kann eine Weile dauern und daher langsamer als das tatsächliche Timing abgespielt werden.

Um Ihren Videobildschirm realistischer aussehen zu lassen, ändern Sie den Mischmodus der Videoebene. Sie können auch die Deckkraft auf der Videoebene verringern). Spielen Sie mit verschiedenen Mischeinstellungen herum, bis Sie zufrieden sind. Wenn Sie es ohne diesen Schritt belassen möchten, ist das auch in Ordnung. Es wird eine klarere Sicht auf den Bildschirm geben.

Um das Video jetzt in Ihrem Mockup zu speichern, speichern Sie einfach das Smart-Objekt-Fenster. Sie können dies tun, indem Sie zu gehen Datei > Speichern oder schlagen cmd + S (Mac) bzw Strg + S (Windows). Verlassen Sie nach dem Speichern das Smart-Objekt-Fenster.

Sie kehren zum Mockup-Fenster zurück. Sie sehen Ihr Video anstelle des Bildschirms.

Um Ihr Modell zu speichern, gehen Sie zu Datei > Export > Video rendern… Hier können Sie die Größe des endgültigen Modells ändern. Das Ändern der Größe hilft auch beim Laden und der Gesamtdateigröße. Wenn Sie mit Ihren Einstellungen zufrieden sind, klicken Sie auf Machen.

Dies führt zu einer endgültigen MP4-Videodatei mit Ihrem fertigen Videomodell.

Bringen Sie Ihre Mockups mit einem Videoscreen-Mockup weiter

Durch die Verwendung von Videos in Ihren Bildschirmmodellen können Sie mehr Arbeit teilen und mehr Menschen einbeziehen. Dieser in Photoshop erstellte dynamische Mockup-Stil ist einfach zu erstellen und liefert hervorragende Ergebnisse.

Während Sie diese Technik für ein statisches Modell mit nur einem Bild verwenden können, lernen Sie durch die Verwendung von Videos eine neue Fähigkeit und ermutigen die Menschen, sich länger mit Ihrer Arbeit zu beschäftigen. Ein Videomodell ist selten zu sehen, und die Überraschung wird die Aufmerksamkeit aller auf sich ziehen.

So erstellen Sie ein Box-Verpackungsmodell in Photoshop

Lesen Sie weiter

Über den Autor