Tooltime: Vorher-Nachher-Bilder mit „Juxtapose JS“

Heute möchte ich euch das Tool „Juxtapose JS“ vorstellen.  Mit ihm könnt ihr Vorher-Nachher-Bilder erstellen, die über einen Slider verglichen werden können.

Beispiel: Hochschule Harz – Früher & Heute

An dieser Stelle möchte ich mich herzlich beim Dezernat Kommunikation und Marketing der Hochschule Harz – hier habe ich meinen Master gemacht -, speziell bei Eileen Demange, für das Bild der Rektoratsvilla am Wernigeröder Campus von 1949 bedanken. Mit diesem und einem aktuellen Foto des Gebäudes, habe ich folgendes Beispiel mit „Juxtapose JS“ für euch gebaut:

Für welche Themen eignet sich Juxtapose?

Dein Thema muss ältere und neuere Bilder haben. Alles, wovon du Vorher-Nacher-Fotos hast, lässt sich (in der Theorie) realisieren. Wie du unten in der Anleitung sehen wirst, kommt es besonders auf die „Nachher“-Bilder an, die ziemlich gut zu dem „Vorher“-Foto passen müssen. Journalistische Beispielideen: ein Standort mit und ohne Berliner Mauer, ein Gebiet vor und nach dem Krieg, eine Stadt von oben (früher und heute). Dabei musst du selbst entscheiden, was für dich „früher“ ist. Das hängt auch davon ab, was du für eine Veränderung zeigen möchtest.

Sobald es keine Bilder zu deinem Thema gibt, macht die Nutzung von „Juxtapose JS“ keinen Sinn. Auch Zitattafeln, Videosequenzen und Portraitfotos sind ungeeignet. Es geht immer auch um Veränderungen und (teilweise) Geschichtliches. Deshalb sind aktuelle Ereignisse, die aber keinen Bezug zu etwas Vergangenem herstellen, ebenfalls nicht geeignet.

Die Schritt-für-Schritt-Anleitung

Jetzt wird es Zeit, dass du lernst, wie du das Tool „Juxtapose JS“ selbst nutzen kannst. Das Ganze funktioniert so:

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

1.) Wenn du weitere Tooltime-Artikel gelesen hast, weißt du, dass wir Schritt 1 normalerweise mit der Tool-Homepage starten. Das ist heute aber anders. Die Homepage ist eher einer der letzten Schritte. Denn: Wir müssen einiges an Vorarbeit leisten. Und zwar:

• Suche dir ein altes Foto, das du als „Vorher“-Bild nutzen möchtest.
• Mache ein Foto von der aktuellen Situation als „Nachher“-Bild. Und dieser Punkt ist gar nicht so leicht, da du den genauen Winkel und die entsprechende Größe ziemlich gut treffen musst, da es sonst am Ende beim „Drüberziehen“ nicht wirklich gut aussieht.
• Wenn du beide Fotos hast, gehe in ein Bildbearbeitungsprogramm deiner Wahl, bei mir war das Photoshop. Das geht natürlich auch mit Gimp und Co. Du musst hier jetzt zwei Ebenen schaffen und jedes Bild auf eine Ebene platzieren. Schiebe das „Vorher“-Foto bei den Ebenen nach unten. Das „Nachher“-Foto soll oben liegen. Wenn du noch keine weiteren Einstellungen getroffen hast, dürftest du jetzt gerade nur das „Nachher“-Foto sehen. Dann änderst du bei diesem „Nachher“-Foto die Transparenz, zum Beispiel auf 60 oder 70 Prozent. Jetzt dürftest du das „Vorher“-Foto durchscheinen sehen. Nun kommt der fummelige, kleinteilige Part: Schiebe/Vergrößere/Drehe das „Nachher“-Foto so, dass es so gut wie möglich an die Linien und Objekte des darunterliegenden „Vorher“-Fotos angepasst ist (Gegebenenfalls musst du die Arbeitsfläche zuschneiden, wenn es nicht mehr die gesamte Fläche füllen sollte). Sobald du das geschafft hast, blendest du das „Nachher“-Foto aus und speicherst das „Vorher“-Bild ab. Danach blendest du das „Nachher“-Bild wieder ein und setzt die Transparenz auf 100 Prozent. Zur Sicherheit kannst du das „Vorher“-Foto zusätzlich ausblenden.

2.) Solltest du diesen Schritt geschafft und zwei fertige Fotos vorliegen haben: Gehe auf die Homepage von „Juxtapose JS“. Es ist wichtig, dass du die Vorarbeit geleistet hast; im Tool selbst kannst du deine Bilder NICHT bearbeiten oder Einstellungen dieser Art treffen.

3.) Auf der Homepage musst du dich nicht anmelden. Klicke einfach auf den grünen „Make a Juxtapose“-Button. Dadurch gelangst du zu den folgenden Upload-Möglichkeiten.

4.) Hier lädst du zunächst deine Fotos hoch. Das geht entweder mit Links/URLs oder über die Dropbox. Ich habe dafür die Dropbox genutzt. Auf der linken Seite habe ich das „Vorher“-Foto hochgeladen, auf der rechten das „Nachher“-Foto. Beim Label trägst du das Jahr, aus dem die Fotos stammen, ein. Im Beispiel ist das „1949“ und „2018“. Andere User schreiben auch den Monat davor. Das ist bei meinem Vorher-Foto aber unklar, weshalb ich diese Angabe weggelassen habe. Bei „Credit“ trägst du ein, woher die Fotos stammen. Hier: „Hochschule Harz“ und „Johanna Daher“, da ich das Nachher-Foto auf dem Wernigeröder Campus selbst gemacht habe.

5.) Klicke dann auf „Preview“ und schaue dir an, wie dein „Juxtapose JS“ aktuell aussieht. Unter den Optionen kannst du noch einstellen, wo der Slider beginnen soll. Ich habe die „26 Prozent“ gewählt, da dann der Großteil des alten Fotos noch verdeckt ist und die Überlappungen des „Vorher“- und „Nachher“-Fotos hier gut aussahen. Andere starten bei „50 Prozent“. Das musst du einfach von deinen Bildern und deiner Geschichte, die du damit erzählen möchtest, abhängig machen.

6.) Sollte dir das Ganze gefallen und du nicht noch einmal neue Bilder hochladen wollen: Klicke auf den „Publish“-Button. Du kannst jetzt entweder den generierten Link oder Embed-Code nutzen, um dein „Juxtapose JS“ zu teilen oder in deine Homepage einzubetten.

7.) Solltest du im Nachhinein nochmal etwas an deinem „Juxtapose JS“ ändern wollen, musst du nach Eingabe der neuen Werte noch einmal auf „Publish“ klicken und zur Sicherheit den (neuen) Embed-Code beziehungsweise Link nutzen.

Weitere Beispiele

Auf Twitter haben einige Journalisten ihre Beispiele geteilt, hier drei ausgewählte:

Auf der Homepage des Unternehmens werden weitere Themenideen mit Umsetzungen präsentiert, zum Beispiel:

• „Berlin – 1945 and today“ von der Berliner Morgenpost
• ESPN hat kein richtiges Vorher-Nachher-Bild daraus gemacht, sondern eher ein Quiz erstellt. Vielleicht ja auch eine spannende Idee für dich: „Guess NBA stars and nicknames“