Photoshop 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有哪些優(yōu)勢 5
1.1.5 探索H5廣告的潮流和方向 8
1.2 H5頁面的類型 9
1.2.1 活動運營型 10
1.2.2 品牌宣傳型 10
1.2.3 產(chǎn)品介紹型 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 基于互聯(lián)網(wǎng)平臺的H5開發(fā)工具 15
2.1.1 APICloud：H5代碼編輯工具 15
2.1.2 Egret：提供開源的H5引擎 16
2.1.3 云適配：一鍵PC網(wǎng)站轉移動網(wǎng)站 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：專業(yè)的矢量圖繪制工具 25
2.2.3 After Effects：制作酷炫的視頻特效 25
2.2.4 CINEMA 4D：專業(yè)的三維軟件工具 26
2.2.5 隨身錄音室：數(shù)碼音樂創(chuàng)作軟件 26
2.2.6 HYPE：HTML5動畫制作利器 27
2.2.7 其他：H5設計常用的輔助工具 27
2.3 選擇H5的工具組合形式 29
2.3.1 選擇開發(fā)類H5工具 29
2.3.2 選擇網(wǎng)站類H5工具 30
2.3.3 利用手機制作H5 30
第3章 H5設計的基本操作 32
3.1 如何“生產(chǎn)”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 發(fā)布作品 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 細節(jié)與統(tǒng)一 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頁面的網(wǎng)格設計 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的創(chuàng)意內(nèi)容設計 81
5.1 創(chuàng)建H5活動營銷頁面 82
5.1.1 答題活動的H5頁面 82
5.1.2 問卷調(diào)查活動的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 創(chuàng)建H5趣味營銷頁面 92
5.2.1 互動游戲設計 92
5.2.2 微信場景模擬 93
5.2.3 來電界面模擬 95
5.2.4 通知界面模擬 95
第6章 產(chǎn)品推廣：營銷展示的H5廣告設計 97
6.1 新品上市：掌握新品發(fā)布的H5頁面設計 98
6.1.1 設計新品發(fā)布背景形狀效果 98
6.1.2 設計新品發(fā)布圖文信息效果 101
6.1.3 設計新品發(fā)布圖層裝飾效果 105
6.2 數(shù)碼宣傳：掌握電商產(chǎn)品的H5頁面設計 108
6.2.1 設計電商產(chǎn)品雜色背景效果 108
6.2.2 設計電商產(chǎn)品主體布局效果 110
6.2.3 設計電商產(chǎn)品信息點綴效果 115
6.3 品牌汽車：掌握汽車產(chǎn)品的H5頁面設計 116
6.3.1 設計汽車產(chǎn)品頁面背景效果 117
6.3.2 設計汽車產(chǎn)品界面框架效果 118
6.3.3 設計汽車產(chǎn)品文字修飾效果 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 企業(yè)招聘：掌握專場招聘會的H5頁面設計 180
9.1.1 設計專場招聘會漸變合成背景效果 180
9.1.2 設計專場招聘會招聘信息邊框效果 183
9.1.3 設計專場招聘會的文字宣傳內(nèi)容 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章 企業(yè)宣傳：品牌介紹的H5廣告設計 206
10.1 會議宣傳：掌握商務匯報的H5頁面設計 207
10.1.1 設計商務匯報頁面背景效果 207
10.1.2 設計商務匯報主題內(nèi)容效果 209
10.1.3 設計商務匯報背景裝飾效果 211
10.2 公司簡介：掌握公司介紹的H5頁面設計 214
10.2.1 設計公司介紹背景色塊效果 214
10.2.2 設計公司介紹圖片文字效果 215
10.2.3 設計公司介紹文字裝飾效果 219
10.3 企業(yè)品牌：掌握品牌展示的H5頁面設計 220
10.3.1 設計品牌展示色彩搭配效果 221
10.3.2 設計品牌展示主題文字效果 223
10.3.3 設計品牌展示企業(yè)標志效果 225
第11章 節(jié)日活動：電商購物的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 設計雙十二促銷產(chǎn)品布局效果 242
11.3 七夕活動：掌握情人節(jié)的H5頁面設計 244
11.3.1 設計情人節(jié)浪漫星空背景效果 245
11.3.2 設計情人節(jié)漸變文字按鈕效果 246
11.3.3 設計情人節(jié)情侶裝飾效果 251
第12章 會議邀請：年會晚會邀請函的H5廣告設計 254
12.1 企業(yè)年會：掌握年會邀請函的H5頁面設計 255
12.1.1 設計年會邀請函歐式邊框效果 255
12.1.2 設計年會邀請函主題內(nèi)容效果 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 設計頒獎典禮邀請函內(nèi)容效果 268
12.3.3 設計頒獎典禮邀請函裝飾效果 271
第13章 喜慶請柬：賀卡卡片的H5廣告設計 273
13.1 結婚請?zhí)赫莆栈槎Y請柬的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 設計情侶表白文本內(nèi)容效果 295
13.3.3 設計情侶表白元素裝飾效果 297