H5製作都有哪些輔助工具？

12-30

目前市面上已經有很多H5製作軟體了，功能大同小異，能夠滿足日常需求，但是想製作出比較高質量的作品還是要很多輔助的工具，特別是對於小白如有些便捷的工具，將事半功倍！

每當看到一個特別牛X的H5作品的時候，是不是特想知道那誰是怎麼做到的！！各種字體、美圖、動畫、精巧的搭配。。。強大的視覺衝擊力直擊小白的膝蓋。為此小編把私藏多年的好貨呈現出來，各位小夥伴記好哦！

▼

字體工具

藝術字在線生成工具

一般H5工具場景中沒有提供太多字體，是因為手機不支持多字體。

如果想要多個字體，可以用藝術字生成工具，效果大大的！

選擇自己喜歡的字體；
比如隨便輸入一詞或語句標題預覽；
生成圖片，下載另存；

除了可以選擇字體樣式外，大多生成器還支持字型大小、字色及背景的選擇設置，小夥伴可以根據自己的喜好或需要來調整。

生成圖片後（一般都是無背景png格式）就可直接導入H5編輯器進行操作了。

下面小編列舉了幾個常用的在線生成器，供大家查看選用：

?【毛筆字在線生成器】毛筆字在線生成器

?【第一字體轉換器】書法字體轉換器在線轉換

?【QT86】藝術字體在線生成器藝術字轉換器

文字有了，可能你會為找不到合適的配圖犯愁，所以收藏幾個常用的圖片素材網站也是很有必要的。

圖片素材

常用的搜圖網站

找圖片一般都在瀏覽器搜索框直接鍵入相關標籤，就能搜到很多各式各樣的圖，比如百度圖片搜索、搜狗搜索、360搜圖等。但是一般得到的結果圖是很有限的，清晰度也未必到達要求，更尷尬的是可能會涉及版權問題哦。

設計一個作品的時候需要的圖片素材大都高清、寬幅且富有創意、視覺衝擊，所以給大家推薦一些較為專業或分類比較齊全、圖片質量較高的搜圖網站：
千圖網：千圖網_專註免費設計素材下載的網站
500px：www.500px.com

Frickr：Filckr-storm、Compfight

圖蟲：圖蟲網 - 最好的攝影師都在這

另外給人感覺比較文藝小清新的還有花瓣網、堆糖，沒事多去觀光總會有新發現。而且國內外很多付費的網站圖片質量都是相當高的，小編還是希望小夥伴們多多支持圖片所有者，畢竟過活不易！

關於圖片壓縮的工具記得在前面【神器】一期有詳細介紹，

在這裡再啰嗦幾句吧：

智圖：智圖_圖片壓縮在線工具

Tinypng：TinyPNG – Compress PNG images while preserving transparency

如果你還需自己進行一些圖片製作，設計高手用Photoshop，普通用戶用美圖秀秀也基本滿足，但是但是靜態的圖片可能太單調，你還需要一些動態元素，比如gif圖、flash動畫等。

動態圖

GIF圖製作工具

提到動態圖大家首先想到的也許會是微信、qq上漫天飛舞的表情包，但H5的動圖有別於那些表情，展示是一種場景。GIF圖素材的加入會讓你的作品更加富有變化與動感，特別是一些具有魔性的動態圖。

推薦gif動態圖庫資源：GUIFFF – Animated Dribbble GIFs
GIF動畫修改製作工具【Ulead GIF Animator】

Ulead GIF Animator——友立公司出版的動畫GIF製作軟體，內建的Plugin有許多現成的特效可以立即套用，可將AVI文件轉成動畫GIF文件，而且還能將動畫GIF圖片最佳化，能將你放在網頁上的動畫GIF圖檔減肥，以便讓人能夠更快速的瀏覽網頁。Ulead GIF Animator操作簡單，如果你不太會使用ps製作gif圖片，建議使用這款軟體。

在這小編忍不住要提到的一款神器是：微信對話生成器

比方說生成微信對話的工具，在朋友圈搞代購的人估計最精通，你懂的，還有生成朋友圈狀態點贊的工具。生成微信對話的可以用下面這個：

（滿滿的套路有木有~~/(ㄒoㄒ)/~~）

ps：如有需要可以在度娘搜破解版哦~

文字、圖片都有了，動作都添加好了，可能你還需要一首合適的BGM!

背景音樂工具

BGM下載與製作

通常在選擇音樂時會希望用那些好聽的流行歌曲或電影配樂及輕音樂，但是往往那些音樂文件都比較大且不能直接上傳到H5編輯器內，所以找到格式大小合適的音樂也需要費些時間。

