Photoshop HTML Datei in Gmail einfügen?

10.04.2025, 13:02

Datein welche ich nach dem Exportieren aus Photoshop erhalte:

Editor Ansicht:

Einfügen in Gmail:

Die 99999 werden durch den HTML Code aus dem Editor ersetzt

Anschließend erhalte ich das ergebniss von oben

3 Antworten

medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, IT, Webentwicklung
10.04.2025, 13:03

Das Arbeiten mit dem Slice-Werkzeug ist eigentlich längst obsolet und war auch zu dessen Zeit nicht gut, da Photoshop kein gescheites HTML ausgegeben hat. Du kannst es dennoch als Grundlage nehmen und lediglich mit den Grafiken arbeitest.

Dein Problem wird vor allem sein, dass die Grafiken entweder nicht richtig verlinkt sind oder von Gmail und anderen E-Mail-Clients geblockt werden. Ich würde daher nach Möglichkeit darauf verzichten, in E-Mails zu viele grafische Elemente zu nutzen.

Du kannst deine E-Mail individuell gestalten und auch das einbetten von Grafiken funktioniert. Die Herangehensweise ist jedoch eine andere und nicht so, wie man sonst z.B. eine statische Webseite mit HTML, CSS samt Grafiken umsetzen würde.

Es reicht nicht, einfach nur dein HTML-Dokument hoch zu laden oder dessen Markup zu kopieren. Du musst auch die verwendeten Grafiken hochladen. Sprich auf deinem Webspace abgelegt werden, damit sie später auch beim Empfänger geladen werden.
Woher ich das weiß:Berufserfahrung – Full-Stack Developer
TotBBasel 
Beitragsersteller
 10.04.2025, 13:23

Welches Video meinst du sollte ich am besten anschauen?

Oder hast du eventuell eine andere methode den spaß umzusetzen?

medmonk  10.04.2025, 13:27
@TotBBasel

Es würde schon Sinn machen, wenn du dich grundlegend damit befasst. Bei E-Mails muss halt einiges beachtet werden, damit sie korrekt angezeigt werden.

Du kannst auch nach fertigen E-Mail-Templates suchen und eines davon als Grundlage nimmst, um damit dein eigenes zu erstellen.

AKlen
11.04.2025, 05:50

Servus,

das Problem ist nachvollziehbar und liegt meist an den Bildpfaden. Photoshop exportiert HTML oft mit relativen Pfaden (z.B. images/bild.jpg), die nur auf deinem lokalen Rechner funktionieren. Gmail kann diese lokalen Dateien aber nicht abrufen.

Die Lösung ist, die Bilder zuerst online zu hosten (z.B. auf einem Webserver, bei einem Bildhoster oder in einem Cloud-Speicher mit öffentlichem Link). Anschließend musst du im HTML-Code die src-Attribute der <img>-Tags durch die vollständigen, absoluten URLs der online gehosteten Bilder ersetzen.

Bevor du den angepassten Code in Gmail einfügst, ist es oft hilfreich, ihn kurz zu überprüfen. Tools wie https://htmlviewer.cc können nützlich sein, um schnell zu visualisieren, ob der HTML-Code mit den neuen Online-Bildlinks korrekt dargestellt wird.

Danach kopierst du den überarbeiteten HTML-Code und fügst ihn in das E-Mail-Fenster von Gmail ein. So sollte die Darstellung dann wie gewünscht funktionieren. Viel Erfolg!
Woher ich das weiß:eigene Erfahrung
Nectovelin
10.04.2025, 12:44

HTML = Hypertext Markup Language

Eine HTML-Datei beschreibt einem Webbrowser, wo welche Inhalte in welcher Art und Weise dargestellt werden sollen. Die Inhalte selbst (Bilder) fehlen bei dir.
TotBBasel 
Beitragsersteller
 10.04.2025, 12:51

Das Ding ist die dabei hab ich in Photoshop erstellt und dann auch via Legacy (HTML und Bilder) Export exportiert, anschließend Rechtsklick auf die Datei und anschließend via Editor die HTML kopiert.

Das Vorgehen hat in so gut wie jedem Tutorial funktioniert, welches ich gesehen haben (die mittlerweile 3-7 Jahre alt sind), nur bei mir nicht

Nectovelin  10.04.2025, 12:54
@TotBBasel

Was immer dein Photoshop da auch importiert haben mag – eine HTML-Datei ist technisch eine TEXT-Datei und enthält keine Bilder.

Nectovelin  10.04.2025, 12:57
@TotBBasel

Nein, so sieht sie mit einem Betrachter aus, der HTML interpretieren kann. Nimm einen Texteditor wie Notepad und schau dir die Datei an. Dann siehst du ihren echten Inhalt. Bilder erscheinen da nur als Textverweise.

TotBBasel 
Beitragsersteller
 10.04.2025, 12:58
@Nectovelin

Okay nur wie bekomme ich den Span jetzt in Gmail importiert?

Nectovelin  10.04.2025, 13:00
@TotBBasel

Lade einfach die Bilder als Anhang oder inline in einer HTML-formatierten Mail.

TotBBasel 
Beitragsersteller
 10.04.2025, 13:05
@Nectovelin

Und wie mache ich eine HTML formatierte Email?

Nectovelin  10.04.2025, 13:08
@TotBBasel

Indem du die entsprechende Option wählst. Es gibt genau zwei Möglichkeiten, eine Mail zu erstellen:

  • reiner Text (Plaintext) ohne jede Formatierungsmöglichkeit
  • HTML-formatiert mit der Möglichkeit, verschiedene Fonts zu verwenden, Texte zu formatieren (Unterstreichung, Kursiv (italic). fett, farbig)

Heute ist HTML-Mail der Standard. Ich selbst schreibe Mails ausschließlich als reine Textmails, um meine Empfänger nicht zu belästigen.