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

時間：2022-09-01 07:24:02 | 來源：網(wǎng)站運營

時間：2022-09-01 07:24:02 來源：網(wǎng)站運營

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


▼

▼

▼


字體工具

藝術(shù)字在線生成工具


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

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

1. 選擇自己喜歡的字體；
2. 比如隨便輸入一詞或語句標(biāo)題預(yù)覽；
3. 生成圖片，下載另存；

除了可以選擇字體樣式外，大多生成器還支持字號、字色及背景的選擇設(shè)置，小伙伴可以根據(jù)自己的喜好或需要來調(diào)整。

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


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

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

?【第一字體轉(zhuǎn)換器】書法字體轉(zhuǎn)換器在線轉(zhuǎn)換

?【QT86】藝術(shù)字體在線生成器 藝術(shù)字轉(zhuǎn)換器

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


圖片素材

常用的搜圖網(wǎng)站

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



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

Frickr：Filckr-storm、Compfight

圖蟲：圖蟲網(wǎng) - 最好的攝影師都在這


另外給人感覺比較文藝小清新的還有花瓣網(wǎng)、堆糖，沒事多去觀光總會有新發(fā)現(xiàn)。而且國內(nèi)外很多付費的網(wǎng)站圖片質(zhì)量都是相當(dāng)高的，小編還是希望小伙伴們多多支持圖片所有者，畢竟過活不易！


關(guān)于圖片壓縮的工具記得在前面【神器】一期有詳細介紹，

在這里再啰嗦幾句吧：

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

Tinypng：TinyPNG – Compress PNG images while preserving transparency


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


動態(tài)圖

GIF圖制作工具

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




推薦gif動態(tài)圖庫資源：GUIFFF – Animated Dribbble GIFsGIF動畫修改制作工具【Ulead GIF Animator】

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


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


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

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


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

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



背景音樂工具

BGM下載與制作

通常在選擇音樂時會希望用那些好聽的流行歌曲或電影配樂及輕音樂，但是往往那些音樂文件都比較大且不能直接上傳到H5編輯器內(nèi)，所以找到格式大小合適的音樂也需要費些時間。百度搜索音樂 ，音樂名稱+鈴聲，下載那種500kb、mp3格式的音樂；音效網(wǎng)下載（站長素材）：音效 音效素材 音效網(wǎng) 音效下載注意！背景音樂最好控制在500KB大小左右太大加載的時候會比較慢！但這些音效可能并不能滿足要求，又特希望使用自己收藏的音樂，那就需要親自動手制作背景音樂：簡單一點的如：酷狗鈴聲制作工具（如下圖），對于一些簡單音樂剪切基本媽滿足；

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




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


視頻工具

剪輯與制作


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

如一些搜圖的網(wǎng)站也提供視頻：我圖網(wǎng)

高清視頻網(wǎng)站：Pexels Videos


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

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

表單工具

回收數(shù)據(jù)與問卷

H5內(nèi)置的表單基本滿足了活動報名、邀請、包括一些問卷功能等，且一般都兼具大數(shù)據(jù)分析功能。但相對于專注于表單領(lǐng)域的一些工具，可能并不能滿足所有用戶的需求。于是提供以下幾個強大的工具平臺可供參考：

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


金數(shù)據(jù)：對微信的支持比較好，特別是微信增強包，非常強大；業(yè)務(wù)偏向營銷領(lǐng)域；會根據(jù)所選行業(yè)匹配模板；


巧思問卷：專注于問卷領(lǐng)域，



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


配色工具

色彩調(diào)和很重要

要讓作品更加協(xié)調(diào)，看起來舒服或更具視覺沖擊色彩搭配必不可少，那關(guān)于顏色的網(wǎng)站有如下幾個：

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 - 日本の伝統(tǒng)色 ：http://nipponcolors.com/


Adobe Kuler - 最專業(yè)，最好用

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




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

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


1. 能夠查看指定網(wǎng)站的配色

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

3. 配色可以發(fā)送Photoshop。


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

RealHex 作為一個拾取顏色并記錄顏色參數(shù)值的應(yīng)用，不僅僅是設(shè)計師，畫家，攝影師的專利，任何人都可以創(chuàng)造性地使用它，發(fā)掘你未曾發(fā)現(xiàn)的神奇用途！

另外，在選擇衣服、PS修圖，甚至染發(fā)、美甲、化妝時都能用上，避免產(chǎn)生色差。



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

最后只需再加一個H5制作工具，把你的idea轉(zhuǎn)化為漂亮的作品。

↓

↓↓

↓↓↓

↓↓↓↓


輕松制作H5


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

◆ ◆ ◆ ◆ ◆


∣H5互動營銷

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


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

Adobe Color CC其實個人覺得，H5也好，交互設(shè)計、平面也好，最終體現(xiàn)水準的是一種關(guān)懷，對用戶的關(guān)懷，裝x的說法就是所謂理念了。

但是對于一個制作者來說，體現(xiàn)其水平能力和價值的是最終結(jié)果，boss or leader都是看重成效的。

平臺與工具只是手段，界面與交互只是形式，表現(xiàn)與內(nèi)容則是態(tài)度，背后的訴求才是本質(zhì)！