1.3.3 H5页面辅助设计工具

想要设计出好的H5页面效果，除了会使用H5设计平台中的相关功能外，辅助工具也是必不可少的。例如，页面中图片元素的处理、视频音频元素的处理等。下面对这些常用的处理工具进行介绍。

1.Photoshop软件

说起图像处理工具，自然就会想到功能强大的Photoshop软件了，如图1-25所示。它被广泛应用于各设计领域，当然也包括H5页面设计领域。利用Photoshop软件可以对H5页面版式进行设计，包括页面背景设计、图片效果设计、页面装饰设计等。

在用Photoshop软件进行设计时，需注意页面大小的设置。因为设计的H5页面最终要导入H5制作平台中，所以用户先要了解当前H5制作平台规定的画布尺寸，然后再根据该尺寸来设置Photoshop页面的大小。图1-26所示是易企秀平台导入PSD文件的要求。

2.Illustrator软件

Illustrator是一款专业的矢量设计软件，主要用于插画设计、图标设计、文字设计等方面，这些图形在H5中也是经常用到的，如图1-27所示。当然，用户还可使用一些轻量化的矢量图设计工具，例如Pixso、Sketch等。这些小工具会自带很多矢量图形的模板，用户可在模板的基础上进行二次编辑，使其符合制作需求。

3.After Effects软件

After Effects（简称AE）是一款专业的视频特效制作软件。利用AE可创建各种酷炫的视觉效果，让H5页面更加吸睛，如图1-28所示。

4.Audition软件

Audition是一款功能强大的音频处理软件。可进行音频录制、音频编辑、声音去噪、音频转换等，让声音文件更好地融入H5内容中，如图1-29所示。除此之外，GoldWave、Audacity、Sound Forge等软件也可以很好地处理音频文件。

5.其他辅助小工具

当导入的视频或音频文件不支持播放时，可以使用“格式工厂”软件进行格式转换处理。该工具不但能够转换文件格式，还能够对当前视频或音频文件进行压缩处理，以使其符合制作需求，如图1-30所示。

“格式工厂”软件可以对音视频文件进行转换压缩，但是对图片的压缩却无能为力。这时腾讯推出的一款“智图”工具就派上了用场。该工具可以轻松地将png、jpeg、gif等格式的图片进行压缩处理，压缩速度快、压缩率高，并支持WebP格式的生成，图1-31所示是智图官网界面。