我们在用PS设计图形文件的时候常常是多图层的,这些多图层的文件要正确在H5中进行呈现也是一个不大不小的难题,在这样的时候,我们就要找到一些方法与技巧。
工具/原料
H5
PS
方法/步骤
1、在PS中保持一个合理的页面比例,我们的H5的页面比例就是800px(宽)*1424px(高),在设计之初就要按照这个比例进行。从而让图像可以在两个平台之间进行无缝的对接。
2、一论蜈奈糍些重要的处理工作。我们的设计师喜欢用一个个的文件夹来做出一张张的H5页面,我们所要做的就是把这些个不同的文件夹存储为一邗锒凳审个个不同的PSD文件,然后再导入到H5当中去。这个时候,我们要注意两点,一个就是文件的大小不能超过20M,另一个就是字体都是删格化一下。
3、媒体图屡阽咆忌片。对于同样背景的图形文件,我们可以在H5当中的媒体中的图片选项进行一个统一的上传,把这个图片作为背景就可以了。其它的PSD文件再另外上传统潇瘵侃就行了。以于重要的无底图片,我们可以存储了PNG图形文件,进行一个图片上传就可以用了。
4、对于PS文件当中的图层也要进行不同的处理,对于不可见的图层就要进行一定的删除工作,对于一些可以合并的图层,我们就要将这些小的图层进行一个合并,从而让其进入到H5的过程尽量的简化(特别是一些有了图层选项效果的图形)
5、图层与组件。在PS中独立的图形就是一个图层,而在H5中这些独立的图层就是一个组件,我们要有概念上的差别,我们在H5中可以对于这些组件进行不同的动画、事件等个性化的操作。
6、修改。我们在制作完成了一个H5页的初稿之后常常需要进行一定的修改,这个修改也只要进行图片的更换就行了,非常的方便。