学习 如何自制EDM(Email Direct Marketing)

没想到我一个零基础的人，开始接触代码了...



在生活中，经常会收到各种EDM，其中我觉得bigger最高的还数Apple了，简洁利落，大气高雅。那么问题来了，如何自制一份EDM呢，刚开始接到这个任务，想当然的以为很简单，即：

1，找设计同事做张图；

2，把这张图贴到邮件中；

3，拿到名单发送。（笑脸）

so easy，开做吧，然后杯具了。果不其然，自己测试的时候，图，裂，了。

于是请教了同事，搞了一下午学会了，这里做个记录并且希望能够帮助到有需要的旁友。

Step 0：工具

PS，PPT，代码编辑器Editplus，可以上传文件的公司服务器，耐心

Step 1：设计

先自己梳理好文案，用ppt设置好框架逻辑图，提交给设计同事，请设计做EDM的图，并确定终稿子。

真心觉得ppt很强大，有时候简单的图ps都不用打开了，以后有机会单独写写学习ppt的心得。确定最终的稿子是因为edm本质是一整张图，如果做好了再修改文案什么的太麻烦了。

Step 2：PS切图

这一步必须使用PS，运用切片工具，将图片切片，建议多切几刀，这样在别人邮件里面显示的时间会缩短，也会减少图裂掉的情况，对于正常的EDM尺寸，我会切10刀左右，注意重要的信息不要切断。



（切片工具位置如图）

Step 3：保存

切好图之后，点击［文件－－导出－－存储为web所用格式］，保存成（html＋图片）形式。这时候你会得到一个html和一个有着你切的10张照片的文件夹。

Step 4：上传所切的图

点击公司所在的文件上传服务器连接，比如我司：http://upload.ucloud.cn（公司网络下可用），将切好导出的图片一张一张导入，每张图片上传之后，会生成一串代码，将这串代码复制，这一步很关键。

比较效率的方式，每上传一张切图，就把这张图对应的一串代码复制，现放到word里面，标记好第几张图的。

Step 5：替换图片代码

用代码编辑器editplus打开html，即右击html，选择［打开方式－－editplus］，如图：



注意红色标出部分，此时，这串代码是系统默认的，我们需要用每一张图的生成的代码（刚让你们放到word里面的）替换掉；

这个步骤你可以自测，在浏览器中打开html的文件预览图片是否替换成功，位置是否正确；

Step 6：图片加跳转链接

首先找到要在切的哪一张图里面加链接，（一般会在点击申请按钮所在的那张图加），然后在这张图所在的行的代码前面加  ，黄色部分替换为你需要的链接；在图片的后面在加



（如图所示）

Step 7：链接加标记以便追踪

我司注册页链接：https://account.ucloud.cn/cas/register/&ytag=bot

加上黄色部分，即给来源加上了tag，后台可以追踪来源，bot为你想标记的内容。（这个步骤视各个公司情况而定）

欧凯，终于写完了，累死我鸟。这个分享，主要中间的步骤大家可以参考，其他的部分跟我司挂钩的比较多，大家可以根据自己的具体情况调整。

欢迎探讨，晚安旁友们～

请使用手机"扫一扫"x

    关注 提拉米苏的黑匣子