How to Create and Send Email Newsletter For Free

There are many paid options provided by many email newsletter providers, but if you can send one from your Gmail, Yahoo, Hotmail and any other free email account, you can reserve more of your budget on other items.

HTML email Gmail

If you are looking for a better managed newsletter services with tools to monitor your email campaign, go with the paid service, but if you are looking to just send a newsletter to a few friends, you will love this tutorial.

We’ll guide you on how to save your very own newsletter template as an HTML template and start sending them, with the help of CampaignMonitor.

Start with Email Template in Photoshop

If you have an idea on what you want your newsletter template to look like, you can start working with Photoshop. Otherwise, you can download a template from many free email template providers. There are no specific width and height of an email template, but to make sure it is compatible and readable on any email without breaks, we suggest you set the width size at not more than 650px. There are however no limitations on heights, so that parameter is up to you.

Template Size

Email Template

You can be as creative as you like with your email template, but bear in mind, with more creative elements included, there will be more work in slicing each element. The template that we will be using has only a few simple elements: a header, photo, lines and text, for the benefit of this guide.

Draft Template

Fonts selection

You can definitely use any type of font available on your Photoshop. But if you are creating a newsletter, it is advisable to use web fonts such as Times New Roman, Arial and Georgia. Otherwise, use your special fonts, but save them as images, rather than as text.

Fonts

Try to limit having to save too many images in your template, as this will only make it larger and hence take longer to load.

1. Slice your email template

In this guide, we will be using an edited version of free email template by CampaignMonitor. Download it here to follow this tutorial.

Now that you are ready with your email template, open it with Photoshop, select Slice Tool and start slicing every element of the template.

Slice Tool

In this process, you have to slice every single space, text, line and image.

Sliced

When you slice a text, make sure you select the exact size, do not leave any extra space in the text area. For empty spaces, slice them in one big slice, but separate them into squares.

Sliced details

The next tool you need to use with Photoshop is the Slice Select Tool. Use this tool to fix every single sliced element in your template. Make sure every line is connected, don’t leave any empty area without slicing them.

Slice Select Tool

With the Slice Select Tool, zoom your template and check every single slice you made. Make sure every line is connected and fixed.

whitespace

The result will look like this.

Result

2. Save as HTML template

When you are ready with your sliced template, go to File and select Save for Web & Devices.

Save for web

A window with saving options will pop up. Firstly, double-click on your image element and name it so you can easily recognize the image file when it is saved. Click OK after you have named them.

Header Image

Next at the top right corner of the popup window, set the image type as JPEG from the dropdown menu. The quality can be set to 60 or 80. If you set the quality to 100, the image quality will be maximum but it will make your template heavy.

image quality

Now click on the Save button at the bottom of the window.

Save

A new popup window will appear. Here, select the destination where you want the file to be saved at, then change the format to HTML and Images and set the Slices to All Slices.

Save options

Next, under the Settings dropdown menu, select Other.

Other

Another popup window will appear, under the HTML section, make sure the choices under ‘Formatting’ are as below; do the same for the ‘Coding’ section.

HTML

Now from the HTML dropdown menu, select Slices, and select Slice Output to Generate Table and set the columns as the following.

Slice

Now from Slices, go to Saving Files from the dropdown menu, go down to ‘Optimized Files’ section and check Put Images in Folder and set the image folder’s name. The default image folder will be ‘images’. Then click ‘OK’.

location

Clicking OK will bring you back to the previous popup window, now click Save.

Save

After you press the save button, open up the location folder where you saved the file to, and you will see the html and images folder containing sliced images already saved for your email template.

Saved folder

Open the ‘.html’ file in your browser, and you will see that your newsletter has now been converted into an HTML template.

HTML newsletter template

3. fix HTML, Change text image to web fonts

At the end of the following steps, you will get the finalized email template in HTML format.

All elements in the HTML newsletter are saved in images, that include all text. Now you need to convert the text images to web fonts. To do that, open the ‘.html’ file with HTML editor. In this example, I am using Dreamweaver.

Open with Dreamweaver

Click on the header and check on the highlighted HTML.

Highlight

The HTML will be something like this;

<img src="http://media02.hongkiat.com/create-send-email-newsletter/NewsLetter_Slice-12.jpg" width="408" height="47" alt="">

