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

时间：2022-09-01 07:24:02 | 来源：网站运营

时间：2022-09-01 07:24:02 来源：网站运营

每当看到一个特别牛X的H5作品的时候，是不是特想知道那谁是怎么做到的！！各种字体、美图、动画、精巧的搭配。。。强大的视觉冲击力直击小白的膝盖。为此小编把私藏多年的好货呈现出来，各位小伙伴记好哦！


▼

▼

▼


字体工具

艺术字在线生成工具


一般H5工具场景中没有提供太多字体，是因为手机不支持多字体。

如果想要多个字体，可以用艺术字生成工具，效果大大的！

1. 选择自己喜欢的字体；
2. 比如随便输入一词或语句标题预览；
3. 生成图片，下载另存；

除了可以选择字体样式外，大多生成器还支持字号、字色及背景的选择设置，小伙伴可以根据自己的喜好或需要来调整。

生成图片后（一般都是无背景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 GIFsGIF动画修改制作工具【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 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都是看重成效的。

平台与工具只是手段，界面与交互只是形式，表现与内容则是态度，背后的诉求才是本质！