04371-889346 info@office-dogs.de

Bild und Schrift vereinen – Tipps für bessere Lesbarkeit

von | Jan 17, 2018 | Allgemein | 0 Kommentare

Jeder kennt sie, die meisten lieben sie: Spruchbilder auf Facebook, in WhatsApp-Gruppen, auf Internetseiten und Co. Dabei werden Zitate und Sprüche mit einem Bild vereint. Wer es mal selbst probiert, merkt schnell, dass es gar nicht so einfach ist, beides in Verbindung zu bringen und zwar so, dass es am Ende auch noch gut aussieht und gut lesbar ist.

Deswegen bekommst du von mir heute ein paar Tipps darüber, wie du die Lesbarkeit der Schrift auf deinen Bildern verbessern kannst.

Um überhaupt Schrift auf ein Foto oder Bild zu bekommen, benötigst du ein (simples) Grafikprogramm. Im kostenlosen Sektor haben sich in den letzten Jahren besonders die beiden Online-Programme Canva und AdobeSpark etabliert. Mit beiden Programmen kannst du über das Internet arbeiten und damit in wenigen Schritten ein geeignetes Layout finden, eigene Bilder importieren und Schrift hinzufügen.

Ich selbst nutze verschiedene Adobe-Programme, die Screenshots dieses Artikels sind in Photoshop CC entstanden – die grundlegenden Gedankengänge dazu solltest du jedoch auch mit anderen Grafikprogrammen umsetzen können.

In meinem Beispiel möchte ich euch die Erstellung eines Bildes für einen FB-Post zeigen. Hierfür nutze ich als Ausgangsgröße im Grafikprogramm eine Abmessung von 1200px  * 628px. Das ist die derzeit empfohlene Größe für Chronik-Bilder. In Facebook selbst werden die Bilder dann auf eine kleinere Größe herunterskaliert, du solltest nach Möglichkeit dennoch die empfohlene Größe nutzen, da sich die Abmessung der angezeigten Bilder letzlich auch am jeweiligen Ausgabegerät orientieren.

1. Geeignetes Bild finden

Zuerst einmal musst du natürlich ein geeignetes Bild haben. Beachte bei der Nutzung fremder Bilder unbedingt die Lizenzen und das Urheberrecht – nur weil ein Bild im Netz ist, heißt das nicht automatisch, dass es sich hierbei um frei nutzbares Allgemeingut handelt. Im besten Fall nutzt du von dir selbst angefertigte Bilder oder ein Bild, dessen Lizenz du rechtmäßig erworben hast.

Neben den korrekten Lizenzrechten ist natürlich das Bild selbst von Bedeutung. Grundsätzlich kannst du mit den folgenden Tipps Schrift auf jedem noch so unruhigen Bild gut lesbar machen, aber frage dich immer, welche Message du mit deinem Bild am Ende transportieren willst.

Die Bildgröße sollte im Idealfall möglichst groß sein. Lieber ein Bild nehmen, was in der Ausgangsgröße größer als das Endformat ist, als ein zu kleines Bild nehmen. Der Grund liegt daran, dass zu große Bilder verkleinert werden können, ohne dass dabei etwas an der Qualität des Bildes verloren geht. Die Vergrößerung eines zu kleinen Bildes endet hingegen oft in einem Pixelchaos, was einfach nicht gut aussieht.

Im ersten Beispiel habe ich eine Fotodatei mit einer Bildabmessung von 400px * 266 px. Wenn ich das auf 1200 px * 628 px vergrößern möchte, würde das so aussehen:


Also – Das Bild an sich ist zwar schön, aber durch die geringe Abmessung ist es so nicht verwendbar, außer man nutzt es im Rahmen einer Collage.

Nutze ich hingegen ein Bild, welches größer als der Arbeitsbereich ist (mein Beispielbild hat eine Abmessung von 5184 Px * 3456 Px), kann ich dieses problemlos auf die gewünschte Größe verkleinern, ohne dass irgendwas verpixelt wird.

Hier siehst du noch einmal beide Bilder im Vergleich zueinander – ich denke, das ist ziemlich eindeutig.

2. Schrift auf das Bild

Wenn du dein Bild der Wahl hast, fehlt natürlich noch die Schrift. Also füge als nächstes das gewünschte Zitat, den Spruch oder den Text, der auf dem Bild erscheinen soll ein.

Wie du siehst, habe ich hier erst einmal keinen Wert auf Dinge wie Position, Schriftart, Größe usw. gelegt. Bei mir dürfen sich die Bilder immer entwickeln und ich finde es spannend zu sehen, was am Ende aus einer fixen Idee herauskommt 😉 Du kannst natürlich auch mit einem komplett vorgefertigtem Bild im Kopf starten und das nachbauen.

3. Positionierung von Schrift und Bild

Wie groß die Ablenkung von der Schrift durch das Bild ist, kannst du gut beeinflussen. Ich persönlich ärgere mich immer, wenn ein schönes Bild zu einem Großteil verdeckt ist. Also packen wir in meinem Beispiel das Bild von Pucky mehr zur linken Position und den Text mehr nach rechts. Auch hier hast du mit einem übergroßen Ausgangsbild die besseren Karten.
In meinem Beispiel habe ich außerdem das Bild doch noch einmal ein wenig vergrößert, um einen weißen Rand zu vermeiden. Anschließend liegt die Schrift über dem relativ „ruhigem“ grünen Hintergrund und Pucky ist in ihrer vollen Pracht zu sehen.

