H5和長(zhǎng)圖的制作培訓(xùn)

課程背景：
為什么要開(kāi)發(fā)本課程？隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，H5和長(zhǎng)圖的運(yùn)用越來(lái)越廣，對(duì)于宣傳企業(yè)文化、及時(shí)傳遞公司資訊、分享微課等都非常有利。
如何開(kāi)發(fā)本課程？對(duì)比多款技術(shù)軟件，對(duì)最常用的軟件應(yīng)用進(jìn)行實(shí)操演示。本課程的特色是什么？可操作性強(qiáng)，課堂產(chǎn)出效果明顯。
課程收益：
.知識(shí)方面：熟悉H5和長(zhǎng)圖的應(yīng)用和優(yōu)勢(shì)
.技能方面：掌握H5和長(zhǎng)圖的制作技巧
.獲贈(zèng)豐富的模板和素材、相關(guān)軟件等
課程時(shí)間：2天，6小時(shí)/天
課程對(duì)象：企業(yè)中基層人員
課程方式：講師講授、案例分析、課堂練習(xí)、輔導(dǎo)點(diǎn)評(píng)、操作演示等

課程大綱
上篇：H5的制作訓(xùn)練
第一講：制作H5的十大工具對(duì)比
1.易企秀的優(yōu)缺點(diǎn)
2.人人秀的優(yōu)缺點(diǎn)
3.MAKA的優(yōu)缺點(diǎn)
4.兔展的優(yōu)缺點(diǎn)
5.人人秀的優(yōu)缺點(diǎn)
6.70C的優(yōu)缺點(diǎn)
7.最酷網(wǎng)的優(yōu)缺點(diǎn)
8.云來(lái)的優(yōu)缺點(diǎn)
9.Epub360的優(yōu)缺點(diǎn)
10.iH5的優(yōu)缺點(diǎn)

第二講： 制作實(shí)戰(zhàn)篇（以易企秀為例）
一、第1步：認(rèn)識(shí)H5的操作界面
1.菜單欄
1）文本
2）圖片
3）背景
4）音樂(lè)
5）形狀
6）表單
7）特效
2.模板欄
1）單頁(yè)模板（與整體模板對(duì)應(yīng)）
2）功能模板
3）我的模板

二、第2步：1.0版H5——骨感
1.全副武裝
1）安裝圖片水印去除軟件
2）安裝音視頻剪切軟件
3）安裝屏幕取色器軟件
2.設(shè)計(jì)主題封面
1）添加公司LOGO
2）標(biāo)題字體字號(hào)顏色設(shè)計(jì)
3）正文字體字號(hào)顏色設(shè)計(jì)
4）主題背景設(shè)計(jì)
3.設(shè)計(jì)主題內(nèi)容總頁(yè)數(shù)

三、第3步：2.0版H5——豐滿
1.豐富血肉三要素
1）圖片
2）文字
3）音樂(lè)
2.七大渠道豐富血肉
1）記錄本
2）學(xué)員訪談
3）相片圖片
4）互聯(lián)網(wǎng)
5）同行激蕩
6）書(shū)報(bào)雜志
7）實(shí)地考察

四、第4步：3.0版H5——美化
1.排版美化六要素
2.版面設(shè)計(jì)4大要求
3.版面設(shè)計(jì)工具
1）網(wǎng)格開(kāi)關(guān)
2）智能參考線
3）吸附效果
4.文字處理技巧
1）文不如句、句不如詞
2）標(biāo)題字體字號(hào)顏色
3）正文字體字號(hào)顏色
5.圖片的兩大來(lái)源
1）百度圖片
2）專業(yè)圖片網(wǎng)站
6.圖片的常用處理技巧（結(jié)合圖片處理軟件）
7.色彩搭配技巧
1）三色原則
2）深淺原則
3）統(tǒng)一原則
8.色彩的四大形式
1）字體顏色
2）形狀顏色
3）邊框顏色
4）背景顏色
9.音頻的剪切技巧示范

