bfppr0b.png

Edit v4.002 from 2009-05-28 to 2019-10-22 by AMu+CBr+TSc+HSc

Ein Briefpapier für Outlook

Dieses Briefpapier wird als Hintergrundbild für E-Mails verwendet, so kann jeder seinen E-Mail-Hintergrund kreativ gestalten.

Voraussetzungen:
Was wird benötigt, um das Briefpapier einbinden zu können:

  • Mindestens Outlook 2000.
  • Die zwei Vorlagen, hier in der 01. Variante, von der Firma:
    1. hus-02.png: Ein Bild von dem originalen Firmenbriefpapier.
    2. hus-04.htm: Die erste Muster−HTML−Seite der Firma zum Einbinden des Briefpapiers.
Die einzelnen Schritte: Dabei entstandene Erkenntnisse:
  • Einen Text am Pfad entlang gestalten.
  • Wie wird die Transparenz hergestellt?

Die Bildbearbeitung

Nun erkläre ich, in 4 Schritten unter der Verwendung von dem Bildbearbeitungsprogramm Gimp wie man es erreicht, dass ein schönes oder themenbezogenes Hintergrundbild in allen neuen E-Mails integriert wird.

Man sollte sich auf jeden Fall einen sicheren Platz für die Originaldateien suchen und diese von dort aus noch mal in einen neuen leeren oder einen temporären Ordner kopieren (Sicherung). Dort kann man Sie dann bearbeiten.

  1. bfppr1a0.png
    Abb. 1a: Themenbezogenes Bild
    Für eine größere Darstellung das Bild anklicken.

    Das eigene Bild zum Einfügen in den Firmenhintergrund: (eigener Outlookordner)

    Es wird das Bild benötigt, welches im Hintergrund der Email auf dem Musterbriefpapier stehen soll. Dazu reicht es meist, einen Screenshot (Abb. 1a) mit dem Programm Paint (Start → Programme → Zubehör) in eine Bilddatei zu speichern. Dieses sollte ein gängiges Bildformat wie PNG, GIF, oder JPG haben. 256 Farben sind für das Bild das Minimum (8Bit), um etwas Farbe zu haben. Der Name der Datei ist noch egal, bei unserem Beispiel heißt die Datei dmm.png.


  2. bfppr1b0.png
    Abb. 1b: Firmenbriefpapier
    Für eine größere Darstellung das Bild anklicken.

    Das Briefpapier der Firma HuSvEDVF

    Welches zusammen mit dem Themenbild (Abb. 1a) in Gimp geöffnet wird.


  3. bfppr1c0.png
    Abb. 1c: Zusammenführung und Ausrichtung
    Für eine größere Darstellung das Bild anklicken.

    Zusammenführung und Ausrichtung der Bilder

    Wir schieben jetzt die beiden Bilder übereinander und richten das Themenbild auf der Vorlage aus.

    Wobei darauf geachtet werden sollte, dass es entweder noch verblasst wird oder so bleibt. Denn wenn es so bleibt, muss man das Themenbild an die rechte Seite des Briefpapiers ziehen. Um den Text den man später schreibt, nicht über das Bild zu schreiben.

    Nachdem man mit 1 bis 2 Editfeldern ein paar Texte zu dem Themenbild geschrieben und ausgerichtet hat, kann man nun mit dem eigentlich letzten Schritt weitermachen.


  4. bfppr1d0.png
    Abb. 1d: Die Transparenz
    Für eine größere Darstellung das Bild anklicken.

    Die Transparenz

    Man öffnet nun noch ein Blankopapier, mit einer weißen Hintergrundfarbe. Das schiebt man über das Themenbild und spielt so lange mit der Transparenz, bis es wie gewünscht aussieht.


Die HTML-Datei

