【使用前必看】素材资源一贴整合(图片、声音、视频)
在整个H5制作的时候,遇到最多的问题可能就是打不开,打开慢等这种类型
综合许多个案例后,我发现大部分的这种类型的问题基本上都是因为处理素材不到位造成的。
首先是科普:
H5的简称是Html5,说白了就是网页。
许多H5设计师是有过平面或者视频制作的经验的
跟平面不同的是H5的实际像素大小并不需要太高,所以一般来说只需要保证手机物理分辨率大小就足够使用了(一般是320*520,保证清晰度是640*1040)
跟视频制作不同的是H5存在一个实时的加载与运算的过程,一张图片的运动是实时运算的结果。而视频是全都打包好播放的。所以在H5里,内容不能太多太大(这个需要根据内容打开的载体判断,比如手机的运算能力肯定比不过电脑,所以有的H5在电脑上能打开,在手机上就打不开),而以后手机等移动硬件不断发展,与Html技术的改变,这个问题将不复存在。
其实很多问题在制作的过程中就能避免,这个需要时间以及经验。
现在就是分享经验的时间:
NO.1 图片素材的处理
首先最推荐使用的是PSD导入的功能
这个功能大家应该都清楚
入口在这个位置
或者这个位置
这不是重点,傻子都会用。
重点是:
如何处理PSD文件
这时候我们移步PS软件
1:首先需要将这个PSD的文件大小设置成合适的尺寸(推荐640*1040)
入口在图像-图像大小
快捷键是ctrl+alt+i
2:我们要检查平面大人做给我们的PSD,这些PSD充满了诡异的
这个
这个
以及这种东西
这个呢,是非常不负责任的表现。。。但是事情总是要人做的
所以我们必须把所有的
图层样式——栅格化
矢量图形——栅格化
智能对象——栅格化
图层叠加样式——去掉或合并
所有不动的图层或者一起动的图层——合并
这样,你会得到一个无比干净的PSD
类似于这样
上图就是之前一百个图层的最终结果。。。
然后导入PSD
在Mugeda里面用十分钟完成这个东西。
3:我们经常会遇到大量的需求,这样会使得整个H5不断扩大
这时候对于H5来说,每一KB都无比重要
这时候我们可以在mugeda里使用导出-导出到HTML文件包
查看一下素材的大小。
然后我们知道了哪些东西太大了之后,
可以把一些完整的满屏背景图,可以缩小成320*520这种小尺寸压缩导出为web格式,再给压缩70的质量
或者把一些其它的看起来大的png给单独压缩
这个也很重要
PS:
在PSD里导出单独的PNG可以在图层上点右键-快速导出为PNG,如果还觉得大的话可以用 www.tinypng.com
压缩
这时候图像文件基本没问题了。。。
GIF以及序列帧
另外大家如果使用GIF的时候,如果GIF太大,最好导出成序列帧放入mugeda里
GIF文件超过200KB就算大,1M算太大,2M算巨大无比,3M是流量杀手
序列帧的压缩可以使用ps文件的批处理功能(自己百度)
在mugeda内通过减少序列帧的帧数以及增快帧速的方法,减少图片数量,将大大缩小整个文件的体积。
NO.2 声音文件的处理
所有的声音文件,完全推荐使用这个软件去裁剪跟压缩:
MAC跟PC版本都有,百度可以查到,在Mugeda的各种QQ群里也都有下载
上图是我一般的压缩质量。。。。
背景音乐应该裁剪成一段50秒以内的,首尾都有淡入淡出的循环音乐
千万千万千万千万不要!!!!
千万不要把网上下载的一整首MP3直接丢进去!!!!
NO.3 视频文件的处理
MAC使用这个软件
这么设置
当然,我首先会在FCP这种软件里裁好视频文件的大小
一般就是320*520或者360*640就够了
PC使用格式工厂
设置也是跟上面一样。
所有视频都需要压缩!!!!!!!!!!
如果你嫌不清晰可以改高码率,但一定得压缩
mugeda的视频有20M的限制,如果视频过大可以先上传到自己的服务器或者优酷腾讯这种网站上
再导入
基本上按这种方法导入图片、制作声音跟视频的小伙伴,都能完美的避免很多问题。
希望大家也能有个好习惯。
综合许多个案例后,我发现大部分的这种类型的问题基本上都是因为处理素材不到位造成的。
首先是科普:
H5的简称是Html5,说白了就是网页。
许多H5设计师是有过平面或者视频制作的经验的
跟平面不同的是H5的实际像素大小并不需要太高,所以一般来说只需要保证手机物理分辨率大小就足够使用了(一般是320*520,保证清晰度是640*1040)
跟视频制作不同的是H5存在一个实时的加载与运算的过程,一张图片的运动是实时运算的结果。而视频是全都打包好播放的。所以在H5里,内容不能太多太大(这个需要根据内容打开的载体判断,比如手机的运算能力肯定比不过电脑,所以有的H5在电脑上能打开,在手机上就打不开),而以后手机等移动硬件不断发展,与Html技术的改变,这个问题将不复存在。
其实很多问题在制作的过程中就能避免,这个需要时间以及经验。
现在就是分享经验的时间:
NO.1 图片素材的处理
首先最推荐使用的是PSD导入的功能
这个功能大家应该都清楚
入口在这个位置
或者这个位置
这不是重点,傻子都会用。
重点是:
如何处理PSD文件
这时候我们移步PS软件
1:首先需要将这个PSD的文件大小设置成合适的尺寸(推荐640*1040)
入口在图像-图像大小
快捷键是ctrl+alt+i
2:我们要检查平面大人做给我们的PSD,这些PSD充满了诡异的
这个
这个
以及这种东西
这个呢,是非常不负责任的表现。。。但是事情总是要人做的
所以我们必须把所有的
图层样式——栅格化
矢量图形——栅格化
智能对象——栅格化
图层叠加样式——去掉或合并
所有不动的图层或者一起动的图层——合并
这样,你会得到一个无比干净的PSD
类似于这样
上图就是之前一百个图层的最终结果。。。
然后导入PSD
在Mugeda里面用十分钟完成这个东西。
3:我们经常会遇到大量的需求,这样会使得整个H5不断扩大
这时候对于H5来说,每一KB都无比重要
这时候我们可以在mugeda里使用导出-导出到HTML文件包
查看一下素材的大小。
然后我们知道了哪些东西太大了之后,
可以把一些完整的满屏背景图,可以缩小成320*520这种小尺寸压缩导出为web格式,再给压缩70的质量
或者把一些其它的看起来大的png给单独压缩
这个也很重要
PS:
在PSD里导出单独的PNG可以在图层上点右键-快速导出为PNG,如果还觉得大的话可以用 www.tinypng.com
压缩
这时候图像文件基本没问题了。。。
GIF以及序列帧
另外大家如果使用GIF的时候,如果GIF太大,最好导出成序列帧放入mugeda里
GIF文件超过200KB就算大,1M算太大,2M算巨大无比,3M是流量杀手
序列帧的压缩可以使用ps文件的批处理功能(自己百度)
在mugeda内通过减少序列帧的帧数以及增快帧速的方法,减少图片数量,将大大缩小整个文件的体积。
NO.2 声音文件的处理
所有的声音文件,完全推荐使用这个软件去裁剪跟压缩:
MAC跟PC版本都有,百度可以查到,在Mugeda的各种QQ群里也都有下载
上图是我一般的压缩质量。。。。
背景音乐应该裁剪成一段50秒以内的,首尾都有淡入淡出的循环音乐
千万千万千万千万不要!!!!
千万不要把网上下载的一整首MP3直接丢进去!!!!
NO.3 视频文件的处理
MAC使用这个软件
这么设置
当然,我首先会在FCP这种软件里裁好视频文件的大小
一般就是320*520或者360*640就够了
PC使用格式工厂
设置也是跟上面一样。
所有视频都需要压缩!!!!!!!!!!
如果你嫌不清晰可以改高码率,但一定得压缩
mugeda的视频有20M的限制,如果视频过大可以先上传到自己的服务器或者优酷腾讯这种网站上
再导入
基本上按这种方法导入图片、制作声音跟视频的小伙伴,都能完美的避免很多问题。
希望大家也能有个好习惯。
没有找到相关结果
已邀请:
3 个回复
smilejhj
赞同来自: m137714714
m137714714
赞同来自:
wxfbdef28ec8
赞同来自: