So erstellt ihr schicke Grafiken (Artikelvorschaubilder)

In den letzten Wochen habe ich mich damit beschäftigt, wie ich mit geringem Aufwand relativ ansehnliche Grafiken für Vorschaubilder von Artikeln erstellen kann. Ein passendes Vorschaubild ist der Blickfänger, der die Leser zu einem Artikel lockt. Ich möchte euch gerne ein paar Tipps geben, wie auch ihr einfach und schnell solche Grafiken erstellen könnt, denn in manchen Fällen habt ihr vielleicht gerade keine passendes Beitragsbild oder Stockfoto parat.

Professionelle Grafiken sind es zwar nicht, aber das Hauptziel ist dem Leser etwas besseres, als einfarbigen Text auf einfarbigem Hintergrund zu bieten. Die Stichworte hierfür lauten Farbverlauf, Bildrauschen und Transparenz. Mit diesen wenigen Schritten könnt ihr unkompliziert Grafiken erstellen, für die ihr euch zumindest nicht schämen müsst. Ich zeige euch zunächst ein paar Beispiele von Artikelvorschaubildern:

Positive BeispieleNegative Beispiele
Artikelvorschaubild Google Play Music: Mangelhafte Suchfunktion der App | Philipp Schuster | 17.01.2016Risiken der Cloud-Abhängigkeit
Artikelvorschaubild/Symbolbild: GmailSay No To Phablets, Please!
artikelvorschaubild Wallpaper-Beitrag 2016-02-10

Worauf kommt es an?

Ihr seht direkt, dass einfarbiger Text auf einfarbigem Hintergrund grundsätzlich billig und hässlich wirkt. Die anderen Bilder mit Farbverlauf, Rauschen und Transparenz sehen bedeutend interessanter aus. Wer den Workflow einmal drin hat, benötigt dafür auch nicht viel mehr Zeit. Ich bestehe jetzt nicht darauf, dass meine Werke das Non plus ultra sind, aber ihr wisst schon was ich meine. Mir ist aufgefallen, dass die dunkeln Grafiken auf einem hellen Bildschirm echt genial aussehen (finde ich), aber viele haben das Display gedimmt oder die Sonne strahlt darauf ein. Versucht daher mehr auf helle Hintergründe zu setzen, das möchte ich nun auch verstärkt tun.

Wie setzt ihr das um?

Ich arbeite mit GIMP und die Screenshots und Erklärungen beziehen sich primär darauf. Mit anderen Programmen geht es bestimmt ähnlich, das sind immerhin elementarste Grafik-Bearbeitungen.

Schritt 1: Bild anlegen

  • Öffnet GIMP und erstellt eine neue Datei
  • Achtet auf das korrekte Format, bei mir im Blog verwende ich zum Beispiel 16:9
  • erstelle das Bild ausreichend groß, da herunterskalieren immer geht, hochskalieren aber nicht (zumindest nicht ohne Pixelmatsch)

Schritt 2: Hintergrund

  • entscheidet euch für eine Hintergrundfarbe oder einen Farbverlauf
  • Tipp: Arbeitet mit Hilfslinien, wenn ihr den Farbverlauf an bestimmten Bildstellen haben wollt
  • bei einem Farbverlauf gilt grundsätzlich weniger ist mehr (die Farbunterschiede sollten nicht zu krass sein, also nicht grün zu pink)
  • zum Beispiel ist eine aufgehellte Mitte ganz cool, wie oben in einem meiner Beispiele
  • gimp-farbverlauf

  • wählt euch einen Farbverlauf, der euch gefällt: GIMP bietet verschiedene Arten an (linear, radial, …)
  • zieht mit der Maus über eure Arbeitsfläche und GIMP berechnet den Farbverlauf und fügt ihn ein

Schritt 3: Hintergrund-Rauschen hinzufügen

  • Wenn euer Hintergrund angelegt ist, dann fügt mittels Filter > Rauschen > HSV-Rauschen ein Rauschen ein (ich nutze meist die Voreinstellung beim HSV-Rauschen)
  • Das Rauschen wird über den Hintergrund gelegt: Die Hintergrund-Ebene ist fertig, alles weitere geschieht auf neuen Ebenen (Stichwort: Ebenenverwaltung)
  • gimp-rauschen-hinzufuegen

Schritt 4: Textfeld einfügen

  • Sucht eine Schriftart, die ihr frei verwenden könnt: Meine Empfehlung ist Roboto; Roboto gehört Google und wurde unter einer Apache-Lizenz freigegeben (Download bei Google Fonts)
  • fügt ein Textfeld ein (wird automatisch als neue Ebene eingefügt) und experimentiert dann mit eurer Schriftart, der Schriftgröße und den Zeilenumbrüchen, sowie sonstigen Optionen
  • wählt eine kräftige Schriftfarbe (zum Beispiel pures Schwarz), da im nächsten Schritt Transparenz dazu kommt

Schritt 5: Transformationen nutzen

  • wenn ihr wollt, könnt ihr eure Schrift mit dem Drehen-Tool links im Werkzeugkasten (wie der Name schon vermuten lässt) drehen

Schritt 6: Textfeld transparent machen (Deckkraft reduzieren)

  • oben rechts steuert ihr eure Textfeld-Ebene an und reduziert die Deckkraft
  • dadurch schimmert der Hintergrund durch die Schrift durch: geizt nicht mit dem Schieberegler, eine kräftige Transparenz (geringe Deckkraft) kann wahre Wunder bewirken
  • gimp-ebene-transparent-machen

Schritt 7: Das Bild exportieren

  • gegebenenfalls müsst ihr euer Bild noch auf die benötigte Größe herunterskalieren
  • versucht einen guten Kompromiss aus Dateigröße und Qualität zu finden: Im Web ist Performance (geringe Dateigröße) Gold wert
  • Als Resultat kam bei mir folgendes heraus:
  • Artikelvorschaubild

Fazit

Es hat nun wirklich nicht lange gedauert, bis eine Grafik herausgekommen ist, die sich als Artikelvorschaubild sehen lassen kann. Natürlich kann ich nicht mit den Grafikern von The Verge, t3n oder Golem mithalten, aber das Ergebnis ist doch echt ordentlich. Es sieht seriöser und schöner aus, als eine einfarbige Schrift auf einem einfarbigen Hintergrund. Durch das Rauschen und den Farbverlauf sieht der Hintergrund interessant aus und durch die transparente Schrift sieht man das Rauschen leicht in der Schrift. So einfach kann es sein! Bei Fragen und Anregungen schreibt gerne einen Kommentar, ich antworte gerne und schnell.

Philipp Schuster

Ich bin Philipp und studiere Informatik an der TU Dresden. Meine Interessen sind sehr breit gefächert und reichen von Web und Technik über Social Media und Programmierung bis hin zu Politik, Wirtschaft und Gesellschaft. Außerdem blogge ich hier bereits seit Anfang 2014 regelmäßig und es macht mir großen Spaß! Get To Know Me!

Das könnte auch interessant sein...

Datenschutzerklärung für die Kommentarfunktion.

Schreibe einen Kommentar

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

CAPTCHA lösen * Time limit is exhausted. Please reload CAPTCHA.