H5(一)

H5(一)_第1张图片

常用软件版本:

PPT 2013及以上

AI CS5及以上

PS CS5及以上

H5是什么:朋友圈里会动的小页面

H5包含内容:音乐、视频、图文、表单、各种交互

H5展示平台:手机、平板、电脑

支持H5系统:Android、Windows、IOS

H5心理:好奇心、认同感、攀比、装逼

H5面临危机:创意形式趋同、大众审美疲劳

H5内容用途:

1.HR:招聘/公司介绍

2.市场运营:邀请函/产品介绍

3.科研人员:行业报告/问卷调查

4.大学生:个人简历/社团活动通知

5.老师:教学测试

6.普通人:结婚请帖/节日贺卡/装逼

H5工具:

1.MAKA  maka.im(有app)

2.易企秀  www.eqixiu.com(有app)

3.兔展  www.rabbitpre.com(图层窗格)

4.百度  A.可一键导入psd文件  B.时间轴窗格

(百度echart)

H5制作流程:

1.选取模板

2.修改内容

3.添加特效(易企秀可叠加动画效果,制作原件可复制后送给其他账号)

4.发布分享

H5使用素材

1.文字

2.图片

3.图标/形状

4.Gif

5.音乐

一、字体

1.MAKA自带50种字体/易企秀字体收费/兔展字体少

2.PPT/PS里的字体另存为图片

3.在线生成器

(1)第一字体转换器 http://www.diyiziti.com/(调整背景透明:清空背景颜色代码)非商用

获取颜色代码的方法:

A.QQ截图时,鼠标所指处显示颜色RGB数值,按住Ctrl切换到颜色代码,将代码填入H5调色板

B.Chrome浏览器的应用商店购买插件ColorZilla,安装后,浏览器工具栏多出一个取色器,点击吸管,点击颜色=自动复制了颜色代码,在H5调色板Ctrl+V粘贴即可(但仅限于浏览器内取色)

(2)文字云Tagul  http://tagul.com/

(3)LOGO神器 MarkMaker,只支持英文,网站可以根据你的点赞记录你喜欢的风格,可下载png、svg两种格式,可微调参数

http://emblemmatic.org/markmaker/3/

(4)自制毛笔字Qugishi(百度网盘—我的资源)

http://pan.baidu.com/s/lmirjxog

二、图片

1.MAKA图片库质量高/易企秀内有图标、动图、可为上传的图片增加分组/兔展含品牌图标库、可为上传的图片增加分组

自带图片缺点:(1)缺乏搜索功能(2)分类不清

2.找手机壁纸

(1)搜索引擎搜索手机尺寸的图片:关键词+手机壁纸+选择尺寸(质量良莠不齐)

(2)在手机壁纸图库中找

3.免费下载网址

(1)Wallhaven  http://alpha.wallhaven.cc.(非商用)

好处:提供色系+可筛选尺寸(ratio-选择尺寸-刷新)

(2)主题型壁纸库(非商用)

A.复古 Viintage  http://viintage.com/  无需注册、登录、可直接保存

B.卫星 Wlppr  http://wlppr.co/  每张图片有不同尺寸可选

C.抽象几何 Facets http://www.facets.la/

(3)可商用图库

A.第一选择:Pexels  http://www.pexels.com/质量高、资源少

B.第二选择:Pixabay  http://pixabay.com/支持中文、图片不同尺寸可选、质量良莠不齐

C.个人逗比创意网站:GRATISO http://www.gratisography.com/

二、形状/图标

1. MAK:扁平风、逻辑图表(svg格式)*可改颜色、放大不失真

易企秀:图形、文字、图标(svg格式)、图片库(png格式)*不可改颜色、放大失真

兔展:形状(svg格式)、图片库

自带图标的缺点:A.不能搜索B.可编辑性不强

2. 自己找(上传图片)

(1)Iconfinder

http://www.iconfinder.com/

Png/svg

只能搜索英文关键词

条件:free

顶部可选择风格:flat扁平

(2)Noun project

http://thenounproject.com/

Png/svg

需注册

只能搜索英文关键词

条件:free+give credit(免费)

(3)Easyicon

http://www.easyicon.netlanguage.zh-cn/

Png/svg

不同尺寸可选

(4)阿里Icon Font

http://www.iconfont.cn/

电商官方图标源文件

可改颜色、选择不同尺寸

(5)Human Pictogram2

http://pictogram2.com/

Png/AI

推荐衍生图标

你可能感兴趣的:(H5(一))