如何做邮件营销海报

如何做邮件营销海报,第1张

营销海报都是一个html格式的邮件,也就是网页格式的

Edm邮件设计规范

1. 设计文件提供要求:

(1)邮件设计稿的 Photoshop, Flash, Illustrator, CorelDraw,Freehand等未合层文件;

(2)使用的字体文件――.ttf文件;

(3)其他需要使用到的图片文件――.gif文件,.jpg文件或.tif文件。

2. 设计要求:

(1)邮件的宽度:

邮件的标准宽度为575像素,最宽不宜超过778像素,否则必须经过修改。

(2)邮件的高度:

邮件的高度没有具体要求,应以邮件内容多少而定,建议页面高度不宜过长而影响浏览,最长不要超过1200像素,即2.5屏,否则必须经过修改。

(3)邮件的大小:

Ø email正文的html文件大小(不包含图片或者flash)控制在10k以内;

Ø 内含图片的邮件包括图片在内文件大小应控制在30k-120k以内;

Ø 内含flash或流媒体格式文件的邮件,包括flash或流媒体格式文件在内应控制在50k-250k以内,否则必须经过修改(特殊情况除外);

(4)禁止使用脚本

Ø 邮件中不支持任何脚本语言:多数邮件客户端软件和webmail中默认不支持任何脚本语言;

Ø 邮件中不能使用分帧页面和I-frame。

(5)包含Flash或流媒体格式文件的邮件设计要求:

需要同时设计一张与该flash或流媒体格式文件内容风格相同、同样尺寸的静态图片(.jpg或者.gif),并且设置为flash或流媒体格式文件所在的表格的背景图片,并提示用户:该部分设计为flash(或流媒体)格式,请点击邮件上端链接,观看在线版本。

(6)禁止使用外联样式表。

(7)客户应取得邮件当中所需使用的声音、图像以及其他内容的版权。

3. 设计建议:

(1)对于页面中的图片,建议将超过15k的图片分割成小图片,以保证下载图片过程的顺畅;

(2)图片个数不宜过多,建议在20个以内,Gif动画文件个数控制在3个以内;

(3)建议尽量少使用背景图片,复杂的背景图片不利于文字内容的浏览;

(4)能够使用系统文字应尽量避免使用图片文字以减少文件大小;

(5)网页上使用的中文系统文字的最小字号应保证在12像素,并且使用系统默认的宋体或黑体,避免使用其它的中文字体;

(6)使用音效时,音量应从小逐渐放大到正常音量;同时应设置简单、方便的打开/关闭按钮;

(7)邮件的设计重点在上半部,以吸引阅读者的注意力;

(8)带有故事情节的flash设计应以下载屏幕开始,以吸引阅读者等待下载;

(9)背景图片的td应加高宽限制,以避免部分客户端的图片显示出现异常;

(10)邮件当中的所有点击应使用d出新窗口。

如下就是一个我收到的标砖的邮件海报的样式,你可以选中一下的代码拷贝到一个txt的文档中,然后将后缀.txt改成.html,就是一个网页形式的邮件营销海报了,你可以看看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style>

<!--

*{ margin:0padding:0}

A:link {

COLOR: #000000TEXT-DECORATION: none

}

A:visited {

COLOR: #000000TEXT-DECORATION: none

}

A:hover {

COLOR: #000000TEXT-DECORATION: underline

}

