Cinemagramme im Webdesign

Wenn Sie einen der unzähligen Webdesign-Trendberichte lesen, die Anfang des Jahres erschienen sind, lesen Sie wahrscheinlich über das Versprechen großer, heldengroßer Cinemagramme, die überall auf Homepages platziert sind. Wo sind sie?

Während einige modische Unternehmen sie auf ihren Websites verwenden, wurde der Cinemagraph weitgehend verbannt, um zusammenfassende Artikel und Reddit-Seiten zu präsentieren.

Nun, ich sage genug ist genug. Es ist an der Zeit, dass sich Cinemagraphs erheben und ihren richtigen Platz einnehmen, als die Webseiten-Helden, zu denen sie bestimmt waren.

Warum Cinemagraphs funktionieren

Die Idee, einem Webdesign-Trend einfach zu folgen, weil es vorhergesagt wurde, hat mich nie wirklich begeistert. Aber was wäre, wenn Sie einen solchen Trend tatsächlich vorantreiben könnten? Und wenn es tatsächlich einen Zweck hatte und gleichzeitig ein Problem löste?

Das menschliche Auge liebt Bewegung.

Wenn es um Cinemagramme geht, sind alle obigen Aussagen wahr. Während es sicherlich diskutiert wurde (und sogar als ein Trend im Web-Design prognostiziert wird), verwenden nur sehr wenige Websites sie tatsächlich. Infolgedessen sind sie noch nicht einmal annähernd an eine kritische Masse herangewachsen, so dass sie für die meisten Internetnutzer immer noch faszinierend sind.

Nicht ganz ein Foto, kein Video, Cinemagramme sind eine Augenweide, weil sie den Betrachter nur so lange täuschen, dass sie ihn noch einmal anschauen. In der ADD-Ära, in der wir heute leben, zählt alles, was Sie verwenden können, um einen Benutzer für einen Augenblick zum Schweigen zu bringen, aus einem sehr wichtigen Grund als kleiner Gewinn:

Du hast ihre Aufmerksamkeit.

Eine besonders effektive Möglichkeit, auf einer Website ein bisschen Aufmerksamkeit zu erregen, war schon immer das Video. Das menschliche Auge liebt Bewegung. Aber ein großes Heldenvideo (auch ein kurzes) ist so sperrig . Sicher, Sie können es innerhalb eines Zolls seines Lebens komprimieren, aber dann sieht es einfach ... komprimiert aus. Oder Sie können es in Ruhe lassen und die Folgen einer langsam ladenden Webseite erleiden.

Aber mit einem Cinemagraph können Sie viel Bandbreite sparen, während Sie gleichzeitig den Bewegungsdrang erfüllen. Tatsächlich steigern Sie den Einsatz, weil Sie den neuen Aspekt eines Cinemagraphs ausnutzen können - Leute sehen sie nur selten und sind beeindruckt, wenn sie es tun.

Nun, da Sie wissen, warum Cinemagraphs einen wichtigen Platz im Internet verdienen, wollen wir einen Blick darauf werfen, wie man einen zum Leben erweckt.

Glendevon Motoren nutzt einen Cinemagraph in seinem Heldenbereich, um eine Stimmung zu vermitteln und sich als "Premiummarke" unter seinen Mitbewerbern abzuheben.

Option 1: Verwenden Sie einen bereits vorhandenen Cinemagraph

Es gibt viele Fälle, in denen die Beschaffung eines gebrauchsfertigen CG akzeptabel ist, oder sogar die Erstellung eines eigenen CG. Ich würde sagen, wenn Sie das finden, was Sie brauchen, und es in Ihrem Budget ist, die Rechte dafür zu bekommen, dann ist das der richtige Weg. Die einzige Frage ist: Wo findest du es?

Die gute Nachricht ist, Sie haben Optionen. Sie werden weitgehend von Ihrem Budget (oder Ihrem Kunden) bestimmt, aber es gibt viele Quellen da draußen. Es gibt sogar ein paar freie wählen von. Wenn Sie jedoch 80 Dollar ausgeben müssen, hat Shutterstock eine ziemlich gute Auswahl an hochauflösenden CGs.