4. Wenn die Bildgröße doch nicht reicht…

Sollte die Bildgröße trotz allem nicht reichen, weil du ein Bild mit wenig Hintergrund gewählt hast, kannst du auch mit einer farblich hinterlegten Textspalte arbeiten. Das sieht dann zum Beispiel so aus:

5. Text mit halbtransparenten Farbflächen hinterlegen

Halbtransparente Farbflächen sind eine gute Möglichkeit, den Text mehr in den Fokus zu rücken. Hierzu muss zwischen Text- und Bild-Ebene eine Form (z.B. ein Kreis, ein Quadrat, usw.) „gemalt“ werden. In meinem Beispiel nutze ich einen weißen Kreis, den ich aber nicht komplett im sichtbaren Bereich des Bildes lasse. Anschließend kann man, wenn man möchte, den Farbkreis noch mit einer Transparenz versehen bzw. die Deckkraft ändern, so dass das Hintergrundbild trotzdem durchscheint.

Einmal ohne Transparenz:

Einmal mit einer Deckkraft mit 65%:

Wie viel man bei der Deckkraft bzw. der Transparenz einstellt ist abhängig von Hintergrundbild, dem Text und der Farbe der Farbfläche – experimentier hier einfach ein wenig herum und hör auf dein Bauchgefühl.

6. Hintergrundbild ‚zurücknehmen‘

Unter Umständen ist es vielleicht sinnvoll, das Bild, welches du als Hintergrund nutzt etwas weniger präsent zu machen. Dafür gibt es (je nachdem, welches Programm du nutzt verschiedene Möglichkeiten). Ich zeige dir im folgenden mal verschiedene Ansatzpunkte, die oft verwendet werden.

Bild weichzeichnen:
Du kannst das Hintergrundbild weichzeichnen, hierdurch werden die Konturen je nach Einstellung deutlich weicher. Der „scharfe“ Text ist für das Auge schneller und klarer zu erfassen und prägt sich dadurch mehr ein. Im Beispiel nutze ich den Gaußchen Weichzeichner von Photoshop mit einem Radius von 2,7Px.

Sättigung verringern:
Man kann die Farbsättigung des Bildes herunterschrauben, in meinem Beispiel habe ich sie um 50 Punkte gesenkt. Hierdurch wird dem Bild Farbtiefe genommen und es spielt sich weniger in den Vordergrund.

Man kann das ganze Hintergrundbild auch in einer Schwarz-Weiß oder Sepia-Tönung machen. Macht man dann die Schrift knallig ist das auch eine super Möglichkeit.

7. Text – Schriftart, Schriftschnitt, Größe, Form, Effekte

Auch mit der Schrift an sich kann man sehr viel spielen. Hier hilft viel Ausprobieren, was auf jedem einzelnen Bild gut aussieht. Mit der Zeit entwickelt man ein Gespür dafür, was gut ist, und was nicht.

Um den Text gut lesbar zu halten, sollte die gewählte Schriftart nicht zu dünn sein. Script-Fonts sehen aus wie handgeschrieben und machen oft einen schönen Eindruck. Jedoch sollte auch hier darauf geachtet werden, dass die Lesbarkeit dadurch nicht zu sehr beeinträchtigt wird.

Negativ-Beispiel:

Es gibt mittlerweile bei den Adobe-Programmen auch die sogenannten ColorFonts, das sind Schriftarten,die von sich aus schon über sehr große Unterschiede in Buchstabengröße und Design verfügen. Das kann man sicher mal einstreuen, bringt aber eben auch wieder Unruhe ins Gesamtbild und macht es dadurch schwer erfassbar für das Auge, daher nutze ich sie derzeit nur auf Bildern mit einfarbigen Hintergrund und mit wenig Text.

Negativ-Beispiel:

Außerdem gibt es (abhängig von dem von dir genutzten Programm) vielleicht die Möglichkeit mit sogenannten Blendmodi zu arbeiten. Hierbei werden verschiedene Blendmodi auf die Schriftebene eingesetzt. Das kann in manchen Fällen super aussehen, in manchen passt es aber so gar nicht. Ein Fall wo es meiner Meinung nach sehr gut aussieht ist das Titelbild zu meinem Blogbeitrag Cooles Hundetraining an heißen Tagen.

Schlussendlich entscheidet auch die Schriftgröße, der Schriftschnitt (Normal, Fett, Extra Fett, Dünn usw.), sowie die Schriftauszeichnung (z.B. Kursiv) und die Schriftfarbe darüber, wie gut lesbar der Text auf deinem Bild ist. Auch über den Zeilenabstand kannst du einen positiven Effekt auf die Lesbarkeit erreichen. Probier einfach mal aus, was das von dir genutzte Programm in dieser Hinsicht so alles anbietet.

Alle Tipps aus diesem Artikel können einzeln oder in Kombination miteinander benutzen

 

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.