Mit Layout-Algorithmus zu mehr Ästhetik
16. Jul. 2021
Bilder als schönste Art der Erinnerung
Der Trend, Erinnerungen und Momente in Form von Fotos oder Videos festzuhalten, ist in den letzten Jahren stetig gestiegen.
Doch trotz der steigenden Vernetzung und der Möglichkeit, Fotos digital abzurufen und sie sich auf seinem Endgerät anzeigen zu lassen, haben personalisierte Fotobücher in analoger Form ihren Charme nicht verloren.
So wurde erst im Jahre 2020 mit mehr als 9 Millionen verkauften Fotobüchern deutschlandweit ein neuer Höchstwert aufgestellt.
Bei der Gestaltung eines Fotobuches sind dabei für den Kunden nicht nur die Bilder und die damit verbundenen Erinnerungen von Priorität, sondern vor allem auch die Darstellung dieser und die Gestaltung des Fotobuchs.
Dabei fällt es oftmals schwer, die Bilder an der richtigen Stelle zu platzieren, da das Verständnis für Ästhetik oder auch die Zeit, das Fotobuch nach seinen eigenen Wünschen zu gestalten, nicht gegeben sind.
Um dieser Herausforderung entgegenzuwirken und die individuelle Gestaltung von Fotobüchern im Nu‘ zu ermöglichen, haben wir einen Algorithmus entwickelt, durch den sich flexibel ästhetische Layouts im Handumdrehen erzeugen lassen.
Wie genau dieser Algorithmus funktioniert, welche Faktoren bei der Generierung des Layouts berücksichtigt werden und wie die Software in bestehende Projekte eingebunden sowie optimal verwendet werden kann, erfahren Sie in diesem Blogartikel.
Page-Layout Problematik – kennt doch jeder, oder?
Wer kennt es nicht? Man möchte die Erinnerungen an den letzten Sommerurlaub mit einer eigenen Collage, sei es für ein Fotobuch oder die Zimmerwand, festhalten, doch gibt es dabei unzählige Möglichkeiten die Bilder darzustellen – von denen längst nicht alle gut aussehen.
Bei der Entwicklung eines eigenen Layout-Algorithmus wird mit dem Page Layout Problem eine bekannte Problematik aufgegriffen. Diese Problematik wird anhand der links dargestellten Ab-bildung nochmals illustriert. Eine Reihe von Bildern oder Elementen (A-H) sollen anhand eines Seiten-Layout-Algorithmus auf einer Seite bzw. innerhalb eines definierten Raumes platziert und angeordnet werden.
Prinzipiell kann diese Aufgabe in zwei Schritte aufgeteilt werden:
-
Es muss eine Auswahl an Bildern getroffen werden, die auf der Seite platziert wer-den sollen.
-
Die Auswahl muss auf der Seite unter Betrachtung verschiedener Kriterien platziert werden. Dabei müssen für jedes Bild die Position, Rotation und die Skalierung berechnet und zudem eventuelle zeitliche Abfolgen, stilistische Vorgaben oder ästhetische Richtlinien berücksichtigt werden.
Durch diese Anforderungen ergibt sich, dass der Algorithmus eine Art Bauplan für die Platzierung und Gestaltung von Bildern liefern soll, der so konzipiert ist, dass das Ergebnis für den neutralen Betrachter als „ästhetisch“ oder „ansprechend“ empfunden wird. Um einen Bauplan zu konstruieren, muss der Algorithmus sich an klare Regeln bzw. Richtlinien orientieren. Diese werden auf Basis von Gestaltungsgrundsätzen, Design-Richtlinien und ästhetischen Faktoren im folgenden Abschnitt näher erläutert.
Was aber ist denn nun „ästhetisch“?
Man muss kein erfahrener Designer sein, um zwischen einer ansprechenden und einer unästheti-schen Fotobuch-Darstellung zu unterscheiden. Wenn man professionell angefertigte Fotobücher oder Bilderlayouts vergleicht, lassen sich in den meisten Fällen Muster sowie Regelmäßigkeiten erkennen, die bei der Erstellung des Layouts berücksichtigt wurden. Um hierfür ein besseres Verständnis über den Einsatz verschiedener Design- und Gestaltungsrichtlinien zu vermitteln, sind das Prinzip der Skalierung, des goldenen Schnitts und der Balance von besonderer Bedeutung.
Das Prinzip der Skalierung bezieht sich auf die Verwendung relativer Größen, um die Wichtigkeit und den Rang einer Komposition zu signalisieren. Elemente, die besonders hervorgehoben werden sollen, werden dabei als größtes dargestellt, da sie so am ehesten bemerkt werden. Um den Eindruck von Stabilität zu vermitteln, werden zudem bei der Layout-Gestaltung feste Linien eingehalten. Auch haben wir ermittelt, dass der äußere Rand eines Layouts, sofern vorhanden, stets größer als der innere Bildabstand sein muss, damit das Layout nicht als unausgewogen empfunden wird. Das rechts aufgeführte Layout berücksichtigt diesen Punkt, in dem der äußere Rand dem dreifachen Wert des inneren Bildabstand entspricht.
Der goldene Schnitt ist das wohl bekannteste Grundprinzip für das Beachten von Seiten- und Längenverhältnissen und wird oftmals auch „Göttliche Proportion“ genannt. Dieser beschreibt ein Teilungsverhältnis einer Strecke, dessen Verhältnis des Ganzen zu seinem größeren Teil (Major) dem Verhältnis des größeren zum kleineren Teil (Minor) entspricht.
Kurz gesagt: Der goldene Schnitt versucht mithilfe harmonischer Proportionierung ein Gefühl von Schönheit zu kreieren.
Die irrationale Zahl Phi (φ) beschreibt hierbei das Teilungsverhältnis für den goldenen Schnitt. Anwenden lässt sich dieses Verhältnis auf Größenproportionen verschiedener Bereiche oder auf die Position sowie das Seitenverhältnis von Elementen auf einer Seite. So verwendet das Layout-Beispiel etwa den goldenen Schnitt in der vertikalen Seitenaufteilung zwischen Weiß- und Bildfläche.
ϕ= a/b= (a+b)/a ≈1.618
Symmetrie erzeugt den Eindruck von Vollständigkeit und Balance. Balance meint dabei eine gleichmäßige optische Gewichtsverteilung auf der Seite. Die linke und rechte Hälfte einer Seite sollen in etwa gleich viel Inhalt enthalten. Diese Prinzipien können auch Einfluss auf die Farbe, Größe, Textur und Form der Elemente einer Seite nehmen.
Gleichzeitig möchten wir aber auch nicht die Reihenfolge der Bilder, also im Prinzip die Reihenfolge der Ereignisse, die durch die Bilder beschrieben werden, außer Acht lassen. Im besten Fall werden durch die Art des Layouts die Blicke des Betrachters gelenkt – als würden die Bilder ihre eigene Geschichte erzählen. So könnte etwa die Geschichte, der in der Abbildung dargestellten Komposition, von der einem schönen Familienwochenende an der Ostsee berichten.
Die Reihenfolge der Geschehnisse lässt sich dabei mit wenig Aufwand anhand des jeweiligen Zeitstempels der Bilder ermitteln. Die Zeitstempel der einzelnen Bilder können dann wiederum als zusätzlicher Parameter bei der Generierung des optimalen Layouts miteinbezogen werden.
Generierung eines Slicing-Floorplan-Layouts nach dem divide and conquer-Paradigma
Das Herzstück des Algorithmus ist eine binäre Baumstruktur, anhand dessen sich der genaue Aufbau des Layouts beschreiben lässt. Unter der Prämisse, den zur Verfügung gestellten Platz größtmöglich auszunutzen, muss die optimale Schnittstruktur für die Bilder ermittelt werden.
Als Schnittstruktur bzw. Schnittlinie wird hierbei eine Linie bezeichnet, die gerade und an ei-nem Stück horizontal oder vertikal gezogen werden kann, um Objekte in zwei Gruppen zu trennen. Wenn jede Gruppe erneut eine Schnittlinie aufweist, und dies auch rekursiv, bezeichnet man die sich daraus ergebende Struktur als Slicing Floorplan. Die Knoten des binären Baumes entsprechen dabei der Schnittstruktur zwischen den einzelnen Elementen (Bildergruppen) und die Blätter (Endknoten) den jeweiligen Bildern.
Um die optimale Baumstruktur und somit auch das optimale Layout zu ermitteln, wird der Teile- und-Herrsche-Ansatz angewandt. Dabei soll das gesamte vorerst nicht lösbare "Problem“ solange rekursiv in kleinere „Teilprobleme“ zerlegt werden (divide), bis dieses „beherrscht“ werden kann (conquer). Aus den einzelnen Teillösungen kann anschließend eine Lösung für das „Gesamtproblem“ rekonstruiert werden.
Als erstes wird eine zufällige Baumstruktur erstellt, bei der sich die Anzahl der Knoten nach der Anzahl der verwendeten Bilder richtet. Für alle Endknoten werden nun die zwei am besten zueinander passenden Bilder ausgewählt.
Danach kann das Seitenverhältnis des gesamten Baumes bzw. der gesamten Bildergruppe rekursiv ermittelt werden. Ein Bewertungsverfahren gibt hierbei Auskunft darüber, ob das in dem jeweiligen Durchlauf entwickelte Layout die gewünschten Kriterien erfüllt. Zu diesen gehören beispielsweise eine möglichst geringe Abweichung des Seitenverhältnisses des Baumes zum Zielverhältnis oder auch eine genügend große Darstellung der Bilder in dem jeweiligen Layout.
In endlich vielen Durchläufen wird schließlich das für die gegebene Konstellation geeignetste Layout ermittelt und zurückgegeben. Dadurch ermöglicht der Algorithmus einen flexiblen Um-gang mit unterschiedlichen Seiten- und Bildformaten für eine bestmögliche Anordnung seiner Lieblingsbilder.
Cross-Kompatibilität durch eine Kotlin-Multiplattform-Bibliothek
Damit sich der Layout-Algorithmus leicht in andere Projekte einbinden lässt, wurde die Logik in einem separaten Bibliotheksmodul entwickelt. Die dabei verwendete Implementierung mit der Kotlin-Multiplatform-Bibliothek ermöglicht den Einsatz des Bibliotheksmoduls sowohl für Android- als auch für iOS-Projekte. Der Quellcode muss daher nicht nur in der plattformübergreifenden Programmiersprache Kotlin geschrieben werden, sondern darf darüber hinaus auch keinen nativen Android- oder iOS-Code enthalten.
Als Input erwartet das Bibliotheksmodul die Bilder, die dargestellt werden sollen. Da es sich bei dem hier vorgestellten Algorithmus um einen Layout-Generator für Fotobücher handelt, muss zudem das verwendete Buchformat angegeben werden. Diese Daten werden dann an das Bibliotheksmodul übergeben.
Das folgende Code-Beispiel veranschaulicht, welche Funktionen mit welchen Parametern von einem Programm aufgerufen werden müssen, um in nur wenigen Schritten ein ästhetisches Layout zu erzeugen.
Unter (1) wird der Input gelistet. Die Seite, auf der die Elemente dargestellt werden sollen, wird durch die Klasse Page beschrieben. Alle seitenspezifischen Informationen, wie z.B. die Höhe und Breite (205mm x 270mm), werden dabei als Parameter bei der Instanziierung übergeben. Die durch die Klasse Picture beschriebenen Bilder können in dem obigen Beispiel durch die Liste pics abgefragt werden. Alle weiteren Parameter, die bei der Gestaltung des Layouts berücksichtigt werden sollen, wie beispielsweise der innere Bildabstand (gapSize; 5mm), können im Rahmen einer Instanz der Klasse Settings festgehalten werden (2).
Unseren finales Layout erhalten wir schließlich durch den Aufruf der Methode AestheticLayout(page, pics).createInstruction(settings) (3). Dabei übergeben wir alle wichtigen Informationen, die der Algorithmus für die Layoutgenerierung benötigt und erhalten das gewünschte Layout in Form eines Layout-Templates, anhand dessen sich die genauen Positionen und Maße der verwendeten Bilder für das angebende Format ableiten lassen. Über den Aufruf der Methode instruction.printAllCoordinates() (4) lassen sich darüber hinaus alle Koordinaten der einzelnen Elemente auf der Seite ausgeben.
Mit Machine Learning in die Zukunft?
Mit dem hier vorgestellten Ergebnis liefern wir einen innovativen Ansatz, Layouts unter Berücksichtigung ästhetischer Grundsätze zu erstellen - und das mit sehr geringem Aufwand. Die smarte Implementierung erlaubt dabei einen flexiblen Umgang mit unterschiedlichen Bild- und Seitenformaten. So muss sich ein Nutzer unserer Layout-Bibliothek weder Gedanken um den Aufbau des Layouts machen noch Zeit in manuelle Prozesse, wie beispielsweise das Zuschneiden von Bildern, investieren.
Der Algorithmus eignet sich hierbei jedoch nicht nur für die Generierung von Layouts für Fotobücher. Durch die Cross-Plattform-Kompatibilität der Layout-Bibliothek lässt sich der Algorithmus leicht in bestehende Android- und iOS-Projekte einbinden. So kann die Software z.B. auch für die Gestaltung von Plakaten, Reklamen, Postkarten oder anderen gestalterischen Kompositionen verwendet werden.
Lässt man den ästhetischen Aspekt bei der Layout-Generierung außer Acht, so lässt sich die Software auch für das Ermitteln des Grundrissdesign von VLSI-Schaltkreisen anwenden. Dabei kann ein gegebener Satz von Rechteckschaltungsmodulen in einer Ebene so platziert werden, dass die Fläche des Begrenzungsrechtecks, das alle Module enthält, minimal ist. Im Allgemeinen wird dieses Optimierungsproblem auch als "floorplan area optimization problem" bezeichnet.
Der Layout-Algorithmus bietet auch für die Zukunft viel Potenzial für den Bereich des Machine Learnings und der damit verbundenen Verwendung von Optimierungsalgorithmen. So könnte etwa der Suchprozess der optimalen binären Baumstruktur für die Layout-Struktur mit dem Einbinden einer Tabu-Suche optimiert werden – ähnlich wie bei evolutionären Algorithmen, ist die Tabu-Suche ein metaheuristisches Optimierungsverfahren zur Lösung oder Annäherung von komplexen Problemen.
Unser Layout-Experte
Christopher Heyn
ist für Sie da!
+49 441 559 770 0
