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!
- 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.
- Open the design in
- 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.
- If you click on
hold, you can move the slices that you have made with the slice
- Go to View and
click on Snap. You need this to see the slices.
- 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.
- If you have a lot
of white space, you can delete it later.
- Make sure you have
everything covered when you use the slice tool.
- When you see you
have it all covered, go to File and click on Save for web and
- 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.
- In the same window
go to Settings, Other and choose the HTML tag.
- Here you should
also tick Remove comments, Add quotes around attributes, Include
zero margins. Make sure these are all selected.
- Got to Slices next
in this window. Change empty cells to TDWH. This way each TD tag
will have a high set.
- Spacing cells
should be always ticked as well. Click OK and click Save once you
- This will create
two files, one HTML file and one folder with all the images that you
- Go to Dreamweaver
once this is all done. You can also use a text editor if you have no
- Using this program
you can start editing the HTML file. You will need to know basic
HTML code writing in order to do this.
- Change the
background color to white by clicking on Code.
- Remove the tags
and the static images and create text: select the section for this
and delete it (where the text should be).
- Now go to
Photoshop and select the text that you would like to add.
- 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
- Paste the text and
align it the way you want it to.
- 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.
- Align the text in
Code, adding spacing as well (such as 5 pixels).
- Look at Live view
to see how the design looks like.
- If you want to
change the background color, do so in Code.
- 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.
- 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
- 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.
- Set the color of
the links with the Code editor. This way they will all look the
- If you know more
code writing, you can edit many other things as well in the Code
section of the program.
- 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.
- 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.
- 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.
- Click on Client
and click on Create New Campaign. There you can fill in the empty
boxes (the name of the template, etc.)
- Select the format
of the template on the next page. Make sure you choose HTML and
- Upload the HTML
and the zip file of the images that you have created before. You can
- Import the text
content of the HTML. Edit the formatting, making sure that the lines
are not too long.
- Add a list: this
can be a test list.
- 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.
- If you have
subscribers, you can import them through Campaign Monitor.
- Create and click
- 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.
- 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.
- 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