mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-18 09:26:21 +00:00
106 lines
6.4 KiB
HTML
106 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> How to make a 3D photo for Facebook</title>
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
|
<!--<link rel="stylesheet" href="https://www.photopea.com/tuts/wp-content/themes/simplex/style.css" type="text/css" media="screen" />-->
|
|
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4249565-46"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date()); gtag('config', 'UA-4249565-46');
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page">
|
|
<div id="header">
|
|
<a href="https://www.photopea.com/tuts/" class="title">Photopea Tutorials</a>
|
|
<!--<p>Web-based image editor.</p>-->
|
|
<a href="//blog.photopea.com">Blog</a> |
|
|
<a href="//www.photopea.com/learn">Learn</a> |
|
|
<a class="curr" href="//www.photopea.com/tuts">Tutorials</a> |
|
|
<a href="//www.photopea.com/templates">Templates</a> |
|
|
<a href="//www.photopea.com/api">API</a> |
|
|
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
|
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
|
</div> <div id="main">
|
|
<div id="content">
|
|
|
|
<div class="post" id="post-509">
|
|
<span class="date">November 17, 2020</span>
|
|
<h1>How to make a 3D photo for Facebook</h1>
|
|
<div class="entry">
|
|
|
|
<p>We can make posts with 3D photos on Facebook. We need to include a photo and a <b>depth map</b>. How can we easily make such depth maps?</p>
|
|
<span id="more-509"></span>
|
|
<p>We need two images: a regular image with color (taken by a regular camera) and another, greyscale image, called a <b>depth map</b>. A depth map says, how far is each object from the camera (from its lens). Near objects are bright, while far objects are dark.<p>
|
|
|
|
<p>An object in front is usually white. The sky is usually completely black.</p>
|
|
|
|
<img src="//i.imgur.com/RoBnkjm.png" style="width:60%" />
|
|
|
|
<p>Phones with two or more cameras can capture depth maps and attach them to JPG photos. Open such JPG in <a href="//www.Photopea.com">Photopea.com</a> to see a depth map inside it.</p>
|
|
|
|
<h2>Create a Depth Map Yourself</h2>
|
|
|
|
<p>When we don't have a depth map from a camera, we can paint such greyscale image ourselves. <a href="//www.Photopea.com">Photopea.com</a> is a great tool to do it! Start by opening a color photo (File - Open). Make a new empty layer (Layer - New - Layer). Decrease its opacity to 50% (at the top of the Layers panel, which is on the right). Now, when we paint with grey, we will still partially see the colored image.</p>
|
|
|
|
<p>Choose a Brush tool (press B on the keyboard) and pick the grey color (at the bottom of the toolbar). Now, we can paint with shades of grey to make a depth map. We can use <a href="//www.photopea.com/learn/selections">Selections</a> to paint only inside a specific area.</p>
|
|
|
|
<img src="//i.imgur.com/zpO50qn.jpg" class="fullw" />
|
|
|
|
<h2>Quickly Preview The Result</h2>
|
|
|
|
<p>We can preview a 3D photo right in Photopea. Press Window - More - 3D Viewer. It will open a special plugin, where we can preview depth maps. First, make sure the color photo is visible, and press "Load Color" in the 3D Viewer. Then, unhide our depth map (set its opacity to 100%) and press "Load Depth" in the 3D Viewer. We should see the 3D image in front of us.</p>
|
|
|
|
<img src="//i.imgur.com/eR2W3EA.gif" style="width:50%" />
|
|
|
|
<h2>Save Two Images</h2>
|
|
|
|
<p>When the depth map looks well, save it to the computer. Press File - Export As - PNG, and press "Save", while adding the "_depth" to the end of the file name. If our colored image is named "dog.jpg", the depth map should have a name "dog_depth.png". Load both images into a Facebook post and publish your first 3D photo :)</p>
|
|
|
|
<div id="fb-root"></div>
|
|
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v9.0&appId=1709573295939738&autoLogAppEvents=1" nonce="JLw0icPI"></script>
|
|
<div class="fb-post" data-href="https://www.facebook.com/photopea/posts/2675270306067374" data-show-text="true" data-width=""><blockquote cite="https://www.facebook.com/photopea/posts/2675270306067374" class="fb-xfbml-parse-ignore"><p>Press Window - More - 3D Viewer, to preview 3D photos right inside Photopea :)
|
|
Photopea.com/tuts/how-to-make-a-facebook-3d-photo-easily</p>Posted by <a href="https://www.facebook.com/photopea/">Photopea</a> on <a href="https://www.facebook.com/photopea/posts/2675270306067374">Tuesday, November 17, 2020</a></blockquote></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!--content-->
|
|
|
|
<div style="width:110px; margin: 0px auto;">
|
|
<a href="#" title="Share on Facebook" onclick="smallWindow('http://www.facebook.com/share.php?u=');"><img src="//www.photopea.com/promo/fb.png" /></a>
|
|
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="//www.photopea.com/promo/gp.png" /></a>
|
|
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="//www.photopea.com/promo/tw.png" /></a>
|
|
<script type="text/javascript">
|
|
function smallWindow(url)
|
|
{
|
|
var w = 640, h = 300;
|
|
window.open(url+"<? echo get_permalink($post); ?>", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="max-width:770px; margin: 0px auto;">
|
|
<h2 style="margin-top: 3em">Comments</h2>
|
|
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
|
</div>
|
|
<div id="disqus_thread"></div>
|
|
<script type="text/javascript">
|
|
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
|
|
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
|
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
|
|
</script>
|
|
<!--main-->
|
|
<?//php get_sidebar(); ?>
|
|
|
|
<div id="footer">© 2013-2021 support@photopea.com</div>
|
|
</div> <!--page-->
|
|
</body>
|
|
</html> |