Wie diese erstellt wird und danach in ihr Outlook eingebunden wird, werde ich ihnen hier in 5 Schritten erklären.

  1. Man nehme das Muster (bei uns hus-04.htm), kopiert und benennt es nach dem Thema des Themenbildes. Nun passt man noch folgende Inhalte an:

    • Der Seitentitel sollte in etwa so aussehen: Briefpapier für Outlook - Thema. Wobei "Thema" durch das entsprechende Thema ersetzt werden sollte.
    • Bei der Meta-Angabe author Trägt man das Namenskürzel aller Personen ein, die an der Erstellung des Briefpapieres beteiligt waren. Wenn mehr als nur einer daran beteiligt ist/war, werden die Namenskürzel mit einem Plus-Zeichen + getrennt.
    • Bei der Meta-Angabe description Gibt man in einen einzelnen Satz wieder, was für ein Briefpapier das ist.
    • Bei der Meta-Angabe edit schreibt man die bei uns verwendete Edit-Zeile rein, allerdings ohne die Auflistung der Autoren, weil wir diese Informationen schon beim Meta-Tag author angegeben haben.
    • Zu guter letzt passen wir die URL zu dem Bild im CSS-Attribut background-image auf die URL des zu verlinkenden Bildes an.

    Wenn man alles richtig gemacht hat, sollte man ein Briefpapier haben, welches beim Aufruf im Browser auch das Hintergrundbild anzeigt. Hier nochmal ein vollständiges Quelltext-Beispiel mit dem Briefpapier Digitalmultimeter:

  2. bfppr2a.png
    Abb. 2a: Fenster Optionen

    Als nächstes erkläre ich Ihnen,

    wie Sie die HTML-Datei einbinden. Gehen Sie bitte in ihrem Outlook auf Menü/Extras/Optionen Karteikarte E-Mail-Format. Dort wählen Sie (siehe Abb. 2a): Senden im Nachrichtenformat HTML .


  3. bfppr2b.png
    Abb. 2b: Fenster Optionen

    Nun gehen Sie wie in Abb. 2b, auf den Knopf .


  4. bfppr2c.png
    Abb. 2c: Fenster Briefpapierauswahl

    Jetzt, wie in Abb. 2c, auf den Knopf gehen .


  5. bfppr2d.png
    Abb. 2d: Fenster Neues Briefpapier erstellen

    Geben Sie nun noch den Namen für das Briefpapier ein (1.).

    Das Ausrufezeichen steht bei uns davor, weil wir unsere eigenen Briefpapiere gerne an erster Stelle und beieinander haben möchten. Danach setzen Sie bitte den Punkt bei: Diese Datei als Vorlage verwenden (2.) und wählen über den Knopf (3.) den richtigen Ort Ihrer HTML-Datei. Bestätigen Sie alle Fenster und nun ist Ihr Briefpapier fertig und eingebunden.


Wenn Sie jetzt in Outlook eine eMail schreiben, wird Ihr Themenbild immer als Hintergrund verwendet.

Gebogener Text

