|
今天与大家分享一个教程，了解如何创建视差图并上传到3DTotal网站上。
简介
视差图最多由六个图层组成。当用户将鼠标移动到图像上时，每个图层沿着X、Y或Z轴以不同的速度移动，以创建每个图层与摄像机距离不同的假象。
本教程中，我们将展示如何根据现有的艺术作品，生成视差图，从而为图像新增一个维度。
好的视差图是由什么构成的？
根据我们的经验，几乎所有的图像都可以制作成视差图，但是其中有一些图像肯定比其他图像效果更好：
- 与相机距离2个或多个单位距离的图像，可以生成最佳的视差效果。 - 除背景图层之外，视差图中的所有其他图层都需要一些透明像素，以便看到它们下面的图层。已经合并图层的图像很难操作，因为每个图层都必须精心裁剪。选择可以操纵图层（隐藏和显示图层）或3D渲染的图像，可以单独渲染每一个图层，这样操作起来更简单。 - 想要移动图像中的图层，那么图层的尺寸需要比视区的尺寸大，尺寸的大小取决于移动的距离。所以确保我们选中的图像要足够大，以适应视口和所需移动的要求。
准备图像
准备图像的第一个任务是确定不同的图层。这个教程中，我们使用的是艺术家José Julián Londoño Calle创作的图像。大家可以看下方的图像，我们已经确定并勾勒出想要使用的不同图层。
确定图像中组成视差效果的图层
我们确定了包括背景图层（由天空和远处的海洋组成）在内的5个图层，每个图层都被绘制了不同颜色的轮廓。大家可以注意到，最前面的两个图层已经被确定为独立的图层（蓝色和红色），虽然技术上来说，两个图层离摄像机的距离是相同的。当图层在视口边缘的时候，将其拆分成两个部分可以为我们的操作提供更多灵活性，大家在之后的操作中就会注意到这一点了。
裁剪图层
现在每个图层都需要分离出来并保存成一个图像。除了背景图层之外的其他所有图层，都需要保存成支持透明效果的格式。大部分情况下，都会保存成PNG格式，因为该格式支持Alpha；或者使用GIF格式，这个格式支持透明效果，但是不支持Alpha，表示这个格式可以生成坚硬或锯齿状边缘，沿着Z轴移动的时候，可以生成非自然效果。GIF格式与PNG格式的不同之处是，它支持动画，可以在图像中添加另一个维度。
下方的图像显示了从图像中裁剪每个图层后得到的结果：
创建视差图
现在我们已经将每一个图层保存成独立的图像了，接下来我们可以继续创建视差图了。首先打开个人页面，点击上传按钮，在上传菜单中选择视差图。
选择视差图选项后，我们可以看到熟悉的上传界面。与上传单独的镜头或幻灯片不同，视差图需要我们上传一个预览图像，这部分操作我们建议大家上传完整图像的合成。
上传图层并排列图层的顺序
页面底部有图像上传小部件。大家可以将图层图像拖拽到小部件上，或者单击小部件，并在弹出的文件浏览器中选择这些图层。上传好图层后，重要的是一定要检查图层是否按正确的，从背景到前景的顺序排列。如果需要更改顺序，点击图层缩略图，并将其拖动到其他位置。
上传图层并排列图层顺序
设置视口、轴线和图层
创建视差图的最重要步骤（或者是最有技术含量的步骤），就是设置图像表现方式。记住视差图是交互式效果，随着鼠标在图像上移动，图层沿着X、Y和Z轴独立移动，产生深度错觉（即立体感效果）。这样就可以制作出我们需要的错觉效果。 - 设置视口尺寸 - 将鼠标移动连接到图像中相应的轴中 - 设置每个图层的位置和移动的距离
设置图像的时候，首先选择页面右下角的预览按钮。
选择预览按钮后，完整的图像预览效果会显示出来。图层可能会显示在不正确的位置；视口尺寸将设置为背景图层的尺寸（所以可能会过大），然后将鼠标悬停在图像上时，不会出现任何变化，这是预料中的效果，因为我们还没有甚至任何配置信息。
使用预览镜头设置视差图
大家可以在上方图像的窗口底部看到一个工具栏，这个工具栏默认是不显示的，我们需要向下拉将其显示出来。使用工具栏中的工具可以设置视差图的表现形式。首先我们来看一下每个工具的功能。
图层选择工具
图层选择工具可以确定我们将要设置哪个图层。有一些配置选项可以应用于整个图像，但是其他选项仅应用于当前选中的图层中。初始选中的图层是第一个图层（背景图层）。我们可以点击其他数值来选择不同的图层。
移动图层工具
移动图层工具可以更改当前选中图层的初始位置。当工具在透明像素上时，当前选定层中的像素将显示为红色，其他所有图层处于静止状态。想要移动图层，我们首先需要点击图像的任意位置，然后将图层拖动到新的位置。
设置图层移动工具
设置图层移动工具允许用户定义当前所选图层，沿着轴向相对鼠标移动的距离。X轴和Y轴的距离分别以视区宽度和高度的百分比表示。例如，给定一个1000像素宽的视区，如果我们将X的参数设置为10%，那么我们将鼠标放置在最左边时，图层会出现在原始位置的-100px位置，鼠标放置在最右侧时，图层会出现在原始位置的+100px位置。
如果鼠标的X轴或Y轴移动链接到Z轴，则给定的百分比将作为比例应用，例如，如果Y轴鼠标移动链接到Z轴，且Y的参数为10%，那么我们的鼠标定位在视区顶部时，图层将以0.9（90%）的比例显示，将鼠标定位在视区底部时，图层将以1.1（110%）的比例显示。
视区尺寸工具
视区尺寸工具可以帮助我们设置视差图的像素尺寸。大部分情况下，视区尺寸都会比图层尺寸小，这样可以在视区中移动图层，也不至于显示出图层的边缘。
轴工具
轴工具允许我们将用户鼠标移动链接到视差图中的一个轴中。
所有内容整合在一起
下方的视频中展示了这个教程中视差图的设置过程。每张图像的情况都不同，所以大家要自己去花时间尝试不同的设置选项。
更多相关内容请关注：CG视频教程专区
| 
/8 
抱着猫的老鼠