Now delete every line that’s highlighted, alternatively, click on the header image and press delete. Once deleted, you will see the area filled with the default background color.

Delete font

Now go back to Photoshop, check the header’s font details. You need to get the font type, color and size.

Fonts

Once you get the details of the font, enter the header text in the header area of the template, and include the font details too. In my example, my header text HTML is as follow:

<td colspan="5" style="background-color:#ffffff; font-family:Georgia, 'Times New Roman', Times, serif; font-size:41px; letter-spacing:8px;">ABC Newsletter</td>

The HTML line above has ‘style’ included. That is where you define your background color, font family, font size as well as letter spacing. Try to fill the text space with suitable letter spacing and font size; make sure it does not break your template.

HTML font

Now you need to repeat the same process for every text in your template. Make sure all text images are transformed into web fonts and avoid unnecessary images in HTML.

Next one is optional, but you can set the newsletter to center, add the alignment in the <table> section.

<table id="Table_01" align="center">

To review your final template, open the ‘.html’ file on your browser;

Review in Browser

You can also download the final template here for your reference.

4. Send HTML as newsletter via Gmail

Now here’s a little trick to get you to send your HTML email directly from Gmail. To get this done, you actually need to upload the newsletter folder to your web server, but in case you don’t have one, lets get it done with Dropbox instead.

Using Dropbox Public Folder

If you registered your Dropbox account before 1st August 2012, you may follow the steps below.

  1. Register a free account with Dropbox, and then install the app to your PC or Mac so you can skip the uploading process over the Web. Let the app do the uploading for you.

    Dropbox

  2. The email template you created was saved in a folder. Copy the folder, and paste it in the Public folder found in your Dropbox (Dropbox > Public).

    Public Folder

  3. Now, locate your ‘.html’ file in the folder, right-click and select Copy Public Link.

    Public Link

  4. Once you select ‘Copy Public Link’, the link will be saved in your computer memory. Paste this link to your web browser, then open it as a web page.

    Paste Link

  5. You need to copy the content of this newsletter, so use your keyboard and press Ctrl + A to select all and then Crtl + C to copy the whole content (for Mac, use Cmd + A to select all and Cmd + C to copy)

  6. Open your Gmail, click Compose to get a blank email, click your mouse in the text field and then press Ctrl + V to paste your newsletter in the email content field. Mac users can press Cmd + V

    Compose email

  7. Your newsletter now appears as your email content. Enter the subject and email address and send out your first email newsletter!

Using Site44 App

Since Dropbox has no longer provide Public folder feature for Dropbox user who registered after 1st August 2012, you may try Site44, an app that turns Dropbox folders into websites.

  1. Visit Site44 and sign in with Dropbox to get started.

    Site44

  2. Allow Site44 connects with your Dropbox account. In most cases, you’re required to verify your email address.

    Site44 Authorisation

  3. Click on "Click a new website" to start.

    Site44 Create New Website

  4. In "Use a site44.com domain" section, type in your preferable folder name for this website in your Dropbox and click "Create". In this case, I am using "mynewsletter" as my folder name. After that, accept the terms of use to proceed.

    Site44 Domain Name

  5. Now, Site44 has created new folders for the website in your Dropbox.

  6. Copy newsletter.html and images folder which you created previously to mynewsletter.site44.com Dropbox folder.

  7. Open web browser and go to http://mynewsletter.site44.com/newsletter.html.

  8. You need to copy the content of this newsletter, so use your keyboard and press Ctrl + A to select all and then Crtl + C to copy the whole content (for Mac, use Cmd + A to select all and Cmd + C to copy)

  9. Open your Gmail, click Compose to get a blank email, click your mouse in the text field and then press Ctrl + V to paste your newsletter in the email content field. Mac users can press Cmd + V

    Compose email

  10. Your newsletter now appears as your email content. Enter the subject and email address and send out your first email newsletter!

Conclusion

As long as the newsletter HTML folder is still saved in your Dopbox Public folder, your recipient will be able to view your newsletter correctly, but once you remove the folder, the link will be broken, and the recipient will only be able to view the text. I hope you can follow this tutorial on how a basic HTML newsletter can be created with Photoshop then sent in HTML form via Gmail. If you have other ways, do share with the rest of our readers.

Author:

Mustaza is a traveller, social media lover and a freelance web designer with years of experience working collaboratively over the Internet.

Tags:

Advertisement