我们在用PS设计图形文件的时候常常是多图层的，这些多图层的文件要正确在H5中进行呈现也是一个不大不小的难题，在这样的时候，我们就要找到一些方法与技巧。工具/原料moreH5PS方法/步骤1/6分步阅读

在PS中保持一个合理的页面比例，我们的H5的页面比例就是800px（宽） * 1424px （高），在设计之初就要按照这个比例进行。从而让图像可以在两个平台之间进行无缝的对接。

2/6

一些重要的处理工作。我们的设计师喜欢用一个个的文件夹来做出一张张的H5页面，我们所要做的就是把这些个不同的文件夹存储为一个个不同的PSD文件，然后再导入到H5当中去。这个时候，我们要注意两点，一个就是文件的大小不能超过20M，另一个就是字体都是删格化一下。

3/6

媒体图片。对于同样背景的图形文件，我们可以在H5当中的媒体中的图片选项进行一个统一的上传，把这个图片作为背景就可以了。其它的PSD文件再另外上传就行了。以于重要的无底图片，我们可以存储了PNG图形文件，进行一个图片上传就可以用了。

4/6

对于PS文件当中的图层也要进行不同的处理，对于不可见的图层就要进行一定的删除工作，对于一些可以合并的图层，我们就要将这些小的图层进行一个合并，从而让其进入到H5的过程尽量的简化（特别是一些有了图层选项效果的图形）

5/6

图层与组件。在PS中独立的图形就是一个图层，而在H5中这些独立的图层就是一个组件，我们要有概念上的差别，我们在H5中可以对于这些组件进行不同的动画、事件等个性化的操作。

6/6

修改。我们在制作完成了一个H5页的初稿之后常常需要进行一定的修改，这个修改也只要进行图片的更换就行了，非常的方便。

H5