3D没有眼镜的图像:如何制作一个动画GIF
我创建了一个程序,可以从照片和视频动画GIF。然后,我用它来制作3D动画。
真3D
看着你的电脑或手机,每只眼睛都从不同的角度看问题。两幅画被组合在一起形成一个三维图像。真正的3D图像是立体图像。一个左右图像合并在一起。当戴上耳机或眼镜时,每只眼睛看到不同的图像。我买了一副三维浮雕眼镜,开始制作屏幕外的图像。
真正的立体图像看起来很棒。图像可以看起来比真实的东西更有趣。我拍了一张我的咖啡杯的照片,它成为我最受欢迎的照片之一。有趣的是,手柄似乎是从屏幕上伸出来的。问题是,大多数人看不到效果。有些人看不见立体的东西,大多数人没有特制的眼镜。另一个问题是,它们在没有3D眼镜的情况下看起来并不好看。
3 d不戴眼镜
拆分深度的GIF是带有条形图的gif动画。图像似乎包含在您的平面屏幕。在图片上放置条形图可以使图片看起来像条形图在其他图片的前面。把酒吧的一部分移走会让酒吧看起来像是在什么东西后面。当物体不再被栅栏阻挡时,它就会出现在他们的前面。栅栏就在最前面。然后一个影像从它身边掠过。所以它看起来是在屏幕前面。这是一个三维突围效应。
摆动体视学是通过在相似的图像之间快速交替创建的。从两个不同的角度拍摄同一主题的两张照片。然后制作一个动画GIF或视频。从一个角度快速切换到另一个角度可以增加外观的深度。两只眼睛都能看到两个图像,所以这不是真正的立体视觉。
与立体图像相比,分割深度动画和摆动立体图像的主要优势在于,它们可以在不佩戴眼镜的情况下提供三维效果。你可以得到一些有趣的图片,很容易分享它们。主要缺点是效果有限,而且很难实现。真正的3D图像可以提供更多的深度,它们可以在30秒内完成。
我的第一个定格动画
如何使动画GIF
gif动画是用一系列图片创建的。拍两张或更多的照片或一段短视频。然后将图片保存为GIF动画。它们通常又小又短。大多数一直重复。为了平稳过渡,开始和结束的图片应该相似或相同。在上面的动画中,我按顺序添加了图像。然后我以相反的顺序添加了相同的图像。它从一开始就结束了。
它们在网上很受欢迎,但在线下观看和与它们一起工作可能很困难。通常你只能看到第一张图片。我只能通过网页、电子邮件或用浏览器打开图片来查看gif。右键单击并选择“打开”您的首选浏览器。如果尺寸太大,在你的电脑或网站上看起来不错的动画可能会在社交媒体网站上被屏蔽。
到图像的视频或一系列保存为GIF动画,你需要找到一个程序或使自己的。在线GIF制造商很容易找到。你也可以使用Photoshop等绘图程序。我所有的动画是用做3D GIF制作我在学习如何制作不需要特殊眼镜的三维图像时做的。
gif的颜色更少。所以它降低了图像的质量。你可能想要做的动画视频,WebP文件或apng。APNG使用PNG图像而不是gif图像作为动画。有了这些替代方案,你可以获得更好的质量和更小的文件大小。缺点是它不太可能玩。当附加到电子邮件时,我必须保存PNG文件,并在网络浏览器中打开它来查看动画。
我用了TinyPNG将我的《星球大战》动画缩减70%对于最小的尺寸,我推荐WebP或视频。让一个短视频表现得像网页上的GIF动画很容易。下面代码中的video元素播放第一个使用用户浏览器的视频。picture元素显示第一张工作的图片。
<视频播放循环柔和的排队标题=“3D动画”><源SRC.=“3 dvid.webm”类型=“视频/ WEBM”><源SRC.=“3 dvid.mp4”类型=“视频/ mp4”>视频><图片><源srcset=“3DAnimation.webp”类型=“图像/ webp”><IMG.SRC.=“3DAnimation.gif”>图片>
突破
当物体离相机越来越近时,打破屏幕的效果会更好。当它靠近的时候,它会变大一点。添加条并不是使图像看起来像3d的唯一方法。你正在制造一种视觉错觉。试着通过制作假边界来欺骗观众做出错误的假设。
对于坦克的动画,我可以使用过滤器来清除背景色。最难的部分不被意外擦除移动物体,而要删除的背景颜色。在第二动画,我使用的透明的公共域重影图像。所有我需要做的是改变鬼规模的50倍,我得到了我的程序为我做的。
减少空白
出现上面的照片有很多的下方的空白区域。由于照片被认为似乎是比它小应尽量减少它和页面上的其他内容之间的距离。可以通过添加文字或图片到图片的背景或者让他们在图片下减少空白。
我加了一些文字到图片,但我可以做得更多。如果上面的图片有一个透明背景我将能够把它放在网页上的文字在其下方的背景图像的下方。动画将是对其他内容的顶部,但文字是可见的,直到鬼结束它。
当页面背景的图像匹配出来的效果休息效果最佳。我在此页面上的图像的白色背景。透明背景总是匹配的背景。相反周围有背景图像白色的,它可能是颜色周围区域相同。看看你是否正在使用的GIF制作或绘画程序允许您创建一个透明背景。
支持透明的文件类型包括PNG, WebP, WebM, Mov和GIF。图像和视频可以是透明的。看看我的《星球大战》动画。在新选项卡中打开它,看到它的黑色背景。我不推荐使用透明背景制作gif。光滑的边缘会变得参差不齐。
定位网页内容
下面的代码更改页面上的文本的位置,它是图像下。GetBoundingClientRect获取位置和图像的尺寸。位置告诉它的位置正在使用页面上的代码中设置。设置左侧和顶部值告诉它在文字应该会出现。您可以复制代码,并将其保存在文本编辑器如记事本中的一个目录中的图片。
文件名“transparent.gif”应改为你想要使用的文件。为了达到最佳效果,请使用透明GIF。该文件将在默认的Web浏览器中打开。更改网页上的内容的位置可以是特殊效果,游戏和在线图像编辑器非常有用。
Position.htm
<HTML.><头><元字符集=“UTF-8”><元id=“视口”的名字=“视口”内容="user-scalable=no, initial-scale=1, width=device-width, height=device-height"/><标题>移动文本在一个图片标题>头><身体><中心><IMG.id=“pic1”风格=“max-width: 90%”>;<divid=“div0”风格=“FONT-SIZE:120%;文本对齐:理由; visibility:hidden的;”>通过在透明图像下方放置文本或图像,使其看起来比实际小。div><divid=“div1”风格=“位置是:绝对;字体大小:120%;余量左:汽车;余量右:汽车;宽度:100%;文本对齐:证明; zIndex的:0”>div>中心><脚本>varPIC1 =文档.getElementById (“pic1”), Div0 =文档.getElementById (“div0”), Div1 =文档.getElementById (“div1”);功能onload() / /准备好{Pic1.onload =功能(){Pic1.onload ="";常量矩形= Pic1.getBoundingClientRect ();varLeftMargin = rect.width *.14点;Pic1.style.marginLeft = LEFTMARGIN +“PX”;Div0.style.width = rect.width + LeftMargin +“PX”;Div1.style.width = Div0.style.width;常量rect2 = Div0.getBoundingClientRect ();Div1.innerHTML = Div0.innerHTML;Div1.style.left = rect2.left +“PX”;Div1.style.top = (rect.top + rect.height *0.85)+“PX”;Div0.style.display =“没有”;}Pic1.src =“transparent.gif”;};窗口.onload = onload ();Div1.style。zIndex =“-1”;脚本>身体>HTML.>
摆动三维立体图
立体图是一种结合了左右视角的图像。不同的角度使它们可以在3D中被看到。Wiggle图像应该可以提供真正的3D效果,不需要眼镜。他们可以增加深度,但他们只是看起来进入或背后的屏幕。要制作它们,你只需要两到三张图片。左、右和可选的过渡照片之间拍摄的左和右。中间的照片要用两次。
制作摆动动图真的很容易,但要制作人们喜欢看的动图却很难。限制震动的次数。通常你希望两张照片都聚焦在主体上,这样主体几乎不会移动。它不应该看起来像是你在记录地震。






