寫給大家看的H5頁(yè)面制作入門指南

1、精選文檔寫給大家看的H5頁(yè)面制作入門指南。 H5是最近兩年格外火的一個(gè)東西，什么是H5呢？通俗的說(shuō)就是那些經(jīng)常刷爆微信伴侶圈的手機(jī)網(wǎng)頁(yè)了。給大家舉個(gè)例子，長(zhǎng)按識(shí)別二維碼就可以查看。信任大家在這之前都或多或少有看到過(guò)這樣的頁(yè)面。無(wú)論是企業(yè)宣揚(yáng)，制作簡(jiǎn)歷、邀請(qǐng)函，還是制作紀(jì)念冊(cè)、表白，H5有著其格外廣泛的應(yīng)用。那這樣的頁(yè)面是怎么做出來(lái)的呢？其實(shí)一般人也可以輕松上手，今日三頓就來(lái)和大家共享一些H5制作的入門技巧，教大家如何做出酷炫的酷炫的H5頁(yè)面。-國(guó)際慣例放一個(gè)機(jī)靈的名目：工欲善其事必先利其器，不管是專業(yè)的設(shè)計(jì)師還是小白，制作H5頁(yè)面都會(huì)不行避開(kāi)的用到一些在線制作工具。然而目前的H5在線制作工具層

2、出不窮，不說(shuō)成百上千也有幾十種之多，三頓在這里為大家推舉幾款基礎(chǔ)和有用的。-MAKA（maka.im）要說(shuō)小白用哪一款H5制作工具比較好，我覺(jué)得首推的就是MAKA了。為什么這么說(shuō)呢？首先MAKA的操作頁(yè)面格外簡(jiǎn)潔，乍一看和PPT還有幾分相像。添加文字圖片都格外便利，輕松上手。其次MAKA中有大量做好的免費(fèi)模板，不需要大家設(shè)計(jì)，就可以通過(guò)模板來(lái)進(jìn)行制作。而且免費(fèi)模板的質(zhì)量也都格外的高，放張截圖你們感受一下。不僅有模板，內(nèi)置的素材也是一應(yīng)俱全。高清圖片、矢量圖標(biāo)，甚至連PPT中常用的數(shù)據(jù)圖表都可以直接套用。除此之外還有很多好玩的玩法，比如投票、倒計(jì)時(shí)、呼叫撥號(hào)等等的交互效果都可以一鍵實(shí)現(xiàn)，格外傻瓜

3、，大家可以自己去嘗試一下。最終，它還支持PSD格式的文件一鍵導(dǎo)入，大家可以用PS來(lái)制作頁(yè)面后直接導(dǎo)入到MAKA，生成H5頁(yè)面。-iH5（）MAKA可以說(shuō)是入門級(jí)的H5制作工具，秉承著少而精的原則，我覺(jué)得MAKA也是最適合大家使用的。那么除此之外呢也有很多專業(yè)設(shè)計(jì)師會(huì)用到的H5制作工具，支持制作各種動(dòng)效和交互效果，而我要給大家推舉的是這款叫ih5的在線工具?？错?yè)面就可以發(fā)覺(jué)有一種PS的既視感，所以格外專業(yè)，而我推舉給大家的緣由是里面預(yù)備了很多好的H5教程，從新手到進(jìn)階一應(yīng)俱全。同時(shí)它也預(yù)備了很多素材和案例供大家學(xué)習(xí)，所以假如真的想好好學(xué)一下H5的話建議大家可以嘗試這個(gè)平臺(tái)。H5工具我只推舉這兩款

