click tracking

How to Create an Email Template

Creating an email template doesn't have to be difficult, and with only a bit of knowledge of HTML you can transfer a design from Photoshop to HTML easily.

You can use the template that you make to create emails and send them to friends, family or even to some customers.

For email marketing it is essential that you can make your own template - to give it a persona appeal.

After  creating an email template, you also need to test it. This is one of the most important steps, because by testing it you avoid having an email that doesn’t display properly.

There are many email clients and they are very different from each other. If the email displays correctly in the email client you are using, unfortunately it can still look messed up in another email client.

There are certain websites that will help you test your template in just a few minutes.

Creating and testing an email template in Photoshop and Dreamweaver

See the videos at the bottom!

  1. Choose a designs. The designs can be for example an image with a text or anything of the kind that you would like to use.

  2. Open the design in Photoshop.

  3. Use the slice tool to make sections. Click and hold to select the slice tool from the left. Slice each element, leaving room for the text. Make sure that there will be room around the text to edit it later.

  4. If you click on hold, you can move the slices that you have made with the slice tool.

  5. Go to View and click on Snap. You need this to see the slices.

  6. Make sure you slice in large sections: you don't want too many images to be loaded, because it will take more time to load the email in the end.

  7. If you have a lot of white space, you can delete it later.

  8. Make sure you have everything covered when you use the slice tool.

  9. When you see you have it all covered, go to File and click on Save for web and devices.

  10. Go through each image. Change each to JPEG and choose the quality of the image. Click Save, and when the save window pops up, change the format of the file to HTML images.

  11. In the same window go to Settings, Other and choose the HTML tag.

  12. Here you should also tick Remove comments, Add quotes around attributes, Include zero margins. Make sure these are all selected.

  13. Got to Slices next in this window. Change empty cells to TDWH. This way each TD tag will have a high set.

  14. Spacing cells should be always ticked as well. Click OK and click Save once you are done.

  15. This will create two files, one HTML file and one folder with all the images that you have sliced.

  16. Go to Dreamweaver once this is all done. You can also use a text editor if you have no Dreamweaver.

  17. Using this program you can start editing the HTML file. You will need to know basic HTML code writing in order to do this.

  18. Change the background color to white by clicking on Code.

  19. Remove the tags and the static images and create text: select the section for this and delete it (where the text should be).

  20. Now go to Photoshop and select the text that you would like to add.

  21. Go back to Dreamweaver. Click on the section where you want to add the text. Click on Code. At the Code section you can use some HTML coding, and change the font, the size of the text and the color once you have pasted it.

  22. Paste the text and align it the way you want it to.

  23. Now you can do the header in a similar way. Go to Code again and choose style, font family etc. like before. You don't have to set the style for each section, just have one global setting.

  24. Align the text in Code, adding spacing as well (such as 5 pixels).

  25. Look at Live view to see how the design looks like.

  26. If you want to change the background color, do so in Code.

  27. You can add the link to the text that you have just pasted: highlight the text you want to add a link to, select Target blank in the bottom editor window and add your website address. You can add a link this way for example to Subscribe. You can add a link to the image as well by clicking on them and using the bottom editor section of the program.

  28. If you want to make the template expandable, it will be easier to edit later. To do this select the images on the template and fill in the space between them with the background color. Click on the section for this and add Background color white. This way if the user has no images enabled, he or she will still see the message, the text of the template.

  29. To make sure everything will display properly, use a blank canvas to create your email. For this you can use a start-sheet from the internet. Download the framework, and open up the HTML file in Dreamweaver. copy the styles and add them to your HTML sheet in Dreamweaver. The styles will also make sure that the email can be read with a smart phone as well. These all assure that the email will look just as good as it appears to you now.

  30. Set the color of the links with the Code editor. This way they will all look the same.

  31. If you know more code writing, you can edit many other things as well in the Code section of the program.

  32. Save everything and the template is ready to use. Now you have to test it to make sure it looks good before sending it out.

  33. Open Litmus and Campaign monitor websites. Litmus allows you to test your template with different email clients and mobile devices. You will have to pay for these services. There are some free plans as well, where you can only preview the email in a few email clients. It is worth to use these websites, because otherwise you risk an email with mistakes that won't display properly.

  34. Create an account on Campaign Monitor. There are also other services that you can use, these are just some of the best ones. Singing up is easy. If you have an account already, log in.

  35. Click on Client and click on Create New Campaign. There you can fill in the empty boxes (the name of the template, etc.)

  36. Select the format of the template on the next page. Make sure you choose HTML and plain text.

  37. Upload the HTML and the zip file of the images that you have created before. You can preview it.

  38. Import the text content of the HTML. Edit the formatting, making sure that the lines are not too long.

  39. Add a list: this can be a test list.

  40. Open Litmus and create and account. Litmus provides an email address that you can add to your test list. This email address automatically tests the campaign. You can add a personal one as well, just in case.

  41. If you have subscribers, you can import them through Campaign Monitor.

  42. Create and click on Send.

  43. Now Litmus should pick it up, and you can see what is happening with the test on the web page of Litmus. This process takes about 2 minutes.

  44. You can check the email that you use for the test, and see whether the email ended up in the spam or not and whether it displays fine. If the images are not displayed it is OK, as long as the email displays correctly otherwise and works properly. You can notice problems, such as the width of the email etc. These can be changed later.

  45. Litmus will test the email in a few minutes in a number of clients. You can preview how the email will look.

  46.  If you notice anything, you can go back to the email and make changes, then test again.