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.
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 couple of 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.
Recommended Reading: 9 Tricks To Design The Perfect HTML Newsletter
Try to limit having to save too many images in your template, as this will only make it larger and hence load slower.
Now when you are ready with your email template, open with Photoshop, select Slice Tool and start slicing every element of the template.
In this process, you have to slice every single space, text, line and image.
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 in squares.
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.
With the Slice Select Tool, zoom your template and check every single slice you made, make sure every line are connected and fixed.
The result will look like this.
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.
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.
Now click on the Save button at the bottom of the window.
A new popup window will appear. Here, select the destination where you want the file to be saved, then change the format to HTML and Images and set the Slices to All Slices.
Next, under the Settings dropdown menu, select Other.
Another popup window will appear, under the HTML section, make sure the choices under ‘Formatting’ are as below; the same for the ‘Coding’ section.
Now from the HTML dropdown menu, select Slices, and select Slice Output to Generate Table and set the columns as the following.
Now from Slices, go to Saving Files from the dropdown menu, go down to ‘Optimized Files’ section and checkPut Images in Folder and set the image folder’s name. The default image folder will be ‘images’. Then click‘OK’.
Clicking OK will bring you back to the previous popup window, now click 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.
Open the ‘.html’ file in your browser, and you will see that your newsletter has now been converted into an HTML template.
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.
Click on the header and check on the highlighted HTML.
The HTML will be something like this;
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.
Now go back to Photoshop, check the header’s font details. You need to get the font type, color and size.
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:
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.
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 the HTML.
Next one is optional, but you can set the newsletter to center, add the alignment in <table> section.
To review your final template, open the ‘.html’ file on your browser;
rtechinsane,icodesource,SEO,SEO Tips,SEO Backlinks,SEO content,SEO tricks,SEO Engine,codes,gadgets,iphones,ipad,4G phones,geeks,reviews,database,DBMS,
warehouse,datamining,datawarehouse
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 couple of 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.
Recommended Reading: 9 Tricks To Design The Perfect HTML Newsletter
Start with Email Template in Photoshop
If you have an Idea how 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 provider. 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.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.Fonts selection
You can definitely use any type of font available on your Photoshop. But if you are to create a newsletter, it is advisable to use web fonts such as Times New Roman, Arial, Georgia and such. Otherwise, use your special fonts, but save them as images, rather than as stext.Try to limit having to save too many images in your template, as this will only make it larger and hence load slower.
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 with this tutorial.Now when you are ready with your email template, open with Photoshop, select Slice Tool and start slicing every element of the template.
In this process, you have to slice every single space, text, line and image.
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 in squares.
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.
With the Slice Select Tool, zoom your template and check every single slice you made, make sure every line are connected and fixed.
The result will look like this.
2. Save as HTML template
When you are ready with your sliced template, go to File and select Save for Web & Devices.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.
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.
Now click on the Save button at the bottom of the window.
A new popup window will appear. Here, select the destination where you want the file to be saved, then change the format to HTML and Images and set the Slices to All Slices.
Next, under the Settings dropdown menu, select Other.
Another popup window will appear, under the HTML section, make sure the choices under ‘Formatting’ are as below; the same for the ‘Coding’ section.
Now from the HTML dropdown menu, select Slices, and select Slice Output to Generate Table and set the columns as the following.
Now from Slices, go to Saving Files from the dropdown menu, go down to ‘Optimized Files’ section and checkPut Images in Folder and set the image folder’s name. The default image folder will be ‘images’. Then click‘OK’.
Clicking OK will bring you back to the previous popup window, now click 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.
Open the ‘.html’ file in your browser, and you will see that your newsletter has now been converted into an HTML 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. You can alsodownload them here for your reference.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.
Click on the header and check on the highlighted HTML.
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.
Now go back to Photoshop, check the header’s font details. You need to get the font type, color and size.
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.
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 the HTML.
Next one is optional, but you can set the newsletter to center, add the alignment in <table> section.
<table id="Table_01" align="center">To review your final template, open the ‘.html’ file on your browser;
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.- 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.
- The email template you created was saved in a folde. Copy the folder, and paste it in the Public folder found in your Dropbox (Dropbox > Public).
- Now, locate your ‘.html’ file in the folder, right-click and select Copy Public Link.
- 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.
- 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)
- Open your Gmail, click Compose to get a blank email, click your mouse in the text field and then pressCtrl + V to paste your newsletter in the email content field. Mac users can press Cmd + V
- 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.rtechinsane,icodesource,SEO,SEO Tips,SEO Backlinks,SEO content,SEO tricks,SEO Engine,codes,gadgets,iphones,ipad,4G phones,geeks,reviews,database,DBMS,
warehouse,datamining,datawarehouse
0 comments:
Post a Comment