Przygotowanie szablonu wiadomości z pliku graficznego PSD

Otwieramy szablon w Photoshopie.

Pierwsze co powinniśmy zrobić to zastanowić się w jaki sposób rozmieścić linie pomocnicze (opcjonalnie) oraz jakie elementy będą stanowić część graficzną szablonu.

Cięcie szablonu

POTRZEBNE NARZĘDZIA:  Adobe Photoshop

 

Wybieramy narzędzie cięcia na plasterki:

old2

Możemy skorzystać z linii pomocniczych. Nie jest to obowiązkowe, ale znacznie ułatwia pracę:

new1

Przy układaniu linii pomocniczych na szablonie należy zastanowić się jakie wycięcie plasterków będzie optymalne, tzn. jakie wycięcie spowoduje, że będzie ich jak najmniej. Jest to ważne przy późniejszym kodowaniu, gdyż mniejsza ilość plasterków oznacza mniej pracy przy pisaniu kodu. Warto również powiększać zaznaczany obszar, aby linie pomocnicze (opcjonalnie) lub same plasterki pokrywały się z krawędziami obiektu, który chcemy wyciąć.

old3

 

Gdy szablon został w całości pocięty jest gotowy do zapisania w formacie .html. Robimy to przy pomocy menu Plik > Zapisz dla Internetu i urządzeń. Najlepiej wybrać kodowanie UTF-8

new2

Po zapisaniu w wybranym folderze utworzy się plik .html z szablonem oraz folder z obrazkami (plasterkami).

Całość szablonu (plik HTML i folder z grafikami) możemy spakować i zaimportować jako ZIP.

W tym celu wchodzimy w zakładkę Komunikacja->Szablony e-mail i wybieramy przycisk „Importuj ZIP”

 

Przy imporcie wybieramy nasz plik ZIP, nadajemy również szablonowi nazwę oraz określamy, czy ma on być współdzielony (widoczny dla innych użytkowników. Dowiedz się więcej o użytkownikach)

Kodowanie wiadomości email

Wiadomości email są specyficznym rodzajem HTML-a. Muszą uwzględniać różne możliwości wyświetlania się na różnych programach pocztowych, zwłaszcza na Outlooku i Gmailu, które nie akceptują niektórych znaczników i atrybutów. Dodatkowo, trzeba zwrócić uwagę na dwa bardzo ważne aspekty wysyłania wiadomości email:

– część odbiorców nie akceptuje wyświetlania grafik

– filtry antyspamowe są bardzo wyczulone na proporcje grafiki do treści w wiadomości – im więcej grafik, tym większe niebezpieczeństwo, że wpadniemy w SPAM.

 

W związku z tym powinniśmy jak największą część wiadomości zakodować jako HTML.

W przypadku prostych szablonów wystarcza podstawowa znajomość tego języka.

Kodowanie

RAMY TABELKI:

<table style="text-align: center; width: 680px;" border="0" cellspacing="0" cellpadding="0" align="center">

<tbody>

<tr>

<td width="" height=""></td>

</tr>

</tbody>

</table>

Pierwszą czynnością, którą wykonujemy jest nadanie komórkom szerokości i wysokości, które widoczne są przy znaczniku img src (przy obrazku/plasterku):

<td width="78" height="46">

<img src="images/profimedical9_02.gif" width="78" height="46" alt=""></td>

Obrazki które możemy zastąpić jednolitym tłem usuwamy, a w komórkach w których się mieściły definiujemy kolor tła , wpisując w znaczniku <td> artybut bgcolor=”#kod_koloru”.

<td width="300" height="200" bgcolor="#j4j4j4">

 

Pamiętajmy, że przy podmienianiu adresu URL obrazka powinniśmy od razu umieścić wysokość i szerokość komórki, jeśli nie zapisały się automatycznie w PS:

<td width="78" height="46">

<img style=”display:block;” src=”URL obrazka” border=”0” alt=”opcjonalnie, np. gdy obrazek jest logiem” width="78" height="46"/></td>

Przy komórkach, które nie będą zawierać grafiki, a więc będą polem tekstowym bądź tłem nadajemy odpowiednie atrybuty:

<td bgcolor=”kolor, jeśli nie biały” valign=”top/middle/bottom”   width="78" height="46" ></td>

Teksty formatujemy w marginesach <p></p>:

<p style="font-family: Arial, Arial Black, Calibri, Georgia, Helvetica; Tahoma; Times New Roman, Verdana; font-size: 20px; color: kolor; font-weight: normal; line-height: 21px; margin: 10px 10px 10px 10px; text-align: justify;"><span style="font-size: 25px; font-weight: bold; color: kolor;>Naglówek</span><br>Tekst własciwy </p>

Font-family: czcionka

Font-size: rozmiar czcionki

Color: kolor czcionki

Font-weight: styl czcionki (bold – pogrubiony, normal – normalny)

Line-height: odstęp między wersami

Margin: marginesy

Text-align: wyrównanie (justify, left, center, right)

Przycisk:

<p style="font-family: calibri; text-align: center; margin: 30px 10px 20px 10px; font-weight: bold; font-size: 18px; color: #000000;">

<a style="background-color: #0e5300 !important; color: #ffffff; text-decoration: none; padding: 10px; border-radius: 10px;" href="link">Przycisk</a></p>

old5

Szablon prosty

logo – tabelka – stopka

old7

 

Jeżeli potrzebujesz więcej informacji na powyższy temat skontaktuj się z nami: bok@salesmanago.pl +48 533 600 808