Zugegeben, der Tipp ist schon recht speziell: Hochkant-Bilder, allen voran vertikale Screenshots von Smartphones, sehen in den meisten (Wordpress-) Blogs einfach scheisse aus – sie verbrauchen unendlich viel Screen und versauen das Layout. Also kombiniert man mehrere Hochkantbilder zu einem „normalen“ Bild. Das führte auch bei uns hier immer wieder zu Diskussionen: Auf der einen Seite der gestrenge Layoutfetischist Christian, auf der anderen Boris und Ich, schlicht zu faul für die Friemelei: Screens in Gimp öffnen, neues Bild anlegen, Screens einfügen, Trenner einfügen … Aber es geht auch einfacher: Vollautomatisch per Drag&Drop mit ImageMagick.
Update: Das Skript haben wir mittlerweile auch als fertiges Tool.
Bilder automatisch kombinieren mit ImageMagick
ImageMagick kennen viele von Euch (Online-Schreiberlingen) vermutlich vom Betrieb von Content Management Systemen beziehungsweise deren Editoren. Nicht selten werkelt im Hintergrund ImageMagick, um die üblichen Bildmanipulationen und -optimierungen zu erledigen. Aber das freie Tool läuft eben auch auf dem Desktop und bietet sich dort zum Beispiel für die Automatisierung an.
Das Ziel: Bilder verbinden
Mehrere Bilder im Windows-Explorer markieren, auf ein Icon ziehen und heraus kommt ein Bild, dass die Ausgangsbilder nebeneinander darstellt; alle bekommen einen kleinen schwarzen Rahmen, damit sie in der Mitte optisch getrennt sind. Der Rahmen kann natürlich farblich angepasst werden. Je nach Farbe des Bildes kann sich für noch anschaulichere Ergebnisse eine Inversfarbe anbieten: Schwarzer Rand bei weißen Bildern, weißer Rand bei schwarzen Bildern.
Die Lösung: ImageMagick
Erstellt eine Batch-Datei, beispielsweise merger.bat, mit folgendem Inhalt:
mogrify -shave 2x2 -bordercolor black -border 2 %* \
convert +append %* merged.jpg
mogrify modifiziert die Ausgangangsbilder: Über shave werden links/rechts und oben/unten je 2 Pixel abrasiert und mit einem 2-Pixel-breiten Rand ersetzt. bordercolor definiert die Farbe des Randes. Wichtig ist dabei das „%*“, das schlicht der Platzfreihalter für alle per Drag&Drop übergebenen Dateien ist. Mit „\“ wird der nächste Befehl eingeleitet.
convert verändert nichts an den Ausgangangsbildern, sondern erstellt ein neues Bild, hier „merged.jpg“; „+append“ fügt die Bilder nebeneinander zusammen („-append“ würde sie übereinander anordnen).
Insbesondere der mogrify-Part ist natürlich Quick&Dirty, aber die Ausgangsbilder werden eben nicht anderweitig benötigt, da kann man sie ruhig im Original verändern. Natürlich könnt Ihr an diesem Snippet noch ordentlich herumpfeilen, die Bilder weiter verarbeiten und optimieren oder auch ganze Mosaike bauen.
Aus vertikalen werden horizontale Bilder
Wie gesagt, ein vertikales Bild sieht in den meisten Fällen ziemlich kacke aus. So auch dieser Android-Screenshot:
Und hier das hübschere Ergebnis mit zwei zu einer horizontalen Grafik zusammengefügten vertikalen Bildern. Die sehen nicht nur besser aus, sondern eignen sind auch didaktisch sinnvoll, etwa um mehrere Schritte zu visualisieren. Zudem eignen sich nebeneinander gestellte Screenshots auch für Vorher-Nachher-Ansichten. Natürlich müsst Ihr dazu keine Screenshots verwenden – „normale“ Hochkant-Fotos gehen natürlich auch!
Dateinamen mit Timestamps
Der Vollständigkeit halber: Im Video seht Ihr, wie zwei Querformatbilder nacheinander erstellt werden – mit dem obigen Code geht das nicht, weil nicht beide merged.jpg heißen können. Die einfach Lösung ist ein Timestamp im Namen, so dass der komplette Batch-Code so aussieht:
For /f "tokens=1-4 delims=/:" %%a in ("%TIME%") do (set mytime=%%a%%b%%c)
mogrify -shave 2x2 -bordercolor black -border 2 %* \
convert +append %* merged_"%mytime%"_.jpg
Die erste Zeile dient im Grunde nur dazu, dass im Zeitstempel kein deutsches Format mit Doppelpunkten ausgegeben wird, was die Dateinamen für Windows versauen würde.
Danke! :)