百度搜索音樂，音樂名稱+鈴聲，下載那種500kb、mp3格式的音樂；
音效網下載（站長素材）：音效音效素材音效網音效下載
注意！背景音樂最好控制在500KB大小左右太大載入的時候會比較慢！

但這些音效可能並不能滿足要求，又特希望使用自己收藏的音樂，那就需要親自動手製作背景音樂：
簡單一點的如：酷狗鈴聲製作工具（如下圖），對於一些簡單音樂剪切基本媽滿足；

進階一些的如 :Goldwave ,一個功能強大的數字音樂編輯器，是一個集聲音編輯、播放、錄製和轉換的音頻工具。它還可以對音頻內容進行轉換格式等處理。

有音樂了可能還不滿足，有時候還希望加一些短視頻之類的素材，但是一般糖在H5作品中加入太長的視頻是會影響載入與瀏覽的，如真的需要還是需要進行剪輯處理。

視頻工具

剪輯與製作

除了一些常用視頻網站可以下載視頻，一些專門提供視頻素材的網站想必更聚焦、更便捷。

如一些搜圖的網站也提供視頻：我圖網

高清視頻網站：Pexels Videos

對搜集來的素材進行處理下面推薦幾個工具：

入門：愛剪輯，簡單易用，輕鬆上手，應對常規的視頻剪切任務足夠了；
進階：會聲會影，可以進行圖片、音樂、文字等素材組合、製作、效果添加等等，
高階：PR/AE，兩者結合使用能夠製作出史詩級大片，當然這個需要一些專業知識，操作也較為複雜，需要耐心。

表單工具

回收數據與問卷

H5內置的表單基本滿足了活動報名、邀請、包括一些問卷功能等，且一般都兼具大數據分析功能。但相對於專註於表單領域的一些工具，可能並不能滿足所有用戶的需求。於是提供以下幾個強大的工具平台可供參考：

麥客：組件化的設計、可對所需項進行拖拽設置、且有模板可供選用進行替換或自定義；

金數據：對微信的支持比較好，特別是微信增強包，非常強大；業務偏向營銷領域；會根據所選行業匹配模板；

巧思問卷：專註於問卷領域，

當所有的素材都有了，可就是對畫面無感，看似花哨其實凌亂無章法，比如排版與色彩搭配等，那此時你可能需要一個配色工具來協調輔助整個畫面了。

配色工具

色彩調和很重要

要讓作品更加協調，看起來舒服或更具視覺衝擊色彩搭配必不可少，那關於顏色的網站有如下幾個：

Kuler ： http://kuler.adobe.com/

0to255：0to255 a€「 A simple tool that helps web designers find variations of any color

HTML Color Codes ：http://html-color-codes.info/

NIPPON COLORS - 日本の伝統色：http://nipponcolors.com/

Adobe Kuler - 最專業，最好用

Adobe 家的 Kuler 了，其幾十年在平面設計領域的深厚底蘊，使得這款配色應用有著足夠的技術分量。專業、好用，或許是很樸素的辭彙，但形容這款 App 再合適不過了。

http://EyeDrop.me - 視覺設計師的好助手

作為一名視覺設計師，在方案伊始，經常會為如何做出一套好的配色方案而糾結，通過一張漂亮的風景照片從中提取出若干個顏色進行搭配，就是一種比較常見的做法。

1. 能夠查看指定網站的配色

2. 隨手拍照，生成獨特配色表

3. 配色可以發送Photoshop。

RealHex - 拾色器還可以這麼用！

RealHex 作為一個拾取顏色並記錄顏色參數值的應用，不僅僅是設計師，畫家，攝影師的專利，任何人都可以創造性地使用它，發掘你未曾發現的神奇用途！

另外，在選擇衣服、PS修圖，甚至染髮、美甲、化妝時都能用上，避免產生色差。

如果以上的輔助工具拿在手，你是不是趕腳H5製作so easy了！

最後只需再加一個H5製作工具，把你的idea轉化為漂亮的作品。

↓

↓↓

↓↓↓

↓↓↓↓

輕鬆製作H5

看了那麼多，小編沒有功勞也有苦勞(⊙o⊙)哇，你不關注下嗎？↓↓↓↓↓↓

◆ ◆ ◆ ◆ ◆

∣H5互動營銷

————————————————————————————————————————————————————————————————————分割線

補充：配色的輔助工具其實也很多，比如:

Adobe Color CC

其實個人覺得，H5也好，交互設計、平面也好，最終體現水準的是一種關懷，對用戶的關懷，裝x的說法就是所謂理念了。

但是對於一個製作者來說，體現其水平能力和價值的是最終結果，boss or leader都是看重成效的。

平台與工具只是手段，界面與交互只是形式，表現與內容則是態度，背後的訴求才是本質！

自己就是H5設計師，來說說製作整個H5大概的流程：

根據用戶可以分三大類

專業企業用戶：

這一類用戶要求較高，大品牌公司居多，它們擁有專業設計師或者找專業的設計公司設計好頁面來進行製作。

專業個人用戶：

自己本身就是設計，不用和設計公司合作，自己做好頁面再選擇好H5製作平台直接一鍵上傳psd，然後設置一下動畫方式，最後保存即可。在設計中所用到的軟體住要就是ps，AI也可以，不過最後需要導出psd格式文件。因為H5製作平台上傳的文件要求一般都是psd格式。

普通用戶：

普通用戶一般不會設計，也沒有打算找專業設計製作頁面，可以套用H5平台模板，這種形式是便捷的。

H5主要用途：

H5平台通常於活動宣傳、品牌宣傳、新品發布、品牌營銷、招聘等的一款營銷運營工具。

每個H5製作公司都有自己特色的地方，根據公司的要求選擇適合的H5製作尤為重要。本人接觸H5設計有1年多了，會根據公司要求，做微信活動圖片較多，經常會使用人人秀來製作一些互動較多的微信活動功能。可以實現照片投票，答題，紅包等等，最主要也可以實現一鍵上傳psd特別方便。

H5精品案例網站可以供大家參考：

數英網

愛果果

H5創意會

素材網站推薦

素材中國

淘圖網

花瓣網

H5的輔助工具有很多，好用和簡單是關鍵哦！除了蔡俊豪概括了的眾多工具之外，還有一些小技巧可以讓我們的效率更高！例如我們在H5頁面製作的時候，會經常遇到上傳的圖片過大上傳失敗的情況，下面我介紹兩個超級簡單的圖片壓縮輔助工具。

方法一：只需要用到電腦里的畫圖工具。

1.我有一幅照片，如下圖，壓縮前的大小為1.8m，尺寸為4000x2500。

2.滑鼠右擊我們要壓縮的圖片，找到「打開方式」，單擊它，在右側的擴展頁選擇「畫圖」，這個時候，就用畫圖程序打開了我們要壓縮的圖片。

3.進入畫圖程序後，如果圖片太大，這個時候，你的屏幕是看不到整張圖片的，不用理會它，單擊工具欄的「重新調整大小」。

4.這個時候，你有兩種方式來調整圖片大小，一種是根據百分比，另一種是根據像素。我們先來看看百分比如何應用，首先，選擇百分比選項；然後水平和垂直選項默
認值是100，假如你設置為50，就是調整50%，也就是圖片會縮小一半。假如你選擇150，就是調整150%，圖片會擴大1.5倍。百分比的缺點就是你不能判斷縮小後圖片的尺寸。「保持縱橫比」的選項下面講解。

5.第二種是根據像素來調整，選擇像素選項，這個時候，你發現水平值*垂直值=3264 * 2448，這個就是我們圖片的原始大小。根據實際情況，設置圖片的大小尺寸，我們將水平改為500，垂直值會自動變為375（至於垂直的值為什麼會自動改
變，見下面步驟分析）。這個時候，圖片大小和尺寸都已經改變了，可以在屏幕看到整張完整的圖片了。

6.前面兩個步驟提到了「保持縱橫比」，這個選項如果打鉤，垂直和水平是同等放大和縮小的，這樣原來的圖片就不會變形。否則，假如你不勾選此選項，水平和垂直的值雖然可以任意更改，但是會造成圖片被拉伸了或者壓扁了，就失真了。請看下面的對比圖。

7. 修改完以後，要點擊另存為，一般保存為jpg格式。切記不要直接保存，因為你圖片已經縮小了，像素已經降低了，如果你直接保存，原始圖片的像素變小了，假如你發現圖片改的太小了，想要再放大，由於像素變小了，你再放大圖片已經不清晰了，所以請用另存為存儲圖片。

再來看看，修改後圖片的大小和尺寸吧。

大小：202K

尺寸：1000 * 625

圖片縮小了近10倍。

方法二:直接使用自帶的截圖工具

這個方法就更簡單了，可以使用QQ截圖（快捷鍵Ctrl+Alit+A）或者瀏覽器截圖工具。我就是用QQ的截圖功能的。下面演示一下。

1. 在電腦里打開要壓縮的圖片。（原大小為1.8m，尺寸為4000x2500）

2. 使用QQ的截圖功能，把原圖截下來。

3.
截好後點擊菜單欄里的保存功能，以JPG的格式保存到電腦桌面。

4. 在桌面找到保存好的截圖。查看它的屬性，就知道大小改變了。現在大小為：43.7K。幾乎壓縮了40倍，而且對圖片的清晰度影響不大。

