mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-17 17:06:21 +00:00
106 lines
5.5 KiB
HTML
106 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> Photopea 3.1 brings Aniamtions!</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-565">
|
|
<span class="date">September 26, 2017</span>
|
|
<h1>Photopea 3.1 brings Aniamtions!</h1>
|
|
<div class="entry">
|
|
|
|
<p>New release of Photopea is here! It has <strong>48 384</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
|
<span id="more-565"></span>
|
|
|
|
<h2>New features</h2>
|
|
|
|
<ul>
|
|
<li>Working with animations</li>
|
|
<li>Support for APNG (animated PNG) format</li>
|
|
<li>CSS panel</li>
|
|
<li>Selective Color adjustment</li>
|
|
<li>Several bugs fixed</li>
|
|
</ul>
|
|
|
|
<h2>Animations</h2>
|
|
|
|
<p>Animated images (GIF, APNG) are very popualr on the internet. Since today, Photopea offers you a simple and comfortable way to work with them. Let's start with a few basic things you can do:</p>
|
|
<ul>
|
|
<li>When you open an animated GIF or PNG in Photopea, each frame is in a separate layer</li>
|
|
<li>When you save such document back into GIF or PNG, it generates the same animation (with the same timing etc.)</li>
|
|
<li>If you remove or reorder layers (frames), add new ones etc., Photopea will generate the corresponding animation</li>
|
|
</ul>
|
|
|
|
<p>You can also create new animations from scratch, or change the timing of each frame.
|
|
Animation is controlled by the <b>special format of layer names</b>. Find more at <a href="//www.Photopea.com/learn/animations">Learn Animations</a>.</p>
|
|
|
|
<p>After loadeing <a href="/gifs/nyanCat.gif">this 32kB GIF</a> into Photopea, we were able to export it as <a href="/gifs/nyanCat_pp.gif">this 26kB GIF</a> and also as <a href="/gifs/nyanCat.png">this 8kB APNG</a>.
|
|
Feel free to <a href="//www.photopea.com?p=%7B%22files%22:%5B%22https://www.photopea.com/api/img2/nyanCat.gif%22%5D%7D" target="_blank">try it in Photopea</a>!</p>
|
|
|
|
<img src="/gifs/nyanCat.png" />
|
|
|
|
<p><a href="//en.wikipedia.org/wiki/APNG">Animated PNG</a> is a new format, which usually generates smaller files than GIF. It also supports any number of colors (GIF can have only 256 colors) and partially transparent pixels. Photopea is one of first editors, that support APNG.</p>
|
|
|
|
<h2>CSS panel</h2>
|
|
|
|
<p>In this version, we added a new CSS panel. As you select different layers, Photopea tries to deduce a style of the layer, and shows it in the CSS format. It takes into account <b>layer styles</b>, <b>shape properties</b> and <b>parameters of a Type layer</b>.
|
|
</p>
|
|
|
|
<img src="https://blog.photopea.com/wp-content/uploads/2017/09/css_panel.png" class="fullw"/>
|
|
</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-1-brings-aniamtions.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">© 2013-2021 support@photopea.com</div>
|
|
</div> <!--page-->
|
|
</body>
|
|
</html> |