Calligramme sind effektive Gestaltmittel, die Deiner Website mehr Charakter geben und Deine Logos markanter und einprägsamer machen.
In diesem Artikel erfährst Du, was Calligramme sind und wie Du sie erstellst. Dabei lernst Du unterschiedliche Typen von Calligrammen kennen, siehst viele spannende Beispiele und erfährst den neuesten Stand der Forschung in 2024.
TL;DR: Wesentliche Aspekte zusammengefasst
- Ein Calligram ist die Anordnung von Buchstaben, Wörtern oder Symbolen, um andere Worte oder Bilder zu repräsentieren.
- Es gibt viele unterschiedliche Typen von Calligrammen, wie unter anderem Calligramme, die den negativen Raum nutzen oder Calligramme, die lediglich einzelne Buchstaben verformen.
- Die Designprinzipien von Calligrammen unterscheiden sich leicht, je nachdem ob sie für Websites oder Logos gestaltet werden.
- Calligramme kannst du leicht mit Adobe Illustrator wie in den präsentierten Beispielen erstellen.
- Calligramme lassen sich automatisch durch KI generieren.
Was sind Calligramme im Webdesign und Logodesign?
Ein Calligram im Webdesign und Logodesign ist eine visuelle Repräsentation eines Wortes, eines Satzes oder eines Bildes, das durch die kreative Anordnung von Buchstaben, Wörtern oder Symbolen entsteht. Es verbindet Typografie mit Grafikdesign, um Bedeutung zu vermitteln oder Emotionen zu erzeugen.
Ursprünglich waren Calligramme griechische und lateinische Figurengedichte, dessen Textform den inhaltlichen Gegenstand repräsentierte. Sie wurden durch Grafikdesigner wie Ji Lee, insbesondere durch die Serie “Wort als Bild” revolutioniert und bekannt gemacht, in der er Wörter in verspielte Illustrationen verwandelte.
Ein Calligram ist nicht zu verwechseln mit einem Ambigramm, welches einen Schriftzug beschreibt, der gedreht einen weiteren (oftmals gleichen) Schriftzug enthält.
Im Webdesign können Calligramme verwendet werden, um visuell ansprechende Überschriften, Banner und andere dekorative Elemente für eine Website zu erstellen. Sie können visuell Interesse wecken und die Gesamtästhetik verbessern.
Im Logodesign können Calligramme verwendet werden, um den Namen des Unternehmens oder der Marke visuell prägnant in das Logo zu integrieren. Dies kann das Logo einprägsamer machen und die Markenidentität stärken.
Welche Typen von Calligrammen gibt es?
Typografische Calligramme: Verwendet Typographie, um Wörter, Sätze oder Bilder visuell zu repräsentieren.
Buchstaben-Calligramme: Hier wird lediglich ein einzelner Buchstabe modifiziert, sodass dieser eine für das Wort relevante Bedeutung repräsentiert. Dies ist insbesondere für Logodesign interessant.
Negativraum-Calligramme: Im Design steht der negative Raum für den Bereich zwischen und um das Motiv herum. Diese Calligramme nutzen diesen Raum, um weitere Motive darzustellen.
Interaktive Calligramme: Calligramme, die ihre Form oder Farbe bei Benutzerinteraktionen oder Bewegung ändern. Diese Art von Calligrammen ist besonders interessant für Websites.
Kinetische Calligramme: Calligramme, bei denen visuelle Elemente durch Animation oder physische Manipulation in Bewegung sind, um dem Calligram eine dynamische Dimension zu verleihen. Beispiele dafür sind im folgenden Video zu sehen.
Bildbasierte Calligramme: Inkorporiert zusätzlich Bilder und Formen, um Wörter, Sätze oder Bilder zu repräsentieren. Dies ist nicht zu verwechseln mit Fotomosaik, wo ausschließlich Bilder und keine Typographie verwendet werden.
Abstrakte Calligramme: Calligramme, die Bedeutung statt exakter visueller Repräsentation vermitteln. Verwendet werden dabei oft abstrakte Formen, Farben und Muster.
Narrative Calligramme: Calligramme, die eine Geschichte oder eine Abfolge von Ereignissen vermitteln. Die Geschichte kann sich beim Lesen entfalten.
Umwelt-Calligramme: Calligramme, die in physische Umgebungen integriert sind, wie öffentliche Räume oder architektonische Elemente, unter Verwendung von Materialien wie Farbe, Fliesen oder Landschaftsgestaltung.
Stelle Dir diese 6 Fragen, bevor du Dein Calligram gestaltest!
Damit Dein Calligram effektiv den gewünschten Zweck erfüllen kann, muss es einige essentielle Aspekte erfüllen. Daher stelle Dir zuerst die folgenden Fragen:
Was ist das Hauptkonzept, das Dein Calligram vermitteln soll?
- Was ist die Zielgruppe und was sind ihre Erwartungen?
- Was ist die Brand Identity Deines Unternehmens oder Deiner Marke?
- Welche visuellen Elemente können die Bedeutung des Calligrammes unterstützen?
- Wird das Calligram auf verschiedenen Medien verwendet und wie kann sein Design entsprechend angepasst werden? Dabei kannst Du ebenfalls technische Aspekte wie die Lesbarkeit auf unterschiedlichen Medien berücksichtigen.
- Welche Kriterien werden verwendet, um den Erfolg Deines Calligrammes zu beurteilen?
Wenn Du diese Fragen beantworten kannst, dann bist Du gut darauf vorbereitet, Dein Calligram zu erstellen! Aber welche Designprinzipien müssen dabei beachtet werden?
Was sind die Designprinzipien eines Calligrammes?
Die Designprinzipien für Calligramme unterscheiden sich, je nachdem ob diese spezifisch für eine Website oder für ein Logo gestaltet werden.
Calligramme im Webdesign werden nur für den spezifischen Zweck erstellt, sie auf einer Webseite zu präsentieren. Daher müssen sie lediglich anpassungsfähig und responsiv für Smartphones, Tablets und PCs sein.
Im Gegensatz dazu können Logo-Calligramme auf vielen anderen Medien präsentiert werden. Daher gehen die Designprinzipien gezwungenermaßen auf unterschiedliche Aspekte ein.
Designprinzipien für Calligramme im Webdesign
Lesbarkeit: Der Text sollte trotz der stilisierten Erscheinung leicht lesbar sein. Daher sollte bereits bei Wahl der Typographie darauf gewählt werden, dass diese auch bei Modifikation leserlich bleibt.
Komposition: Es sollte nicht nur ein visuelles Gleichgewicht zwischen den Textelementen innerhalb des Calligrammes, sondern auch zum Gesamtdesign der Website bewahrt werden.
Whitespace: Whitespace kann verwendet werden, um Teile des Calligrammes zu trennen oder hervorzuheben und das Calligram von benachbarten Elementen visuell zu separieren.
Konsistenz: Stil, Größe und Abstand der Textelemente sollten im gesamten Calligramm, aber auch zur gesamten Website konsequent eingehalten werden.
Farbharmonie: Wähle Farben aus, die sich angenehm ergänzen und zum Farbschema der Webseite passen. Der Kontrast zwischen Calligram und dem Hintergrund sollte ausreichend hoch sein.
Responsives Design: Calligramme auf Webseiten sollten sich an alle möglichen Bildschirmgrößen und Geräte wie Smartphones, Tablets und PC responsiv anpassen.
Barrierefreiheit: Dein Calligram sollte ausreichenden Kontrast bieten und auf der Website einen alternativen Text enthalten.
Skalierbarkeit: Im Webdesign ist es wichtig, dass sich Designelemente wie Calligramme ohne Qualitätsverlust skalieren lassen. Hierfür könntest Du skalierbare Typografie und Vektorgrafiken verwenden.
Designprinzipien für Calligramme im Logodesign
Einfachheit: Das Design sollte einfach und übersichtlich sein, um sofortiges Einprägen und Wiedererkennen zu garantieren. Komplexität kann vom Gesamteindruck des Logos ablenken.
Einzigartigkeit: Das Calligram sollte einzigartig und unverwechselbar sein, sodass sich die Marke von Mitbewerbern abhebt und die Identität und Werte der Marke optimal kommuniziert werden.
Vielseitigkeit: Das Logo sollte in verschiedenen Anwendungen wie Druck, Digital und Merchandising in jeglicher Größe funktionieren.
Zeitlosigkeit: Vermeide trendige Elemente, damit das Design auch in der Zukunft relevant bleibt.
Relevanz: Das Calligram sollte die Essenz der Marke widerspiegeln und bei ihrer Zielgruppe resonieren. Du kannst daher versuchen, Elemente zu integrieren, die die Botschaft, Werte und Branche der Marke repräsentieren.
Skalierbarkeit: Entwerfe das Logo-Calligram mit Vektorgrafiken, um eine Skalierbarkeit ohne Qualitätsverlust sicherzustellen.
Farbharmonie: Wähle Farben aus, die die Assoziationen der Marke vermitteln. Das Logo sollte auch in Graustufen effektiv wirken.
Anpassungsfähigkeit: Entwerfe Variationen des Logos für verschiedene Kontexte, wie beispielsweise monochrome Versionen für die Verwendung auf Briefköpfen.
Rechtssicherheit: Du solltest überprüfen, ob das Caligramm gegen bestehende Marken oder Urheberrechte verstößt.
Mit welchen Tools kann ich ein Calligram erstellen?
Die vermutlich meist verwendeten Tools, um Calligramme für Logos oder Webseiten zu erstellen, sind Adobe Illustrator und Adobe Photoshop. Dabei wird für gewöhnlich Adobe Illustrator verwendet, um das grundlegende Calligram zu erstellen. Mit Photoshop kann dieses anschließend durch Filter und ähnliche Anpassungen perfektioniert werden.
Ein weiteres viel verwendetes Tool ist Canva. Canva ist eine benutzerfreundliche Online-Plattform und bietet eine Vielzahl von Werkzeugen für die Gestaltung von Grafiken. Das Tool ist weniger anpassungsfähig als Adobe Illustrator, aber dafür auch günstiger und leichter zu erlernen. Obwohl Canva nativ nicht das Verzerren von Buchstaben in beliebige Formen unterstützt, können Verzerrungseffekte mit Apps wie Typecraft simuliert werden.
Die folgende Tabelle stellt die Vor- und Nachteile beider Tools gegenüber, damit Du je nach Komplexität Deines Calligram-Projektes das richtige Tool auswählen kannst:
Wie erstelle ich ein typographisches Calligram mit Adobe Illustrator?
Adobe Illustrator enthält ein fantastisches Feature (Schritt 4), das Dir die Erstellung von typografischen Calligrammen extrem erleichtert. Folge den 5 Schritten, um ein typographisches Calligram eines Fisches zu erstellen oder wende die Schritte auf Deine eigene Calligram-Idee an.
1. Erstelle den Umriss eines Fisches. Pro-Tipp: Behalte stets eine Kopie des Umrisses im Hintergrund, um den Überblick zu behalten.
2. Trenne den Umriss mit dem Eraser-Tool (“Shift + E”) in so viele Teile, wie Dein Wort Buchstaben enthält. An dieser Stelle kannst Du ebenfalls den gewünschten Text hinzufügen.
3. Konvertiere den Text zu Umrissen, indem Du entweder einen Rechtsklick auf den Text machst und “Create Outlines” auswählst, den Text markierst und “Shift + Ctrl + O” drückst, oder über das Menü “Object” und “Expand…” den Text erweiterst.
4. Für diesen Schritt muss sich der Fisch im Layer vor dem Text befinden. Wähle den ersten Buchstaben und den ersten Teil des Fisches aus. Den ersten Buchstaben kannst Du nun entweder über das Menü “Object”, “Envelope Distort” und “Make with Top Object”, oder mit der Tastenkombination “Alt + Ctrl + C” in die gewünschte Form verzerren. Wiederhole dies für alle Buchstaben-Form-Kombinationen.
5. Räume das Calligram auf und Dein Design ist fertig!
Wie erstelle ich ein Negative-Space-Calligram (Negativraum-Calligram) mit Adobe Illustrator?
Auch ein Negativraum-Calligram lässt sich kinderleicht mit Adobe Illustrator erstellen. Auch hierfür bietet Illustrator ein entscheidendes Feature. Für dieses Calligram sind sogar nur 4 Schritte notwendig!
1. Beginne mit dem Text “Fisch” und der Silhouette eines Fisches.
2. Wie auch im vorherigen Beispiel kannst Du den Text zu Umrissen konvertieren, indem Du entweder einen Rechtsklick auf den Text machst und “Create Outlines” auswählst, den Text markierst und “Shift + Ctrl + O” drückst, oder über das Menü “Object” und “Expand…” den Text erweiterst.
3. Schiebe die Buchstaben näher zusammen und platziere den Fisch darüber.
4. Markiere alles und wähle mit “Shift + M” das Shape Builder Tool aus. Mit diesem kannst Du nun per “Klick + Drag” Formen kombinieren und per “Alt + Klick + Drag” Formen ausschneiden.
Wie kann man Calligramme durch künstliche Intelligenz generieren?
In den letzten Jahren wurden zwei Methoden in Papern vorgestellt, die ausschlaggebend für die Entwicklung der automatischen Generierung von Calligrammen waren. Die erste Methode ist eine wissenschaftliche Grundlage zu dem Thema und die zweite Methode ist nur wenige Monate alt und somit höchst aktuell!
So generiert man automatisch lesbare kompakte Calligramme
Die Methode aus dem 2016er Paper “Legible Compact Calligrams” von Zou et al. ermöglicht die erste vollautomatische Generierung lesbarer, kompakter Calligramme, indem sie genaue Anpassung an die gegebene Form, Lesbarkeit und Ästhetik durch Erzeugen von Pfaden, Ausrichtung von Buchstaben und Deformation abstimmt.
Die Calligramme werden durch die folgenden Schritte erzeugt:
- Eingabe: Der Prozess beginnt mit einem Eingabewort und einem Umrissbild.
- Textlayout-Pfad: Ein Pfad wird bestimmt, auf dem der Eingabetext platziert werden kann, mit Fokus auf einzeiligen Textzeilen für bessere Lesbarkeit.
- Positionierung der Buchstaben: Die Buchstaben werden entlang des Pfads positioniert, wobei Passkriterien, Lesbarkeit und Ästhetik berücksichtigt werden. Hervorstehende Buchstabenmerkmale werden mit ihren Gegenstücken am Rand der Eingabeform ausgerichtet.
- Verformung der Buchstaben: Die Buchstaben werden kollektiv verformt, um die Passform lokal zu optimieren und gleichzeitig die Lesbarkeit zu maximieren. Dieser Schritt ist entscheidend und beinhaltet das Ausbalancieren von Passform gegen Lesbarkeit und ästhetische Überlegungen.
- Optimierung: Die Methode verwendet einen Optimierungsprozess mit gemischten Zielen, um Passform, Lesbarkeit und Ästhetik auszubalancieren. Dieser Optimierungsprozess erfolgt auf mehreren Ebenen, um sicherzustellen, dass das endgültige Calligram die gewünschten Kriterien erfüllt.
- Lesbarkeitsmaß: Ein aus crowdsourced-Daten gelerntes Lesbarkeitsmaß wird verwendet, um den Buchstabenverformungsschritt zu leiten und das Calligram zu verfeinern. Dieses Maß hilft dabei, die Lesbarkeit der Buchstaben während des Verformungsprozesses zu erhalten.
Ich konnte keine Software-Referenz finden, die diese Methode implementiert. Da die Methoden zum Verzerren und Verformen von Adobe Illustrator allerdings sehr ähnliche Ergebnisse erzielen, ist es nicht abwegig zu vermuten, dass die Methoden von Adobe Illustrator auf der Arbeit von Zou et al. aufbauen.
So generiert man automatisch Wort-als-Bild für semantische Typografie
Das 2023er Paper von Iluz et al. präsentiert einen Algorithmus zur automatischen Erstellung von Wort-als-Bild-Illustrationen, der die Umwandlung einzelner Buchstaben in Formen ermöglicht, die eine semantische Bedeutung vermitteln und gleichzeitig den ursprünglichen Stil und das Design der Schriftart bewahren.
Die Methode funktioniert folgendermaßen:
- Repräsentation der Buchstaben: Die Kontur jedes Buchstabens wird extrahiert und in kubische Bézierkurven konvertiert, um eine konsistente Darstellung über verschiedene Schriftarten hinweg sicherzustellen. Wenn Buchstaben nur wenige Kontrollpunkte haben, werden sie unterteilt, um beim Verformen flexibler zu bleiben.
- Optimierung: Jeder Buchstabe wird anhand seiner Kontrollpunkte optimiert. Ziel ist es, einen neuen Satz von Kontrollpunkten zu erzeugen, der das gewünschte Bild näher widerspiegelt.
- Loss-Funktion: Zusätzliche Loss-Funktionen werden verwendet, um erstens den Optimierungsprozess zu führen und zweitens die Lesbarkeit des Wortes sicherzustellen. Diese Funktionen erhalten die Form und Lesbarkeit der Font, während sie gleichzeitig das gewünschte Bild widerspiegeln.
- Formveränderung: Die Formveränderung ist darauf beschränkt, so konform wie möglich zu sein, um große Abweichungen vom ursprünglichen Aussehen der Buchstaben zu verhindern, während das beabsichtigte Bild repräsentiert wird.
Die Autoren haben den Code und weitere spannende Beispiele inklusive einer Demo veröffentlicht. (Info zur Demo am 19.03.2024: Die Demo funktioniert leider nicht mehr)
Zusammenfassung
In diesem Artikel wurde Dir gezeigt, was Calligramme sind, welche Typen es gibt und was bei der Erstellung eines Calligrammes zu beachten ist. Außerdem wurden Dir Methoden der manuellen und automatischen Erstellung von Calligrammen präsentiert.
Ich hoffe, dass Du mit diesen neuen Informationen präzise Calligramme für Deine Logos und Websites erstellen kannst. Viel Spaß dabei!
