![]() ![]() Now delete every line that’s highlighted, alternatively, click on the header image and press delete. In this example, I am using Dreamweaver.Ĭlick on the header and check on the highlighted HTML. To do that, open the ‘.html’ file with HTML editor. Now you need to convert the text images to web fonts. Fix HTML, change text image to web fontsĪt the end of the following steps, you will get the finalized email template in HTML format.Īll elements in the HTML newsletter are saved in images, that include all text. Open the ‘.html’ file in your browser, and you will see that your newsletter has now been converted into an HTML template. Then click ‘OK’.Ĭlicking OK will bring you back to the previous popup window, now click Save.Īfter 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. The default image folder will be ‘images’. 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. Now from the HTML dropdown menu, select Slices, and select Slice Output to Generate Table and set the columns as the following. Next, under the Settings dropdown menu, select Other.Īnother popup window will appear, under the HTML section, make sure the choices under ‘Formatting’ are as below do the same for the ‘Coding’ section. 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. ![]() Now click on the Save button at the bottom of the window.Ī new popup window will appear. If you set the quality to 100, the image quality will be maximum but it will make your template heavy. Next at the top right corner of the popup window, set the image type as JPEG from the dropdown menu. Firstly, double-click on your image element and name it so you can easily recognize the image file when it is saved. When you are ready with your sliced template, go to File and select Save for Web & Devices.Ī window with saving options will pop up. Make sure every line is connected and fixed. With the Slice Select Tool, zoom your template and check every single slice you made. Make sure every line is connected, don’t leave any empty area without slicing them. Use this tool to fix every single sliced element in your template. The next tool you need to use with Photoshop is the Slice Select Tool. For empty spaces, slice them in one big slice, but separate them into squares. When you slice a text, make sure you select the exact size, do not leave any extra space in the text area. In this process, you have to slice every single space, text, line and image. Now that you are ready with your email template, open it with Photoshop, select Slice Tool and start slicing every element of the template. Download it here to follow this tutorial. In this guide, we will be using an edited version of free email template by CampaignMonitor. 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. Otherwise, use your special fonts, but save them as images, rather than as text. But if you are creating a newsletter, it is advisable to use web fonts such as Times New Roman, Arial and Georgia. You can definitely use any type of font available on your Photoshop. 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. ![]() 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. There are however no limitations on heights, so that parameter is up to you. 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. Otherwise, you can download a template from many free email template providers. If you have an idea on what you want your newsletter template to look like, you can start working with Photoshop. Recommended Reading: 9 Tricks To Design The Perfect HTML Newsletter Start with email template in Photoshop It’ll guide you on how to save your newsletter templates as an HTML template and start sending them, with the help of CampaignMonitor. So, if you are looking for such newsletter tools and tips that help you send a your burgeoning business’s newsletter to a small group of people, then this tutorial is just for you. Most businesses, especially the developing ones, do not have much marketing budget to use on paid email newsletter services and are always looking for free newsletter services. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |