图片网站一大堆,哪个质量高、下载快?

免费商用音乐素材哪里找?

有个网站能搞定所有场景音效你造不造?

图片压缩有神器?

H5工具哪个最牛逼?

...

本文所有素材网站和工具全部经过精挑细选,由iH5创作研究室亲自评测和层层筛选,均为实用和品味完美融合的极品。


一、图片素材网站。

1、特色素材网站。入选标准:独具特色、质量高、访问速度较快。

FFFFOUND

http://ffffound.com/

访问速度:                                      1.14s

下载速度:                                      92KB/s

一个由用户创建内容的网站。注册用户通过安装FFFFOUND提供的浏览器插件,可以把自己在任何网站上看到的图片添加到FFFFOUND。网站注册采取邀请制,保证的图片分享者的质量,由于品味独特加上邀请码的稀缺,目前一个邀请码在20美元左右。

推荐理由主要是,FFFFOUND不同于Pinterest这种以注册为目的的商业产品,它定位于为圈内个人贡献内容,通过严格控制的邀请制保证所有内容贡献者的质量,对于普通非注册用户而言可以随意浏览,无任何限制。所以其实如果不是真正想贡献优质内容的人,不需要注册即可享受FFFFOUND提供的内容。

Inspiration Grid

www.theinspirationgrid.com/

访问速度:                                    2.55s

下载速度:                                    93KB/s

正如其英文的含义,这是一个寻找灵感的网站,各种脑洞大开的作品和设计,可以给你带来一些创作的思路。

Behance

http://www.behance.net/

访问速度:                                    2.38s

下载速度:                                    15KB/s

著名设计社区,相信很多设计师都知道,涵盖领域较广,包括设计、时尚、插图、工业设计、建筑、摄影、美术、广告、排版、动画、声效等等。12年被Adobe收购。

NYPL Digital Collections

http://digitalcollections.nypl.org/

访问速度:                                    3.27s

下载速度:                                    65KB/s

“纽约公共图书馆”将馆藏数字化建立的网站。18 万张高画质相片,用户可以从在线检索,免费下载、无须取得官方授权。

BOOOOOOOM

www.booooooom.com/

访问速度:                                    4.03s

下载速度:                                    42KB/s

一家博客网站,涵盖的主题包括艺术、摄影、电影、音乐、设计等领域,作品质量很高,而且是以博文的形式推荐。

2、免费商用素材网站。入选标准:访问速度快、质量高、素材丰富。

这几个就不详细介绍了,都是免费商用的高清图片,而且重要的是访问速度快,亲测可用。

Pexels

http://www.pexels.com/

速   度:

质   量:

丰富度:

Gratisography

http://www.gratisography.com/

速   度:

质   量:

丰富度:

Death ToStock Photos

http://deathtothestockphoto.com/

速   度:

质   量:

丰富度:

Raumrot

http://raumrot.com/

速   度:

质   量:

丰富度:

Pixabay

https://pixabay.com/

速   度:

质   量:

丰富度:

其他图片来源推荐:

大众搜索:除了Google Baidu Bing以外,推荐俄罗斯的搜索引擎Yandex.ru,速度较快,质量堪比Google。

摄影、景物:图虫网、中国国家地理

付费商用:Yestone

二、音乐/音效素材来源,剪辑/压缩软件

同样的,入选标准是访问速度较快,质量高,免费可下载。

1、Jamendo

https://www.jamendo.com/

Jamendo 数据库拥有超过 350,000 个音乐素材,包括许多不同语言、国家的音乐。有方便的搜索功能,并且它也有自己在线电台,可以边听边下载。

2、Freesound

http://www.freesound.org/

非常丰富并且质量超高的音效素材网站,是一个 Creative Commons 授权音乐的多人协作数据库,收录了许多声音效果,如环境噪音、和成音效或透过乐器所制作的音乐。注册免费账户后,你可以下载素材也可以上传自己制作的音频至他们的数据库。

在这个网站,你可以找到任何想要的音效素材,特别是一些环境效果,比如闹市、公园的人声,鸟鸣和树叶声,恐怖阴森的风声等等,

3、Adobe 免费音效包

http://t.cn/RZ5doVV

Adobe提供的免费音效,非常丰富,包括环境氛围、卡通、人物、自然、科技等近30个类别,重点是直接免费下载,可商用。

其他相关推荐:

国内非商用下载:首推网易音乐,质量高,无限制下载;另外,分享之前 iH5创作研究室 推荐的背景音乐  点这里试听、查看音乐名称>>

音乐剪辑软件:CoolEdit,非常好用的音乐剪辑软件,可以消除人声、多音轨混合、淡入淡出处理等等,还可以压缩音乐。如果你是Mac用户,可以用系统自带的GarageBand。同样可以剪辑和压缩音频。

三、小众超优质素材源和小工具

找icon:Easy icon

http://www.easyicon.net/

推荐理由:所有icon素材网站访问速度最快,体验最好的。主视觉萌萌哒。

图片压缩:TinyPNG

http://tinypng.com/

推荐理由:第一次用就被吓到了,活生生把200K的图片压到40K,质量基本无差。基本所有PNG格式的图片都能压缩掉60%以上。算法太牛。

GIF录制软件:Screen GIF(Windows系统)/GIFGrabber(苹果系统)

推荐理由:方便快捷,可以截取屏幕上的任何动态图像。不过在调整GIF大小方面,这两个软件只能调节图像大小和帧数,如果要进一步压缩,可以配合PS一起用,基本完美。

四、H5制作工具

准备好图片、动画、音乐,最后你还需要H5工具来实现一个炫酷的H5作品。以下在各个类别中列举几个典型的工具推荐大家使用:

离线动画软件:Adobe Animate CC、Google Web Designer、Hype

特点:以动画制作为长,离线操作,需服务器部署

典型代表:Adobe Animate CC

动画制作:                                   5.0分

交互制作:                                   2.5分

高效易用:                                   2.0分

作为设计工具类的鼻祖级,Adobe的产品在体验和功能上还是非常棒的,唯一不足的是,导出来的HTML5 canvas文件还需要配合前端代码实现和部署,如果需要添加交互的动作也需要一定的代码基础,对不懂编程的设计师难度较大。Google的那个主要用于做HTML5动态banner,Hype是苹果员工创业做的,跟An类似。

不过An的动画制作是最精细的,原理上比较接近物理世界,以下介绍一下时间轴动画的制作和界面:

如图所示为An的动画制作页面,主要就是舞台和时间轴面板,基本的机构就是舞台>层1 层2 层3...,时间轴>层1轨迹层2轨迹层3轨迹,可以说时间轴就是整个动画最顶级的对象,所有层的动作都由时间轴控制。其中每个层的轨迹又包含四个属性:X轴位置,Y轴位置,X方向缩放,Y方向缩放。通过设置每个属性随时间轴变化的曲线,就能组合出复杂动画。

举个例子,让小球往右运动,减速至零再返回,X轴位置随时间轴变化的曲线是这样的一个抛物线,抛物线的两端是关键帧:

当然,如果是匀速向右运动,那就是一条斜线了,以此类推,配合其他属性的曲线,可以做出多种变速运动/变形动画。

在线可视化H5制作工具:iH5、Wix、Weebly、Mugeda

特点:以交互为长,可视化界面,在线编辑和发布

典型代表:iH5

动画制作:                                   4.0分

交互制作:                                   5.0分

高效易用:                                   3.5分

iH5综合水平比较高,产品设计的初衷就是用可视化操作替代传统的编程,在易用性和动画/交互制作上的平衡较好,属于能达到编代码效果的小白工具。Adobe虽然可以做很复杂的动画,但是对一般用户而言即使做出来也不知道怎么部署和应用,可能更适合作为H5前端开发的辅助性工具。