.content{ width:720pxheight:888pxborder:6px solid #9BD44Fborder-top:none}

.top ul{ list-style:nonemargin-left:16pxmargin-top:10px}

.top ul li{ display:inlinepadding-right:8px}

.title1{ margin-left:16px}

.products{ width:687pxheight:517pxborder:1px solid #9BD44Fborder-top:nonemargin-left:16px }

.every {}

.every UL {

TEXT-ALIGN: centermargin-left:15pxlist-style:none}

.every UL LI {

BORDER-RIGHT: #d1d1d1 1px solidPADDING-RIGHT: 6pxBORDER-TOP: #d1d1d1 1px solidPADDING-LEFT:2pxFLOAT: leftPADDING-BOTTOM: 8pxMARGIN: 8px 6px 0px 0pxBORDER-LEFT: #d1d1d1 1px solidWIDTH: 150pxPADDING-TOP: 8pxBORDER-BOTTOM: #d1d1d1 1px solidTEXT-ALIGN: center

}

.size14 {

FONT-SIZE: 12px

}

.zc_grey {

FLOAT: leftMARGIN-LEFT: 10pxCOLOR: #666666TEXT-DECORATION: line-throughfont-size:12px

}

.zc_red{ color:#FF0000font-size:12px}

.bolder {

FONT-WEIGHT: bolder

}

.color {

COLOR: #009900

}

.margin_top {

MARGIN-TOP: 4px

}

.index_product3 {

MARGIN-TOP: -32pxDISPLAY: inlineZ-INDEX: 12BACKGROUND: url(http://www.51niuwa.com/images/index6_4.gif) no-repeatMARGIN-LEFT: 40pxWIDTH: 40pxCOLOR: #fffPOSITION: absoluteHEIGHT: 40pxTEXT-ALIGN: center

}

.index_product4 {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxPADDING-BOTTOM: 0pxPADDING-TOP: 9pxTEXT-ALIGN: centerfont-size:12px

}

-->

</style>

</head>

<body>

<div class="main">

<div class="logo"><a href="http://www.51niuwa.com"><img src="http://www.51niuwa.com/images/logo.gif" border="0"/></a></div>

<div class="content">

<div class="title"><img src="http://www.51niuwa.com/images/haibao_four.gif"/></div>

<div class="top">

<ul>

<li><a href="http://www.51niuwa.com"><img src="http://www.51niuwa.com/images/haibao_first.gif" border="0"/></a></li>

<li><a href="http://www.51niuwa.com"><img src="http://www.51niuwa.com/images/haibai_second.gif" border="0"/></a></li>

<Li><a href="http://www.51niuwa.com"><img src="http://www.51niuwa.com/images/haibao_third.gif" border="0"/></a></Li>

</ul>

</div>

<div class="down">

<div class="title1"><img src="http://www.51niuwa.com/images/haibao_fourth.gif"/></div>

<div class="products every">

<ul>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/548/original/7.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

5.6%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>chiffon and lace trimming </A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>时尚起义</SPAN></A></P>

<P class="zc_grey bolder">¥220.00</P>

<P class="zc_red bolder">¥220.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/517/original/4.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

8%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>Avene雅漾舒护活泉水 </A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>爱可美妆</SPAN></A></P>

<P class="zc_grey bolder">¥60.00</P>

<P class="zc_red bolder">¥45.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/545/original/4.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

0%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>我的成功可以复制 </A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>当当网上商城</SPAN></A></P>

<P class="zc_grey bolder">¥38.00</P>

<P class="zc_red bolder">¥22.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/543/original/2.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

0%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>番茄:新世界的魔幻美食

</A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>九九网上书城</SPAN></A></P>

<P class="zc_grey bolder">¥26.00</P>

<P class="zc_red bolder">¥22.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/556/original/15.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

35元</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>天语X90粉色手机 </A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>咪啦网</SPAN></A></P>

<P class="zc_grey bolder">¥1480.00</P>

<P class="zc_red bolder">¥1166.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/557/original/16.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

2.5%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>祺月--学步车XG6928B

</A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>乐友</SPAN></A></P>

<P class="zc_grey bolder">¥198.00</P>

<P class="zc_red bolder">¥118.40</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/432/original/32.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

8%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>福临门新植物甾醇玉米油

</A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>我买网</SPAN></A></P>

<P class="zc_grey bolder">¥85.00</P>

<P class="zc_red bolder">¥78.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="http://www.51niuwa.com/products.html"

target=_blank><IMG height=150 src="http://www.51niuwa.com/assets/products/568/original/27.gif" width=150

border=0></A></DIV>

<DIV class=index_product3>

<DIV class=index_product4>返利<BR>

10%</DIV>

</DIV>

<P class="size14 margin_top"><A href="http://www.51niuwa.com/products.html"

target=_blank>富培美 木质地板保养精油

</A></P>

<P class="size14 margin_top">来自:<A

href="http://www.51niuwa.com/products.html" target=_blank><SPAN

class=color>1号店网上超市</SPAN></A></P>

<P class="zc_grey bolder">¥198.00</P>

<P class="zc_red bolder">¥115.00</P>

<P><A href="http://www.51niuwa.com/products.html" target=_blank><IMG

src="http://www.51niuwa.com/images/every_botton.gif" border=0></A></P>

</LI>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

1.选用黑色作为海报背景通常,我们习惯在白色画布上设计海报。然而,一些视觉上看起来非常有趣的海报会回避白色背景转而使用黑色。如果使用黑色,你可以考虑选用金属印墨甚或是明亮的白色来印制信息及图片,从而制作一张吸引眼球的海报。 2.简洁朴实即美年轻的设计师常常热衷于填满画布的每个角落。但是你不必这样做,简约的艺术作品往往是最美的。上面展示的海报非常精美,却没有使用很繁琐的图形元素。 Anthony Lane只是简单地把相片和重点内容结合起来,就设计出了这些海报。使用这种方法来提炼和精简你的海报,制作时只选用最关键的元素和内容,就可以创作出优雅而精致的平面设计作品。 3.加入个性字体专业设计不局限于规则的字体和整洁的版式。试着使用充满个性和叛逆感的字体,最终你将会得到一张如同上图(FAUPE制作)的海报那样个性、大胆的作品。如果你时间宽裕,拿出记号笔或者其他任何你喜欢的书写工具,写出你想写的内容,为你的宣传海报打造手写的颓废风格。相信我,你的手写体比想象的要有趣得多。 4.使用网格网格是最有用的工具之一,你可以以此来创作设计出专业而整洁的作品。打造一款属于你自己海报的网格来掌控设计,就能制作出如上案例一样设计专业的作品。一旦你设计出一款网格作为稳固的基础,就可以使用不同的字号和一些简单的设计元素。你可以像上图案例那样使用一种单色或者互补的色度营造出色彩对比。 5.试试黑白相片吧你还在为海报上要用的照片纠结吗?调成黑白的吧。这种有效的方法能制作出优雅海报(如上图由Sgustok工作室设计的一款作品)。当你在处理海报上的照片时,要仔细考虑如何剪裁。你决定裁出的部分向观众传达的信息和留下部分的一样多。 6.使用最少的颜色复杂的海报色调需要你花费很多的时间决定如何使用和搭配这些色彩,如何把它们运用在作品上。对于那些设计新手来说尤为困扰。如果你刚刚才熟悉色彩和设计,尽量减少你色盘里的颜色,别给自己太多负担。试着用黑色、白色和一个亮色搭配。把亮色作为主色调,白色作为辅助色,黑色作为强调色,就像上图示例那样。 7.删繁就简效仿上图Lucas Dörre的案例,尽你所能让一切越简单越好。要确保你的相片呈现出最高质量,排版也精准巧妙。不要执着于添加花哨的修饰,只从基本元素着手就好。不要一心想着在你的海报上创作添加一些设计元素。尽量保留基本的内容是制作出精美作品的有效方法。 8.拼贴层叠放置设计元素和有创意的遮色板,或者拼贴设计元素来增加海报视觉上的趣味性。不知道我在说什么?参考下上面的海报案例。在这张海报中并没有使用立体的字体,你可以看到一个显示出图像的B型遮色片,这和海报上的文案是相互关联的。 9.选择经典方法不愿意挑战冒险?那就试试经典的方法。在白底上排列规则的黑色字体并用有趣的图片或者插图作为背景。如果你想增加一些趣味性,调一调不透明度吧,就像上图Little Upside Down Cake所示的那样。 10.尝试复古感你设计的每一个件作品,并非全部都要符合当下的美学潮流。复古之作能和时髦作品一样吸睛。不相信吗?看看上面这张由Jessica Svendsen所作的惊艳海报。 11.效仿电影海报在我最爱的海报中有一部分是为宣传优秀电影而作。参考下你最爱电影的海报是什么样的,或者从无数的电影海报中获取灵感。它们提供的屡试不爽的方案是不会让你失望的。不明白这是什么意思?看看上面的海报案例,它看起来难道不像你在当地电影院里看到的吗? 12.清晰和模糊的混搭我很喜欢上图这种把清晰规则的字体和模糊的背景相结合的海报,这个方法能很美地营造出意料之外的视觉反差。 同样,寻找不同的方法,比如运用滤镜和一些处理方法创造出美观而惊艳的设计方案。 13.使用大胆的图片突出内容上面展示的海报是Ross Gunter一个个人项目的一部分。为了该项目,他创作出了一系列海报,这些海报都秉承着“两个核心元素,一致布局和大量图形”的原则。同样地,运用大胆的图形来为简单的布局增添活力。你可以使用超出页面的大号字体或者大图片,打破了你已建立的网格。 14.玩转不透明度在相片上层叠放置色域并调节其不透明度,就会呈现出像上面展示的简明现代风格。要注意在不同元素上使用的不同颜色。为顶层的元素选择明亮点的颜色,下层的则可以选择较暗的颜色。这会让你不同的设计元素不致混淆。就以上案例而言,如果我们交换字体和色块的颜色,就不能这么清晰地看清楚标题了。 15.展示你的产品我很喜欢上图诺尔公司海报里排列的椅子方阵。如果你在为一个或者一系列产品设计宣传海报,可以考虑把你的产品放在中心位置。你并不一定要在海报上列出产品的照片。可以像诺尔公司那样,给你的产品画一些插图。如果你有一个系列的产品, 可以像所示案例一样运用网格来排列它们。这样不仅能帮你安排好内容还能节省设计时间,最终你的平面设计作品会平衡而协调。如果你只是为单件产品制作海报,可以把插图放大,让其充满版页。 16.超出页面你的海报中所有的元素并不是要严格地局限于印刷的页面之内。随意地让其溢出或者充满页面。这样,你会创作出时髦又漂亮的视觉效果,如Quim Marin上图这件颜色明亮的作品。 17.出人意料的排版如同你所看到的案例那样,采用一些出其不意的排版来给你的观众带来惊喜。打破设定的网格或者完全随意摆放标题和引用语。最终你可能会得到一张和安曼实验室海报一样赏心悦目的作品。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/7635487.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存