——听说淘宝请人做那个H5，花了30万。——哦？我刚做出来了。
——前阵子淘宝H5很火，朋友圈被刷了好几天屏。
——我知道，是造物节的《ZAO》！它不是一般的720度全景，有伪3D的VR效果。你能上下、左右滑动看到不同视角的画面，还能玩重力感应。对了那些动漫人物，动起来是分前后的。听说淘宝请外包团队，花了30万。
——哦？我刚做出一个这样的H5。
——Seriously？！
这是真的，我已经把这个H5做出来了。
▲淘宝造物节H5原版
▲我做的致敬版H5
相似度：95%
事情来由是这样的，前两天H5制作工具iH5一下子放出3个全景组件，720度VR、重力感应、页面交互，各种功能1个不落。于是我就屁颠屁颠扒了淘宝造物节H5的素材开始做，结果竟然给我捣弄出来了……动态效果如下：
▲720度VR的效果图
你也要玩玩吗？过程简单得可怕，只有3步——
（1）准备全景素材
▲淘宝造物节H5的图片素材
A、1张首尾相连的全景图，当背景；
B、堆叠在全景图上的人或物件的PNG图，当前景。
为方便演示，这里直接扒淘宝造物节80张切好的图，拼合成不同的层。上面半透明的背景是20张切片合成的，前景大概照着淘宝H5的位置放，共分成3层（NO.1最靠前）。
（2）用Photoshop切图
▲用Photoshop处理素材
A、把不同层的图片各竖切成N份，然后导出；
B、导出时，越靠后层的图片宽度（W）要越大。
不会切图劳烦百度，我这里把1张背景、3张前景分别切20块导出为PNG——需要注意，切的时候要保证同层图片高度一致，这样导出的素材才有效！另外，切的份数越多，三维效果就越平滑，但图片也会随着变大容易卡。
（3）用iH5做全景运动
▲后台的交互设计界面
A、新建全景容器，下面放4个全景背景组；
B、把切好的分层切片分别拖到对应的全景背景组里。
比如你要放背景层图片，就保持全景背景组1选中，把20张切片拖到页面里就行。见证奇迹的时刻到了！以下几张图比较高能，是拖好图调试的效果，强烈建议仔细观赏：
▲分别调试水平转角、垂直仰角、观察点大小的效果
看完上面图片你应该也懂了，每个全景组就是把切片按顺序围成圆柱。
那刚才给前后层图片设不一样的宽度，用处是？宽度越小，围成圆的周长就越小，当观察点在圆的中心，就会感觉这一层离得越近、移动得越快——VR的立体效果就这么来的。
[注]&半径=周长/2π，相减可推测不同层的间距，并判断观察点的合适位置。
加全景和调试其实很快，30分钟不到，主要时间都花在处理淘宝那些素材了……扒人家原图重新拼合构图再切开很费事啊，还是原创好。如果你对点击弹出华晨宇的新歌介绍、H5上方飘着一个造物节LOGO、滑动页面画面会伸缩什么的感兴趣，直接去官网找教学视频吧。
因为模仿出来的H5太像了，怕侵权不敢发出来给大家看。我相信你可以的，自己试试吧……
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友您的位置：
→ VR虚拟全景视频制作方法
VR虚拟全景视频制作方法
VR里的虚拟全景视频是越来越多的企业或者个人想拿来做宣传的一大方向，那么这个视频该怎么制作呢？下面简单的跟大家介绍一下制作的方法。虚拟全景制作虚拟全景的制作需要虚拟软件有：造景师软件、漫游大师软件、造型师软件。先是把全景硬件拍摄的图片导入到造景师软件拼接成全景图。造型师是制作好flash物体立体展示，然后把全景图导入到漫游大师软件添加功能特点，插入flash文件。全景漫游制作的过程：1、全景硬件组装拍摄，水平一圈拍摄多少张，根据单反相机的型号与鱼眼镜头的多少mm来判断。2、拍摄的顺序是：前-右-后-左-上-下。3、拍摄好的图片使用造景师软件拼接成一张全景图。4、制作好的多张全景图导入到漫游大师软件里面添加漫游的功能。比如：飞出媒体效果、热点变换、GPS信息自动识别、3D建模、陀螺仪、弹出图片缩放、图片压缩、等功能效果。
阅读此文的人还阅读了...PS怎么画360度VR全景图？你们想知道的绘画教程都在这里了
新浪VR & 发布时间： 11:59:00 & 作者：佚名 &
你知道吗？PS也可以画360度VR全景图了！而你们想知道的绘画教程都在这里了！最近，很多网友问小编ps怎么画全景图？今天脚本之家小编就给大家带来PS绘制360°全景图的两种方法，感兴趣的朋友千万不要错过
　　最近，360度全景图又在新浪微博上火了一把，看到小伙伴们发的上海迪士尼全景、珠穆朗玛峰全景图，是不是感觉特别炫酷。那么，你知道 360度全景图怎么做吗？其实PS也可以画360度VR全景图了！下面就跟着小编一起去看看ps怎么画全景图？
　　这张看着很酷的360&全景图画其实是由PS绘制的。
　　并且可以通过VR设备观看。
　　从2016年以来，360全景视频、动画、图片开始越开越普及。擅长画场景的盆友们！恭喜你们又有了新的发挥空间！
　　看完是不是觉得跃跃欲试呢，怎样才可以画出这样的全景图？
　　Anipie发现有两种不同的实现方法，首先来给大家介绍第一种方法，也是PS新版本自带的非常方便的一种方法。
　　其实原理非常简单，就是在PS里载入一张360&全景透视网格图，然后把移动图片的模式从平移改成VR视角的移动。接下来照着透视网格画就好啦。
　　下面来说说如何具体操作吧。
　　第一种方法：
　　黑白全景图的作者是ART STATION 网站上的概念艺术家Jama Jurabaev，以下的第一种绘制方法的教程也来自他本人在youtube上的讲解视频。
　　1. 首先你要有PS 2015.5以上的版本，然后一定要创建一个比例为2：1的画布。（在示例中Jama设置的是宽2高1）
　　2. 创建一个空白图层。
　　3. 在菜单栏中选择 3D - New Mesh form Layer - Mesh preset - spherical panprama
　　4. 然后会弹出一个小窗口问你是不是要换到3D操作界面，在这里选No。
　　5. 这时你会发现图层上出现了一个3D的小图标。代表它已经是3D图层了。移动画面的图标也跟着变了。
　　6. 这时设置已经差不多Ok了。你可以画两笔试试。关于画笔的设置点击菜单栏 3D - Paint System - Projection 可以修复画笔和显示粗细不统一的问题。
　　7. 接下来只要在PS里载入一张360全景透视网格，就可以很清楚的知道如何绘制场景和人物了。善用PS菜单里的编辑-变换功能也可以给你带来很大的帮助。(透视和美术基础并不好的同学不要太难过，去厕所哭一哭就好了，Anipie表示永远在你身边。）
　　8. 当你完成之后，效果就会非常振奋人心了。PS中的全景效果只是预览效果，如果你想知道你的全景图最终的样子，点击3D面板，双击你的3D图层，点击edit texture，接下来你就能看到整幅作品完整的样子了。
　　9. 接下来就是保存啦。在上一步点击edit texture之后，PS会加载出你画的全景图的平面版本。然后直接保存这张图片。 接下来你只需要找到那些支持360VR全景图的网站平台，或者app，然后直接上传这张图片就行了。
　　以上就是使用PS绘制全景图的第一种方法。
　　第二种方法：
　　如果你的PS没法装以上功能的时候可以尝试的，来自外国艺术家LAI。这个方法也可以有助于你从另一个角度更加的理解360全景绘画。
　　大部分我们看到的360全景图像的算法和原理其实就是把一张图卷成一个盒子包裹摄像机，给人营造出一种真实的360&场景的感觉。
　　所以在这里我们可以把这个盒子展开，在它所展开的平面上绘画。&&所以说其实好的艺术家都是表演精湛的魔术师。
　　只要你一旦掌握这个概念，那么你就可以根据这个原理创作各种各样的全景图画了。
　　准备工作：
　　1. 我是用PS软件画图。用其他的其实也可以。
　　2. 图片转换插件&&我用过的至今为止最好的插件Flexify2.0，官网地址：
　　（http://www.flamingpear.com/flexify-2.html），我用的是试用版。这个插件可以做各种全景图转换。但在我的例子中，我们只需要把Equirectangular（圆柱图）转化为Horizontal Grid（视平线网格）。
　　3. 360预览&&你需要一个可以预览你的360全景作品的网站或者应用，例如pannellum.org等。
　　接下来就可以开始了！
　　步骤1： 用Flexify2.0软件存储出需要的网格图。具体参数如下：
　　步骤2：在展开的网格图上作画。
　　小贴士：在每个立方体的边缘开始或结束绘画的时候，你要想象从这个角度看过去的新的单点透视。下面这个动图是举例说明。
　　步骤3：图画完成后，使用Flexify2.0把你的展开图合成为全景图。
　　步骤4：下载一个XMP Template插件到PS，接下来你就可以使用这个插件导出全景图片了。
　　在Facebook和Artstation，youtube这些网站都可以上传360全景图片和视频了，只需要鼠标拖动或者带上配套设备就可以观看。但是不知道天朝什么时候能跟上这个节奏了。
　　最后附上JAMA的PS全景绘画视频。
　　各位美术大大们赶紧试起来吧！
　　from：动画派AniPie
　　教程结束，以上就是PS怎么画360度VR全景图？你们想知道的绘画教程都在这里了的全部内容，希望大家喜欢！
相关教程推荐：
大家感兴趣的内容
12345678910
最近更新的内容360vr全景图制作教程浏览量：15时间： 17:15:10分类：全景图片问题描述：360vr全景图制作教程。希望得到的帮助：360vr全景图制作教程
0个回答热门问答Copyright& expoon.com , All Rights Reserved
京ICP证130160号
京公安备41查看: 2967|回复: 12
看到一家卖家具VR全景图制作
TA的每日心情加油 13:00签到天数: 68 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 20
注册会员, 积分 9902, 距离下一级还需 98 积分
注册会员, 积分 9902, 距离下一级还需 98 积分
昨天偶然逛淘宝，看到林氏木业有VR全景图，有种身临其境的感觉&&想试着做一个，但是摸索半天也不懂
可滑动屏幕查看左右上下
这些都可以点击的，进入主卧又是一种场景
请教各位的大神，怎么制作的，我用IH5做的只有圆柱形，产品看起来就变形了，
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情吐舌头前天&08:58签到天数: 284 天连续签到: 5 天[LV.8]自成一派主题帖子积分
阅读权限: 30
中级会员, 积分 37704, 距离下一级还需 62296 积分
中级会员, 积分 37704, 距离下一级还需 62296 积分
回帖奖励 +20 美工币
。。。。。。。。。。看不懂
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情臭美 10:31签到天数: 76 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 30
中级会员, 积分 28941, 距离下一级还需 71059 积分
中级会员, 积分 28941, 距离下一级还需 71059 积分
。。。。。。。。。。看不懂
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情加油 13:00签到天数: 68 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 20
注册会员, 积分 9902, 距离下一级还需 98 积分
注册会员, 积分 9902, 距离下一级还需 98 积分
。。。。。。。。。。看不懂
VR全景图，类似实体的样板间一样，只不过在手机端和电脑端&&可以滑动调整空间
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情加油 19:51签到天数: 105 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 30
中级会员, 积分 26080, 距离下一级还需 73920 积分
中级会员, 积分 26080, 距离下一级还需 73920 积分
也不放个链接
承接美工兼职 QQ：
TA的每日心情大哭 18:21签到天数: 1033 天连续签到: 1 天[LV.10]功行圆满主题帖子积分
阅读权限: 50
【单身狗认证】
高级会员, 积分 226385, 距离下一级还需 273615 积分
高级会员, 积分 226385, 距离下一级还需 273615 积分
VIP卖家 你懂的
TA的每日心情加油 13:00签到天数: 68 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 20
注册会员, 积分 9902, 距离下一级还需 98 积分
注册会员, 积分 9902, 距离下一级还需 98 积分
也不放个链接
&&扫二维码进去的，没法放链接&&
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情抱抱 10:29签到天数: 692 天连续签到: 1 天[LV.9]已臻大成主题帖子积分
阅读权限: 50
高级会员, 积分 130624, 距离下一级还需 369376 积分
高级会员, 积分 130624, 距离下一级还需 369376 积分
https://720yun.com/find& && && && && && && &&&http://client-news.720yun.com/client/index.html& && &看这个你应该就能明白，不过你还得买一个VR拍摄器材
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情加油 19:52签到天数: 33 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 30
中级会员, 积分 46765, 距离下一级还需 53235 积分
中级会员, 积分 46765, 距离下一级还需 53235 积分
这个要学c#和unity3d的，有很多大卖家都想跃跃欲试，听说它不仅能网购带来新一轮冲击，还能整合线下的实体店，淘宝美工的下一个转折点和机遇。会设计的程序员
说得好。vr的确是网商购物的下一个冲击点。&
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情加油 19:51签到天数: 105 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 30
中级会员, 积分 26080, 距离下一级还需 73920 积分
中级会员, 积分 26080, 距离下一级还需 73920 积分
很早就说以后淘宝页面会走VR
承接美工兼职 QQ：
任职天猫商城美工! 注意：申请此勋章，需先通过淘宝美工认证！
注册账号后积极发帖的会员
经常帮助其他会员答疑
积极宣传本站，为本站带来更多的用户访问量
经常参与各类话题的讨论，发帖内容较有主见，在线时间达到720小时（30天）
活跃且尽责职守的版主
Powered by