Tag 3: Vorher-Nachher-Bilder mit Juxtapose JS – AdvenTOOLender 2018

Veröffentlicht am von JohannaDaher

Herzlichen Willkommen zum dritten Türchen des AdvenTOOLender! Schön, dass du mit dabei bist. Heute möchte ich dir das Tool „Juxtapose JS“ vorstellen.  Mit ihm kannst du Vorher-Nachher-Bilder erstellen.

Beispiele: Hochschule Harz: Früher & Heute

An dieser Stelle möchte ich mich herzlich beim Dezernat Kommunikation und Marketing der Hochschule Harz, speziell bei Eileen Demange, für die 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:

Geeignete Themen

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.

Ungeeignete Themen

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:

Abonniere meinen YouTube-Kanal gerne, wenn du möchtest. Das ist total kostenlos. Vielen Dank für deine Unterstützung! ♥️

1.) Wenn du die Türchen der vergangenen zwei Tage geöffnet 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 klischeehaft 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. | Anmerkung: Ich weiß, dieser Schritt hört sich ziemlich schwer und viel an, auch abhängig davon, wie erfahren du in der Bildbearbeitung bist. Keine Sorge: Im Video (siehe oben) zeige ich dir die Vorarbeits-Schritte genauer.

    Klicke auf den grünen Button, um zu starten. Foto 1: Screenshot

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 (siehe Foto 1). Dadurch gelangst du zu den Upload-Möglichkeiten (siehe Foto 2).

Hier lädst du die Bilder hoch und machst weitere Einstellungen. Foto 2: Screenshot

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 nochmal 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:

Mehr vom AdvenTOOLender

Türchen 24: Mit „MyAdvent.net“ einen Adventskalender erstellen – AdvenTOOLender 2018

Türchen 23: Interaktive Videos mit „Ekostudio“ erstellen – AdvenTOOLender 2018

Türchen 22: „TapeWrite“: Audios mit Slider-Elementen visualisieren – AdvenTOOLender 2018 

Türchen 21: Mit „Datawrapper“ Daten visualisieren | #ddj – AdvenTOOLender 2018

Türchen 20: Mit „Interview JS“ einen Chatbot erstellen – AdvenTOOLender 2018

Türchen 19: Mit „Story Spheres“ 360°-Bilder mit Audios verknüpfen – AdvenTOOLender 2018

Türchen 18: „Timescape“ für Storytelling auf interaktiver Karte – AdvenTOOLender 2018

Türchen 17: Interaktive (Insta-) Stories & Umfragen mit Apester – AdvenTOOLender 2018

Türchen 16: Stories erzählen mit „Wakelet“ und Social Media – AdvenTOOLender 2018

Türchen 15: Interaktiven Zeitstrahl mit „Timeline JS“ erstellen – AdvenTOOLender 2018

Türchen 14: Mit „Brackify“ Umfrage-Battles erstellen – AdvenTOOLender 2018

Türchen 13: „Account Analysis“ für Twitter-Daten – AdvenTOOLender 2018

Türchen 12: News-Quiz erstellen mit Genial.ly – AdvenTOOLender 2018

Türchen 11: Genial.ly für interaktive Bilder – AdvenTOOLender 2018

Türchen 10: Wortwolken als Design-Option und Analyse-Tool – AdvenTOOLender 2018

Türchen 9: SoundCite JS für Audios im Text (Inline) – AdvenTOOLender 2018

Türchen 8: Interaktiver Daten-Zeitstrahl mit StoryLine JS – AdvenTOOLender 2018

Türchen 7: Storrito für Instagram-Stories vom PC – AdvenTOOLender 2018

Türchen 6: „Steller“ für Fotoalben mit Story – AdvenTOOLender 2018

Türchen 5: Mit Canva schnell schöne Designs erstellen – AdvenTOOLender 2018

Türchen 4: Gifs erstellen mit dem Data Gif Maker – AdvenTOOLender 2018

Türchen 2: Audios visualisieren mit SpareMin Headliner

Türchen 1: Interaktive Grafiken mit Infogram – AdvenTOOLender 2018

Du hast noch Fragen zu Juxtapose JS, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.