Wix和Weebly以PC端HTML5建站为主,类似WordPress的模板编辑模式,功能自由度低,勉强归在这一类别。Mugeda动画功能还不错,但易用性和交互方面有待改善。本文只推荐同类最佳,这几个不多介绍,大家有兴趣可以自行体验。

iH5属于所见即所得的做法,可视化界面操作,做出来的东西直接在线发布就可以使用,对不懂编程的设计师或普通用户而言实用性较高。

动画制作上,iH5在单个动画的结构也是时间轴>轨迹1 轨迹2 轨迹3... 的形式,跟Adobe不同的地方是:

1、iH5可以添加多个时间轴,并且不同的时间轴可以相互控制,比如让时间轴1播放到N秒时,触发时间轴2播放动画。

2、iH5不是每个位置/变形属性都设置随时间轴变化的曲线,它采取的是更傻瓜化的做法,通过设置起始关键帧的不同属性值,自动补充动画,类似于Flash的补间动画。

举个例子,让飞镖向右运动并旋转逐渐消失,需要在小球的轨迹下添加两个关键帧并设置小球的属性值:

关键帧1(时间轴=0秒)小球属性:X=0,Y=0,透明度=100%,旋转=360度

关键帧2(时间轴=3秒)小球属性:X=500,Y=0,透明度=0%,旋转=360度

这样时间轴播放的时候,飞镖就会同时变化X和透明度的值,实现向右运动并旋转消失的效果。

iH5是以交互为长,除了做H5动画以外,更有价值的是交互的制作。比如现在比较流行视差网站,交互式动画,响应式微官网,小游戏,弹幕这些,都是属于交互式H5的范畴。

展示类H5编辑工具:Epub360、兔展、易企秀、Maka、Prezi

特点:以信息展示为主,在线编辑

典型代表:Epub360

动画制作:                                  3.0分

交互制作:                                  2.0分

高效易用:                                  3.5分

Epub360相对于其他几个有更强的交互功能,不过本质上是PPT的逻辑,操作上也比其他三个工具要难些。兔展、maka、易企秀目前以满足C端或者商家的简单展示需求为主,所以产品形态比较简单。Prezi则专注于在线PPT演示。

之所以归到一类,主要是从产品逻辑上考虑,形象一点说明:易企秀到Epub360,是 1到2 的关系,而易企秀到iH5,是 1到A 的关系,第二种变化已经不属于同一体系和功能。

PPT动画其实是以动画为单元的,把元素的常见动画抽象打包,然后每个动画可以设置延迟,先后顺序,以此来实现组合式动画。基本的结构是 动效1>动效2>动效5>动效4>动效3。

举个例子,还是飞镖向右运动然后逐渐消失。需要给小球添加针对每种属性的动效,然后设置延迟和顺序:

添加向右运动的动效:持续时间=3秒,延迟=0,出现方式=上一个之后开始

添加渐隐的动效:持续时间=3秒,延迟=0,出现方式=和上一个一起开始

添加旋转的动效:持续时间=3秒,延迟=0,旋转角度=360度,出现方式=和上一个一起开始

Epub这种动画处理方式,属于顺序执行的,对于简单的动画操作会更容易上手,但如果动画相对复杂,并且涉及很多交互,则容易显出弊端,因为模块化的动效组件是没办法控制中间状态的。

比如渐隐这种动效,你只能从不透明到透明,而无法从不透明变到半透明;另外,如果动效的队列很长,各种延迟和持续时间很难计算,一旦有交互要跳转到某个页面或动画,PPT式的动画逻辑复杂度会非常高。

整体而言,这几类工具的对比如下:

如果对内容质量要求不高,以信息展示为主,并且希望快速产出,选用兔展、易企秀之类的工具更合适。

如果对内容质量要求高,涉及到动画、交互的制作,则选用iH5、Adobe之类的工具更合适。编程的话,自由度更高,但人力投入、时间成本也高。