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

目錄

第1章 H5廣告設(shè)計(jì)入門(mén) 1
1.1 什么是H5 2
1.1.1 H5是什么 2
1.1.2 無(wú)處不在的H5 3
1.1.3 H5的主要功能 5
1.1.4 使用H5有哪些優(yōu)勢(shì) 5
1.1.5 探索H5廣告的潮流和方向 8
1.2 H5頁(yè)面的類型 9
1.2.1 活動(dòng)運(yùn)營(yíng)型 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 簡(jiǎn)單圖文的H5頁(yè)面 12
1.3.2 禮物 賀卡 邀請(qǐng)函的H5頁(yè)面 12
1.3.3 問(wèn)答 評(píng)分 測(cè)試的H5頁(yè)面 12
1.3.4 游戲的 H5頁(yè)面 13
第2章 H5設(shè)計(jì)的常用工具 14
2.1 基于互聯(lián)網(wǎng)平臺(tái)的H5開(kāi)發(fā)工具 15
2.1.1 APICloud：H5代碼編輯工具 15
2.1.2 Egret：提供開(kāi)源的H5引擎 16
2.1.3 云適配：一鍵PC網(wǎng)站轉(zhuǎn)移動(dòng)網(wǎng)站 17
2.1.4 iH5：HTML5可視化編輯工具 18
2.1.5 人人秀：無(wú)代碼的H5制作工具 20
2.1.6 易企秀：H5場(chǎng)景定制工具 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ù)碼音樂(lè)創(chuàng)作軟件 26
2.2.6 HYPE：HTML5動(dòng)畫(huà)制作利器 27
2.2.7 其他：H5設(shè)計(jì)常用的輔助工具 27
2.3 選擇H5的工具組合形式 29
2.3.1 選擇開(kāi)發(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 布局頁(yè)面 34
3.1.4 添加和編輯圖片 35
3.1.5 添加和編輯文本元素 36
3.1.6 添加動(dòng)畫(huà)元素 36
3.1.7 添加音樂(lè)元素 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頁(yè)面中添加各種元素 41
3.2.1 添加彈幕元素 41
3.2.2 添加地圖元素 42
3.2.3 添加倒計(jì)時(shí)元素 43
3.2.4 添加動(dòng)畫(huà)文字元素 45
3.2.5 添加圖表插件元素 46
3.2.6 添加祝福賀卡元素 48
3.2.7 添加雷達(dá)掃描元素 49
3.2.8 添加語(yǔ)音留言元素 50
3.2.9 添加照片海報(bào)元素 51
3.2.10 制作長(zhǎng)頁(yè)面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的視覺(jué)交互設(shè)計(jì) 57
4.1 H5頁(yè)面的版式設(shè)計(jì) 58
4.1.1 H5版式設(shè)計(jì)的原則 58
4.1.2 H5頁(yè)面的網(wǎng)格設(shè)計(jì) 59
4.1.3 H5頁(yè)面版式的突破 62
4.2 H5頁(yè)面的字體設(shè)計(jì) 62
4.2.1 設(shè)置H5頁(yè)面的字體 62
4.2.2 設(shè)置H5頁(yè)面的字號(hào) 64
4.2.3 設(shè)置H5頁(yè)面的字間距 64
4.2.4 設(shè)置H5頁(yè)面的行間距 65
4.2.5 H5字體設(shè)計(jì)的基本技巧 65
4.3 H5頁(yè)面的色彩設(shè)計(jì) 66
4.3.1 了解色彩原理 66
4.3.2 了解色彩三要素 67
4.3.3 實(shí)用H5配色技巧 70
4.4 H5頁(yè)面的交互設(shè)計(jì) 74
4.4.1 了解H5交互設(shè)計(jì) 74
4.4.2 制作H5交互設(shè)計(jì) 74
4.5 H5頁(yè)面的視覺(jué)流程設(shè)計(jì) 78
4.5.1 什么是視覺(jué)流程設(shè)計(jì) 78
4.5.2 H5常見(jiàn)的視覺(jué)流程設(shè)計(jì)類型 78
第5章 H5的創(chuàng)意內(nèi)容設(shè)計(jì) 81
5.1 創(chuàng)建H5活動(dòng)營(yíng)銷(xiāo)頁(yè)面 82
5.1.1 答題活動(dòng)的H5頁(yè)面 82
5.1.2 問(wèn)卷調(diào)查活動(dòng)的H5頁(yè)面 84
5.1.3 微信紅包活動(dòng)的H5頁(yè)面 86
5.1.4 VR全景的H5頁(yè)面 88
5.1.5 一鏡到底的H5頁(yè)面 89
5.1.6 快閃活動(dòng)的H5頁(yè)面 90
5.1.7 砍價(jià)活動(dòng)的H5頁(yè)面 91
5.2 創(chuàng)建H5趣味營(yíng)銷(xiāo)頁(yè)面 92
5.2.1 互動(dòng)游戲設(shè)計(jì) 92
5.2.2 微信場(chǎng)景模擬 93
5.2.3 來(lái)電界面模擬 95
5.2.4 通知界面模擬 95
第6章 產(chǎn)品推廣：營(yíng)銷(xiāo)展示的H5廣告設(shè)計(jì) 97
6.1 新品上市：掌握新品發(fā)布的H5頁(yè)面設(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頁(yè)面設(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ē)：掌握汽車(chē)產(chǎn)品的H5頁(yè)面設(shè)計(jì) 116
6.3.1 設(shè)計(jì)汽車(chē)產(chǎn)品頁(yè)面背景效果 117
6.3.2 設(shè)計(jì)汽車(chē)產(chǎn)品界面框架效果 118
6.3.3 設(shè)計(jì)汽車(chē)產(chǎn)品文字修飾效果 120
第7章 活動(dòng)推廣：互動(dòng)投票的H5廣告設(shè)計(jì) 123
7.1 新春活動(dòng)：掌握砸金蛋的H5頁(yè)面設(shè)計(jì) 124
7.1.1 設(shè)計(jì)砸金蛋新春背景效果 124
7.1.2 設(shè)計(jì)砸金蛋元素裝飾效果 126
7.1.3 設(shè)計(jì)砸金蛋文字按鈕效果 130
7.2 商場(chǎng)活動(dòng)：掌握抽獎(jiǎng)活動(dòng)的H5頁(yè)面設(shè)計(jì) 133
7.2.1 設(shè)計(jì)抽獎(jiǎng)活動(dòng)轉(zhuǎn)盤(pán)底盤(pán)效果 134
7.2.2 設(shè)計(jì)抽獎(jiǎng)活動(dòng)獎(jiǎng)品文字信息 139
7.2.3 設(shè)計(jì)抽獎(jiǎng)活動(dòng)頁(yè)面裝飾效果 144
7.3 營(yíng)銷(xiāo)活動(dòng)：掌握投票活動(dòng)的H5頁(yè)面設(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頁(yè)面設(shè)計(jì) 158
8.1.1 設(shè)計(jì)小游戲背景底紋效果 158
8.1.2 設(shè)計(jì)小游戲界面按鈕效果 159
8.1.3 設(shè)計(jì)小游戲素材插件效果 164
8.2 攝影論壇：掌握旅行相冊(cè)的H5頁(yè)面設(shè)計(jì) 165
8.2.1 設(shè)計(jì)旅行相冊(cè)顆粒背景效果 166
8.2.2 設(shè)計(jì)旅行相冊(cè)文字信息效果 167
8.2.3 設(shè)計(jì)旅行相冊(cè)照片裝飾效果 169
8.3 微信增粉：掌握口令紅包的H5頁(yè)面設(shè)計(jì) 171
8.3.1 設(shè)計(jì)口令紅包頁(yè)面效果 171
8.3.2 設(shè)計(jì)口令紅包按鈕效果 174
8.3.3 設(shè)計(jì)口令紅包背景效果 178
第9章 人才招募：招聘求職的H5廣告設(shè)計(jì) 179
9.1 企業(yè)招聘：掌握專場(chǎng)招聘會(huì)的H5頁(yè)面設(shè)計(jì) 180
9.1.1 設(shè)計(jì)專場(chǎng)招聘會(huì)漸變合成背景效果 180
9.1.2 設(shè)計(jì)專場(chǎng)招聘會(huì)招聘信息邊框效果 183
9.1.3 設(shè)計(jì)專場(chǎng)招聘會(huì)的文字宣傳內(nèi)容 184
9.2 實(shí)習(xí)招募：掌握校園招聘會(huì)的H5頁(yè)面設(shè)計(jì) 188
9.2.1 設(shè)計(jì)校園招聘會(huì)動(dòng)感模糊背景效果 189
9.2.2 設(shè)計(jì)校園招聘會(huì)頁(yè)面主題宣傳信息 190
9.2.3 設(shè)計(jì)校園招聘會(huì)元素裝飾效果 194
9.3 應(yīng)聘求職：掌握個(gè)人簡(jiǎn)歷的H5頁(yè)面設(shè)計(jì) 197
9.3.1 設(shè)計(jì)個(gè)人簡(jiǎn)歷舞臺(tái)揭幕效果 198
9.3.2 設(shè)計(jì)個(gè)人簡(jiǎn)歷主題文字效果 200
9.3.3 設(shè)計(jì)個(gè)人簡(jiǎn)歷光斑點(diǎn)綴效果 203
第10章 企業(yè)宣傳：品牌介紹的H5廣告設(shè)計(jì) 206
10.1 會(huì)議宣傳：掌握商務(wù)匯報(bào)的H5頁(yè)面設(shè)計(jì) 207
10.1.1 設(shè)計(jì)商務(wù)匯報(bào)頁(yè)面背景效果 207
10.1.2 設(shè)計(jì)商務(wù)匯報(bào)主題內(nèi)容效果 209
10.1.3 設(shè)計(jì)商務(wù)匯報(bào)背景裝飾效果 211
10.2 公司簡(jiǎn)介：掌握公司介紹的H5頁(yè)面設(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頁(yè)面設(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)：電商購(gòu)物的H5廣告設(shè)計(jì) 227
11.1 購(gòu)物活動(dòng)：掌握年中大促的H5頁(yè)面設(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)：掌握雙十二促銷(xiāo)的H5頁(yè)面設(shè)計(jì) 237
11.2.1 設(shè)計(jì)雙十二促銷(xiāo)紋理綠葉效果 238
11.2.2 設(shè)計(jì)雙十二促銷(xiāo)文字邊框效果 240
11.2.3 設(shè)計(jì)雙十二促銷(xiāo)產(chǎn)品布局效果 242
11.3 七夕活動(dòng)：掌握情人節(jié)的H5頁(yè)面設(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ì)議邀請(qǐng)：年會(huì)晚會(huì)邀請(qǐng)函的H5廣告設(shè)計(jì) 254
12.1 企業(yè)年會(huì)：掌握年會(huì)邀請(qǐng)函的H5頁(yè)面設(shè)計(jì) 255
12.1.1 設(shè)計(jì)年會(huì)邀請(qǐng)函歐式邊框效果 255
12.1.2 設(shè)計(jì)年會(huì)邀請(qǐng)函主題內(nèi)容效果 257
12.1.3 設(shè)計(jì)年會(huì)邀請(qǐng)函底部裝飾效果 259
12.2 招商加盟：掌握招商邀請(qǐng)函的H5頁(yè)面設(shè)計(jì) 261
12.2.1 設(shè)計(jì)招商邀請(qǐng)函背景底紋效果 261
12.2.2 設(shè)計(jì)招商邀請(qǐng)函文字廣告信息 264
12.2.3 設(shè)計(jì)招商邀請(qǐng)函個(gè)性花紋效果 265
12.3 頒獎(jiǎng)晚會(huì)：掌握頒獎(jiǎng)典禮邀請(qǐng)函的 H5頁(yè)面設(shè)計(jì) 266
12.3.1 設(shè)計(jì)頒獎(jiǎng)典禮邀請(qǐng)函旋轉(zhuǎn)背景效果 266
12.3.2 設(shè)計(jì)頒獎(jiǎng)典禮邀請(qǐng)函內(nèi)容效果 268
12.3.3 設(shè)計(jì)頒獎(jiǎng)典禮邀請(qǐng)函裝飾效果 271
第13章 喜慶請(qǐng)柬：賀卡卡片的H5廣告設(shè)計(jì) 273
13.1 結(jié)婚請(qǐng)?zhí)赫莆栈槎Y請(qǐng)柬的H5頁(yè)面設(shè)計(jì) 274
13.1.1 設(shè)計(jì)婚禮請(qǐng)柬主題背景效果 274
13.1.2 設(shè)計(jì)婚禮請(qǐng)柬文本矩形效果 276
13.1.3 設(shè)計(jì)婚禮請(qǐng)柬裝飾效果 279
13.2 新春賀卡：掌握新年祝福的H5頁(yè)面設(shè)計(jì) 281
13.2.1 設(shè)計(jì)新年祝福背景紋理效果 282
13.2.2 設(shè)計(jì)新年祝福文字信息效果 283
13.2.3 設(shè)計(jì)新年祝福新春元素效果 290
13.3 愛(ài)情卡片：掌握情侶表白的H5頁(yè)面設(shè)計(jì) 294
13.3.1 設(shè)計(jì)情侶表白浪漫背景效果 294
13.3.2 設(shè)計(jì)情侶表白文本內(nèi)容效果 295
13.3.3 設(shè)計(jì)情侶表白元素裝飾效果 297