描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302517924
从H5设计的概念、类型、营销等基础开始，带你入行！
从工具入手，精通H5广告
开发工具、设计工具、上传工具、分享工具等应有尽有！
从实战专题，精讲H5案例：
营销、推广、招聘、节日、活动、微商广告等丰富全面！
一条是横向案例线，通过20多个经典案例，包括产品推广、活动推广、互粉增粉、人才招募、企业宣传、节日活动、会议邀请、喜庆请柬等，从零开始学习制作H5广告效果。
另一条是纵向技巧线，讲解了配色常识、文字排版、版式布局等核心技能，帮助读者彻底读懂、玩透H5广告设计。
《Photoshop H5广告设计》适合H5微信页面广告设计者、新媒体广告设计师、移动互联网广告设计人员等阅读。
第1章 H5广告设计入门 1
1.1 什么是H5 2
1.1.1 H5是什么 2
1.1.2 无处不在的H5 3
1.1.3 H5的主要功能 5
1.1.4 使用H5有哪些优势 5
1.1.5 探索H5广告的潮流和方向 8
1.2 H5页面的类型 9
1.2.1 活动运营型 10
1.2.2 品牌宣传型 10
1.2.3 产品介绍型 11
1.2.4 总结报告型 11
1.3 形式为功能服务 12
1.3.1 简单图文的H5页面 12
1.3.2 礼物 贺卡 邀请函的H5页面 12
1.3.3 问答 评分 测试的H5页面 12
1.3.4 游戏的 H5页面 13
第2章 H5设计的常用工具 14
2.1 基于互联网平台的H5开发工具 15
2.1.1 APICloud：H5代码编辑工具 15
2.1.2 Egret：提供开源的H5引擎 16
2.1.3 云适配：一键PC网站转移动网站 17
2.1.4 iH5：HTML5可视化编辑工具 18
2.1.5 人人秀：无代码的H5制作工具 20
2.1.6 易企秀：H5场景定制工具 22
2.2 基于应用软件的H5设计工具 24
2.2.1 Photoshop：图形图像设计工具 24
2.2.2 Illustrator：专业的矢量图绘制工具 25
2.2.3 After Effects：制作酷炫的视频特效 25
2.2.4 CINEMA 4D：专业的三维软件工具 26
2.2.5 随身录音室：数码音乐创作软件 26
2.2.6 HYPE：HTML5动画制作利器 27
2.2.7 其他：H5设计常用的辅助工具 27
2.3 选择H5的工具组合形式 29
2.3.1 选择开发类H5工具 29
2.3.2 选择网站类H5工具 30
2.3.3 利用手机制作H5 30
第3章 H5设计的基本操作 32
3.1 如何“生产”H5 33
3.1.1 选择平台和进行登录 33
3.1.2 选择模板 33
3.1.3 布局页面 34
3.1.4 添加和编辑图片 35
3.1.5 添加和编辑文本元素 36
3.1.6 添加动画元素 36
3.1.7 添加音乐元素 37
3.1.8 添加视频元素 37
3.1.9 添加交互元素 38
3.1.10 添加表单和组件 39
3.1.11 预览作品 40
3.1.12 发布作品 40
3.2 在H5页面中添加各种元素 41
3.2.1 添加弹幕元素 41
3.2.2 添加地图元素 42
3.2.3 添加倒计时元素 43
3.2.4 添加动画文字元素 45
3.2.5 添加图表插件元素 46
3.2.6 添加祝福贺卡元素 48
3.2.7 添加雷达扫描元素 49
3.2.8 添加语音留言元素 50
3.2.9 添加照片海报元素 51
3.2.10 制作长页面H5 52
3.3 为设计加分的4个要点 54
3.3.1 细节与统一 54
3.3.2 热点与话题 55
3.3.3 故事与情感 55
3.3.4 技术与互动 56
第4章 H5的视觉交互设计 57
4.1 H5页面的版式设计 58
4.1.1 H5版式设计的原则 58
4.1.2 H5页面的网格设计 59
4.1.3 H5页面版式的突破 62
4.2 H5页面的字体设计 62
4.2.1 设置H5页面的字体 62
4.2.2 设置H5页面的字号 64
4.2.3 设置H5页面的字间距 64
4.2.4 设置H5页面的行间距 65
4.2.5 H5字体设计的基本技巧 65
4.3 H5页面的色彩设计 66
4.3.1 了解色彩原理 66
4.3.2 了解色彩三要素 67
4.3.3 实用H5配色技巧 70
4.4 H5页面的交互设计 74
4.4.1 了解H5交互设计 74
4.4.2 制作H5交互设计 74
4.5 H5页面的视觉流程设计 78
4.5.1 什么是视觉流程设计 78
4.5.2 H5常见的视觉流程设计类型 78
第5章 H5的创意内容设计 81
5.1 创建H5活动营销页面 82
5.1.1 答题活动的H5页面 82
5.1.2 问卷调查活动的H5页面 84
5.1.3 微信红包活动的H5页面 86
5.1.4 VR全景的H5页面 88
5.1.5 一镜到底的H5页面 89
5.1.6 快闪活动的H5页面 90
5.1.7 砍价活动的H5页面 91
5.2 创建H5趣味营销页面 92
5.2.1 互动游戏设计 92
5.2.2 微信场景模拟 93
5.2.3 来电界面模拟 95
5.2.4 通知界面模拟 95
第6章 产品推广：营销展示的H5广告设计 97
6.1 新品上市：掌握新品发布的H5页面设计 98
6.1.1 设计新品发布背景形状效果 98
6.1.2 设计新品发布图文信息效果 101
6.1.3 设计新品发布图层装饰效果 105
6.2 数码宣传：掌握电商产品的H5页面设计 108
6.2.1 设计电商产品杂色背景效果 108
6.2.2 设计电商产品主体布局效果 110
6.2.3 设计电商产品信息点缀效果 115
6.3 品牌汽车：掌握汽车产品的H5页面设计 116
6.3.1 设计汽车产品页面背景效果 117
6.3.2 设计汽车产品界面框架效果 118
6.3.3 设计汽车产品文字修饰效果 120
第7章 活动推广：互动投票的H5广告设计 123
7.1 新春活动：掌握砸金蛋的H5页面设计 124
7.1.1 设计砸金蛋新春背景效果 124
7.1.2 设计砸金蛋元素装饰效果 126
7.1.3 设计砸金蛋文字按钮效果 130
7.2 商场活动：掌握抽奖活动的H5页面设计 133
7.2.1 设计抽奖活动转盘底盘效果 134
7.2.2 设计抽奖活动奖品文字信息 139
7.2.3 设计抽奖活动页面装饰效果 144
7.3 营销活动：掌握投票活动的H5页面设计 147
7.3.1 设计投票活动背景效果 147
7.3.2 设计投票活动文字信息 149
7.3.3 设计投票活动点缀效果 154
第8章 互粉增粉：游戏红包的H5广告设计 157
8.1 游戏程序：掌握小游戏的H5页面设计 158
8.1.1 设计小游戏背景底纹效果 158
8.1.2 设计小游戏界面按钮效果 159
8.1.3 设计小游戏素材插件效果 164
8.2 摄影论坛：掌握旅行相册的H5页面设计 165
8.2.1 设计旅行相册颗粒背景效果 166
8.2.2 设计旅行相册文字信息效果 167
8.2.3 设计旅行相册照片装饰效果 169
8.3 微信增粉：掌握口令红包的H5页面设计 171
8.3.1 设计口令红包页面效果 171
8.3.2 设计口令红包按钮效果 174
8.3.3 设计口令红包背景效果 178
第9章 人才招募：招聘求职的H5广告设计 179
9.1 企业招聘：掌握专场招聘会的H5页面设计 180
9.1.1 设计专场招聘会渐变合成背景效果 180
9.1.2 设计专场招聘会招聘信息边框效果 183
9.1.3 设计专场招聘会的文字宣传内容 184
9.2 实习招募：掌握校园招聘会的H5页面设计 188
9.2.1 设计校园招聘会动感模糊背景效果 189
9.2.2 设计校园招聘会页面主题宣传信息 190
9.2.3 设计校园招聘会元素装饰效果 194
9.3 应聘求职：掌握个人简历的H5页面设计 197
9.3.1 设计个人简历舞台揭幕效果 198
9.3.2 设计个人简历主题文字效果 200
9.3.3 设计个人简历光斑点缀效果 203
第10章 企业宣传：品牌介绍的H5广告设计 206
10.1 会议宣传：掌握商务汇报的H5页面设计 207
10.1.1 设计商务汇报页面背景效果 207
10.1.2 设计商务汇报主题内容效果 209
10.1.3 设计商务汇报背景装饰效果 211
10.2 公司简介：掌握公司介绍的H5页面设计 214
10.2.1 设计公司介绍背景色块效果 214
10.2.2 设计公司介绍图片文字效果 215
10.2.3 设计公司介绍文字装饰效果 219
10.3 企业品牌：掌握品牌展示的H5页面设计 220
10.3.1 设计品牌展示色彩搭配效果 221
10.3.2 设计品牌展示主题文字效果 223
10.3.3 设计品牌展示企业标志效果 225
第11章 节日活动：电商购物的H5广告设计 227
11.1 购物活动：掌握年中大促的H5页面设计 228
11.1.1 设计年中大促渐变背景效果 228
11.1.2 设计年中大促底部装饰效果 229
11.1.3 设计年中大促标志文字效果 231
11.2 电商活动：掌握双十二促销的H5页面设计 237
11.2.1 设计双十二促销纹理绿叶效果 238
11.2.2 设计双十二促销文字边框效果 240
11.2.3 设计双十二促销产品布局效果 242
11.3 七夕活动：掌握情人节的H5页面设计 244
11.3.1 设计情人节浪漫星空背景效果 245
11.3.2 设计情人节渐变文字按钮效果 246
11.3.3 设计情人节情侣装饰效果 251
第12章 会议邀请：年会晚会邀请函的H5广告设计 254
12.1 企业年会：掌握年会邀请函的H5页面设计 255
12.1.1 设计年会邀请函欧式边框效果 255
12.1.2 设计年会邀请函主题内容效果 257
12.1.3 设计年会邀请函底部装饰效果 259
12.2 招商加盟：掌握招商邀请函的H5页面设计 261
12.2.1 设计招商邀请函背景底纹效果 261
12.2.2 设计招商邀请函文字广告信息 264
12.2.3 设计招商邀请函个性花纹效果 265
12.3 颁奖晚会：掌握颁奖典礼邀请函的 H5页面设计 266
12.3.1 设计颁奖典礼邀请函旋转背景效果 266
12.3.2 设计颁奖典礼邀请函内容效果 268
12.3.3 设计颁奖典礼邀请函装饰效果 271
第13章 喜庆请柬：贺卡卡片的H5广告设计 273
13.1 结婚请帖：掌握婚礼请柬的H5页面设计 274
13.1.1 设计婚礼请柬主题背景效果 274
13.1.2 设计婚礼请柬文本矩形效果 276
13.1.3 设计婚礼请柬装饰效果 279
13.2 新春贺卡：掌握新年祝福的H5页面设计 281
13.2.1 设计新年祝福背景纹理效果 282
13.2.2 设计新年祝福文字信息效果 283
13.2.3 设计新年祝福新春元素效果 290
13.3 爱情卡片：掌握情侣表白的H5页面设计 294
13.3.1 设计情侣表白浪漫背景效果 294
13.3.2 设计情侣表白文本内容效果 295
13.3.3 设计情侣表白元素装饰效果 297
写作驱动
H5（主要指HTML 5技术）是伴随着移动互联网兴起的一种新型广告工具，同时随着微信小程序的兴起，加速带动了H5的传播。利用H5进行广告传播已经成为新时代广告媒体的主要传播方式，它改变了传统广告行业的局限性，最大限度地扩张了广告的传播力度；同时互联网以及手机的普及，扩大了H5的传播范围，使得广告真正可以无处不在地传播。一些趣味性的H5广告，更是使得用户可以参与其中，并成为H5广告的传播与推动者。
尽管H5的兴起，令广告行业转变了传统的营销模式，但在图书市场上却几乎没有与H5广告设计相关的书籍。所以，笔者基于以下三点，策划了本书：
（1）H5广告的发展，必定会带动对人才的需求，如对H5开发设计师的需要。
（2）目前关于H5的书，已开始有不少品种，销售都非常不错，但有关H5广告设计却还没有一本书系统地讲述过。
（3）目前已经有学校开始开设与H5相关的课程，人才有对技能的需求，而图书是技能的载体。
笔者潜心收集资料，以平台及软件制作作为案例示范，为读者展示H5广告的设计方法，希望读者阅读本书后可以举一反三，制作出更多精美的效果。
本书特色
本书与同类书相比，最大的特色如下。
（1）分类清晰：本书主要分为两大篇章，每个篇章又详细分为多个章节，并且书中内容是根据读者对知识点的需求排行来进行分布摆放的，读者可以根据分类快速找到自己需求的知识点。
（2）工具全面：本书选取多种方便快捷的图形图像工具、视频工具、音频工具等进行讲解，其中包括人人秀、蜂巢ME、易企秀等网页，以及Photoshop、Illustrator、After Effects等客户端软件。
（3）应用为主：本书内容从零基础开始，先从配色、文字样式、版式方面总体介绍H5广告设计的要点，再落实到多个制作网页及软件平台，并根据每个平台的不同特性来设计广告案例效果。
（4）完整流程：每个案例都是精挑细选，每个实例都是从零开始制作，细致讲解了设计的所有过程，目的也是为了帮助读者可以更加直观地感受到设计的整个流程。
（5）案例丰富：精选多个热门的广告类别来做案例解说，包括产品推广、活动推广、互粉增粉、人才招募、企业宣传、节日活动、会议邀请以及喜庆请柬8个热门类别，每种类别均有3个广告设计案例示范。
本书内容
本书中的实战案例均有详细的操作步骤，可以指引读者正确地制作出H5广告效果，且皆配有素材、效果源文件以及语音视频全程详细讲解，同时在章节中穿插的“专家提醒”，也指出了一些相关要点，使读者可以迅速掌握关键要点。
本书的案例都是挑选当下最热门的H5广告效果，让读者在阅读和学习本书的过程中所制作的H5效果皆是目前最流行、最实用的效果。
本书中的24个广告设计案例实战，全部录制了带语音讲解的演示视频，时间长度达430多分钟（7个多小时），重现书中所有技能实例的操作，帮助读者快速掌握H5广告设计的相关操作技巧。
本书主要从“微页H5-设计篇”与“微页H5-案例篇”两大篇章来讲述新媒体广告设计的具体方法。
本书还是一本侧重案例分析的实战宝典，全书图片数量有1300多张，每一个知识点都有相应的案例图片。本书采取图文相结合的方式进行案例分析，能够方便读者一步一步地掌握每一个案例的设计方法，并在每个步骤相对应的图片中标示了相应的图注，让读者通过图文并茂的内容快速了解核心知识，节约大量的阅读时间。读者在阅读过程中还应该注意实际操作的重要性，以快速提升H5广告设计的技能。
技巧总结
广告页面在视觉上给用户的第一感受便是直接传达的信息，作为新型的广告推广工具，H5同样也不例外，所以在设计H5界面时，美观的界面设计尤为重要。由此，笔者在本书的写作中，总结了关于H5广告设计的要点技巧及知识点，主要表现在以下20个要点。
（1）在H5页面数量剧增且同质化严重的发展潮流中，H5的页面创意设计便是确保自己的广告推广脱颖而出的一种方式，我们在制作H5广告效果时，要确保效果创意新颖的同时又能够传递出所要推广的广告信息。
（2）在设计H5页面时，可以根据页面的烦琐程度选取合适的工具进行制作，一些基于互联网平台的H5设计工具，不仅操作简单，所制作出的效果也非常不错，同时非常适用于零基础的新人使用。
（3）在各种图像处理的软件中，Photoshop可以说是一个非常强大的图像处理软件，其包含很多图像处理工具，用户只需一一尝试，选择需要的工具对图片进行处理与设计即可。
（4）建议用户在制作图像时，可以利用滤镜效果来轻松制作富有特色的图像效果，例如Photoshop自带的“滤镜”命令，不但拥有各种类别的滤镜可供用户选择，而且还能够对参数值进行设计与更改，并且它的应用场合很多。
（5）虽然Photoshop的图像处理功能很强大，但是其操作有一定的难度，尽管Photoshop为用户提供了最大限度的编辑空间，但是它的组合功能需要用户自己来摸索，这一点让新手不知如何动手制作，所以笔者建议，对Photoshop的图像处理功能不太熟悉的用户，可以多尝试学习“微页H5-案例篇”中的各种实战案例教程与视频，或使用其他的软件或APP来对图片进行一键基础的美化操作。
（6）对于一些比较麻烦、不太方便使用Photoshop设计的图片，也可以尝试用网站工具，如图表、表单等，这些内容在网站中一般都会给出基础组件，用户只需修改参数，并简单排版就可以了。
（7）在设计各类广告图片时，可以先对背景图片进行处理，使其呈现出最好的效果时再使用，这样可以为广告作品增添很大的魅力。
（8）制作H5广告页面时，要注意控制图片的文件大小，如果文件过大，会导致加载缓慢，严重时会导致卡机、软件崩溃。
（9）在H5广告页面中，可以尽量多选取那些颜色比较鲜艳、明亮的图片来使用，这类图片可以更加吸引观众的注意力。
（10）对于有关图片处理与制作的软件，由于篇幅有限，笔者没有进行过多详细的介绍，在此列举几种在设计时也经常会用到的图形图像处理软件：CorelPHOTO、CorelDRAW、PageMaker以及InDesign，希望用户在学完本书中的基础应用软件之余，可以多摸索，制作出更多精美的H5广告效果。
（11）在设计H5页面的过程中，用户除了可以使用计算机之外，还可以尝试使用各种手机端APP、小程序、网页来制作H5广告效果。
（12）在H5页面中穿插各种相关元素及素材时，需选取贴合主题且清晰的文件，也可通过H5设计网站中的相关元素互动插件来添加与制作H5页面。
（13）文字一直是H5页面中必不可少的一个关键元素，通过一些相关的文字讲解，有利于向用户传达产品或企业的相关信息，但生硬的文字穿插会导致用户对整个页面失去阅读兴趣，所以在字体设计时，需要注意与H5页面主题格调一致。
（14）H5页面的整体视觉体验，取决于色彩的搭配，而相应地了解色彩原理及一些实用的配色技巧，可以使整个H5页面的色彩更为舒适宜人。
（15）制作产品推广类H5广告效果时，需要注重突出产品的信息，同时需要简单明了地让用户在页面中抓取两个关键信息点：产品及产品信息。
（16）制作活动推广类H5广告效果时，主要吸引用户的还是活动的奖励程度，除了需要有好的画面感，用户的参与程度也取决于活动奖品的力度。
（17）制作互粉增粉类H5广告效果时，就需要在页面中添加与制作一些好的图文信息效果，吸引用户的兴趣，从而达到互粉增粉的效果。
（18）制作人才招募类的H5广告效果时，需要根据不同类别的招聘形式进行相对应的主题设计，例如，校园招聘就可以搭配使用大量青春活力的颜色，以贴近校园招聘的主题。
（19）制作品牌宣传类的H5广告效果时，就比较倾向于对品牌自身的塑造，设计时要使得整个页面相当于品牌的微官网，可以运用一些符合品牌的视觉语言，既能向用户传递品牌信息，又可以表达出品牌的精神态度。
（20）对于会议邀请函及请柬类的H5页面，色彩上的搭配一定要贴近主题，让用户从视觉上便能感知到所受邀的会议的气场。
本书由卢博编著，参与编写的人员还有周博洋，在此表示感谢。由于作者知识水平有限，书中难免有错误和疏漏之处，恳请广大读者批评、指正。
本书提供了案例的素材文件和效果文件，扫一扫右侧的二维码，推送到自己的邮箱后下载获取。
如何制作出美观、酷炫的H5作品？除了简单的图文搭配，以及一些元素的添加修饰外，整个页面的版式设计也是非常重要的。下面我们详细了解一下如何对H5页面的版式进行专业的设计，制作出吸引人眼球的H5版面。
4.1.1 H5版式设计的原则
在大多数的H5设计工具中，不论是移动端的小程序、APP上的H5设计工具，还是PC端的网站H5设计工具，所制作的H5页面都是适合在移动手机端屏幕展示的。
版式设计要考虑的因素是非常多的，例如手机屏幕适用H5页面的尺寸，以及如何在有限的屏幕中对所需传达的内容进行排版设计等。下面详细介绍H5版式设计的原则。
1. 内容分类整理
对H5页面进行设计排版时，对需要向用户传达的信息进行分类整理，把相关的信息归类在一起，排版时将相关的元素进行整体排列，可以对用户在观赏H5页面时的逻辑思维提供信息组织帮助，提高用户信息的获取量。图4-1所示为对页面信息进行的分类整理。
图4-1 信息分类整理
2. 元素对齐排列
将页面元素进行对齐排列，为的是能够让整个页面中的元素形成整体视觉效果。对齐排列作为常用的排版方式，能够使页面整体元素具有条理性，形成一个统一的整体，建立一种清晰的视觉效果。
图4-2所示为对页面元素进行对齐排列的效果。
图4-2 元素对齐排列
3. 布局重复交错
重复是指在H5页面布局中，对相关的元素、图像或文字使用相同的属性设计，使其形成一种视觉上的重复；而交错的应用就是为了避免生硬的重复，导致整个页面过于死板，如图4-3所示。
图4-3 对页面进行重复交错
4. 关键点的对比布局
在H5页面制作时，图文元素一定会存在主次之分。作为主要信息存在的元素，在页面中为了吸引用户眼球，就要对元素进行着重设计，使得主要元素与其他元素呈现完全不同的效果，形成对比性，有助于用户的阅读逻辑性。
如图4-4所示，这是在页面中突出重点信息的版式效果。
图4-4 突出重点信息
4.1.2 H5页面的网格设计
网格设计，又称为“网格系统”，起源于20世纪初的西欧国家，完善成熟于20世纪中期的瑞士。
最早对这个概念进行阐释的是瑞士的约瑟夫•米勒-布罗克曼，其于1961年出版的《平面艺术家及其设计议题》一书，使网格设计成为了平面设计史上的先驱。
优秀的版式设计决定了整个作品的基调以及美观程度，在形成良好的视觉信息传递时，也能够很好地进行传播。但不是所有的行业企业都会为自己的品牌聘请一个设计师，接下来便带大家学习如何在零基础的情况下掌握网格设计。
网格的运用在设计领域可以说是非常普遍的，在所有的常用绘图软件中都必然存在着网格工具，例如，图4-5所示为Photoshop CC 2018绘图页面中的网格工具。
图4-5 Photoshop CC 2018绘图页面中的网格工具
1. 设计原理
网格设计的风格形成，最早是对建筑的应用，其风格特点是通过严格的数字比例关系进行运算，再把版心划分为无数统一尺寸的网格。将版面分为若干个均匀的格子，形成网状式的网格，将图片与文字置入其中，使版面具有一定的节奏变化，从而形成一种优美的韵律，但也会使版面产生呆板的负面影响。
网格为所有的设计元素提供了一个结构，可以使设计创造更轻松、灵活。采用这种方法设计的页面有着非常好的比例感和秩序感，同时也能形成很好的准确性与严密性，帮助设计师设计出美观、大方，而又实用的版面。
图4-6所示为现代杂志中运用的网格设计。
图4-7所示为网页中运用的网格设计。
评论
还没有评论。