五、第5步：4.0版H5——動(dòng)畫(huà)
1.動(dòng)畫(huà)的四種類型
1）進(jìn)入動(dòng)畫(huà)
2）強(qiáng)調(diào)動(dòng)畫(huà)
3）退出動(dòng)畫(huà)
4）特殊動(dòng)畫(huà)
2.動(dòng)畫(huà)的批處理技巧和設(shè)置技巧
1）H5*動(dòng)畫(huà)欣賞
2）動(dòng)畫(huà)設(shè)置技巧
3.頁(yè)面特效的設(shè)置

第三講：設(shè)計(jì)理念篇
一、H5新手的七宗罪
1.長(zhǎng)篇大論
2.五顏六色
3.風(fēng)格雜亂
4.低劣圖片
5.排版混亂
6.濫用動(dòng)畫(huà)
7.邏輯不清
二、精美H5四要素模型
1.結(jié)構(gòu)化思考
2.圖表化表達(dá)
3.色彩化突出
4.動(dòng)態(tài)化呈現(xiàn)

三、何謂結(jié)構(gòu)化與結(jié)構(gòu)化的優(yōu)點(diǎn)
1.簡(jiǎn)明扼要
2.清晰明了
3.容易記憶
四、H5風(fēng)格的定位
1.夸張風(fēng)格：濃妝艷抹
2.商務(wù)風(fēng)格：質(zhì)樸簡(jiǎn)約
3.藝術(shù)風(fēng)格：天馬行空
4.極簡(jiǎn)風(fēng)格：只言片語(yǔ)

下篇：長(zhǎng)圖文的制作訓(xùn)練（課前準(zhǔn)備：安裝240種書(shū)法字體）
第一講：制作長(zhǎng)圖文的常用軟件
1.電腦自帶畫(huà)圖工具
2.Word
3.PPT
4.美圖秀秀
5.PhotoShop（位圖軟件）
6.Ai（矢量圖軟件）
7.Indesign（排版強(qiáng)大，位圖+矢量圖，擅長(zhǎng)文字）
8.*draw（排版強(qiáng)大，位圖+矢量圖，擅長(zhǎng)文字）
9.網(wǎng)頁(yè)工具——秀米（做H5，做公眾號(hào)）
10.手機(jī)APP（如簡(jiǎn)書(shū)）

第二講：制作實(shí)戰(zhàn)篇（以PhotoShop為例）
一、圖片的基本知識(shí)
1.像素與矢量（函數(shù)）
2.位圖與位圖設(shè)計(jì)軟件（PS、美圖秀秀）
3.矢量圖與矢量設(shè)計(jì)軟件
4.圖片的存儲(chǔ)格式（jpg有背景，png背景透明，占空間，psd-PS，ai-AI,GIF動(dòng)圖等）
二、圖片的顏色模式
1.位圖模式（黑白模式）
2.灰度模式（與位圖模式的差別）
3.RGB模式（紅綠藍(lán)）
4.CMYK模式（打?。?br /> 5.Lab模式
三、圖片大小的影響因素
1.寬度與高度比例
2.分辨率

四、長(zhǎng)圖制作六步驟
1.設(shè)置圖片大小（寬高、分辨率）
2.圖片主色調(diào)選擇
3.設(shè)計(jì)長(zhǎng)圖背景
4.主字體選擇
5.圖層素材收集
6.圖文排版
五、圖層素材的來(lái)源
1.形狀工具的妙用
2.選區(qū)工具制作icon
3.PS筆刷
4.圖層素材網(wǎng)站（千庫(kù)網(wǎng)等）
5.圖層樣式的設(shè)置
六、版面設(shè)計(jì)工具
1.標(biāo)尺
2.網(wǎng)格線
3.參考線
4.對(duì)齊格式
七、圖片導(dǎo)出
八、H5設(shè)計(jì)理念知識(shí)點(diǎn)回顧（色彩、配色、風(fēng)格）

第三講：制作延展篇
1.秀米制作長(zhǎng)圖文（網(wǎng)頁(yè)端）
2.簡(jiǎn)書(shū)制作長(zhǎng)圖文（手機(jī)端）
注：課綱大綱可根據(jù)企業(yè)實(shí)際需求進(jìn)行調(diào)整，最終以課件內(nèi)容為準(zhǔn)！

H5和長(zhǎng)圖的制作培訓(xùn)