Photoshop H5廣告設(shè)計(jì)

目錄

第1章 H5廣告設(shè)計(jì)入門 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 活動(dòng)運(yùn)營型 10
1.2.2 品牌宣傳型 10
1.2.3 產(chǎn)品介紹型 11
1.2.4 總結(jié)報(bào)告型 11
1.3 形式為功能服務(wù) 12
1.3.1 簡單圖文的H5頁面 12
1.3.2 禮物 賀卡 邀請函的H5頁面 12
1.3.3 問答 評分 測試的H5頁面 12
1.3.4 游戲的 H5頁面 13
第2章 H5設(shè)計(jì)的常用工具 14
2.1 基于互聯(lián)網(wǎng)平臺(tái)的H5開發(fā)工具 15
2.1.1 APICloud：H5代碼編輯工具 15
2.1.2 Egret：提供開源的H5引擎 16
2.1.3 云適配：一鍵PC網(wǎng)站轉(zhuǎn)移動(dòng)網(wǎng)站 17
2.1.4 iH5：HTML5可視化編輯工具 18
2.1.5 人人秀：無代碼的H5制作工具 20
2.1.6 易企秀：H5場景定制工具 22
2.2 基于應(yīng)用軟件的H5設(shè)計(jì)工具 24
2.2.1 Photoshop：圖形圖像設(shè)計(jì)工具 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動(dòng)畫制作利器 27
2.2.7 其他：H5設(shè)計(jì)常用的輔助工具 27
2.3 選擇H5的工具組合形式 29
2.3.1 選擇開發(fā)類H5工具 29
2.3.2 選擇網(wǎng)站類H5工具 30
2.3.3 利用手機(jī)制作H5 30
第3章 H5設(shè)計(jì)的基本操作 32
3.1 如何“生產(chǎn)”H5 33
3.1.1 選擇平臺(tái)和進(jìn)行登錄 33
3.1.2 選擇模板 33
3.1.3 布局頁面 34
3.1.4 添加和編輯圖片 35
3.1.5 添加和編輯文本元素 36
3.1.6 添加動(dòng)畫元素 36
3.1.7 添加音樂元素 37
3.1.8 添加視頻元素 37
3.1.9 添加交互元素 38
3.1.10 添加表單和組件 39
3.1.11 預(yù)覽作品 40
3.1.12 發(fā)布作品 40
3.2 在H5頁面中添加各種元素 41
3.2.1 添加彈幕元素 41
3.2.2 添加地圖元素 42
3.2.3 添加倒計(jì)時(shí)元素 43
3.2.4 添加動(dòng)畫文字元素 45
3.2.5 添加圖表插件元素 46
3.2.6 添加祝福賀卡元素 48
3.2.7 添加雷達(dá)掃描元素 49
3.2.8 添加語音留言元素 50
3.2.9 添加照片海報(bào)元素 51
3.2.10 制作長頁面H5 52
3.3 為設(shè)計(jì)加分的4個(gè)要點(diǎn) 54
3.3.1 細(xì)節(jié)與統(tǒng)一 54
3.3.2 熱點(diǎn)與話題 55
3.3.3 故事與情感 55
3.3.4 技術(shù)與互動(dòng) 56
第4章 H5的視覺交互設(shè)計(jì) 57
4.1 H5頁面的版式設(shè)計(jì) 58
4.1.1 H5版式設(shè)計(jì)的原則 58
4.1.2 H5頁面的網(wǎng)格設(shè)計(jì) 59
4.1.3 H5頁面版式的突破 62
4.2 H5頁面的字體設(shè)計(jì) 62
4.2.1 設(shè)置H5頁面的字體 62
4.2.2 設(shè)置H5頁面的字號(hào) 64
4.2.3 設(shè)置H5頁面的字間距 64
4.2.4 設(shè)置H5頁面的行間距 65
4.2.5 H5字體設(shè)計(jì)的基本技巧 65
4.3 H5頁面的色彩設(shè)計(jì) 66
4.3.1 了解色彩原理 66
4.3.2 了解色彩三要素 67
4.3.3 實(shí)用H5配色技巧 70
4.4 H5頁面的交互設(shè)計(jì) 74
4.4.1 了解H5交互設(shè)計(jì) 74
4.4.2 制作H5交互設(shè)計(jì) 74
4.5 H5頁面的視覺流程設(shè)計(jì) 78
4.5.1 什么是視覺流程設(shè)計(jì) 78
4.5.2 H5常見的視覺流程設(shè)計(jì)類型 78
第5章 H5的創(chuàng)意內(nèi)容設(shè)計(jì) 81
5.1 創(chuàng)建H5活動(dòng)營銷頁面 82
5.1.1 答題活動(dòng)的H5頁面 82
5.1.2 問卷調(diào)查活動(dòng)的H5頁面 84
5.1.3 微信紅包活動(dòng)的H5頁面 86
5.1.4 VR全景的H5頁面 88
5.1.5 一鏡到底的H5頁面 89
5.1.6 快閃活動(dòng)的H5頁面 90
5.1.7 砍價(jià)活動(dòng)的H5頁面 91
5.2 創(chuàng)建H5趣味營銷頁面 92
5.2.1 互動(dòng)游戲設(shè)計(jì) 92
5.2.2 微信場景模擬 93
5.2.3 來電界面模擬 95
5.2.4 通知界面模擬 95
第6章 產(chǎn)品推廣：營銷展示的H5廣告設(shè)計(jì) 97
6.1 新品上市：掌握新品發(fā)布的H5頁面設(shè)計(jì) 98
6.1.1 設(shè)計(jì)新品發(fā)布背景形狀效果 98
6.1.2 設(shè)計(jì)新品發(fā)布圖文信息效果 101
6.1.3 設(shè)計(jì)新品發(fā)布圖層裝飾效果 105
6.2 數(shù)碼宣傳：掌握電商產(chǎn)品的H5頁面設(shè)計(jì) 108
6.2.1 設(shè)計(jì)電商產(chǎn)品雜色背景效果 108
6.2.2 設(shè)計(jì)電商產(chǎn)品主體布局效果 110
6.2.3 設(shè)計(jì)電商產(chǎn)品信息點(diǎn)綴效果 115
6.3 品牌汽車：掌握汽車產(chǎn)品的H5頁面設(shè)計(jì) 116
6.3.1 設(shè)計(jì)汽車產(chǎn)品頁面背景效果 117
6.3.2 設(shè)計(jì)汽車產(chǎn)品界面框架效果 118
6.3.3 設(shè)計(jì)汽車產(chǎn)品文字修飾效果 120
第7章 活動(dòng)推廣：互動(dòng)投票的H5廣告設(shè)計(jì) 123
7.1 新春活動(dòng)：掌握砸金蛋的H5頁面設(shè)計(jì) 124
7.1.1 設(shè)計(jì)砸金蛋新春背景效果 124
7.1.2 設(shè)計(jì)砸金蛋元素裝飾效果 126
7.1.3 設(shè)計(jì)砸金蛋文字按鈕效果 130
7.2 商場活動(dòng)：掌握抽獎(jiǎng)活動(dòng)的H5頁面設(shè)計(jì) 133
7.2.1 設(shè)計(jì)抽獎(jiǎng)活動(dòng)轉(zhuǎn)盤底盤效果 134
7.2.2 設(shè)計(jì)抽獎(jiǎng)活動(dòng)獎(jiǎng)品文字信息 139
7.2.3 設(shè)計(jì)抽獎(jiǎng)活動(dòng)頁面裝飾效果 144
7.3 營銷活動(dòng)：掌握投票活動(dòng)的H5頁面設(shè)計(jì) 147
7.3.1 設(shè)計(jì)投票活動(dòng)背景效果 147
7.3.2 設(shè)計(jì)投票活動(dòng)文字信息 149
7.3.3 設(shè)計(jì)投票活動(dòng)點(diǎn)綴效果 154
第8章 互粉增粉：游戲紅包的H5廣告設(shè)計(jì) 157
8.1 游戲程序：掌握小游戲的H5頁面設(shè)計(jì) 158
8.1.1 設(shè)計(jì)小游戲背景底紋效果 158
8.1.2 設(shè)計(jì)小游戲界面按鈕效果 159
8.1.3 設(shè)計(jì)小游戲素材插件效果 164
8.2 攝影論壇：掌握旅行相冊的H5頁面設(shè)計(jì) 165
8.2.1 設(shè)計(jì)旅行相冊顆粒背景效果 166
8.2.2 設(shè)計(jì)旅行相冊文字信息效果 167
8.2.3 設(shè)計(jì)旅行相冊照片裝飾效果 169
8.3 微信增粉：掌握口令紅包的H5頁面設(shè)計(jì) 171
8.3.1 設(shè)計(jì)口令紅包頁面效果 171
8.3.2 設(shè)計(jì)口令紅包按鈕效果 174
8.3.3 設(shè)計(jì)口令紅包背景效果 178
第9章 人才招募：招聘求職的H5廣告設(shè)計(jì) 179
9.1 企業(yè)招聘：掌握專場招聘會(huì)的H5頁面設(shè)計(jì) 180
9.1.1 設(shè)計(jì)專場招聘會(huì)漸變合成背景效果 180
9.1.2 設(shè)計(jì)專場招聘會(huì)招聘信息邊框效果 183
9.1.3 設(shè)計(jì)專場招聘會(huì)的文字宣傳內(nèi)容 184
9.2 實(shí)習(xí)招募：掌握校園招聘會(huì)的H5頁面設(shè)計(jì) 188
9.2.1 設(shè)計(jì)校園招聘會(huì)動(dòng)感模糊背景效果 189
9.2.2 設(shè)計(jì)校園招聘會(huì)頁面主題宣傳信息 190
9.2.3 設(shè)計(jì)校園招聘會(huì)元素裝飾效果 194
9.3 應(yīng)聘求職：掌握個(gè)人簡歷的H5頁面設(shè)計(jì) 197
9.3.1 設(shè)計(jì)個(gè)人簡歷舞臺(tái)揭幕效果 198
9.3.2 設(shè)計(jì)個(gè)人簡歷主題文字效果 200
9.3.3 設(shè)計(jì)個(gè)人簡歷光斑點(diǎn)綴效果 203
第10章 企業(yè)宣傳：品牌介紹的H5廣告設(shè)計(jì) 206
10.1 會(huì)議宣傳：掌握商務(wù)匯報(bào)的H5頁面設(shè)計(jì) 207
10.1.1 設(shè)計(jì)商務(wù)匯報(bào)頁面背景效果 207
10.1.2 設(shè)計(jì)商務(wù)匯報(bào)主題內(nèi)容效果 209
10.1.3 設(shè)計(jì)商務(wù)匯報(bào)背景裝飾效果 211
10.2 公司簡介：掌握公司介紹的H5頁面設(shè)計(jì) 214
10.2.1 設(shè)計(jì)公司介紹背景色塊效果 214
10.2.2 設(shè)計(jì)公司介紹圖片文字效果 215
10.2.3 設(shè)計(jì)公司介紹文字裝飾效果 219
10.3 企業(yè)品牌：掌握品牌展示的H5頁面設(shè)計(jì) 220
10.3.1 設(shè)計(jì)品牌展示色彩搭配效果 221
10.3.2 設(shè)計(jì)品牌展示主題文字效果 223
10.3.3 設(shè)計(jì)品牌展示企業(yè)標(biāo)志效果 225
第11章 節(jié)日活動(dòng)：電商購物的H5廣告設(shè)計(jì) 227
11.1 購物活動(dòng)：掌握年中大促的H5頁面設(shè)計(jì) 228
11.1.1 設(shè)計(jì)年中大促漸變背景效果 228
11.1.2 設(shè)計(jì)年中大促底部裝飾效果 229
11.1.3 設(shè)計(jì)年中大促標(biāo)志文字效果 231
11.2 電商活動(dòng)：掌握雙十二促銷的H5頁面設(shè)計(jì) 237
11.2.1 設(shè)計(jì)雙十二促銷紋理綠葉效果 238
11.2.2 設(shè)計(jì)雙十二促銷文字邊框效果 240
11.2.3 設(shè)計(jì)雙十二促銷產(chǎn)品布局效果 242
11.3 七夕活動(dòng)：掌握情人節(jié)的H5頁面設(shè)計(jì) 244
11.3.1 設(shè)計(jì)情人節(jié)浪漫星空背景效果 245
11.3.2 設(shè)計(jì)情人節(jié)漸變文字按鈕效果 246
11.3.3 設(shè)計(jì)情人節(jié)情侶裝飾效果 251
第12章 會(huì)議邀請：年會(huì)晚會(huì)邀請函的H5廣告設(shè)計(jì) 254
12.1 企業(yè)年會(huì)：掌握年會(huì)邀請函的H5頁面設(shè)計(jì) 255
12.1.1 設(shè)計(jì)年會(huì)邀請函歐式邊框效果 255
12.1.2 設(shè)計(jì)年會(huì)邀請函主題內(nèi)容效果 257
12.1.3 設(shè)計(jì)年會(huì)邀請函底部裝飾效果 259
12.2 招商加盟：掌握招商邀請函的H5頁面設(shè)計(jì) 261
12.2.1 設(shè)計(jì)招商邀請函背景底紋效果 261
12.2.2 設(shè)計(jì)招商邀請函文字廣告信息 264
12.2.3 設(shè)計(jì)招商邀請函個(gè)性花紋效果 265
12.3 頒獎(jiǎng)晚會(huì)：掌握頒獎(jiǎng)典禮邀請函的 H5頁面設(shè)計(jì) 266
12.3.1 設(shè)計(jì)頒獎(jiǎng)典禮邀請函旋轉(zhuǎn)背景效果 266
12.3.2 設(shè)計(jì)頒獎(jiǎng)典禮邀請函內(nèi)容效果 268
12.3.3 設(shè)計(jì)頒獎(jiǎng)典禮邀請函裝飾效果 271
第13章 喜慶請柬：賀卡卡片的H5廣告設(shè)計(jì) 273
13.1 結(jié)婚請?zhí)赫莆栈槎Y請柬的H5頁面設(shè)計(jì) 274
13.1.1 設(shè)計(jì)婚禮請柬主題背景效果 274
13.1.2 設(shè)計(jì)婚禮請柬文本矩形效果 276
13.1.3 設(shè)計(jì)婚禮請柬裝飾效果 279
13.2 新春賀卡：掌握新年祝福的H5頁面設(shè)計(jì) 281
13.2.1 設(shè)計(jì)新年祝福背景紋理效果 282
13.2.2 設(shè)計(jì)新年祝福文字信息效果 283
13.2.3 設(shè)計(jì)新年祝福新春元素效果 290
13.3 愛情卡片：掌握情侶表白的H5頁面設(shè)計(jì) 294
13.3.1 設(shè)計(jì)情侶表白浪漫背景效果 294
13.3.2 設(shè)計(jì)情侶表白文本內(nèi)容效果 295
13.3.3 設(shè)計(jì)情侶表白元素裝飾效果 297