(Tipp: Sie haben keinen eigenständigen Cinemagraph-Bereich, Sie müssen also nur nach dem Begriff "Cinemagraph" und Ihren anderen Suchbegriffen im Bereich "Footage" suchen.)

Wenn es Ihnen gelingt, das zu finden, was Sie sich vorgestellt haben, wollen Sie die Datei wahrscheinlich noch zu einem gewissen Grad komprimieren. Mehr dazu in Kürze.

Option 2: Machen Sie Ihre eigenen

Der Hauptgrund, ein CG statt eines Videos zu verwenden, ist, dass es ein bisschen ein Denkstrick sein soll.

Vielleicht konnten Sie nicht finden, was Sie sich vorgestellt hatten. Oder vielleicht bist du nur ein hartnäckiger Heimwerker, und ich respektiere dich dafür. Wie genau macht man einen Cinemagraph von Grund auf neu?

Erstens hilft es, die richtige Ausrüstung und einen Plan zu haben. Hier ist, was ich empfehle, um loszulegen:

Eine Kamera, die Video aufnehmen kann
Ein Stativ
Ein Modell und / oder alle notwendigen Requisiten
Ein Computer
Zugriff auf ein Videobearbeitungsprogramm (optional)
Zugriff auf Adobe Photoshop oder eine speziellere cinemagraph-Bearbeitungssoftware wie z. B. Flixel

Das brauchst du, um einen Cinemagraph zu machen. Aber um es effektiv zu machen, brauchen Sie eine großartige Idee.

Was macht einen großen Helden Cinemagraph?

Während das allgemeine Thema Ihrer CG wird weitgehend durch die Nische der Website selbst diktiert werden, gibt es einige universelle Punkte zu beachten, wenn Sie die Szene einstellen. Sicher sein zu:

Halten Sie es subtil: Der Hauptgrund, ein CG statt eines Videos zu verwenden, ist, dass es ein bisschen ein Mind-Trick sein soll. Einige der besten CGs sehen sehr ruhig aus und überraschen dann den Betrachter mit einer subtilen Bewegung. Apropos Subtilität, stellen Sie sicher, dass die Gesamtzusammensetzung nicht übermäßig beschäftigt oder hell gefärbt ist, wenn Sie Text und ein CTA übereinander legen. Denken Sie daran, der CG sollte diese Elemente ausspielen, nicht von ihnen ablenken. Apropos ...
Lassen Sie Platz für den echten Helden: Stellen Sie sicher, dass Sie wissen, wo Sie möchten, dass Überschrift, Subheader und CTA-Taste in den Cinemagraph passen. Dies wirkt sich darauf aus, wo Sie die Hauptaktion in die Komposition einfügen.
Halte es verankert: Natürlich hat ein CG etwas Bewegung, aber die Szene muss insgesamt sehr ruhig sein, um die Bewegung richtig zu kontrastieren. Ein Stativ sollte bei der Hintergrundbewegung und Kamerastabilität helfen. Wenn sich die Augen Ihres Modells von einer Seite zur anderen bewegen sollen, stellen Sie sicher, dass sie gleichzeitig ihren Kopf sehr ruhig hält.
Machen Sie es als Schleife möglich: Da die Datei relativ klein sein soll, müssen Sie die Aktion so wiederholen, dass sie so nahtlos wie möglich wiederholt wird. Planen Sie dies beim Einstellen der Szene ein. Idealerweise sollte die erste Position sehr genau mit der Endposition übereinstimmen und die Schleife schließen.
Verwenden Sie möglichst eine Person: Studien haben gezeigt dass Bilder mit Leuten in ihnen die Aufmerksamkeit der Leute viel mehr auf sich ziehen als solche, die das nicht tun. Dies gilt auch für CGs. Zusätzliche Punkte, wenn Sie Ihr Modell in die Richtung des CTA sehen lassen können. Dies wurde gezeigt das Auge des Benutzers auch dort zu zeichnen.

