Transparenter Hintergrund mit Schrift

  • Auf der Suche nach offenen Fragen im Forum stieß ich auf einen Thread, in dem nach einer Anleitung für eine transparente Hintergrundgrafik mit Schrift gesucht wurde.


    Aus diesem Anlass möchte ich hier kurz erklären, wie man das ganz einfach umsetzen kann.


    Ich erkläre am Beispiel der freien Bildbearbeitungssoftware Gimp (Version 2.8.16) und Adobe Photoshop CC (Version 2015.1.2).


    Was wird benötigt?


    Gimp (kostenlos) oder Photoshop (nach Testphase kostenpflichtig). Für solch eine einfache Aufgabe eignen sich beide Programme hervorragend.


    Schritt 1: Datei erstellen


    Sowohl in Gimp, als auch in Photoshop lassen sich Dateien über die Menüpunkte File -> New, oder über die Tastenkombination STRG + N anlegen. Die Dialoge unterscheiden sich ein wenig. Zuerst muss eine Größe her. Ich werde für dieses Beispiel eine Breite von 500px und eine Höhe von 250px nutzen.


    Einstellungen Gimp:
    Width: 500px
    Height: 250px
    (!) Klick auf Advanced Options
    Fill with: Transparency


    html-seminar.de/woltlab/attachment/934/


    Einstellungen Photoshop:
    Width: 500px
    Height: 250px
    Background Contents: Transparent


    html-seminar.de/woltlab/attachment/935/


    Durch die Einstellungen ist der Hintergrund des Bildes schon transparent. Das erkennt man auch an dem grauen Schachbrettmuster. Wenn kein Schachbrettmuster, sondern z. B. ein weißer Hintergrund zu sehen ist, ist etwas schiefgelaufen. Einfach noch mal probieren und darauf achten, die Einstellungen korrekt zu justieren. Wenn auch das nicht klappt, wie folgt vorgehen:


    Transparenz erzwingen mit Gimp:
    Im Fenster mit dem Titel Layers - Brushes ein Rechtsklick auf die Ebene mit dem Namen Background. Dann Add Alpha Channel auswählen. Wenn die Option ausgegraut ist, ist dieser bereits vorhanden und es kann weitergehen. STRG + A (Select -> All) und dann ENTF (Edit -> Clear) drücken. Jetzt sollte das Schachbrettmuster zu sehen sein.


    Transparenz erzwingen mit Photoshop:
    Im Ebenen Dialog Rechtsklick auf die Ebene mit dem Namen Background. Dann Layer from Background. Das auftauchende Fenster mit OK bestätigen. Wenn die Option fehlt (und viele Optionen angezeigt werden), ist der Schritt bereits geschehen. STRG + A (Select -> All) und dann ENTF (Edit -> Clear) drücken. Jetzt sollte das Schachbrettmuster zu sehen sein.


    Schritt 2: Text einfügen


    Text erstellen mit Gimp:
    Zuerst in der Toolbox die Vordergrundfarbe wie gewünscht einstellen. Ich nehme schwarz. Danach ein Klick in der Toolbox auf das große A oder einfach auf der Tastatur auf T gedrückt und das Text Werkzeug ist ausgewählt. Ein Klick ins Bild erstellt nun eine neue Textebene in der geschrieben werden kann. Die Bedienung ist sehr intuitiv. Im unteren Bereich der Toolbox sind einige Einstellungen aufgetaucht wie z. B. Schriftart, Größe, Farbe, Ausrichtung. Einfach Experimentieren. Mit einem Klick in der Toolbox auf das Symbol mit den 4 Pfeilen in jede Richtung oder M auf der Tastatur wird das Werkzeug zum Verschieben ausgewählt. Um den Text erneut zu bearbeiten, muss lediglich das Textwerkzeug ausgewählt und auf den entsprechenden Text geklickt werden.


    Mit diesen Werkzeugen lässt sich der Text drehen, spiegeln, oder verzerren:
    html-seminar.de/woltlab/attachment/936/


    Text erstellen mit Photoshop:
    Zuerst die Vordergrundfarbe wie gewünscht einstellen. Ich nehme schwarz. Danach ein Klick in der Werkzeugleiste auf das große T oder einfach auf der Tastatur auf T gedrückt und das Text Werkzeug ist ausgewählt. Ein Klick ins Bild erstellt nun ein neues Textobjekt in dem geschrieben werden kann. Die Bedienung ist sehr intuitiv. Am oberen Rand unter dem Menü sind einige Einstellungen aufgetaucht wie z. B. Schriftart, Größe, Farbe, Ausrichtung. Einfach Experimentieren. Mit einem Klick in der Werkzeugleiste auf das Symbol mit den 4 Pfeilen in jede Richtung oder V auf der Tastatur wird das Werkzeug zum Verschieben ausgewählt. Um den Text erneut zu bearbeiten, muss lediglich das Textwerkzeug ausgewählt und auf den entsprechenden Text geklickt werden.


    Durch Edit -> Free Transform oder STRG + T auf der Tastatur lässt sich der Text drehen und verzerren. Bestätigt wird mit der Entertaste!



    Schritt 3: Bild speichern


    Es ist wichtig, dass das Bild als PNG oder GIF Datei gespeichert wird. Das JPEG Format unterstütz nur 3 Farbkanäle: Rot, Grün und Blau. In unserem Bild ist jetzt allerdings ein vierter: Transparenz. Dafür verwendet man PNG. GIF ist das Format für animierte Grafiken und unterstützt ebenso Transparenz.


    Bild speichern mit Gimp:
    File -> Export oder STRG + E auf der Tastatur öffnet den Speicherdialog. Hier wird jetzt einfach ein Pfad ausgewählt. Dann einen Dateinamen eingeben und unbedingt an die Endung .png denken!


    Bild speichern mit Photoshop:
    File -> Save oder STRG + S auf der Tastatur öffnet den Speicherdialog. Hier wird ein Pfad gewählt und ein Dateiname eingegeben. Unter dem Dateinamen muss noch der Typ auf PNG gestellt werden!


    Das wars
    Sollten Fragen zur Bedienung offen sein immer heraus damit.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!