设计师如何快速制作H5——​PSD一键转H5技能get

时间:2024-10-11 21:31:08

1、登录人人秀官网,在我的场景里可以找到【创建场景】选项,如图红框位置所示。点击【创建场景】选项之后,即可进入场景创建界诹鬃蛭镲面了,可以创建一个空白场景,也可以使用其它作者已经创建好的场景模板。在这里我们选择自主创建一个模板,点击【空白模板】选项,即可进入场景的创建界面了。

设计师如何快速制作H5——​PSD一键转H5技能get

2、点击右方的【背景图片嘉滤淀驺】区域,可以弹出背景素材库,为自己制作的场景选择漂亮的背景如图红框位置所示。这里有很多的背景图片,不过我通常都是自己画,设计师们应该也都是自己设计背景比较多。

设计师如何快速制作H5——​PSD一键转H5技能get
设计师如何快速制作H5——​PSD一键转H5技能get

3、重要的事情来了!!设计师们万分期待的PSD一键转H5功能来了!点击右上红框里的【PSD】按钮

设计师如何快速制作H5——​PSD一键转H5技能get

4、这时会弹出psd上传的对话窗口,点击【PSD导入】

设计师如何快速制作H5——​PSD一键转H5技能get

5、选择已经做好的PSD分层设计稿,点击【上传】

设计师如何快速制作H5——​PSD一键转H5技能get

6、就这样,PSD设计稿就变成了H5页面,可以看到右边分层已经是系统自动解析分层好了的。

设计师如何快速制作H5——​PSD一键转H5技能get

7、直接点击图片就可以在右侧设置动画模式,包括动画时间、出场动画、循环次数。

设计师如何快速制作H5——​PSD一键转H5技能get

8、点击右边菜单栏里的【猕智烈寓音乐】,【文字】等功能选项,可以在制作的场景里添加音乐背景,文字等,选择添加的文字,也可对文字进行编辑,设置表单等。大家可能会注意到互动功能,这里是更高级的互动模式,以后有机会再跟大家介绍,也可以自行去探索,很有趣。

设计师如何快速制作H5——​PSD一键转H5技能get

9、有需要的也可以直接在平台购买方正字体用于人人秀平台H5的使用

设计师如何快速制作H5——​PSD一键转H5技能get

10、按照刚才PSD一键转H5的方法,把其他页面也都上传上来,调整完点击右上的发布按钮。

设计师如何快速制作H5——​PSD一键转H5技能get

11、设置分享头像、分享标题、翻页动画,现在一个完整的H5就做完啦,这种神速,真是一言不合就可以做H5了呢。

设计师如何快速制作H5——​PSD一键转H5技能get

12、发布完以后会自动生成二维码以及推广链接,可以扫码分享朋友圈或者给到客户

设计师如何快速制作H5——​PSD一键转H5技能get

13、如果想知道这支H5的数据统计情况,点击【流量统计】就可以看到浏览量(PV)、独立访客(UV)、分享次数、分享渠道等实时数据统计。

设计师如何快速制作H5——​PSD一键转H5技能get
© 手抄报圈