一个H5设计师的自我修养，应该如何处理素材？

“我流量都耗了，你就给我看这个”

H5做的再酷再炫有什么用？你倒是能打开啊！

 

在整个H5制作的时候，遇到最多的问题就是打不开，打开慢等这种情况，综合许多个案例后，我发现大部分大部分问题都出在处素材处理不到位。

一、首先来科普一下

H5的简称是HTML5，说白了就是网页。

 

许多H5设计师是有过平面或者视频制作经验的，跟平面不同的是H5的实际像素大小并不需要太高，一般来说只需要保证手机物理分辨率大小就足够使用了。（一般是320*520，保证清晰度是640*1040）

 

跟视频制作不同的是H5存在一个实时的加载与运算的过程，一张图片的运动是实时运算的结果，而视频是全都打包好播放的。所以在H5里，内容不能太多太大（这个需要根据内容打开的载体判断，比如手机的运算能力肯定比不过电脑，所以有的H5在电脑上能打开，在手机上就打不开），而以后手机等移动硬件不断发展，与HTML5技术的改变，这个问题将不复存在。

 

其实很多问题在制作的过程中就能避免，这个需要时间以及经验。

二、经验分享

前期准备：

H5工具：Mugeda

浏览器：下载Chrome浏览器，这是对H5支持最好的，方便边做边调试

 

（1）图片素材的处理

首先最推荐使用的是PSD导入的功能，这个功能大家应该都清楚，入口在这个位置。

或者这个位置

这不是重点，重点是：如何处理PSD文件？

 

这时候我们移步PS软件

 

*首先需要将这个PSD的文件大小设置成合适的尺寸（推荐640*1040）

入口在图像-图像大小

快捷键是ctrl+alt+i

*我们要检查平面大人做给我们的PSD，这些PSD充满了诡异的

这个

这个

以及这种东西

这个呢，是非常不负责任的表现……但是事情总是要人做的。所以我们必须把所有的：

 

图层样式——栅格化

矢量图形——栅格化

智能对象——栅格化

图层叠加样式——去掉或合并

所有不动的图层或者一起动的图层——合并

 

这样，你会得到一个无比干净的PSD，类似于这样：

*我们经常会遇到大量的需求，这样会使得整个H5不断扩大，这时候对于H5来说，每一KB都无比重要，这时候我们可以在Mugeda里使用导出—导出到HTML文件包，查看一下素材的大小，然后我们知道了哪些东西太大了之后，可以把一些完整的满屏背景图，可以缩小成320*520这种小尺寸压缩导出为web格式，再给压缩70的质量，或者把一些其它的看起来大的PNG给单独压缩

 

还有一个也很重要：在PSD里导出单独的PNG可以在图层上点右键—快速导出为PNG，如果还觉得大的话可以用www.tinypng.com压缩

 

这时候图像文件基本没问题了。

2）GIF以及序列帧，请注意以下四点

*另外大家如果使用GIF的时候，如果GIF太大，最好导出成序列帧放入mugeda里。

*GIF文件超过200KB就算大，1M算太大，2M算巨大无比，3M是流量杀手。

*序列帧的压缩可以使用ps文件的批处理功能（自己百度）。

*在mugeda内通过减少序列帧的帧数以及增快帧速的方法，减少图片数量，将大大缩小整个文件的体积。

 

（3）声音文件的处理

所有的声音文件，推荐使用这个软件去裁剪跟压缩：

MAC跟PC版本都有，百度可以查到，在Mugeda学习QQ群（群号：263360290）里也都有下载：

上图是我一般的压缩质量。

 

背景音乐应该裁剪成一段50秒以内的，首尾都有淡入淡出的循环音乐

千万千万千万千万不要！！！！

千万不要把网上下载的一整首MP3直接丢进去！！！！

 

（4）视频文件的处理

*MAC使用这个软件

这么设置

当然，我首先会在FCP这种软件里裁好视频文件的大小，一般就是320*520或者360*640就够了。Windows使用格式工厂，设置也是跟上面一样。

 

所有视频都需要压缩！！！！！！！！！！如果你嫌不清晰可以改高码率，但一定得压缩!

Mugeda的视频有20M的限制，如果视频过大可以先上传到自己的服务器或者优酷腾讯这种网站上再导入。

 

基本上按这种方法导入图片、制作声音跟视频的小伙伴，都能完美的避免很多问题。