美文网首页个人提高醒脑【五连悦读】剽悍读书营
零基础,也能5分钟学会制作“H5页面”

零基础,也能5分钟学会制作“H5页面”

作者: 小蜗妞 | 来源:发表于2018-04-14 01:18 被阅读543次

简友们好,今天我终于要分享一点跟我本职有一点点相关的内容了。学习美术从小学6年级开始的,一路打怪升级,书法、国画、素描、水彩、速写然后艺考上大学,学习平面设计,开平面设计公司。决定一条路走到黑了。

一直分享的文章都是学习心得,感想之类的,今天来分享一个特别简单详细的H5操作流程,只要你看了,就能学会。

H5页面是我们现在常用的线上动态广告宣传手段,拥有动态,音乐和互动感等优势,当然日常活动,通知开会,邀请函都可以用H5来实现。

我会从制作的网页,到图案动画,音乐,发布,一步步教授大家如何制作这个H5。非常简单,完全可以轻松应对日常需要。

01 

首先我推荐制作H5的网页:

易企秀:http://www.eqxiu.com

易企秀,是我制作H5广告的常用网页,操作简单,免费模板不仅多还很精美。

打开以后我们可以看到易企秀的首页,他的首页非常的简单,主要操作按钮也在网页的顶部。我们先从顶部的免费模板进去,当然土豪可以选择付费的精品模板。

 进入后我们看到左边有索引,各种模板,以及左下角一个制作空白场景的选项。这里我选择建一个空白场景,单击进入。

这就是我们的工作区域,左边模板,中间制作区域,右边是页面管理,每制作一页,点下面的“+常规页”。

画面中的一些小按钮,我用红色的字标示出来了,撤销,恢复,预览等,是我们比较常用的。其他的选项我们在之后的制作中详细讲解。

02

在制作之前我们先确定好一个主题,设计好图形,找好素材,再一一放入H5中。这里就不详细讲解版式设计了,我会以一个页面为例,分享H5是如何操作的。

我们将准备好的所有素材,包括主题文字、插图、背景、二维码等,先放在一个文件夹中备用,然后一一上传至H5页面中。

点击画面顶部的图片选项,在弹出的窗口中选择上传,将素材一一上传使用。

重点建议大家,使用的素材最好是png无底格式,在使用中才不会遮挡到别的组件。

所有在PS中设计的元素都准备好了,就还差内容文段未插入。

这里特别提一句,“美工组”这三个字的字体我特别喜欢,是使用的娃娃体字体,在手绘风格和可爱风格的海报中特别适用。

03

接下来,我们插入文本,点击顶部文本——新文本,可以得到以上画面。

画面中心出现一个文本框,可以随意拖动。我们在左侧的编辑栏中输入文字,调整字号,颜色,行高字距,对齐方式等,各个选项,这里跟word文档一样,很清晰简单,我就不一一介绍操作方法了。

所有素材都放入后,我们得到以上画面。

H5最出彩与与众不同的地方就是它的动画效果和音乐了。接下来我们设置动画。

04

单击添加动画的对象,在左边的面板中选择动画选项,点击添加动画。

这里的动画其实跟PPT中的动画效果很相似,大家可以一一尝试一下。

唯一要注意的就是“延迟时间”,如果,你想让你的素材按顺序出现,那后出现的就需要添加“延迟时间”。

例如“天气很热,美工组请你吃西瓜”这句话是画面中最后出现的一个组件,那我给的延迟时间就是最久的,有2秒。

分享一个小技巧,有时候我们想要提高工作效率,在组件多的情况下可以使用“右键—复制动画”再粘贴到另外一个你想使用相同动画的组件上,能大大提高制作速度。

05

好啦,下一步,添加音乐,音乐最好使用MP3格式,时长可以短一些,能让画面更加流畅。也是一样从顶部音乐中进入。做完所有页面、动画,音乐后,我们就可以发布了。


06

在发布之前我们需要给H5添加封面和名称介绍。点击画面右上角预览和设置,进入设置面板。

更改封面图,名称、详细介绍即可。最后点击确认,发布。一个H5的制作就完成了。

很简单,也特别容易上手。快给自己增加一个酷炫的小技能吧。

相关文章

  • 零基础,也能5分钟学会制作“H5页面”

    简友们好,今天我终于要分享一点跟我本职有一点点相关的内容了。学习美术从小学6年级开始的,一路打怪升级,书法、国画、...

  • h5页面制作速成技巧

    h5页面所带来惊艳的展示效果,使得h5页面制作受到越来越多企业和用户的欢迎,而在众多H5制作软件诞生以后,h5页面...

  • 零基础小白HR,也能轻松制作H5页面 - 草稿

    很多HR普遍都觉得想要招到和公司同频的人才实在困难,如何招到优质的人才是每个优秀司时刻都在考虑的难题。绝大数公司都...

  • 必备视频App,让你成为短视频高手!

    本文将从拍摄到后期,给你用手机制作短视频的必备工具及注意事项,即便是零基础,用下面这些工具,你也能轻松学会拍摄制作...

  • 3.8女神节微信H5快速刷屏技巧

    微信H5如此流行,谁都想自己制作的h5页面能在朋友圈刷屏一番,然而想让自己制作的微信H5能顺利的刷屏,并非一件简单...

  • 11-18 h5

    HTML5页面 h5是第五代HTML,也指H5语音制作的一切数字化产品 为什么要做H5页面 移动优先、产品社会化、...

  • 为页面嵌入PDF文件——零基础自学网页制作

    在页面中嵌入PDF文件 在上一篇《在html页面中嵌入其他页面的方法——零基础自学网页制作》(结尾见目录)中我们学...

  • H5制作网站TOP10揭晓

    说起H5页面制作,你脑海中会浮现哪些网站呢? 现在国内市面上,涌现了许多的H5页面制作工具,有网页的也有客户端的,...

  • 零基础如何学习 java?

    零基础学习 java 能学会吗? 零基础如何学习 java? 有什么方法吗? 今天由我来分享下关于零基础学习 ja...

  • 基础

    制作基础页面,熟悉网络请求。

网友评论

  • 缘至臻:哇塞……你小学六年级就学美术。真是仰慕你啊,现在这么好啦……😬
  • 阿杰说澄长:收藏并学习,一如既往的爱蜗!
  • 林妖妖的盛夏光年:收藏并学习,一如既往的爱蜗!
  • 夏暖心:上班时间没来得及看 先收着😂
  • 安月白:收藏收藏,这个月的目标之一就是学习制作h5😁

本文标题:零基础,也能5分钟学会制作“H5页面”

本文链接:https://www.haomeiwen.com/subject/dxvhkftx.html