H5和長圖的制作訓練

主講老師：戴輝平

課程詳情：

課程背景：
為什么要開發本課程？隨著移動互聯網的發展，H5和長圖的運用越來越廣，對于宣傳企業文化、及時傳遞公司資訊、分享微課等都非常有利。
如何開發本課程？對比多款技術軟件，對最常用的軟件應用進行實操演示。本課程的特色是什么？可操作性強，課堂產出效果明顯。

課程收益：
● 知識方面：熟悉H5和長圖的應用和優勢
● 技能方面：掌握H5和長圖的制作技巧
● 獲贈豐富的模板和素材、相關軟件等

課程時間：2天，6小時/天
課程對象：企業中基層人員
課程方式：講師講授、案例分析、課堂練習、輔導點評、操作演示等

課程大綱

上篇：H5的制作訓練

第一講：制作H5的十大工具對比
1. 易企秀的優缺點
2. 人人秀的優缺點
3. MAKA的優缺點
4. 兔展的優缺點
5. 人人秀的優缺點
6. 70C的優缺點
7. 最酷網的優缺點
8. 云來的優缺點
9. Epub360的優缺點
10. iH5的優缺點

第二講：制作實戰篇（以易企秀為例）
一、第1步：認識H5的操作界面
1. 菜單欄
1）文本
2）圖片
3）背景
4）音樂
5）形狀
6）表單
7）特效
2. 模板欄
1）單頁模板（與整體模板對應）
2）功能模板
3）我的模板
二、第2步：1.0版H5——骨感
1. 全副武裝
1）安裝圖片水印去除軟件
2）安裝音視頻剪切軟件
3）安裝屏幕取色器軟件
2. 設計主題封面
1）添加公司LOGO
2）標題字體字號顏色設計
3）正文字體字號顏色設計
4）主題背景設計
3. 設計主題內容總頁數
三、第3步：2.0版H5——豐滿
1. 豐富血肉三要素
1）圖片
2）文字
3）音樂
2. 七大渠道豐富血肉
1）記錄本
2）學員訪談
3）相片圖片
4）互聯網
5）同行激蕩
6）書報雜志
7）實地考察
四、第4步：3.0版H5——美化
1. 排版美化六要素
2. 版面設計4大要求
3. 版面設計工具
1）網格開關
2）智能參考線
3）吸附效果
4. 文字處理技巧
1）文不如句、句不如詞
2）標題字體字號顏色
3）正文字體字號顏色
5. 圖片的兩大來源
1）百度圖片
2）專業圖片網站
6. 圖片的常用處理技巧（結合圖片處理軟件）
7. 色彩搭配技巧
1）三色原則
2）深淺原則
3）統一原則
8. 色彩的四大形式
1）字體顏色
2）形狀顏色
3）邊框顏色
4）背景顏色
9. 音頻的剪切技巧示范
五、第5步：4.0版H5——動畫
1. 動畫的四種類型
1）進入動畫
2）強調動畫
3）退出動畫
4）特殊動畫
2. 動畫的批處理技巧和設置技巧
1）H5極品動畫欣賞
2）動畫設置技巧
3. 頁面特效的設置

第三講：設計理念篇
一、H5新手的七宗罪
1. 長篇大論
2. 五顏六色
3. 風格雜亂
4. 低劣圖片
5. 排版混亂
6. 濫用動畫
7. 邏輯不清
二、精美H5四要素模型
1. 結構化思考
2. 圖表化表達
3. 色彩化突出
4. 動態化呈現
三、何謂結構化與結構化的優點
1. 簡明扼要
2. 清晰明了
3. 容易記憶
四、H5風格的定位
1. 夸張風格：濃妝艷抹
2. 商務風格：質樸簡約
3. 藝術風格：天馬行空
4. 極簡風格：只言片語

下篇：長圖文的制作訓練（課前準備：安裝240種書法字體）

第一講：制作長圖文的常用軟件
1. 電腦自帶畫圖工具
2. Word
3. PPT
4. 美圖秀秀
5. PhotoShop（位圖軟件）
6. Ai（矢量圖軟件）
7. Indesign（排版強大，位圖矢量圖，擅長文字）
8. Coredraw（排版強大，位圖矢量圖，擅長文字）
9. 網頁工具——秀米（做H5，做公眾號）
10. 手機APP（如簡書）

第二講：制作實戰篇（以PhotoShop為例）
一、圖片的基本知識
1. 像素與矢量（函數）
2. 位圖與位圖設計軟件（PS、美圖秀秀）
3. 矢量圖與矢量設計軟件
4. 圖片的存儲格式（jpg有背景，png背景透明，占空間，psd-PS，ai-AI,GIF動圖等）
二、圖片的顏色模式
1. 位圖模式（黑白模式）
2. 灰度模式（與位圖模式的差別）
3. RGB模式（紅綠藍）
4. CMYK模式（打印）
5. Lab模式
三、圖片大小的影響因素
1. 寬度與高度比例
2. 分辨率
四、長圖制作六步驟
1. 設置圖片大小（寬高、分辨率）
2. 圖片主色調選擇
3. 設計長圖背景
4. 主字體選擇
5. 圖層素材收集
6. 圖文排版
五、圖層素材的來源
1. 形狀工具的妙用
2. 選區工具制作icon
3. PS筆刷
4. 圖層素材網站（千庫網等）
5. 圖層樣式的設置
六、版面設計工具
1. 標尺
2. 網格線
3. 參考線
4. 對齊格式
七、圖片導出
八、H5設計理念知識點回顧（色彩、配色、風格）