Wie ich Beitragsbilder fürs Blog erstelle

Beitragsbilder sind für jedes Blog wichtig. Sie verleihen ihm ein Gesicht und lassen die Posts interessanter aussehen.

Warum haben die Beitragsbilder bei Conterest eine rechteckige Form, für Social Media wäre doch meist etwas Quadratisches praktischer? Ich wollte, das sie wie Buchcover aussehen. So ist das bis heute geblieben. Ich mag das Format.

Anfangs habe ich viel probiert und alle möglichen Stile mal benutzt. Diese Phase hielt ein halbes Jahr an, seitdem habe ich mein Schema. Du erkennst es sofort, wenn du dich auf der Startseite umsiehst. Das Schema macht die Sache effizient. Ich brauche weniger Zeit. Ausnahmen bleiben erlaubt.

Die Fonts wechsele ich von Bild zu Bild. Dabei benutze ich nur das, was Windows mir mitgeliefert hat und die Google Fonts. Letzte bestehen inzwischen aus über 800 Font Familien. Man darf sich da frei bedienen und muss keine Sorgen wegen etwaiger Urheberrechte haben. Die Fonts können auch online verwendet werden, also direkt im Blog. Aber da erzähle ich dir nichts Neues. Wie entsteht das Beitragsbild nun genau?

Ich öffne Photoshop Elements von Adobe. Das ist kein richtiges Photoshop, sondern eine simple, einfache Version für Laien in der Welt der Grafik wie mich. Trotzdem kann man eine Menge damit anfangen. Es ist vergleichsweise einfach, zu bedienen. Kein Vergleich zu Kaventsmännern wie GIMP. Und letztlich ist es vielseitiger und preiswerter als ein modisches Onlinetool wie Canva eines ist.

1.) Ich lege eine leere Datei mit den Maßen 600 * 800 Pixel an.

2.) Jetzt kopiere ich die Überschrift des dazugehörigen Postings hinein. Und passe grob die Größe an.

3.) Als Nächstes gehe ich bei Pixabay auf die Jagd nach einem geeigneten Foto. Pixabay ist ideal, es gibt allerlei weitere Dienste, aber hier ist die Auswahl riesig und die Qualität exzellent – jedenfalls für meine Zwecke. Das Angebot dort ist frei von Urheberrechten und wurde unter Creative Commons CC0 veröffentlicht.

Es muss kein Foto sein, eine Vektorgrafik ist manchmal die bessere Wahl – vor allem in Sachen Ladezeit. Gelegentlich setze ich auch Icons ein. Auch den gleichen Gründen. Mit denen lassen sich Artikel auch illustrieren, wenn sich sonst nichts anbietet. Auch dafür gibt es Datenbanken. Da ich denen so richtig nicht traue, nutze ich ausschließlich Icons, die auf meiner Gründung Smashing Magazine veröffentlicht wurden. Da bin ich mir sicher, die Icons in jeder Hinsicht frei verwenden zu dürfen.

Freebie von Manuela Langella gratis bei Smashing Magazine

Ein Beispiel für ein Beitragsbild

Ich nehme etwas Schlichtes, es verwendet nur Schrift. Das Blau ist dasselbe wie im Logo und wird auf Conterest vielfach als Akzentfarbe verwendet. Die Font sind dieselben wie hier im Text – sie heißen Dosis und Ek Mukta (inzwischen nutze ich Lato für den Bodytext). Nur die Ziffer 1 weicht ab, das der Font Hind Medium mit ein wenig Schlagschatten.

4.) Ist das passende Foto gefunden, lade ich es in der voreingestellten Größe herunter und platziere es in meiner Datei. Elements passt die Größe praktischerweise automatisch an. Man kann aber auch davon abweichen oder sich vorher einen Ausschnitt zuschneiden. Ist bei mir aber alles nicht mehr nötig.

Ist das Bild drin, wird es an diese passende Stelle verschoben. Und noch der Domainname eingefügt. Das ist mir angenehmer als das Logo zu verwenden. Das passt oft optisch nicht. Und ich könnte das Logo ja mal erneuern. Das habe ich tatsächlich gerade erst getan. Der Domainname wird mit Sicherheit nie verändert werden. Es sei denn, er würde geklaut …

Die Motivsuche nimmt die meiste Zeit in Anspruch

Das ist manchmal auch gar nicht so leicht. Ein gutes Bild sollte das Thema nicht platt illustrieren. Also nicht gleich zum Naheliegenden greifen. Das kommt abgeschmackt rüber und wirft einen mit vielen anderen in die gleiche Tonne. Wenn man Pech hat, merken es die Leute. Dann lesen sie den Beitrag womöglich nicht.

Manchmal genügt es, etwas Abstraktes zu verwenden, das geht immer. Mal hat man eine Idee im Kopf, findet aber kein passendes Bild. Dann einfach später noch versuchen oder einen anderen Ansatz ausprobieren.

Man kann sich in solchen Arbeiten aber auch leicht verlieren und probiert nach den Fotos noch stundenlang irgendwelche Schriften aus. Naja, so lernt man sie auch kennen. Mach bloß nicht zu viel. Wenn es passt, passt es. Und das reicht dann auch. Noch mehr Aufwand wird keiner dem Meister danken und erhöht auch den Erfolg nicht.

Ein Fontmenü – drin zu Blättern macht Spaß

5.) Anschließend kommt eine Runde Feinschliff. Alles noch mal zurechtrücken, die Schriftgröße oder den Fonts noch mal anpassen. Die Software dockt Elemente automatisch an. So ist es ganz einfach zwei Textzeilen untereinander auszurichten. Wer will, kann sich noch Hilfslinien ins Bild schieben.

6.) Beim Exportieren des fertigen Bildes gilt es noch einmal aufzupassen. Das Format ist wichtig. Einerseits wegen der Qualität, die soll möglichst hoch sein. Andererseits der Dateigröße wegen, die soll möglichst niedrig sein.

Die Dateigröße ist auch wichtig

Ich versuche, unter 50 KB pro Bild zu bleiben. Klappt aber nicht immer. Das hängt maßgeblich vom gewählten Foto und der Komprimierungsstufe ab. Das ist figelinsch, weil sich Text und Foto nicht gut miteinander vertragen, da kommt es schnell mal zu unerwünschten Schlieren und Unsauberkeiten sogenannten Artefakten. Muss man dann austarieren, was nicht schwierig ist.

Dieses Beitragsbild kam mit nur 15 Kilobyte zum Einsatz. Es ist ein PNG und nutzt eine Vektorgrafik

Arbeite ich mit Vektoren oder Icons, kann ich PNG-8 (es gäbe noch das anspruchsvollere PNG-24) verwenden. Die Ergebnisse sind meist deutlich leichtgewichtiger. Hier wird nichts komprimiert, weshalb die Qualität immer 1A ausfällt. PNG ist also effizienter, wenn man es denn nutzen kann. Für Fotos sollte man es nicht verwenden.

Übrigens beginne ich mit dem Beitragsbild oft schon lange, bevor der Artikel auch nur halb fertig ist. Warum mache ich das? Sagen wir so: Wenn es ein Beitragsbild hat, dann ist es was Ernstes. So in der Art. Die Wahrscheinlichkeit den Artikel auch wirklich fertig zu machen, steigt. Besonders dann, wenn das Beitragsbild gelungen erscheint.

Werkstatt

Das Motiv für das Beitragsbild stammt von Pixabay. Außerdem habe ich folgende Google Fonts benutzt: Pragati Narrow und Poppins.