恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
H5特效教程1 | 微动摄影+720°酷炫全景!
0.0°
2017-02-15 原创文章 教程 举报 4403 32 30 2

“现在,除了你,整个世界都静止了。”

听说过时尚界和高端设计的新宠Cinemagraph吗?


趁着七夕应景,讲一个浪漫的爱情故事:纽约有一对艺术家夫妇,Kevin Burg和Jamie Beck,因为摄影制图相遇相知到相爱。一次Kevin带着Jamie去海边吹风,Jamie问男友:“不如你给我讲句情话吧?”于是Kevin握住她的手细语道:


“现在,除了你,整个世界都静止了。”

 

正是Kevin不经意的一句话,让他们萌生出一个新的想法:一张图里只有小的部分在轻微运动,其他都处于静止状态,这样就像解冻了尘封在图片的那一瞬间。由此一种生来就优雅的摄影手法诞生了——Cinemagraph,微动摄影。Kevin夫妇把这项艺术分享到社交媒体后引起轩然大波,吸引了香奈儿、巴黎世家、蒂芙尼等品牌大咖与其展开合作,还有麦当劳、宜家等大牌接连效仿:


Image title


今天要讲的是怎么把这种优雅的摄影手法,应用于近日在H5界大火的720度全景上,做1个魔方,效果如下:


Image title


这种微动摄影效果的制作,实际上可以直接用Photoshop或专用软件Cinemagraph Pro制作,本质上是抹去运动帧中其他运动的背景图层,或者用透明静态帧覆盖在运动的整体图层上,具体可参见文章《【指南】关于视觉营销利器 Cinemagraph ,营销人应该知道的概念、案例和最佳实践》


和720度全景结合的原理很简单,既然你玩的是一个正方体,就需要6个面,只是把每个面换成宽度一致的方形Cinemagraph而已。

Image title


1、进入iH5.cn,新建1个全景容器,在全景容器下放:

(1)2张图片,1张类型设为顶、另1张设为底

Image title

(2)1个全景容器组,把4张方形Cinemagraph拖动到编辑器,后台会根据图片名称自动排列顺序、生成方形全景。


2、设置全景容器的观察点>方形图片对角线的1/2,就可以在外部观看720度全景。观察点越大,距离魔方越远。


[温馨提示]  因为全景功能的外景模式在IOS设备不大稳定。


然后你就可以静静地观看下面的精致——

Image title

Image title

Image title


最后说明一下制作过程可能会出现的2种突发状况:

(1)全景图左右颠倒

这时观察点应该超出了围成的半径大小,所以看到的是外景,就会出现左右颠倒,这时需要一开始在PS中为图片作水平翻转处理;


 (2)预览时图片间出现空隙

说明全景组内图片的宽、高没有严格保持一致,如果先拼合再用切片工具水平/垂直划分切片,可实现精确切图。

Image title



更新:2017-02-15

收藏

32人已收藏

Seedheart

好玩是一切的宗旨。

  • 19

    作品

  • 615

    粉丝

  • 4

    关注

  • 他从瑞典回来后,用了10年让设计师用上H5
  • 腾讯这个H5的套路太深!大部分人没看懂
  • 100个免费可商用字体,你总有一天用到它
  • H5页面制作软件,中国和美国差多少?

    猜你喜欢

      2017-02-15 原创文章 教程 举报 4403 32 30 2

      H5特效教程1 | 微动摄影+720°酷炫全景!

      0.0°

      你确定要举报H5特效教程1 | 微动摄影+720°酷炫全景!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年08月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      30
      32
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录