photopea-v2/blog.photopea.com/photopea-3-8-live-shapes-and-new-filters.html

104 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title> Photopea 3.8 &#8211; Live Shapes and new filters!</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://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">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4249565-38', 'photopea.com'); ga('send', 'pageview');
</script>
</head>
<body>
<div id="page">
<div id="header">
<a href="https://blog.photopea.com/" class="title">Photopea Blog</a>
<!--<p>Web-based image editor.</p>-->
<a class="curr" href="//blog.photopea.com">Blog</a> |
<a href="//www.photopea.com/learn">Learn</a> |
<a 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-841">
<span class="date">October 21, 2018</span>
<h1>Photopea 3.8 &#8211; Live Shapes and new filters!</h1>
<div class="entry">
<p>New release of Photopea is here! It has <strong>64 545</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
<span id="more-841"></span>
<h2>New features</h2>
<ul>
<li>Live Shapes</li>
<li>New Distortion filters</li>
<li>Difference Clouds filter</li>
<li>Patch Tool 30x faster</li>
<li>Rename a document by double-clicking the Tab</li>
<li>Thousands of new fonts</li>
<li>Many bugs fixed</li>
</ul>
<h2>Live Shapes</h2>
<p>PSD files can store vector graphics, either as Vector Masks, or Shape Layers (more info <a href="//www.photopea.com/learn/vector-graphics">here</a>). These shapes are stored as Bézier curves. We can move Bézier knots, or transform the curves using a Free Transform, but there is no way to make a Rounded Rectangle 2x wider, while preserving the corner radius.</p>
<p>The PSD format lets us store the <b>Vector Origination Data</b>. These data contain the shape parameters (Type: Rectangle, Ellipse, Line... Width, Height, Corner Radius, etc.). Starting today, Photopea lets you edit these Origination data, and re-generate the vector shape according to them. These data can be edited in the Properties panel, under Live Shapes.</p>
<img src="//i.imgur.com/9TdjiSl.png" class="fullw" />
<p>All new Ellipses and Rectangles become Live Shapes. Also, when you open a Sketch file, Photopea converts appropriate shapes into Live shapes. Note, that if you move a knot of a live shape, or rotate it a bit, the origination data are lost, and it becomes just a regular shape.</p>
<h2>Distortion Filters</h2>
<p>We added several new PSD filters. They all can be used as Smart Filters on Smart Objects. You can also edit corresponding Smart filters in existing PSD files.</p>
<p>Distortion filters let us bend the image in an irregular way. They are similar to the Liquify filter, but instead of "bending" an image by hand, it is bent automatically according to some parameters (Pinch, Ripple, Shear, Spherize, Twirl).</p>
<p>The <b>Displace filter</b> can bend an image according to a map (another image). You have to choose a size and a direction of the displacement. A bright place in the map will cause a large displacement (of the corresponding spot in the image), while a dark place will move the image just a little.</p>
<p>The video below shows how it works in Adobe Photoshop. In Photopea, you don't choose the map as an external file, but you choose it from existing Smart Objects of the current document.</p>
<iframe class="fullw" height="400" src="https://www.youtube.com/embed/huvysaySBrw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</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+"https://blog.photopea.com/photopea-3-8-live-shapes-and-new-filters.html", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
}
</script>
</div>
</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">&copy; 2013-2021 support@photopea.com</div>
</div> <!--page-->
</body>
</html>