內容簡介

菜鳥如何快速成為H5廣告頁面設計高手？如何用H5廣告頁面征服上司和客戶？如何零基礎制作出專業、漂亮的H5廣告頁面？《Photoshop H5廣告設計》將按照兩條線路幫助讀者精通Photoshop H5廣告設計：

一條是橫向案例線，通過20多個經典案例，包括產品推廣、活動推廣、互粉增粉、人才招募、企業宣傳、節日活動、會議邀請、喜慶請柬等，從零開始學習制作H5廣告效果。

另一條是縱向技巧線，講解了配色常識、文字排版、版式布局等核心技能，幫助讀者徹底讀懂、玩透H5廣告設計。

《Photoshop H5廣告設計》適合H5微信頁面廣告設計者、新媒體廣告設計師、移動互聯網廣告設計人員等閱讀。

前言

寫作驅動

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頁面，色彩上的搭配一定要貼近主題，讓用戶從視覺上便能感知到所受邀的會議的氣場。

本書由盧博編著，參與編寫的人員還有周博洋，在此表示感謝。由于作者知識水平有限，書中難免有錯誤和疏漏之處，懇請廣大讀者批評、指正。

本書提供了案例的素材文件和效果文件，掃一掃右側的二維碼，推送到自己的郵箱后下載獲取。

目錄

 

第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