AN H5页面设计前期创意第一课
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
我们本次使用的主要是photoshop , 版本为cc2019，新版的软件是可以兼顾设计画面、动效、 剪辑视频、修改音乐，用途非常广。
二、H5页面设计的要素
1-细节与统一 2-紧跟热点，利用话题效应 3-讲个好故事，引发情感共鸣 4-合理运用技术，打造流畅的互动体验
故宫博物院：《清明上河图3.0》博物馆
以我为例，我设定了一个邮局的故事。
大家可以根据我们的故事背景，在纸上或者用 手绘板，画一个草稿出来，只需要有个大概故 事构架和大致画面构图，草稿，只要自己能看 明白就行。
作业：请大家尝试根据本次课 程主题，手绘一张h5的ຫໍສະໝຸດ Baidu计草 稿。
主题：面对疫情，人们为了减 少交叉感染，都被困在家里自 我隔离，有很多想在春节假期 见面的人，就见不到。所以我 们需要设计一个h5给这些人， 让他们在这个页面表达自己对 见不到面的人的对想念，表现 载体形式不限。
谢谢聆听！
这是一篇对《清明上河 图》简要描述的H5。进 入首页，概括性的描述 了《清明上河图》，主 要包括三个方面：①馆 长的秘密，点击进入， 讲述了《清明上河图》 现藏地点，接着介绍了 作者张择端的生平，然 后介绍了一些画中的细 节；
故宫博物院：《清明上河图3.0》博物馆
②馆长的传奇，点击进入，主要讲述 了《清明上河图》的前世今生，描述 了《清明上河图》的坎坷经历，最后 更是点出《清明上河图》高科技艺术 互动展演今年将开启全球巡展，引发 无数人的期待③馆长的展，敬请期待。
H5页面设计前期创意
一、制作H5需要的软件
H5是一种高级网页技术，也就是我们说的HTML5，是目前涵盖领域最广的传播媒介， 几乎达到了无所不用的境界。 我们这次课程，我们一起学习设计一款h5界面 ↓
工欲善其事必先利其器，我们来说一下工具，也就是 软件
前H5设计领域还没有统一的标准工具，需要利用多种软件来搭配制作，比如photoshop、 illusttator、还有 3dmax、 maya，可辅助设计3D动画。
故宫博物院：《清明上河图3.0》博物馆
体验上，看到这一幅巨作，每个人都想看一看， 点开之后，会为各种细节而惊叹，画中景物繁 多，巨细无遗，却并不显得琐碎繁缛，表现出 画家对大场面把握的能力，以及于真放中见精 微的绘画境界，令人无法不钦佩其细致入微的 观察力和生动传神的表现力。
三、H5页面设计
在着手设计h5页面前，首先要对设计主题进行思考，放在公司，就是客户需求Brife。 我们的设计目的和背景呢，面对疫情，人们为了减少交叉感染，都被困在家里自我隔 离，有很多想在春节假期见面的人，就见不到了，所以我们设计一个h5给这些人，让 他们在这个页面写下对想念的人的祝福和问候，这个页面可以使明信片，可以是信， 也可以是礼盒，具体形式大家可以天马行空地去设计，最后生成图片保存或发送。
二、H5页面设计的要素
1-细节与统一 2-紧跟热点，利用话题效应 3-讲个好故事，引发情感共鸣 4-合理运用技术，打造流畅的互动体验
故宫博物院：《清明上河图3.0》博物馆
以我为例，我设定了一个邮局的故事。
大家可以根据我们的故事背景，在纸上或者用 手绘板，画一个草稿出来，只需要有个大概故 事构架和大致画面构图，草稿，只要自己能看 明白就行。
作业：请大家尝试根据本次课 程主题，手绘一张h5的ຫໍສະໝຸດ Baidu计草 稿。
主题：面对疫情，人们为了减 少交叉感染，都被困在家里自 我隔离，有很多想在春节假期 见面的人，就见不到。所以我 们需要设计一个h5给这些人， 让他们在这个页面表达自己对 见不到面的人的对想念，表现 载体形式不限。
谢谢聆听！
这是一篇对《清明上河 图》简要描述的H5。进 入首页，概括性的描述 了《清明上河图》，主 要包括三个方面：①馆 长的秘密，点击进入， 讲述了《清明上河图》 现藏地点，接着介绍了 作者张择端的生平，然 后介绍了一些画中的细 节；
故宫博物院：《清明上河图3.0》博物馆
②馆长的传奇，点击进入，主要讲述 了《清明上河图》的前世今生，描述 了《清明上河图》的坎坷经历，最后 更是点出《清明上河图》高科技艺术 互动展演今年将开启全球巡展，引发 无数人的期待③馆长的展，敬请期待。
H5页面设计前期创意
一、制作H5需要的软件
H5是一种高级网页技术，也就是我们说的HTML5，是目前涵盖领域最广的传播媒介， 几乎达到了无所不用的境界。 我们这次课程，我们一起学习设计一款h5界面 ↓
工欲善其事必先利其器，我们来说一下工具，也就是 软件
前H5设计领域还没有统一的标准工具，需要利用多种软件来搭配制作，比如photoshop、 illusttator、还有 3dmax、 maya，可辅助设计3D动画。
故宫博物院：《清明上河图3.0》博物馆
体验上，看到这一幅巨作，每个人都想看一看， 点开之后，会为各种细节而惊叹，画中景物繁 多，巨细无遗，却并不显得琐碎繁缛，表现出 画家对大场面把握的能力，以及于真放中见精 微的绘画境界，令人无法不钦佩其细致入微的 观察力和生动传神的表现力。
三、H5页面设计
在着手设计h5页面前，首先要对设计主题进行思考，放在公司，就是客户需求Brife。 我们的设计目的和背景呢，面对疫情，人们为了减少交叉感染，都被困在家里自我隔 离，有很多想在春节假期见面的人，就见不到了，所以我们设计一个h5给这些人，让 他们在这个页面写下对想念的人的祝福和问候，这个页面可以使明信片，可以是信， 也可以是礼盒，具体形式大家可以天马行空地去设计，最后生成图片保存或发送。