EMD模板设计与制作PPT课件.ppt

EDM模版的设计与制作 2020 3 24 1 Copyright 2010S AllRightsReserved Op 目录 一 EDM模板的设计1 风格定位2 版面编排a 主次分明 中心突出b 图文并茂 相得益彰c 大胆留白的艺术d 线条和形状3 色彩的搭配a 暖色调b 冷色调c 对比色调d 网页文字及底色 二 EDM模板的制作1 关于模板的尺寸2 背景图片3 解决腾迅邮箱出现 白线 问题4 文件命名的规则5 图片做链接的误区6 变量7 采用TABLE CSS进行布局 为什么不用DIV CSS的理由 8 不要合并或拆分单元格9 避免用map标签做链接10 业面加载的常识 2020 3 24 2 Copyright 2010S AllRightsReserved 1 一 风格的定位 网页的美化 首先要考虑风格的定位 任何网页都要根据主题的内容决定其风格与形式 因为只有形式与内容统一 才能达到理想的宣传效果 例如政府部门的网页风格一般应比较庄重 娱乐行业则可以活拨生动 而商务主页则可以贴近民俗 使大众喜闻乐见 2020 3 24 3 Copyright 2010S AllRightsReserved 2 2020 3 24 4 Copyright 2010S AllRightsReserved 二 版面的编排 版面编排 实际上就是中国古代画论中的 经营位置 网页做为一种版面 既有文字 又有图片 文字有大有小 还有标题和正文之分 图片也有大小 而且有横有竖之别 图片和文字都需要同时展示给观众 总不能简单地罗列在一个页面上 这样往往会搞的杂乱无章 因此必须根据内容进行合理的编排和布局 使它们组成一个有机的整体 展现给广大的观众 1 主次分明 中心突出 在一个页面上 必须考虑视觉的中心 这个中心一般在屏幕的中央 或者在中间偏上和部位 因此一些重要的文章和图片一般可以安排在这个部位 在视觉中心以外的地方就可以按排那些稍微次要的内容 这样在页面上就突出了重点 做到了主次有别 3 2020 3 24 5 Copyright 2010S AllRightsReserved 4 2 图文并贸 相得益彰文字和图片具有一种相互补充的的视觉关系 页面上的文字太多 就会显的沉闷 缺乏生气 页面上图片太多缺少文字 必然就会减少页面的信息容量 因此 最理想的效果就是文字和图片的密切配合 互为衬托 既能活跃页面 又使网页有丰富的内容 2020 3 24 6 Copyright 2010S AllRightsReserved 5 3 留白的艺术国画中有一句话描述这种艺术形式的空间布局比较经典 就是 计白当黑 表明了白也就是空的地方和着的墨一样都是国画整体的组成部份 如何利用空间的留白是非常重要的 也是提升艺术的一种途径 有些尽管是画的很不错 但是看起来不舒服 就是没有重视留白 造成了画面整体上的失败 对于网页设计来说 有何尝不是如此呢 也许现在我们没有把它提升到一个艺术审美的角度来看待 所以没有人去深究过网页的艺术性 我想这是我们网页设计者孜孜以求的方向 因为未来的网络技术高度发达 人们对于更高层次的追求也就必然会牵涉到对艺术 对美的追求 既然如此 我们就应该把眼光放远一点 把网页设计提到这个层次考虑 尽量的克服目前技术带来的限制 既然如此 按照艺术审美的观点 网页上的留白也是一个组成部份 同其它的主要的内容如文本 图片 动画一样 是每个设计者在制作网页时要一起考虑的 2020 3 24 7 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 6 2020 3 24 8 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 7 三 线条和形状文字 标题 图片等的组合 会在页面上形成各种各样的线条和形状 这些线条与形状的组合 构成了网页的总体艺术效果 必须注意艺术地搭配好这些线条和形状 才能增强业面的艺术魅力 1 直线的应用 直线条的艺术效果是流畅 挺拔 规矩整齐 所谓有轮有廓 一般应用于比较庄重 严肃的主页题材 2020 3 24 9 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 8 2 曲线的应用 曲线的效果是流动 活跃 具有动感 一般应用于青春 活泼的主页题材 2020 3 24 10 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 9 四 色彩处理色彩是人的视觉最敏感的东西 网页的色彩处理得好 可以锦上添花 达到事半功倍的效果 色彩总的应用原则应该是 总体协调 局部对比 也就是 网页的整体色彩效果应该是和谐的 只有局部的 小范围的地方可以有一些强烈的色彩的用不同的主色调 因为色彩具有象征性 例如 嫩绿色 翠绿色 金黄色 灰褐色就可以分别象征春 夏 秋 冬 其次还有些职业的标志色 例如 军警的橄榄绿 医疗卫生的白色等 色彩还具有明显的心理感觉 例如冷 暖的感觉 进 退的效果等 另外 色彩还有民族性 各个民族由于环境 文化传统等因素影响 对于色彩的喜好也存在着较大的差异 充分运用色彩的这些特性 可以使我们的主页具有深刻的艺术内涵 从而提升网页的文化品位 下面介绍几氛围 2020 3 24 11 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 10 1 暖色调即红 橙 黄等色彩搭配 呈现温馨 和煦 热情的氛围 2 冷色调即青色 绿 紫等色彩的搭配 这种色调的运用 体现宁静 清凉 高雅的氛围 2020 3 24 12 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 11 3 对比色调即把色性完全相反的色彩搭配在同一个空间里 例如红与绿等产生强烈的视觉效果 当然 对比色调如果用得不好 会适得其反 产生俗气 刺眼的不良效果 这就要把握 大调和 小对比 这一重要原则 即总体的色调应该是统一和谐的 局部的地方可以有一些小的强烈对比 2020 3 24 13 一体化的电邮营销利器 Copyright 2010S AllRightsReserved 12 4 网页文字 底色底色深 文字的颜色就要浅 以深色的背景衬托浅色的内容 文字图片 反之 底色淡的 文字的颜色就要深些 以浅色的背景衬托深色的内容 文字图片 这种深浅的变化在色彩学中称为 明度变化 当然色彩的明度也不能变化太大 否则屏幕上的亮度反差太强 同样也会使读者的眼睛受不了 把握好度 2020 3 24 14 Copyright 2010S AllRightsReserved 本人认为搞设计重要的灵感和想法 技术是次要的 有了想法 为了实现他就用到一些技术实现他 不是你不知道怎么实现 而这正是一个学习技术的最好方法 如果你只学技术 而不知道应用 那就有些悲哀吧 从需求中找到满足需求的办法 这是非常重要的 13 2020 3 24 15 Copyright 2010S AllRightsReserved 14 模板最佳尺寸 显示宽度550px 800px 模板高度尽量控制在二屏以内 关于模板的尺寸 2020 3 24 16 Copyright 2010S AllRightsReserved 15 2020 3 24 17 Copyright 2010S AllRightsReserved 16 背景图片 1 不要用图片做背景平铺 因为在outlook2007中 将无法显示 其他邮件客户端可正确显示背景图片 见下图所示 2 Gmail无法显示书写在css里面的背景图如 abc background image url images title bg1 jpg background repeat no repeat 但可以在td标签里面用 如 书写的背景图 2020 3 24 18 Copyright 2010S AllRightsReserved 17 Outlook2007显示情况 2020 3 24 19 Copyright 2010S AllRightsReserved 18 其它客户端正常显示 2020 3 24 20 Copyright 2010S AllRightsReserved 19 防止qq邮箱出现 白线 问题的的方法 在代码里加上CSS代码如下img style display block td line height 0px 注意 line height 0px 是针对单元格图片起作用 有文字部分 就会出现文字显示不全的现象 如下图片所示 2020 3 24 21 Copyright 2010S AllRightsReserved 20 文字没显示全 调整后的效果 解决方法是把字体样式定义一下行高line height 25px 2020 3 24 22 Copyright 2010S AllRightsReserved 21 文件命名的规则 因好多客户喜欢用中文来命名 比如 项目图片 jpg项目名称 html 等命名 这样都不会被抓取的 正确命名的方法是用字母 数字 数字 字母命名 并且不带特殊符号如 等 2020 3 24 23 Copyright 2010S AllRightsReserved 22 采用TABLE CSS进行布局 为什么不用DIV CSS的理由 1 推荐使用软件dreamweaver 用table css布局用DIV CCS制作过程中 要是用到FLOAT属性 就很容易错位 见左图 2020 3 24 24 Copyright 2010S AllRightsReserved 23 变量 会员名 卡号帐号一般都用到变量 设计的时候 注意多留点空间及背景为纯色 如图 2020 3 24 25 Copyright 2010S AllRightsReserved 24 不要合并或拆分单元格 在表格里面 不要使用tcolspan rowspan属性 即不要合并或拆分单元格 如这样置入的图片 很可能会错位 2020 3 24 26 Copyright 2010S AllRightsReserved 24 错误写法 正确写法 2020 3 24 27 Copyright 2010S AllRightsReserved 25 业面加