戴不戴眼镜
Wiggle stereoscopic就像是真正的立体图像的廉价仿制品。图像不稳定,也不会跳出屏幕足够远。真正的3D图像看起来要好得多,但它们需要特殊的眼镜。如果你想让更多的人看到效果,可以使用摆动立体镜。使用真正的3D效果更好。你可以用同样的图片来做这两件事。
分割深度动画gif并不提供真正的3D效果,他们需要更多的时间和精力来制作。它们确实比摆动的立体图像更有趣。所以我认为他们值得付出额外的努力。我喜欢我添加条形图时得到的结果,但我最喜欢的条形图似乎离开了图片。
如果你对制作三维图像感兴趣,那么我建议你买一副三维眼镜,这样你就可以制作真正的三维、三维摆动和分割深度动画。制作带眼镜的图片和不带眼镜的图片。这个页面上的图像是我制作的第一个动画。我还在学习如何制作,没有很多的练习。用他们作为例子,但尽量做得更好。
一些更有用的链接
- How to Create 3D Images and video Without a Three-D…
了解如何2D转换为3D。制作立体照片可以方便快捷。我可以在30秒内使一个很好的三维图像。为什么要解决平板的图片时,你可以增加深度的错觉。它需要特殊的眼镜,但他们一 - 如何成为隐形摄像机使用隐形视频效果,专业的结果
你想隐身吗?我试着让颜色变得透明,看看我是否能透过我的网络摄像头看到物体。学习隐形是如何工作的,以及如何使用隐形效果轻松变得隐形。
此内容是准确和真实的最好的作者的知识,并不意味着从一个合格的专业代替正式和个性化的建议。
©2020迈克尔^ h