4、，他們之間好比就是會(huì)聲會(huì)影和AE的關(guān)系，前者簡(jiǎn)潔易學(xué)后者高端專業(yè)卻內(nèi)置了很多教程，便利大家學(xué)習(xí)。然而其實(shí)使用這些工具也存在一些問(wèn)題，比如由于都是在網(wǎng)頁(yè)上制作，會(huì)消滅卡頓。另外工具中內(nèi)置的字體也不是很多，有時(shí)候沒(méi)有方法達(dá)到我們的效果。那么作為一個(gè)“堅(jiān)信PPT是萬(wàn)能的”的三頓，我們完全可以利用PPT輕松的制作出H5頁(yè)面。之前三頓有寫過(guò)一篇文章，教大家用PPT中修改頁(yè)面尺寸的方法制作微信封面圖，二維碼頁(yè)等等。其實(shí)一樣的方法也可以用來(lái)做H5。-接下來(lái)就為大家送上完整的PPT制作H5教程。首先我們需要在設(shè)計(jì)選項(xiàng)卡幻燈片大小中修改頁(yè)面尺寸，頁(yè)面尺寸調(diào)整為全屏顯示（16:10），然后頁(yè)面方向設(shè)置縱向。這樣以

5、后一個(gè)H5頁(yè)面的樣子就消滅在我們眼前了，我們要做的就是在這個(gè)頁(yè)面上添加所需的元素。在這里做一個(gè)舉例，在頁(yè)面上添加簡(jiǎn)潔的元素。其實(shí)這樣一個(gè)頁(yè)面就完成了，我們之后要做的是把頁(yè)面搬運(yùn)到H5在線生成工具中，這里以MAKA為例。方法也很簡(jiǎn)潔，在左上角的文件選項(xiàng)卡中選擇另存為，屬性勾選JPG格式，點(diǎn)擊保存。然后將保存好的圖片上傳到MAKA中，一個(gè)頁(yè)面就輕松的完成了。當(dāng)然每個(gè)平臺(tái)所需的PPT頁(yè)面尺寸不同，大家可以生成之后在網(wǎng)站上進(jìn)行進(jìn)一步的調(diào)整。這個(gè)方法適合做一些簡(jiǎn)潔的靜態(tài)頁(yè)面，假如大家想為頁(yè)面中的元素比如說(shuō)剛剛圖片中的文字加一些動(dòng)畫效果，那么處理就略微麻煩一些。我們需要在PPT中，將元素逐個(gè)保存為圖片，然

6、后導(dǎo)入MAKA，需要留意的是保存時(shí)要選擇保存為PNG格式，這樣元素背景才是透亮的。文字處理也是一樣，處理完后按PPT中的版式原封不動(dòng)搬運(yùn)到MAKA，然后逐個(gè)添加動(dòng)畫效果就可以了。學(xué)會(huì)PPT，走遍天下都不怕。真的是這樣，用最基礎(chǔ)的PPT技巧完全可以制作一個(gè)酷炫的H5頁(yè)面，讓你橫行整個(gè)公司。當(dāng)然雖然和PPT制作類似，但有幾個(gè)留意事項(xiàng)還是要在這里提示一下大家。首先是每個(gè)頁(yè)面上的元素不宜過(guò)多，這個(gè)和PPT道理一樣，要做到讓人一劃就過(guò)卻可以輕松地記住頁(yè)面上的信息。其次，頁(yè)面底部要適當(dāng)留空，由于每個(gè)頁(yè)面都有一個(gè)滑動(dòng)的效果，雖然很常用但也會(huì)有很多人不知道。所以大家要留意留出這個(gè)空間，讓觀眾可以看得清楚。除此之外也有很多可以一鍵實(shí)現(xiàn)PPT到H5頁(yè)面轉(zhuǎn)換的工具，我給大家推舉其中的一個(gè)，PPJ.JO，上傳PPT后可以之間生成H5格外便利。經(jīng)過(guò)測(cè)試，PPT中大部分動(dòng)畫效果都可以保留下來(lái)。但這個(gè)網(wǎng)頁(yè)還屬于測(cè)試階段，對(duì)于有的頁(yè)面轉(zhuǎn)化效果并不是特殊好。認(rèn)真看完今日的教程，我信任大家都可以輕松的做出一份還不錯(cuò)的H5頁(yè)面，當(dāng)然這些只是最基礎(chǔ)的技巧，做出專業(yè)水準(zhǔn)的H5還需要大家去嘗試和探究。但是用這些基礎(chǔ)的技巧去應(yīng)付我們經(jīng)常需要做的邀請(qǐng)函、簡(jiǎn)歷等等那確定是綽綽有余了。類似的H5制作平臺(tái)還有很多，比如Epub360、易企秀等等，