Sobald Sie alle Ihre Elemente an Ort und Stelle haben, versuchen Sie, etwa 20 bis 30 Sekunden Video zu schießen, die gewünschte Bewegung mehrmals wiederholen, mit etwa 5 Sekunden der Dinge ganz still dazwischen zu halten. Dies sollte Ihnen genug Rohmaterial geben, um zu einem auffälligen Cinemagramm zu werden.

Etwas zusammensetzen

Während ich nicht Schritt für Schritt den Prozess der Umwandlung eines Videos in einen Cinemagraph durchführe, stehen Ihnen verschiedene Möglichkeiten zur Verfügung. Sie können $ 299 für ein dediziertes Cinemagraph-Design-Programm verwenden, aber Sie können einen schönen CG zusammenstellen mit Photoshop (was ich vermute, dass du schon benutzt hast.)

Komprimieren der Datei

Unabhängig davon, ob Sie Ihr CG von Grund auf neu erstellt oder ein bestehendes erstellt haben, möchten Sie sicherstellen, dass es schnell geladen wird. Ob Ihre finale Ausgabedatei ein Gif oder Video ist (was ich empfehle), Ihre Komprimierung beruht auf zwei verschiedenen Faktoren:

Qualität
Länge

Persönlich versuche ich, die größtmögliche Qualität in jedem großformatigen Heldenbild, Video oder Cinemagramm zu erreichen. Meiner Meinung nach ist es eine Schande, die Qualität jeder Datei zu opfern, die solch eine visuelle Wirkung erzielen soll. Um das auszugleichen, versuche ich, meinen Cinemagraph-Loop so kurz wie möglich zu gestalten.

Die Aktion wird sich darauf auswirken, wie kurz die Schleife sein kann - ein vorbeifahrender Zug kann viel kürzer sein als ein langsamer, absichtlicher Blick, der etwas spastisch aussehen könnte, wenn er sich zu schnell wiederholt. Nehmen Sie das folgende Beispiel von der Webagentur Das tiefe Ende . Da hier nur ein Waggon benötigt wird, um den nächsten für einen nahtlosen Loop zu erreichen, konnte ich ihn auf etwa eine Sekunde reduzieren.

Obwohl ich es geschafft habe, die Handlung extrem kurz zu halten, wusste ich immer noch, dass die Dateigröße für eine noch schnellere Belastung reduziert werden könnte. Ich habe am Ende einen kostenlosen Online-Video-Kompressor namens ClipChamp . Ich konnte das Video von mehreren Megabyte auf eine schlanke 319 KB komprimieren. Denken Sie daran, dass die meisten Nutzer nach nur drei Sekunden Wartezeit von Ihrer Website abprallen werden. Daher lohnt es sich, schnell zu sein.

Und wenn Ihr Endergebnis Artefakte aus extremer Kompression enthält, können Sie immer einen bewährten Trick anwenden, der bei unvollständigen Heldenvideos verwendet wird - maskieren Sie ihn halbtransparent gemusterte Überlagerung .

Interessiert zu sehen, wie andere Cinemagraphen als Heldenbilder verwendet haben? Ich habe gute und schlechte Nachrichten. Es gibt nicht viel mehr zu zeigen, was die schlechten Nachrichten sind. Aber die gute Nachricht ist, wenn Sie diesen Plan in die Tat umsetzen würden, wären Sie an der Spitze dessen, was verspricht, ein ziemlich großer Trend zu sein.

Hier sind ein paar, die ich im Internet gefunden habe:

Gilt Taste [Anmerkung der Redaktion: Diese Seite ist heruntergefahren.]

Das Naturschutzgebiet

Abschließende Gedanken

Ein Cinemagraph kann nicht nur ein langweiliges Website-Projekt um ein paar Kerben kippen, sondern auch seinen Erfolg beeinflussen. Wenn Sie es mit einer schlagkräftigen Überschrift und einem zwingenden Call-to-Action kombinieren, können Sie die Aufmerksamkeit Ihrer Nutzer wirklich auf sich ziehen. Was Sie mit dieser Aufmerksamkeit tun, liegt an Ihnen.

Grafikdesign Web-Design Video Kinografen animierte Gifs Cinemagramme im Webdesign Gifs