-------------------------------------------------------------------------------------------------------------------

希望以上整理的兩個工具可以讓更多的小夥伴看到哦！畢竟如果不是批量壓縮圖片的話，用截圖工具和畫圖工具來壓縮圖片是比PS好用太多！

下面來個小硬廣~我是MAKA的H5設計師，有問題歡迎來諮詢我哦~~~

MAKA是一款簡單、強大的在線H5創作平台，可以輕鬆設計精美的邀請函、節日賀卡、產品宣傳頁等等，是你在移動社交化時代的社會化營銷利器！詳情瀏覽官網：http://maka.im/。

很多人都在說H5，H5是啥？舉個例子說說。

甲方：幫我做個酷酷的H5！

乙方：我想知道你說的是啥？？？

顯而易見！出現了兩種對H5的解讀。

客戶，也就是人類。對H5的認知便是能夠活躍於移動端的炫酷的、可以轉發鏈接，可以玩的、看的、聽得、動的，甚至還可以裝個X的有時候是圖文、有時候是視屏的，能夠實現營銷推廣的頁面！

（多字預警，高能預警！）

但是！逆天的反人類的前端程序猿不樂意了！

來來來，燈光師，攝影師，話筒都拿來，程序猿們開始你的表演！

首先要科普一下！ HTML5並不是一項技術，而是：

一個標準！

我這樣說你就明白了吧，既然是一個標準，那就有相應的內容！你們甲方要的東西實際上是這個標準下的內容：（簡單介紹一下）

1.頁面素材預載入技術，可以使用createJS之中的preloadJS。

2.音樂載入播放技術，createJS中同樣有soundJS可以實現。
3.可以滑動的頁面，大多數是用了swiper.js這個Jquery插件，也有一些是手寫的swipe。

4. 可以塗抹擦除，多半是canvas疊加層。

5. 有動態的文字和圖片，常見的是使用了css3或者直接使用js動畫。

6. 可以填表報名，這是最基本的表單，是有網頁以來就有的東西。
7. 可以支持分享自定義的文案和圖片，這個是用到了微信的jssdk，和HTML標準半毛錢關係都沒有。

8.等等.......

好吧，我承認，我強迫症了，強迫出了風格，強迫出了水平！

程序猿最大悲哀在於明明想裝作聽不懂的樣子，卻不得不的表現出你說的都對的樣子！

但是既然是逆天的程序猿就得對需求保持冷靜！

活躍於網路上各式各樣的『H5』（不想說，卻還要說，這就是愛吧！）製作平台把前端的飯碗變成了

PPT！

做一個『H5』就像做一個PPT！

你還要我怎樣，要我怎樣，別把一個猿類的飯碗砸光！

好吧，我也承認，這些基本能滿足一些客戶淺顯的要求了......

客戶老爺們，創意再好，沒有猿猿的實現，靠著『PPT』也是難以實現的！再說，你們口中的炫酷的模板，人家平台會免費給你用嗎，人家不傻的，醒醒吧，大清都亡了！好的創意本身就不應該被框架所限制，言下之意你還不懂嗎？啊？需要技術人員啊！！！

真是醉醉噠！你說的H5我不懂，我希望的你不懂，能不能靠譜點進行『外交』啊！說實話市面上H5定製的平台也不在少數，但是你懂得，人人都想來分一杯羹就會破壞市場，濫竽充數那是相當嚴重！簡直不能忍！還好作為技術界的一顆被埋沒的star，依然要毅然決然的站起來說句話。

說到底，我只想說：認清事物本質，給技術人員以及想學前端的童鞋一個專業訴求，不然會誤導一個新人說：我要學『H5』！

學什麼？我聽不清！你大聲點！

看我不打爆你的頭！

想做『H5』？乖乖的去學所有前端的基本知識吧！

有事說事，沒事吐槽！

我寫一點，抄一點，混著唄！

你看一遍，又一遍，謝謝啊！

（文中無意冒犯可愛的程序員，眼花繚亂的世界你們功不可沒，怒贊！）

這個要看樓主的需求了，如果你只是個人想玩一些簡單營銷方案，可以選擇的工具很多啊，類似於兔展、易企秀、MAKA等這些都可以用，裡面有很多模板，不過不能實現深度交互。如果你是企業新媒體部門或者做新媒體想做深度營銷需要製作H5的，推薦你用ih5或者是Epub360，但是總的來說ih5的功能和交互性上來講的話還是要更好一些。

我自己是在凡科微傳單那裡找模板做的，這個比較簡單，適合一些什麼都不懂的新手們，不需要你懂什麼技術，只要跟著提示步驟做就可以