Erstellen eines Pfades und Anbinden des Textes (danach Formatierung).

  1. bfppr3a.png
    Abb 3a: Neues Bild

    Als erstes öffnen wir Gimp Nun gehen wir auf Menü/Datei/Neu. Dort wählen wir entweder eine Vorlage aus oder geben die Größe manuell an.

    Der Farbraum sollte auf RGB stehen und meistens ist die Füllung Weiß, um diesen Pfad besser sehen und dann über eine andere Ebene ziehen zu können.


  2. bfppr3b.png
    Abb. 3b: Werkzeugkasten

    Nun wählen wir das Pfadwerkzeug und gestalten unseren Pfad.


  3. bfppr3c0.png
    Abb. 3c: Weg des Textes (Pfad)
    Für eine größere Darstellung das Bild anklicken.

    Erst setzen wir die Punkte, in welcher Richtung der Text fließen soll und danach gestalten wir die einzelnen Linien.


  4. bfppr3d0.png
    Abb. 3d: Textwerkzeug
    Für eine größere Darstellung das Bild anklicken.

    Nun klicken wir auf das Textwerkzeug (das große A) und danach neben den Pfad irgendwo auf den Hintergrund. Hier sollte gleich eine nicht zu fette Schrift gewählt werden.


  5. bfppr3e.png
    Abb. 3e: Texteditor

    Danach sollte sich der Texteditor öffnen und dort kann man seinen gewünschten Text reinschreiben. Den Haken, ausgewählte Schriftart verwenden sollte man nicht vergessen.


  6. bfppr3f0.png
    Abb. 3f: Werkzeugkasten
    Für eine größere Darstellung das Bild anklicken.

    Danach drückt man den Knopf .


  7. bfppr3g0.png
    Abb. 3g: Textpfad
    Für eine größere Darstellung das Bild anklicken.

    Nun ist der Text schon mal an dem Pfad entlang gelegt.


  8. bfppr3h.png
    Abb. 3h: Fenster Ebenen, Kanäle, Pfade...

    Daraufhin gehen wir in das Fenster Ebenen, Kanäle, Pfade... in die Karteikarte Ebenen und klicken mit der linken Maustaste auf das Auge der Textebene, somit ist diese nicht mehr zu sehen.


  9. bfppr3i.png
    Abb. 3i: Fenster Neue Ebene

    Nun erstellen wir noch eine Transparente Neue Ebene (durch das weiße Blatt links unten).


  10. bfppr3j.png
    Abb. 3j: Fenster Ebenen, Kanäle, Pfade...

    Jetzt gehen wir in das Fenster Ebenen, Kanäle, Pfade..., in die Karteikarte Pfade und klicken das rote Rechteck (Auswahl aus Pfad) an.


  11. bfppr3k.png
    Abb. 3k: Menü → Auswahl → Schwebend

    Jetzt gehen wir zu Menü → Auswahl → Schwebend und klicken dort mit der linken Maustaste.


  12. bfppr3l0.png
    Abb. 3l: Fenster GIMP
    Für eine größere Darstellung das Bild anklicken.

    Jetzt sollte der Textpfad eingerahmt sein.


  13. bfppr3m0.png
    Abb. 3m: Fenster Ebenen, Kanäle, Pfade...

    In der Karteikarte Ebenen sollte nun eine schwebende Ebene zu sehen sein.


  14. bfppr3n.png
    Abb. 3n: Kontext von Ebene

    Als nächstes machen wir einen Rechtsklick auf die schwebende Ebene und wählen in dem Kontextmenü Neue Ebene.


  15. bfppr3o0.png
    Abb. 3o: Kontext von Bearbeiten
    Für eine größere Darstellung das Bild anklicken.

    Nachdem die neue Ebene erstellt wurde, können wir im Menü → Bearbeiten → Pfad nachziehen, den Text nach zeichnen.


  16. bfppr3p0.png
    Abb. 3p: Fenster: GIMP
    Für eine größere Darstellung das Bild anklicken.

    Jetzt ist der Text fertig und nun kann zum Beispiel diese Textebene, ohne Hintergrund über ein Bild geschoben werden.


Die Transparenz

Verblassen eines Bildes mit GIMP2.

  1. bfppr4a.png
    Abb. 4a: Kontext von Menü → Datei.

    Wir starten GIMP und öffnen das Bild, welches wir verblassen möchten als Ebene.


  2. bfppr4b.png
    Abb. 4b: Fenster Bild Öffnen

    Achten Sie bitte unbedingt auf die Informationen, welche unter dem Bild angezeigt werden (roter Kreis). Wenn dort statt RGB: indiziert steht, funktioniert diese Anleitung nicht. Sie sollten ein RGB-Farbenbild mitbringen.


  3. bfppr4c.png
    Abb. 4c: Fenster Ebenen, Kanäle, Pfade...

    Wenn das Bild als Ebene geöffnet ist, öffnen wir jetzt links unten(siehe Abb. 4c) eine neue Ebene.


  4. bfppr4d.png
    Abb. 4d: Fenster Neue Ebene

    Dort wählen wir die Farbe Weiß aus und vergeben einen passenden Namen, bei uns: Transparenz. Nun klicken Sie bitte auf .


  5. bfppr4e.png
    Abb. 4e: Fenster Ebenen, Kanäle, Pfade...

    Bitte gehen Sie in das Fenster Ebenen, Kanäle, Pfade... (siehe Abb. 4e) und schieben Sie dort den Regler für die Deckkraft hin und her. So lange bis Sie die gewünschte Deckkraft erhalten.


  6. bfppr4f.png
    Abb. 4f: Fenster *bfppr1a.png-2.0(RGB, 2 Ebenen) 402x337 -GIMP

    Bei uns war diese bei 75% (Abb. 4e) erreicht.


Ich hoffe, dass diese kleine Anleitung ein wenig helfen konnte und wünsche viel Erfolg bei den nächsten Projekten.