mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-07-01 18:35:33 +00:00
The creator of Photopea apparently doesn't like scrapers, so it blocked my script access. Going to have to find another way to download it.
This commit is contained in:
DUOLabs333
parent
520766bc0e
commit
80894dbd6e
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Color Fonts in Photopea</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">
|
||||
@ -26,19 +26,56 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-692">
|
||||
<span class="date">January 19, 2018</span>
|
||||
<h1>Color Fonts in Photopea</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>Starting today, Photopea supports color fonts!</p>
|
||||
<span id="more-692"></span>
|
||||
|
||||
<p>We imagine a font as a set of shapes. The font gives each logical character some graphic representation. Text editors let us choose the color of our text, i.e. set the solid color to one or more characters. The shape of a character may be very complex, but we are still restricted to a single color for the whole character.</p>
|
||||
|
||||
<p>The new standard for <b>Color Fonts</b> allows using multiple colors inside one character (more details at <a href="https://www.colorfonts.wtf/" target="_blank">ColorFonts.wtf</a>). There are already many fonts in this format. They can be used in Photoshop, Pixelmator, Sketch and other commercial programs. Starting today, you can load and use such fonts in Photopea. PP is probably the first free editor having this capability.</p>
|
||||
|
||||
<p><b style="font-size:1.5em"><a href="https://www.photopea.com?p=%7B%22files%22:%5B%22https://www.photopea.com/api/img2/fnt_preview.psd%22%5D,%22resources%22:%5B%22https://www.photopea.com/api/img2/fnts/Abelone-FREE.otf%22,%22https://www.photopea.com/api/img2/fnts/BungeeColor-Regular_svg.ttf%22,%22https://www.photopea.com/api/img2/fnts/Gilbert-Color%20Bold-Preview_1004.otf%22,%22https://www.photopea.com/api/img2/fnts/NTBixa-Color.otf%22,%22https://www.photopea.com/api/img2/fnts/Playbox-FREE.otf%22%5D,%22environment%22:%7B%7D%7D" target="_blank">Try Color Fonts in Photopea Now!</a></b></p>
|
||||
|
||||
<p>All our effort is available to the public in our open-source library <a href="https://github.com/photopea/Typr.js" target="_blank">Typr.js</a>.</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2018/01/fnt_preview.png" class="fullw" />
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/color-fonts-in-photopea.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Compress textures with Photopea</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">
|
||||
@ -26,19 +26,58 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-598">
|
||||
<span class="date">November 19, 2017</span>
|
||||
<h1>Compress textures with Photopea</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>Today, we are adding a new feature into Photopea: the support for DDS textures.</p>
|
||||
<span id="more-598"></span>
|
||||
|
||||
<p>Modern video games are accelerated with technologies such as OpenGL, DirectX or Vulkan. The view of the game is rendered "in parallel" by hundreds of small processing units. Each unit may need to access a specific part (pixel) of some texture (e.g. the bottom left pixel).</p>
|
||||
|
||||
<p>In modern image formats (such as PNG or JPG), it is not possible to view a specific part of the image. We must decompress the whole image first. Thus, JPG and PNG files can not be directly used with OpenGL. But with many large textures, some kind of texture compression would be really handy.</p>
|
||||
|
||||
<img src="https://www.khronos.org/assets/images/api_logos/opengl.svg" style="width:400px" />
|
||||
|
||||
<p>In past years, new techniques have been developed (such as <a href="https://en.wikipedia.org/wiki/S3_Texture_Compression">S3TC</a>), which can make textures even eight times smaller (than uncompressed), while still appropriate for OpenGL (easy to access by processing units). The image is divided into small parts: 4x4 pixels. Each such part is compressed independently.
|
||||
When a processing unit needs to read some pixel, we first check, in which 4x4 part the pixel is located. Then, we decompress that part (all 16 pixels), read the pixel in concern, and throw away the information about other 15 pixels.</p>
|
||||
|
||||
<p>Textures, compressed this way, are usually stored in <a href="https://en.wikipedia.org/wiki/DirectDraw_Surface">DDS</a> or similar files. Starting today, Photopea can open these DDS files. It can also export textures in DDS format using File - Export - DDS. Try to download <a href="https://github.com/toji/webgl-texture-utils/blob/master/sample/img/test-dxt1.dds?raw=true">this DDS file</a> and open it in Photopea!</p>
|
||||
|
||||
<p>This is a next step in our journey to make Photopea open any image format. We released our compression methods in an open-source library <a href="https://github.com/photopea/UTEX.js">UTEX.js</a>. We believe it can have many applications besides Phtopea editor.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/compress-textures-with-photopea.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Creating Photopea</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">
|
||||
@ -26,19 +26,76 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-660">
|
||||
<span class="date">December 14, 2017</span>
|
||||
<h1>Creating Photopea</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>Photopea is an advanced image editor, which evolved for more than four years. In terms of complexity, it can be placed next to Adobe Photoshop or GNU GIMP.</p>
|
||||
|
||||
<span id="more-660"></span>
|
||||
|
||||
<p>It was built around three ideas: <b>make advanced editing accessible</b> to everyone (in terms of cost and device requirements), <b>remove borders</b> between programs (support all existing file formats instead of inventing a new format) and make designers <b>less dependent</b> on their software (if it suddenly stops working, you should still have a chance to use your files somehow).</p>
|
||||
|
||||
<a target="_blank" href="//www.photopea.com/promo/screens/scr6.png"><img src="//www.photopea.com/promo/screens/scr6.png" style="width:400px" /></a>
|
||||
|
||||
<p>Now, an the end of 2017, there is a <a href="//www.Photopea.com">web-based editor Photopea</a>, that runs on every device. It has an excellent support for PSD and Sketch files. It can be used by anybody for free and has been visited by more than <b>2.5 millions of people</b>, who spent <b>120 000 hours</b> using it.</p>
|
||||
|
||||
|
||||
<h2>The Development</h2>
|
||||
|
||||
<p>My name is Ivan Kutskir <!--(Kuckir, Куцкір)--> and I am the only developer of Photopea. I am 27 years old graduate of the <a href="//www.mff.cuni.cz/to.en/">Charles University in Prague</a>. I live in Prague, Czech Republic, but I was born in Ukraine.</p>
|
||||
|
||||
<a target="_blank" href="//blog.photopea.com/wp-content/uploads/2017/06/picture_narrow.jpg"><img src="//blog.photopea.com/wp-content/uploads/2017/06/picture_narrow.jpg" style="width:300px" /></a>
|
||||
|
||||
<p>I did things such as programming, creating icons for tools, or writing all posts on this blog. I even <a href="//www.facebook.com/photopea/photos/a.1703140446613703.1073741829.1408717406056010/1856597134601366/?type=3&theater">designed the logo</a>. Working on PP was my hobby and I truly enjoyed it (most of the time).</p>
|
||||
|
||||
<p>At the beginning, I had no hopes of making anything useful, I was just playing around. The idea of creating an advanced image editor on my own seemed stupid, and making it a webapp seemed like a complete joke.</p>
|
||||
|
||||
<p>After some time, my toy editor started to become more and more powerful. The response from users was very positive, so I decided to keep working on it as long as I can. I have solved <a href="//github.com/photopea/photopea/issues">400 bugs and feature requests from users</a>. I also produced <a href="//github.com/photopea">several libraries</a>, that are free to use for everybody (open-source under the MIT licence).</p>
|
||||
|
||||
<h2>The Future</h2>
|
||||
|
||||
<p>Photopea already offers advanced image editing tools and can even replace commercial editors to a large extent.
|
||||
It is also <b>a platform</b>, which allows adding new state-of-the-art features much faster than the competition. When somebody suggests a new kick-ass feature, it can appear in Photopea the next day. All users always use the latest version of the software.</p>
|
||||
|
||||
<p>I don't plan to keep doing everything myself. I want to create a team of developers as soon as it is possible. I believe we can fully catch up with our competitors and even get beyond. We will keep moving towards the most advanced and the most accessible image editor in the world.</p>
|
||||
|
||||
<p>You can hep me achieve it by using Photopea, recommending it to your friends, making tutorials, or just sharing the info on social networks (many of you already do). Follow us on <a href="https://www.facebook.com/photopea">Facebook</a> or <a href="https://twitter.com/photopeacom">Twitter</a>.</p>
|
||||
|
||||
<big><i>Thank You,<br/>Ivan</i></big>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/creating-photopea.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Even better PNG minification</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">
|
||||
@ -26,19 +26,70 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-610">
|
||||
<span class="date">November 22, 2017</span>
|
||||
<h1>Even better PNG minification</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>We introduced a <a href="https://blog.photopea.com/png-minifier-inside-photopea.html">PNG minifier</a> inside Photopea half a year ago.
|
||||
Today, we are glad to announce, that it is even better!</p>
|
||||
<span id="more-610"></span>
|
||||
|
||||
<p>The previous minifier was fast and generated really small files, while keeping a decent quality. But it had problems in some cases, e.g.
|
||||
when there were large gradients.</p>
|
||||
|
||||
<p>We improved our PNG minifier by implementing a completely different quantization algorithm, based on <a href="https://en.wikipedia.org/wiki/K-d_tree">k-D trees</a>. It generates much better palettes and it is also 6x faster than the previous algorithm.</p>
|
||||
|
||||
<p>In the following example, we wanted to make an original PNG (18 kB - the first image) four times smaller. You can see an output of an old minifier, and an output of a new minifier, which looks significantly better.</p>
|
||||
|
||||
|
||||
<table><tbody>
|
||||
<tr>
|
||||
<td><img src="/pngs/pea_orig.png" /></td>
|
||||
<td><img src="/pngs/pea_old.png" /></td>
|
||||
<td><img src="/pngs/pea_new.png" /></td>
|
||||
<!--<td><img src="/pngs/pea_tiny.png" /></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Original - 18.7 kB</td>
|
||||
<td>Old minifier - 4.8 kB</td>
|
||||
<td>New minifier - 4.8 kB</td>
|
||||
<!--<td>TinyPNG - 6.9 kB</td>-->
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<p>Our new minifier is already available in <a href="//www.Photopea.com">Photopea</a>. It is also available in our open-source library <a href="https://github.com/photopea/UPNG.js">UPNG.js</a> and at <a href="http://upng.photopea.com">upng.Photopea.com</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/even-better-png-minification.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title>Photopea Blog</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">
|
||||
@ -26,19 +26,326 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
<div class="post" id="post-1001">
|
||||
<span class="date">January 12, 2021</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-5-0-open-illustrator-files.html">Photopea 5.0 – open Illustrator files!</a>
|
||||
<p>A new release of Photopea is here! It has <strong>98 893</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-994">
|
||||
<span class="date">August 24, 2020</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-9-new-tools-and-formats.html">Photopea 4.9 – New tools and formats!</a>
|
||||
<p>A new release of Photopea is here! It has <strong>93 064</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-988">
|
||||
<span class="date">June 11, 2020</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-8-shadowshighlights.html">Photopea 4.8 – Shadows/Highlights</a>
|
||||
<p>A new release of Photopea is here! It has <strong>91 049</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-972">
|
||||
<span class="date">March 1, 2020</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-7-puppet-warp.html">Photopea 4.7 – Puppet Warp</a>
|
||||
<p>A new release of Photopea is here! It has <strong>87 368</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-963">
|
||||
<span class="date">January 27, 2020</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-6-open-figma-files.html">Photopea 4.6 – Open Figma Files!</a>
|
||||
<p>New release of Photopea is here! It has <strong>84 837</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-934">
|
||||
<span class="date">November 6, 2019</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-5-smarter-selections.html">Photopea 4.5 – Smarter Selections!</a>
|
||||
<p>New release of Photopea is here! It has <strong>82 676</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-930">
|
||||
<span class="date">October 13, 2019</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-4-text-on-a-curve-and-more.html">Photopea 4.4 – Text on a Curve and more!</a>
|
||||
<p>New release of Photopea is here! It has <strong>81 140</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-910">
|
||||
<span class="date">July 2, 2019</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-3-slices-and-more.html">Photopea 4.3 – Slices and more!</a>
|
||||
New release of Photopea is here! It has <strong>76 553</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-893">
|
||||
<span class="date">May 3, 2019</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-2-with-local-storage.html">Photopea 4.2 – try Local Storage!</a>
|
||||
<p>New release of Photopea is here! It has <strong>74 109</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-882">
|
||||
<span class="date">February 26, 2019</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-1-actions-new-filters.html">Photopea 4.1 – Actions and new Filters!</a>
|
||||
<p>New release of Photopea is here! It has <strong>72 317</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-867">
|
||||
<span class="date">January 4, 2019</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-4-0-nef-cr2-arw-support.html">Photopea 4.0 – NEF, CR2 and ARW support!</a>
|
||||
<p>New release of Photopea is here! It has <strong>68 161</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-860">
|
||||
<span class="date">December 4, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-9-templates.html">Photopea 3.9 – Simple Templates!</a>
|
||||
<p>New release of Photopea is here! It has <strong>66 263</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-841">
|
||||
<span class="date">October 21, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-8-live-shapes-and-new-filters.html">Photopea 3.8 – Live Shapes and new filters!</a>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-825">
|
||||
<span class="date">September 26, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-7-wmf-and-emf-support.html">Photopea 3.7 – WMF and EMF support</a>
|
||||
<p>New release of Photopea is here! It has <strong>63 342</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-815">
|
||||
<span class="date">August 13, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-6-edit-presets.html">Photopea 3.6 – Edit presets</a>
|
||||
<p>New release of Photopea is here! It has <strong>62 371</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-792">
|
||||
<span class="date">June 14, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-5-xd-support.html">Photopea 3.5 – XD support</a>
|
||||
<p>New release of Photopea is here! It has <strong>59 924</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-747">
|
||||
<span class="date">April 30, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-4-refine-edges.html">Photopea 3.4 – Refine Edges</a>
|
||||
<p>New release of Photopea is here! It has <strong>57 722</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-730">
|
||||
<span class="date">February 22, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/vectorize-bitmaps-in-photopea.html">Vectorize bitmaps in Photopea!</a>
|
||||
<p>We just launched a new feature: <b>bitmap to vector conversion</b>. See how it works!</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-720">
|
||||
<span class="date">February 3, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-3-pdf-import-and-export.html">Photopea 3.3: PDF import and export</a>
|
||||
<p>New release of Photopea is here! It has <strong>53 249</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-692">
|
||||
<span class="date">January 19, 2018</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/color-fonts-in-photopea.html">Color Fonts in Photopea</a>
|
||||
<p>Starting today, Photopea supports color fonts!</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-667">
|
||||
<span class="date">December 16, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-2-advanced-selecting.html">Photopea 3.2: Advanced selecting</a>
|
||||
<p>New release of Photopea is here! It has <strong>52 146</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-660">
|
||||
<span class="date">December 14, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/creating-photopea.html">Creating Photopea</a>
|
||||
<p>Photopea is an advanced image editor, which evolved for more than four years. In terms of complexity, it can be placed next to Adobe Photoshop or GNU GIMP.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-610">
|
||||
<span class="date">November 22, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/even-better-png-minification.html">Even better PNG minification</a>
|
||||
<p>We introduced a <a href="https://blog.photopea.com/png-minifier-inside-photopea.html">PNG minifier</a> inside Photopea half a year ago.
|
||||
Today, we are glad to announce, that it is even better!</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-598">
|
||||
<span class="date">November 19, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/compress-textures-with-photopea.html">Compress textures with Photopea</a>
|
||||
<p>Today, we are adding a new feature into Photopea: the support for DDS textures.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-591">
|
||||
<span class="date">October 8, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/raw-support-in-photopea.html">RAW support in Photopea</a>
|
||||
<p>Today, we are adding a new feature into Photopea: the support for RAW images.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-565">
|
||||
<span class="date">September 26, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-1-brings-aniamtions.html">Photopea 3.1 brings Aniamtions!</a>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-551">
|
||||
<span class="date">August 14, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-3-0-with-svg.html">Photopea 3.0: SVG support</a>
|
||||
<p>New release of Photopea is here with Scripting and a better support for Sketch files! It has <strong>47 362</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-538">
|
||||
<span class="date">July 23, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-9-scripts-are-here.html">Photopea 2.9: Scripts are here!</a>
|
||||
<p>New release of Photopea is here with Scripting and a better support for Sketch files! It has <strong>45 814</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-528">
|
||||
<span class="date">July 6, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-8-with-more-text-options.html">Photopea 2.8 with more text options!</a>
|
||||
<p>New release of Photopea is here with vector editing capabilities! It has <strong>44 779</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-464">
|
||||
<span class="date">June 1, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-7-with-vector-editing.html">Photopea 2.7 with vector editing!</a>
|
||||
<p>New release of Photopea is here with vector editing capabilities! It has <strong>43 123</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-412">
|
||||
<span class="date">May 9, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/png-minifier-inside-photopea.html">PNG minifier inside Photopea</a>
|
||||
<p>We have added a new feature to Photopea, which can significantly minify PNG images.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-398">
|
||||
<span class="date">April 25, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-6-can-open-sketch.html">Photopea 2.6 can open Sketch!</a>
|
||||
<p>New release of Photopea is out! It has <strong>40 722</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-386">
|
||||
<span class="date">March 23, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-5.html">Photopea 2.5</a>
|
||||
<p>New release of Photopea is out! It has <strong>38 857</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-367">
|
||||
<span class="date">March 2, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-4.html">Photopea 2.4</a>
|
||||
<p>New release of Photopea is out! It has <strong>38 810</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-357">
|
||||
<span class="date">February 5, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-3-six-new-tools.html">Photopea 2.3 – six new tools!</a>
|
||||
<p>New release of Photopea is out! It has <strong>37 400</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-344">
|
||||
<span class="date">January 25, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/patterns-and-fill-layers.html">Patterns and Fill Layers</a>
|
||||
<p>In this little update, we present the full support for Patterns and Fill Layers.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-329">
|
||||
<span class="date">January 16, 2017</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-2.html">Photopea 2.2</a>
|
||||
<p>New release of Photopea is out! It has <strong>36 906</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-308">
|
||||
<span class="date">September 20, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/surface-blur-and-median.html">Surface Blur and Median</a>
|
||||
<p>Today, Photopea gets two new professional filters: Surface Blur filter and Median filter! Moreover, Photopea performs them much faster, than Photoshop and GIMP do, as you can see in the last section. See it in action at the <a href="//www.photopea.com">main site</a>. Our images come from <a href="//shellandslate.com/fastmedian.html">Shell And Slate</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-297">
|
||||
<span class="date">September 17, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-premium.html">Photopea Premium</a>
|
||||
<p>Starting today, you can upgrade your account to a Premium account. It does not give you any extra features, but it helps us improve Photopea for you.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-288">
|
||||
<span class="date">September 9, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-1.html">Photopea 2.1</a>
|
||||
<p>New release of Photopea is out! It has <strong>34 982</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-275">
|
||||
<span class="date">August 24, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-2-0.html">Photopea 2.0</a>
|
||||
<p>New release of Photopea is out! It has <strong>33 593</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-266">
|
||||
<span class="date">August 3, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-9.html">Photopea 1.9</a>
|
||||
<p>New release of Photopea is out! It has <strong>32 156</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-247">
|
||||
<span class="date">June 28, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-8.html">Photopea 1.8</a>
|
||||
<p>New release of Photopea is out! It has <strong>30 533</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-234">
|
||||
<span class="date">May 2, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-7.html">Photopea 1.7</a>
|
||||
<p>New release of Photopea is out! It has <strong>32 200</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-212">
|
||||
<span class="date">March 31, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-6-meets-google-drive.html">Photopea 1.6 meets Google Drive</a>
|
||||
<p>New release of Photopea is out! It has <strong>31 595</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-195">
|
||||
<span class="date">February 21, 2016</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-5.html">Photopea 1.5</a>
|
||||
<p>New release of Photopea is out! It has <strong>31 023</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-185">
|
||||
<span class="date">November 19, 2015</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-4.html">Photopea 1.4</a>
|
||||
<p>New release of Photopea is out! It has <strong>29 970</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-172">
|
||||
<span class="date">August 26, 2015</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-3.html">Photopea 1.3</a>
|
||||
<p>New release of Photopea is out! It has <strong>27 587</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-163">
|
||||
<span class="date">July 26, 2015</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-2.html">Photopea 1.2</a>
|
||||
<p>New release of Photopea is out! It has <strong>26 383</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="post" id="post-156">
|
||||
<span class="date">February 27, 2015</span>
|
||||
<a class="postlink" href="https://blog.photopea.com/photopea-1-1.html">Photopea 1.1</a>
|
||||
<p>New release of Photopea is out! It has <strong>24 163</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<div class="alignleft"><a href="https://blog.photopea.com/page/2" >« Older posts</a></div>
|
||||
<div class="alignright"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
|
||||
</div></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Introduction</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">
|
||||
@ -26,19 +26,85 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-6">
|
||||
<span class="date">September 14, 2013</span>
|
||||
<h1>Introduction</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>What is Photo Pea, why it was made, and what should it be used for.</p>
|
||||
|
||||
<span id="more-6"></span>
|
||||
|
||||
<h2>A little story</h2>
|
||||
|
||||
<p>
|
||||
In September 2012, I had two courses of computer graphics behind me and had a lot of spare time.
|
||||
So I got an idea to make a simple web-based photo editor. I was working on it for 3 months in 2012 and 2 months during this summer, and I really enjoyed it! :)
|
||||
I learned many new things and realised, that it is not going to be as easy as I expected.
|
||||
</p>
|
||||
|
||||
<h2>Just another photo editor?</h2>
|
||||
|
||||
<p>
|
||||
Modern photo editors (GNU Gimp, Adobe Photoshop, Zoner Photo Studio) are usually native apps, which have to be downloaded and installed on the device.
|
||||
It takes pretty long time to turn them on and off. It may bother you, e.g. when you just want to resize a photo.
|
||||
Adobe Photoshop, which is very often used by many professionals, is also quite expensive.
|
||||
</p>
|
||||
<p>
|
||||
Because photo editors are native apps, it is hard to find any good editor for some minority operating systems.
|
||||
Some users may even buy some specific operating system just to be able to run the photo editor.
|
||||
Photo Pea should remove all these problems.
|
||||
</p>
|
||||
|
||||
<h2>Main features of Photo Pea</h2>
|
||||
|
||||
<p>Photo Pea should be an advanced editor, so it can be used by professionals. It must have:</p>
|
||||
|
||||
<ul>
|
||||
<li>Layers - to split images into several parts</li>
|
||||
<li>Layer masks - just generally useful</li>
|
||||
<li>Blend modes - specifying, how layers "combine" with each other</li>
|
||||
<li>Brush - there must be a way to change the color of pixels</li>
|
||||
<li>Selections - choosing, which pixels of layer you want to edit</li>
|
||||
<li>Procedural adjustments - changing brightness, hue, saturation, convolutions (blur, sharpening ...) etc.</li>
|
||||
</ul>
|
||||
|
||||
<h2>File formats</h2>
|
||||
|
||||
<p>I wanted Photo Pea to cooperate with currently used programs and implement their formats. I decided to implement the parser for PSD and XCF.</p>
|
||||
|
||||
<p>Well, you know the goals! Follow this blog to see how am I doing :)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/introduction.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Merry Christmas!</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">
|
||||
@ -26,19 +26,49 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-69">
|
||||
<span class="date">December 24, 2013</span>
|
||||
<h1>Merry Christmas!</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>Merry Christmas and Happy New Year to all Photo Pea users and fans!</p>
|
||||
<span id="more-69"></span>
|
||||
<p>I am not releasing a new version of Photopea this month, since I am currently too busy with my exams at a college. But new release will be here in February and you will get your Christmas presents (new features) a month later :) .</p>
|
||||
|
||||
<p>If I will be able to keep my tempo, Photopea may evolve into pretty decent tool during the year 2014. Wish me luck!</p>
|
||||
|
||||
<p style="font-size:4em; color:#990000">Merry Christmas and Happy New Year 2014!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/merry-christmas.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Patterns and Fill Layers</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">
|
||||
@ -26,19 +26,61 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-344">
|
||||
<span class="date">January 25, 2017</span>
|
||||
<h1>Patterns and Fill Layers</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>In this little update, we present the full support for Patterns and Fill Layers.</p>
|
||||
<span id="more-344"></span>
|
||||
|
||||
<h2>Patterns</h2>
|
||||
|
||||
<p>Patterns are an important part of every image editor. In PSD files, patterns can be used either in Pattern Fill Layers, or in Layer Styles - Pattern overlay.</p>
|
||||
|
||||
<p>Since this release, Photopea contains a Pattern selection button, which is present in properties of a Fill Layer, or in properties of a Pattern Overlay. When you start Photopea, several basic patterns are loaded. You can also open your own patterns (using File - Open or just by dragging and dropping them into Photopea). Patterns should be in a <b>.PAT</b> format, which is the same as for Adobe Photoshop (you can find lots of free patterns on the internet).</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2017/01/PattButton.png" alt="PattButton" />
|
||||
|
||||
<h2>Fill Layers</h2>
|
||||
|
||||
<p>PSD files may contain so-called Fill Layers, their content is generated automatically. Fill layer can contain either a Solid Color, a Gradient or a Pattern (with additional parameters such as the size of the pattern, the angle of the gradient, etc.). You can not draw anything into fill layers, but they may have raster or vector masks attached.</p>
|
||||
|
||||
<p>Since this release, you can create new Fill Layers using Layer - New Fill Layer. You can also edit the parameters of an existing Fill Layer by double-clicking the thumbnail of the layer.</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2017/01/GradientFill.png" alt="GradientFill" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/patterns-and-fill-layers.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photo Pea 0.1</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">
|
||||
@ -26,19 +26,74 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-12">
|
||||
<span class="date">September 14, 2013</span>
|
||||
<h1>Photo Pea 0.1</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>Description of the first Photo Pea release. Check it out at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-12"></span>
|
||||
<h2>Features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Parsing and basic rendering of PSD files (see below)</li>
|
||||
<li>Zoom tool</li>
|
||||
<li>Hand tool (to move the canvas)</li>
|
||||
<li>Move tool (for moving layers, masks etc)</li>
|
||||
<li>History panel + navigation Backward / Forward</li>
|
||||
</ul>
|
||||
|
||||
<h2>PSD format</h2>
|
||||
|
||||
<p>The first release of Photo Pea contains PSD parser. PSD format comes from Adobe Photoshop and is well documented at <a href="http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/">Adobe's webpage</a>. My parser is very simple, it parses only 8-bit RGBA image channels (no grayscale, HDR etc.). It also parses several layer properties, raster and vector masks, folder structure and layer effects.</p>
|
||||
|
||||
<p>After making such parser, my next goal was to "draw" the image. User will probably want his project to look exactly like in Photoshop.
|
||||
And there was the first big problem. Adobe says, how to get each integer, float and string out of their file, but they don't say how to interpret all that data. Some properties are obvious (layer dimensions, position, opacity), but others are not.</p>
|
||||
|
||||
<p>When making a rasterizer, the first necessary thing was to implement blending with different blend modes. Fortunatelly, blend modes are used across differnt applications. In my implementation, blending should work exactly the same, as in Adobe Photoshop, and probably many other programs.</p>
|
||||
|
||||
<p>Another hard and still unfinished feature are layer effects. I had no clue, how they work in Adobe Photoshop, so I could only guess. Usually, it was some combination of blurying, colorizing and combining with current layer. But - for example - Bevel and Emboss effect - I still have no idea how it works. If you know, how Bevel and Emboss effect work, let me know in comments below.</p>
|
||||
|
||||
<h2>Speed</h2>
|
||||
|
||||
<p>All current Photo Pea code is Javascript and is executed by browser on the CPU. Blending can take several seconds, when you blend large project (several megapixels) with many layers and layer effects. If you look into browser console, you can see some information about parsing and blending time. When you edit something, the project is completely reblended. There is no caching of pre-blended data now.</p>
|
||||
|
||||
<p>Modern native editors usually use GPU through OpenGL or OpenCL. It will be also necessary in Photo Pea for having some decent performance. The WebGL standard is already present in all main browsers, but WebCL, which is more appropriate, is not :( </p>
|
||||
|
||||
<img class="fullw" src="//blog.photopea.com/wp-content/uploads/2013/09/916FD094-7E37-4143-9FEC-64FC0A1BBA1E.jpg" alt="Screenshot on iPad" />
|
||||
|
||||
<p>Drag and Drop your PSD files to PP window and see how it works by yourself :)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/photo-pea-0-1.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photo Pea 0.2</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">
|
||||
@ -26,19 +26,61 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-32">
|
||||
<span class="date">September 25, 2013</span>
|
||||
<h1>Photo Pea 0.2</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The second release of Photo Pea is out! It has <strong>6 982</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-32"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Saving to PSD format (File - Save as PSD)</li>
|
||||
<li>Pattern Overlay layer effect implemented</li>
|
||||
<li>Several bugs removed</li>
|
||||
<li>Several memory optimizations</li>
|
||||
</ul>
|
||||
|
||||
<h2>Saving to PSD</h2>
|
||||
|
||||
<p>PSD format uses several types of channel compression. It saves raw data, RLE (PackBits), ZIP with and without prediction. Adobe Photoshop uses RLE by default. At the beginning, I implemented saving raw data. But output files were about 5 times larger, than original from Photoshop, so I decided to implement RLE. My RLE implementation is probably not as good as one from Adobe, because output files are still about 10 to 60 percent larger than original file.</p>
|
||||
|
||||
<p>Now you can easily convert any JPG/PNG/WEBP to PSD inside a browser.</p>
|
||||
|
||||
<p>The input and output works well. I would like to focus on some editing tools in future releases.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/photo-pea-0-2.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photo Pea 0.4</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">
|
||||
@ -26,19 +26,59 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-52">
|
||||
<span class="date">November 21, 2013</span>
|
||||
<h1>Photo Pea 0.4</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The fourth release of Photo Pea is out! It has <strong>10 988</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-52"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Clone Stamp Tool and Eraser Tool</li>
|
||||
<li>Brush, Clone and Eraser work with raster masks too</li>
|
||||
<li>First procedural adjustment: Hue/Saturation</li>
|
||||
<li>Selections: Rectangle select, Ellipse select, Classic and Polygonal Lasso</li>
|
||||
<li>Magic Wand tool for selecting "similar" pixels</li>
|
||||
<li>5 set operations to combine selections</li>
|
||||
<li>Select -> All, Inverse, Expand, Contract and Feather commands</li>
|
||||
<!--<li>* Move Tool does not cooperate with selections yet</li>-->
|
||||
<li>Several keyboard shortcuts added</li>
|
||||
</ul>
|
||||
|
||||
<img class="fullw" src="http://blog.photopea.com/wp-content/uploads/2013/11/pp_0.4.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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/photo-pea-0-4.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photo Pea 0.3</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">
|
||||
@ -26,19 +26,66 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-39">
|
||||
<span class="date">October 27, 2013</span>
|
||||
<h1>Photo Pea 0.3</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The third release of Photo Pea is out! It has <strong>9 039</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-39"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Editing layer tree (drag'n'drop items, new layer/folder/mask, delete layer, rename)</li>
|
||||
<li>New options: Save for web, New project</li>
|
||||
<li>Brush tool - support for .ABR brushes</li>
|
||||
<li>Color Picker</li>
|
||||
<li>Several bugs removed</li>
|
||||
</ul>
|
||||
|
||||
<h2>ABR brushes</h2>
|
||||
|
||||
<p>I was thinking about some good format for storing brushes externally. I found out, that there are tons of brushes in ABR, which is the brush format for Adobe Photoshop. Sadly, this format is not publicly documented. I had to play with it for a long time, until I finally finished the parser (maybe it is called reverse engineering, I am not sure).</p>
|
||||
|
||||
<h2>Image Export</h2>
|
||||
|
||||
<p>I added 3 formats into Save for web menu: PNG, JPG and WEBP. All existing libraries for encoding were too slow, so I decided to use Canvas.toDataUrl(...). The size and quality of exported files may vary in different browsers.</p>
|
||||
|
||||
<h2>Usage scenarios</h2>
|
||||
|
||||
<p>In current state, PhotoPea can be used for resizing images (Drag'n'drop a file, File->Save for web, enter dimension, Save). It can also be used as a simple drawing tool with layers and PSD export (and blend modes).</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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-0-3.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photopea 0.5</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">
|
||||
@ -26,19 +26,66 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-78">
|
||||
<span class="date">February 28, 2014</span>
|
||||
<h1>Photopea 0.5</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The fifth release of Photopea is out! It has <strong>12 551</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-78"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Crop Tool</li>
|
||||
<li>Gradient Tool</li>
|
||||
<li>Loading and parsing Adobe Gradients (.GRD) format</li>
|
||||
<li>Partial Layer Style editor (double click on lyer)</li>
|
||||
<li>Several bugs removed</li>
|
||||
<li>Changing product name from "Photo Pea" to "Photopea"</li>
|
||||
</ul>
|
||||
|
||||
<h2>Layer styles</h2>
|
||||
|
||||
<p>Automatic layer styles (drop shadow, stroke etc.) are very useful features of every image editor. Currently there exist millions of PSD files, which use layer styles of Adobe Photoshop, so we decided to adopt them as the basic set of styles into Photopea. In future versions, I plan to add new styles or extend current ones by new features.</p>
|
||||
|
||||
<p>Note, that Photopea is <strong>only simulating</strong> styles from Adobe Photoshop. PSD files contain many numbers (parameters) for each style and Adobe does not say, how to transform those numbers into an actual image, so I implemented them as "how I thing they might work". I still have no idea how Bevel and Emboss work, if you know it, please tell me that in comments.</p>
|
||||
|
||||
<h2>GRD files</h2>
|
||||
|
||||
<p>Drawing gradients is also a very useful feature of image editor. Currently there are thousands of GRD files available for free on the internet, so I decided to add support for them. To use your GRD file, just drag and drop that file into Photopea.</p>
|
||||
|
||||
<img class="fullw" src="//blog.photopea.com/wp-content/uploads/2014/02/pp_0.5.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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-0-5.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photopea 0.6</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">
|
||||
@ -26,19 +26,56 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-90">
|
||||
<span class="date">March 27, 2014</span>
|
||||
<h1>Photopea 0.6</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The sixth release of Photopea is out! It has <strong>13 756</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-90"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Gradient Editor</li>
|
||||
<li>Move Tool can move and duplicate sub-area now</li>
|
||||
<li>Vector Masks rebuilt - shapes are combined correctly</li>
|
||||
<li>Layer menu - New, Delete, Raster Mask, Vector Mask</li>
|
||||
<li>More features editable in Layer Style Editor (including gradient)</li>
|
||||
<li>Rendering the project is 12 % faster now</li>
|
||||
<li>Several bugs fixed</li>
|
||||
<li>We have a brand new <a href="https://twitter.com/photopeacom">Twitter account</a> and <a href="https://www.facebook.com/photopea">Facebook page</a>. Become a follower!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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-0-6.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photopea 0.7</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">
|
||||
@ -26,19 +26,61 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-114">
|
||||
<span class="date">April 20, 2014</span>
|
||||
<h1>Photopea 0.7</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The seventh release of Photopea is out! It has <strong>15 984</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-114"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Levels tool (Ctrl+L) and Curves tool (Ctrl+M)</li>
|
||||
<li>Free Transform added (Edit -> Free Transform)</li>
|
||||
<li>Magnetic Lasso</li>
|
||||
<li>Copy / Paste of selected area, works between multiple projects</li>
|
||||
<li>System clipboard support - you can paste any copied (or PrintScreened) image using Ctrl+V</li>
|
||||
<li>(These two parts will be "merged" after some browser implements the new <a href="http://www.w3.org/TR/2014/WD-clipboard-apis-20140313/">Clipobard API</a>)</li>
|
||||
<li>Satin layer style implemented</li>
|
||||
<li>Nicer alert message panel</li>
|
||||
</ul>
|
||||
<!--
|
||||
<h2>Magnetic Lasso</h2>
|
||||
|
||||
<p>The tool Magnetic Lasso is a Photopea version of Magnetic Lasso in Adobe Photoshop and Scissor Select in Gimp. This tool should help you to make proper selections by "snapping" to contours of image near the cursor. I implemented it according to <a href="http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.151.5098">Intelligent Scissors for Image Composition (1995) by Eric N. Mortensen , William A. Barrett</a>, including dynamic Path Cooling.</p>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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-0-7.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Page not found</title>
|
||||
<title> Photopea 0.8</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">
|
||||
@ -26,19 +26,62 @@
|
||||
<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" class="narrowcolumn">
|
||||
</div> <div id="main">
|
||||
<div id="content">
|
||||
|
||||
<div class="post" id="post-124">
|
||||
<span class="date">May 27, 2014</span>
|
||||
<h1>Photopea 0.8</h1>
|
||||
<div class="entry">
|
||||
|
||||
<h2 class="center">Error 404 - Not Found</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<p>The eighth release of Photopea is out! It has <strong>16 689</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-124"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Layer Fill editing</li>
|
||||
<li>Selection from layer's alpha channel (Ctrl + click on layer)</li>
|
||||
<li>Blending optimized (15 % faster)</li>
|
||||
<li>First two filters in Photopea! Gaussian Blur and Box Blur</li>
|
||||
<li>Text data parser</li>
|
||||
<li>We started to examine our options with Type Tool</li>
|
||||
</ul>
|
||||
|
||||
<h2>Type Tool</h2>
|
||||
|
||||
<p>Native programs can access the list of fonts available at the device. They can read the actual files, parse curves, transform them etc. But there is no API for webapps to access current user's fonts or even checking, if some font is available. The "context2D" API of Canvas element has "fillText" method, which allows us to rasterize simple text. But PSD text may be "Faux" Bold / Italic, or have Warp effects on it. So we need to work with curves.</p>
|
||||
|
||||
<p>Photopea could use its own fonts and don't care about user's fonts. But some users may want to edit their PSDs, where they use some special font. Even basic fonts like Arial or Times new Roman are licenced and Photopea can not use them for free. So we need an option for users to use their own font files. </p>
|
||||
|
||||
<p>We are facing so many obstacles with Type Tool. It should work correctly, while being simple to use. If you have any ideas or suggestions to help us move Photopea forward, write them in the comments below.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Visitors</h3>
|
||||
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
|
||||
</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-0-8.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></div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
</div> <!--page-->
|
||||
</body>
|
||||
|
||||
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title> Photopea 0.9</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-138">
|
||||
<span class="date">October 26, 2014</span>
|
||||
<h1>Photopea 0.9</h1>
|
||||
<div class="entry">
|
||||
|
||||
<p>The ninth release of Photopea is out! It has <strong>20 942</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
|
||||
<span id="more-138"></span>
|
||||
<h2>New features</h2>
|
||||
|
||||
<ul>
|
||||
<li><strong>Type Tool</strong></li>
|
||||
<li>Support for TTF fonts (drag'n'drop font file into PP)</li>
|
||||
<li>Several bugs fixed</li>
|
||||
</ul>
|
||||
|
||||
<h2>Type Tool</h2>
|
||||
|
||||
<p>Type Tool was probably the hardest tool I had to implement. Not because of complexity of programming, but because of compatibility with PSD format. The problem was finally solved and Photopea can edit text layers of PSD created by Photoshop, and Photoshop can edit text layers of PSD created by Photopea.</p>
|
||||
|
||||
<p>There may be a slight difference in text layers rendered by Photoshop and Photopea. While Photoshop rounds text coordinates to whole pixels, Photopea keeps the coordinates as floating point nubmers, so spaces between lines or between words may be slightly different.</p>
|
||||
|
||||
<h2>Fonts</h2>
|
||||
<p>Photopea has its own fonts, stored at the web server. Additional fonts must be Drag'n'dropped by user. Photopea can not access local fonts (e.g. C:\Windows\Fonts on Windows) automatically.</p>
|
||||
|
||||
<p>Whenever you edit text layer with missing font, it is rendered by substitute font. Feel free to edit such text layer and save it, Photopea keeps the information about original font, so you can re-render it later (in Photopea or Photoshop, when font is available).</p>
|
||||
|
||||
|
||||
</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-0-9.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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 106 B |
@ -1,33 +1,285 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<head>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4249565-44"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date()); gtag('config', 'UA-4249565-44');
|
||||
</script>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>UPNG: fast PNG minifier</title>
|
||||
|
||||
<meta name="description" content="Fast and simple PNG minfier (compressor)." />
|
||||
<link type="text/css" rel="stylesheet" href="style.css" />
|
||||
<link rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<!--
|
||||
<script src="js/pako.js"></script>
|
||||
<script src="js/UPNG.js"></script>
|
||||
<script src="js/UZIP.js"></script>
|
||||
-->
|
||||
<script src="https://www.photopea.com/code/external/ext.js"></script>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var pngs = [];
|
||||
var curr = -1;
|
||||
var cnum = 256; // quality
|
||||
var cnv, ctx;
|
||||
var main, list, totl, fopn
|
||||
var viw = 0, vih = 0;
|
||||
var ioff = {x:0, y:0}, mouse=null;
|
||||
|
||||
function save(buff, path)
|
||||
{
|
||||
if(pngs.length==0) return;
|
||||
var data = new Uint8Array(buff);
|
||||
var a = document.createElement( "a" );
|
||||
var blob = new Blob([data]);
|
||||
var url = window.URL.createObjectURL( blob );
|
||||
a.href = url; a.download = path;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
function saveAll()
|
||||
{
|
||||
var obj = {};
|
||||
for(var i=0; i<pngs.length; i++) obj[pngs[i].name] = new Uint8Array(pngs[i].ndata);
|
||||
save(UZIP.encode(obj).buffer, "images.zip");
|
||||
}
|
||||
|
||||
function loadURL(path, resp)
|
||||
{
|
||||
var request = new XMLHttpRequest();
|
||||
request._fname = path;
|
||||
request.open("GET", path, true);
|
||||
request.responseType = "arraybuffer";
|
||||
request.onload = urlLoaded;
|
||||
request.send();
|
||||
}
|
||||
function urlLoaded(e) { addPNG(e.target.response, e.target._fname); }
|
||||
|
||||
function addPNG(buff, name)
|
||||
{
|
||||
var w, h, rgba, ofmt="png";
|
||||
|
||||
var mgc=[0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], ubuff=new Uint8Array(buff);
|
||||
if(ubuff[0]==0xff && ubuff[1]==0xd8 && ubuff[2]==0xff) { // JPG
|
||||
var j = new PDFJS["JpegImage"](); j["parse"](ubuff);
|
||||
w = j["width"]; h = j["height"]; var area = w*h;
|
||||
var data = j["getData"]({"width":w,"height":h,"forceRGB":true,"isSourcePDF":false});
|
||||
|
||||
var nbuf = new Uint8Array(area*4);
|
||||
for(var i=0; i<area; i++) {
|
||||
var qi = i<<2, ti = qi-i;
|
||||
nbuf[qi ]=data[ti+0];
|
||||
nbuf[qi+1]=data[ti+1];
|
||||
nbuf[qi+2]=data[ti+2];
|
||||
nbuf[qi+3]=255;
|
||||
}
|
||||
rgba = nbuf.buffer; ofmt="jpg"
|
||||
}
|
||||
else {
|
||||
for(var i=0; i<8; i++) if(mgc[i]!=ubuff[i]) return;
|
||||
var img = UPNG.decode(buff); rgba = UPNG.toRGBA8(img)[0]; w=img.width; h=img.height;
|
||||
}
|
||||
var npng = {name:name, width:w, height:h, odata:buff, orgba:new Uint8Array(rgba), ndata:null, nrgba:null, ofmt:ofmt };
|
||||
var nc = pngs.length; pngs.push(npng); recompute(nc); setCurr(nc);
|
||||
}
|
||||
function setCurr(nc) { curr=nc; ioff={x:0,y:0}; update(); }
|
||||
|
||||
function recompute(i) {
|
||||
var p = pngs[i];
|
||||
p.ndata = UPNG.encode([p.orgba.buffer], p.width, p.height, cnum);
|
||||
if(p.ofmt=="png" && p.ndata.byteLength > p.odata.byteLength) p.ndata = p.odata;
|
||||
var img = UPNG.decode(p.ndata);
|
||||
p.nrgba = new Uint8Array(UPNG.toRGBA8(img)[0]);
|
||||
}
|
||||
|
||||
function update()
|
||||
{
|
||||
if(curr!=-1) { list.innerHTML = ""; totl.innerHTML = ""; }
|
||||
var tos = 0, tns = 0;
|
||||
for(var i=0; i<=pngs.length; i++)
|
||||
{
|
||||
var p = pngs[i];
|
||||
var li = document.createElement("p"); li.setAttribute("class", "item"+(i==curr?" active":"")); li._indx=i;
|
||||
|
||||
|
||||
//var btn = document.createElement("button"); btn.innerHTML = "X"; if(i<pngs.length) li.appendChild(btn);
|
||||
|
||||
var iname, os, ns, cont, pw=0, ph=0;
|
||||
if(i<pngs.length) { iname=p.name; os = p.odata.byteLength; ns = p.ndata.byteLength; tos+=os; tns+=ns; cont=list; pw=p.width; ph=p.height;
|
||||
li.addEventListener("click", itemClick, false); }
|
||||
else { iname="Total:"; os = tos; ns = tns; cont = totl; }
|
||||
|
||||
var cnt = "<b class=\"fname\" title=\""+pw+" x "+ph+"\">"+iname+"</b>";
|
||||
|
||||
cnt += toBlock(toKB(os)) + toBlock("➜",2) + toBlock("<b>"+toKB(ns)+"</b>") + toBlock((100*(ns-os)/os).toFixed(1)+" %", 5);
|
||||
//if(i<pngs.length) cnt += toBlock("<big>✖</big>",2);
|
||||
li.innerHTML = cnt;
|
||||
var btn = document.createElement("button"); btn.innerHTML = "Save"; if(i<pngs.length) li.appendChild(btn);
|
||||
|
||||
if(pngs.length!=0) cont.appendChild(li);
|
||||
}
|
||||
|
||||
var dpr = getDPR();
|
||||
var iw = window.innerWidth-2;
|
||||
var pw = Math.floor(Math.min(iw-500, iw/2)*dpr);
|
||||
|
||||
var ph = Math.floor(vih*dpr);
|
||||
|
||||
cnv.width = pw; cnv.height = ph;
|
||||
var aval = "cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; background-size:"+(16/getDPR())+"px;"
|
||||
cnv.setAttribute("style", aval+"width:"+(pw/dpr)+"px; height:"+(ph/dpr)+"px;");
|
||||
|
||||
if(curr!=-1) {
|
||||
var p = pngs[curr], l = p.width*p.height*4;
|
||||
var imgd = ctx.createImageData(p.width, p.height);
|
||||
for(var i=0; i<l; i++) imgd.data[i] = p.nrgba[i];
|
||||
ctx.clearRect(0,0,cnv.width,cnv.height);
|
||||
var rx = (pw-p.width)/2, ry = (ph-p.height)/2;
|
||||
|
||||
if(rx<0) ioff.x = Math.max(rx, Math.min(-rx, ioff.x*getDPR()))/getDPR();
|
||||
if(ry<0) ioff.y = Math.max(ry, Math.min(-ry, ioff.y*getDPR()))/getDPR();
|
||||
|
||||
var cx = (rx>0) ? rx : Math.min(0, Math.max(2*rx, ioff.x*getDPR()+rx));
|
||||
var cy = (ry>0) ? ry : Math.min(0, Math.max(2*ry, ioff.y*getDPR()+ry));
|
||||
ctx.putImageData(imgd,Math.round(cx), Math.round(cy));
|
||||
}
|
||||
}
|
||||
function itemClick(e) { var ind=e.currentTarget._indx; setCurr(ind); var p=pngs[ind]; if(e.target.tagName=="BUTTON") save(p.ndata, p.name); }
|
||||
|
||||
function toKB(n) { n=n/1024; return (n>=100 ? Math.floor(n) : n.toFixed(1))+" kB"; }
|
||||
function toBlock(txt, w) { var st = w ? " style=\"width:"+w+"em;\"":""; return "<span"+st+">"+txt+"</span>"; }
|
||||
|
||||
function Go()
|
||||
{
|
||||
//loadURL("grid.png"); loadURL("bunny.png");
|
||||
|
||||
main = document.getElementById("main");
|
||||
list = document.getElementById("list");
|
||||
totl = document.getElementById("totl");
|
||||
cnv = document.getElementById("cnv"); ctx = cnv.getContext("2d");
|
||||
cnv.addEventListener("mousedown", onMD, false);
|
||||
|
||||
|
||||
fopn = document.createElement("input");
|
||||
fopn.setAttribute("type", "file");
|
||||
fopn.addEventListener("change", onFileDrop, false);
|
||||
document.body.appendChild(fopn);
|
||||
fopn.setAttribute("style", "display:none");
|
||||
fopn.setAttribute("multiple","");
|
||||
|
||||
var dc = document.body;
|
||||
|
||||
dc.addEventListener("dragover", cancel);
|
||||
dc.addEventListener("dragenter", cancel);//highlight);
|
||||
dc.addEventListener("dragleave", cancel);//unhighlight);
|
||||
dc.addEventListener("drop", onFileDrop);
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
resize();
|
||||
//setTimeout(function() { document.getElementById("bunny").setAttribute("style", "transform: translate(0, 220px)"); }, 1000);
|
||||
}
|
||||
function onMD(e) { mouse={x:e.clientX-ioff.x, y:e.clientY-ioff.y}; document.addEventListener("mousemove",onMM,false); document.addEventListener("mouseup",onMU,false); }
|
||||
function onMM(e) { ioff.x=e.clientX-mouse.x; ioff.y=e.clientY-mouse.y; update(); }
|
||||
function onMU(e) { document.removeEventListener("mousemove",onMM,false); document.removeEventListener("mouseup",onMU,false); }
|
||||
|
||||
function showOpenDialog() // show open dialog
|
||||
{
|
||||
var evt = document.createEvent('MouseEvents');
|
||||
evt["initMouseEvent"]("click", true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||
fopn.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
function onFileDrop(e) { cancel(e);
|
||||
var fls = e.dataTransfer? e.dataTransfer.files : e.target.files;
|
||||
for(var i=0; i<fls.length; i++) {
|
||||
var f = fls[i];
|
||||
var r = new FileReader();
|
||||
r._file = f;
|
||||
r.onload = dropLoaded;
|
||||
r.readAsArrayBuffer(f);
|
||||
}
|
||||
}
|
||||
function dropLoaded(e) { addPNG(e.target.result, e.target._file.name); unhighlight(e); }
|
||||
function highlight (e) {cancel(e); list.style.boxShadow="inset 0px 0px 15px blue"; }
|
||||
function unhighlight(e) {cancel(e); list.style.boxShadow="none";}
|
||||
|
||||
function resize(e) {
|
||||
vih = window.innerHeight-(250)-4;
|
||||
viw = Math.min(1000, window.innerWidth-2);//1000;//Math.max(800, Math.floor(window.innerWidth*0.75));
|
||||
main.setAttribute("style", "width:"+viw+"px; height:"+vih+"px;");
|
||||
list.setAttribute("style", "height:"+(vih-40)+"px;");
|
||||
update();
|
||||
}
|
||||
|
||||
function getDPR() { return window["devicePixelRatio"] || 1; }
|
||||
function cancel(e) { e.stopPropagation(); e.preventDefault(); }
|
||||
function moveQual(val) {
|
||||
if(val>990) cnum=0;
|
||||
else cnum = Math.max(2, Math.round(510*val/1000));
|
||||
for(var i=0; i<pngs.length; i++) recompute(i);
|
||||
update();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body onload="Go();">
|
||||
<header>
|
||||
<h1><span style="font-size:1.5em">UPNG</span><br/> fast PNG minifier by <a href="//www.Photopea.com" target="_blank">Photopea</a></h1>
|
||||
|
||||
<img id="bunny" title="Load bunny.png" onclick="loadURL('bunny.png');" src="bunny.png" />
|
||||
|
||||
Check out <a href="//github.com/photopea/UPNG.js" target="_blank">UPNG.js</a>
|
||||
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fphotopea&send=false&layout=button_count&width=120&show_faces=true&font&colorscheme=light&action=like&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px; display:inline;" allowTransparency="true"></iframe>
|
||||
<!---->
|
||||
<a href="https://twitter.com/photopeacom" class="twitter-follow-button" data-show-count="false">Follow @photopeacom</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<!---->
|
||||
</header>
|
||||
|
||||
<div id="main">
|
||||
<div id="lcont">
|
||||
<div id="list">
|
||||
<div style="font-size:1.3em; padding:1em; text-align:center;">
|
||||
<p><b>Shrink</b> and <b>optimize</b> images.
|
||||
Set the <b>ideal balance</b> between the quality and the size.</p>
|
||||
<br/>
|
||||
<p><a href="//blog.photopea.com/png-minifier-inside-photopea.html#examples" target="_blank">Comparison with TinyPNG.com</a></p>
|
||||
<br/><br/>
|
||||
<span style="font-size:1.5em; display:inline-block; padding:0.6em 0.2em; margin:0 1.4em; border:5px dashed #555; border-radius:0.6em; cursor:pointer;"
|
||||
onclick="showOpenDialog()" >
|
||||
Drag and drop your PNG files!</span>
|
||||
<!--<input name="myFile" type="file" onchange="onFileDrop(this)" multiple>-->
|
||||
</div>
|
||||
</div>
|
||||
<div id="totl" class="active"></div>
|
||||
</div>
|
||||
<canvas id="cnv"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<footer>
|
||||
<label>Size</label>
|
||||
<input type="range" id="eRNG" min="0" max="1000" value="500" style="width:300px; vertical-align:middle;" oninput="moveQual(this.value)" />
|
||||
<label>Quality</label>
|
||||
<button onclick="saveAll();">Save all (ZIP)</button>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,899 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
;(function(){
|
||||
var UPNG = {};
|
||||
|
||||
// Make available for import by `require()`
|
||||
var pako;
|
||||
if (typeof module == "object") {module.exports = UPNG;} else {window.UPNG = UPNG;}
|
||||
if (typeof require == "function") {pako = require("pako");} else {pako = window.pako;}
|
||||
function log() { if (typeof process=="undefined" || process.env.NODE_ENV=="development") console.log.apply(console, arguments); }
|
||||
(function(UPNG, pako){
|
||||
|
||||
|
||||
|
||||
|
||||
UPNG.toRGBA8 = function(out)
|
||||
{
|
||||
var w = out.width, h = out.height;
|
||||
if(out.tabs.acTL==null) return [UPNG.toRGBA8.decodeImage(out.data, w, h, out).buffer];
|
||||
|
||||
var frms = [];
|
||||
if(out.frames[0].data==null) out.frames[0].data = out.data;
|
||||
|
||||
var img, empty = new Uint8Array(w*h*4);
|
||||
for(var i=0; i<out.frames.length; i++)
|
||||
{
|
||||
var frm = out.frames[i];
|
||||
var fx=frm.rect.x, fy=frm.rect.y, fw = frm.rect.width, fh = frm.rect.height;
|
||||
var fdata = UPNG.toRGBA8.decodeImage(frm.data, fw,fh, out);
|
||||
|
||||
if(i==0) img = fdata;
|
||||
else if(frm.blend ==0) UPNG._copyTile(fdata, fw, fh, img, w, h, fx, fy, 0);
|
||||
else if(frm.blend ==1) UPNG._copyTile(fdata, fw, fh, img, w, h, fx, fy, 1);
|
||||
|
||||
frms.push(img.buffer); img = img.slice(0);
|
||||
|
||||
if (frm.dispose==0) {}
|
||||
else if(frm.dispose==1) UPNG._copyTile(empty, fw, fh, img, w, h, fx, fy, 0);
|
||||
else if(frm.dispose==2) {
|
||||
var pi = i-1;
|
||||
while(out.frames[pi].dispose==2) pi--;
|
||||
img = new Uint8Array(frms[pi]).slice(0);
|
||||
}
|
||||
}
|
||||
return frms;
|
||||
}
|
||||
UPNG.toRGBA8.decodeImage = function(data, w, h, out)
|
||||
{
|
||||
var area = w*h, bpp = UPNG.decode._getBPP(out);
|
||||
var bpl = Math.ceil(w*bpp/8); // bytes per line
|
||||
|
||||
var bf = new Uint8Array(area*4), bf32 = new Uint32Array(bf.buffer);
|
||||
var ctype = out.ctype, depth = out.depth;
|
||||
var rs = UPNG._bin.readUshort;
|
||||
|
||||
//console.log(ctype, depth);
|
||||
|
||||
if (ctype==6) { // RGB + alpha
|
||||
var qarea = area<<2;
|
||||
if(depth== 8) for(var i=0; i<qarea;i++) { bf[i] = data[i]; /*if((i&3)==3 && data[i]!=0) bf[i]=255;*/ }
|
||||
if(depth==16) for(var i=0; i<qarea;i++) { bf[i] = data[i<<1]; }
|
||||
}
|
||||
else if(ctype==2) { // RGB
|
||||
var ts=out.tabs["tRNS"], tr=-1, tg=-1, tb=-1;
|
||||
if(ts) { tr=ts[0]; tg=ts[1]; tb=ts[2]; }
|
||||
if(depth== 8) for(var i=0; i<area; i++) { var qi=i<<2, ti=i*3; bf[qi] = data[ti]; bf[qi+1] = data[ti+1]; bf[qi+2] = data[ti+2]; bf[qi+3] = 255;
|
||||
if(tr!=-1 && data[ti] ==tr && data[ti+1] ==tg && data[ti+2] ==tb) bf[qi+3] = 0; }
|
||||
if(depth==16) for(var i=0; i<area; i++) { var qi=i<<2, ti=i*6; bf[qi] = data[ti]; bf[qi+1] = data[ti+2]; bf[qi+2] = data[ti+4]; bf[qi+3] = 255;
|
||||
if(tr!=-1 && rs(data,ti)==tr && rs(data,ti+2)==tg && rs(data,ti+4)==tb) bf[qi+3] = 0; }
|
||||
}
|
||||
else if(ctype==3) { // palette
|
||||
var p=out.tabs["PLTE"], ap=out.tabs["tRNS"], tl=ap?ap.length:0;
|
||||
//console.log(p, ap);
|
||||
if(depth==1) for(var y=0; y<h; y++) { var s0 = y*bpl, t0 = y*w;
|
||||
for(var i=0; i<w; i++) { var qi=(t0+i)<<2, j=((data[s0+(i>>3)]>>(7-((i&7)<<0)))& 1), cj=3*j; bf[qi]=p[cj]; bf[qi+1]=p[cj+1]; bf[qi+2]=p[cj+2]; bf[qi+3]=(j<tl)?ap[j]:255; }
|
||||
}
|
||||
if(depth==2) for(var y=0; y<h; y++) { var s0 = y*bpl, t0 = y*w;
|
||||
for(var i=0; i<w; i++) { var qi=(t0+i)<<2, j=((data[s0+(i>>2)]>>(6-((i&3)<<1)))& 3), cj=3*j; bf[qi]=p[cj]; bf[qi+1]=p[cj+1]; bf[qi+2]=p[cj+2]; bf[qi+3]=(j<tl)?ap[j]:255; }
|
||||
}
|
||||
if(depth==4) for(var y=0; y<h; y++) { var s0 = y*bpl, t0 = y*w;
|
||||
for(var i=0; i<w; i++) { var qi=(t0+i)<<2, j=((data[s0+(i>>1)]>>(4-((i&1)<<2)))&15), cj=3*j; bf[qi]=p[cj]; bf[qi+1]=p[cj+1]; bf[qi+2]=p[cj+2]; bf[qi+3]=(j<tl)?ap[j]:255; }
|
||||
}
|
||||
if(depth==8) for(var i=0; i<area; i++ ) { var qi=i<<2, j=data[i] , cj=3*j; bf[qi]=p[cj]; bf[qi+1]=p[cj+1]; bf[qi+2]=p[cj+2]; bf[qi+3]=(j<tl)?ap[j]:255; }
|
||||
}
|
||||
else if(ctype==4) { // gray + alpha
|
||||
if(depth== 8) for(var i=0; i<area; i++) { var qi=i<<2, di=i<<1, gr=data[di]; bf[qi]=gr; bf[qi+1]=gr; bf[qi+2]=gr; bf[qi+3]=data[di+1]; }
|
||||
if(depth==16) for(var i=0; i<area; i++) { var qi=i<<2, di=i<<2, gr=data[di]; bf[qi]=gr; bf[qi+1]=gr; bf[qi+2]=gr; bf[qi+3]=data[di+2]; }
|
||||
}
|
||||
else if(ctype==0) { // gray
|
||||
var tr = out.tabs["tRNS"] ? out.tabs["tRNS"] : -1;
|
||||
if(depth== 1) for(var i=0; i<area; i++) { var gr=255*((data[i>>3]>>(7 -((i&7) )))& 1), al=(gr==tr*255)?0:255; bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr; }
|
||||
if(depth== 2) for(var i=0; i<area; i++) { var gr= 85*((data[i>>2]>>(6 -((i&3)<<1)))& 3), al=(gr==tr* 85)?0:255; bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr; }
|
||||
if(depth== 4) for(var i=0; i<area; i++) { var gr= 17*((data[i>>1]>>(4 -((i&1)<<2)))&15), al=(gr==tr* 17)?0:255; bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr; }
|
||||
if(depth== 8) for(var i=0; i<area; i++) { var gr=data[i ] , al=(gr ==tr)?0:255; bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr; }
|
||||
if(depth==16) for(var i=0; i<area; i++) { var gr=data[i<<1], al=(rs(data,i<<1)==tr)?0:255; bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr; }
|
||||
}
|
||||
return bf;
|
||||
}
|
||||
|
||||
|
||||
|
||||
UPNG.decode = function(buff)
|
||||
{
|
||||
var data = new Uint8Array(buff), offset = 8, bin = UPNG._bin, rUs = bin.readUshort, rUi = bin.readUint;
|
||||
var out = {tabs:{}, frames:[]};
|
||||
var dd = new Uint8Array(data.length), doff = 0; // put all IDAT data into it
|
||||
var fd, foff = 0; // frames
|
||||
|
||||
var mgck = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
|
||||
for(var i=0; i<8; i++) if(data[i]!=mgck[i]) throw "The input is not a PNG file!";
|
||||
|
||||
while(offset<data.length)
|
||||
{
|
||||
var len = bin.readUint(data, offset); offset += 4;
|
||||
var type = bin.readASCII(data, offset, 4); offset += 4;
|
||||
//console.log(type,len);
|
||||
|
||||
if (type=="IHDR") { UPNG.decode._IHDR(data, offset, out); }
|
||||
else if(type=="IDAT") {
|
||||
for(var i=0; i<len; i++) dd[doff+i] = data[offset+i];
|
||||
doff += len;
|
||||
}
|
||||
else if(type=="acTL") {
|
||||
out.tabs[type] = { num_frames:rUi(data, offset), num_plays:rUi(data, offset+4) };
|
||||
fd = new Uint8Array(data.length);
|
||||
}
|
||||
else if(type=="fcTL") {
|
||||
if(foff!=0) { var fr = out.frames[out.frames.length-1];
|
||||
fr.data = UPNG.decode._decompress(out, fd.slice(0,foff), fr.rect.width, fr.rect.height); foff=0;
|
||||
}
|
||||
var rct = {x:rUi(data, offset+12),y:rUi(data, offset+16),width:rUi(data, offset+4),height:rUi(data, offset+8)};
|
||||
var del = rUs(data, offset+22); del = rUs(data, offset+20) / (del==0?100:del);
|
||||
var frm = {rect:rct, delay:Math.round(del*1000), dispose:data[offset+24], blend:data[offset+25]};
|
||||
//console.log(frm);
|
||||
out.frames.push(frm);
|
||||
}
|
||||
else if(type=="fdAT") {
|
||||
for(var i=0; i<len-4; i++) fd[foff+i] = data[offset+i+4];
|
||||
foff += len-4;
|
||||
}
|
||||
else if(type=="pHYs") {
|
||||
out.tabs[type] = [bin.readUint(data, offset), bin.readUint(data, offset+4), data[offset+8]];
|
||||
}
|
||||
else if(type=="cHRM") {
|
||||
out.tabs[type] = [];
|
||||
for(var i=0; i<8; i++) out.tabs[type].push(bin.readUint(data, offset+i*4));
|
||||
}
|
||||
else if(type=="tEXt") {
|
||||
if(out.tabs[type]==null) out.tabs[type] = {};
|
||||
var nz = bin.nextZero(data, offset);
|
||||
var keyw = bin.readASCII(data, offset, nz-offset);
|
||||
var text = bin.readASCII(data, nz+1, offset+len-nz-1);
|
||||
out.tabs[type][keyw] = text;
|
||||
}
|
||||
else if(type=="iTXt") {
|
||||
if(out.tabs[type]==null) out.tabs[type] = {};
|
||||
var nz = 0, off = offset;
|
||||
nz = bin.nextZero(data, off);
|
||||
var keyw = bin.readASCII(data, off, nz-off); off = nz + 1;
|
||||
var cflag = data[off], cmeth = data[off+1]; off+=2;
|
||||
nz = bin.nextZero(data, off);
|
||||
var ltag = bin.readASCII(data, off, nz-off); off = nz + 1;
|
||||
nz = bin.nextZero(data, off);
|
||||
var tkeyw = bin.readUTF8(data, off, nz-off); off = nz + 1;
|
||||
var text = bin.readUTF8(data, off, len-(off-offset));
|
||||
out.tabs[type][keyw] = text;
|
||||
}
|
||||
else if(type=="PLTE") {
|
||||
out.tabs[type] = bin.readBytes(data, offset, len);
|
||||
}
|
||||
else if(type=="hIST") {
|
||||
var pl = out.tabs["PLTE"].length/3;
|
||||
out.tabs[type] = []; for(var i=0; i<pl; i++) out.tabs[type].push(rUs(data, offset+i*2));
|
||||
}
|
||||
else if(type=="tRNS") {
|
||||
if (out.ctype==3) out.tabs[type] = bin.readBytes(data, offset, len);
|
||||
else if(out.ctype==0) out.tabs[type] = rUs(data, offset);
|
||||
else if(out.ctype==2) out.tabs[type] = [ rUs(data,offset),rUs(data,offset+2),rUs(data,offset+4) ];
|
||||
//else console.log("tRNS for unsupported color type",out.ctype, len);
|
||||
}
|
||||
else if(type=="gAMA") out.tabs[type] = bin.readUint(data, offset)/100000;
|
||||
else if(type=="sRGB") out.tabs[type] = data[offset];
|
||||
else if(type=="bKGD")
|
||||
{
|
||||
if (out.ctype==0 || out.ctype==4) out.tabs[type] = [rUs(data, offset)];
|
||||
else if(out.ctype==2 || out.ctype==6) out.tabs[type] = [rUs(data, offset), rUs(data, offset+2), rUs(data, offset+4)];
|
||||
else if(out.ctype==3) out.tabs[type] = data[offset];
|
||||
}
|
||||
else if(type=="IEND") {
|
||||
break;
|
||||
}
|
||||
//else { log("unknown chunk type", type, len); }
|
||||
offset += len;
|
||||
var crc = bin.readUint(data, offset); offset += 4;
|
||||
}
|
||||
if(foff!=0) { var fr = out.frames[out.frames.length-1];
|
||||
fr.data = UPNG.decode._decompress(out, fd.slice(0,foff), fr.rect.width, fr.rect.height); foff=0;
|
||||
}
|
||||
out.data = UPNG.decode._decompress(out, dd, out.width, out.height);
|
||||
|
||||
delete out.compress; delete out.interlace; delete out.filter;
|
||||
return out;
|
||||
}
|
||||
|
||||
UPNG.decode._decompress = function(out, dd, w, h) {
|
||||
if(out.compress ==0) dd = UPNG.decode._inflate(dd);
|
||||
|
||||
if (out.interlace==0) dd = UPNG.decode._filterZero(dd, out, 0, w, h);
|
||||
else if(out.interlace==1) dd = UPNG.decode._readInterlace(dd, out);
|
||||
return dd;
|
||||
}
|
||||
|
||||
UPNG.decode._inflate = function(data) { return pako["inflate"](data); }
|
||||
|
||||
UPNG.decode._readInterlace = function(data, out)
|
||||
{
|
||||
var w = out.width, h = out.height;
|
||||
var bpp = UPNG.decode._getBPP(out), cbpp = bpp>>3, bpl = Math.ceil(w*bpp/8);
|
||||
var img = new Uint8Array( h * bpl );
|
||||
var di = 0;
|
||||
|
||||
var starting_row = [ 0, 0, 4, 0, 2, 0, 1 ];
|
||||
var starting_col = [ 0, 4, 0, 2, 0, 1, 0 ];
|
||||
var row_increment = [ 8, 8, 8, 4, 4, 2, 2 ];
|
||||
var col_increment = [ 8, 8, 4, 4, 2, 2, 1 ];
|
||||
|
||||
var pass=0;
|
||||
while(pass<7)
|
||||
{
|
||||
var ri = row_increment[pass], ci = col_increment[pass];
|
||||
var sw = 0, sh = 0;
|
||||
var cr = starting_row[pass]; while(cr<h) { cr+=ri; sh++; }
|
||||
var cc = starting_col[pass]; while(cc<w) { cc+=ci; sw++; }
|
||||
var bpll = Math.ceil(sw*bpp/8);
|
||||
UPNG.decode._filterZero(data, out, di, sw, sh);
|
||||
|
||||
var y=0, row = starting_row[pass];
|
||||
while(row<h)
|
||||
{
|
||||
var col = starting_col[pass];
|
||||
var cdi = (di+y*bpll)<<3;
|
||||
|
||||
while(col<w)
|
||||
{
|
||||
if(bpp==1) {
|
||||
var val = data[cdi>>3]; val = (val>>(7-(cdi&7)))&1;
|
||||
img[row*bpl + (col>>3)] |= (val << (7-((col&3)<<0)));
|
||||
}
|
||||
if(bpp==2) {
|
||||
var val = data[cdi>>3]; val = (val>>(6-(cdi&7)))&3;
|
||||
img[row*bpl + (col>>2)] |= (val << (6-((col&3)<<1)));
|
||||
}
|
||||
if(bpp==4) {
|
||||
var val = data[cdi>>3]; val = (val>>(4-(cdi&7)))&15;
|
||||
img[row*bpl + (col>>1)] |= (val << (4-((col&1)<<2)));
|
||||
}
|
||||
if(bpp>=8) {
|
||||
var ii = row*bpl+col*cbpp;
|
||||
for(var j=0; j<cbpp; j++) img[ii+j] = data[(cdi>>3)+j];
|
||||
}
|
||||
cdi+=bpp; col+=ci;
|
||||
}
|
||||
y++; row += ri;
|
||||
}
|
||||
if(sw*sh!=0) di += sh * (1 + bpll);
|
||||
pass = pass + 1;
|
||||
}
|
||||
return img;
|
||||
}
|
||||
|
||||
UPNG.decode._getBPP = function(out) {
|
||||
var noc = [1,null,3,1,2,null,4][out.ctype];
|
||||
return noc * out.depth;
|
||||
}
|
||||
|
||||
UPNG.decode._filterZero = function(data, out, off, w, h)
|
||||
{
|
||||
var bpp = UPNG.decode._getBPP(out), bpl = Math.ceil(w*bpp/8), paeth = UPNG.decode._paeth;
|
||||
bpp = Math.ceil(bpp/8);
|
||||
|
||||
for(var y=0; y<h; y++) {
|
||||
var i = off+y*bpl, di = i+y+1;
|
||||
var type = data[di-1];
|
||||
|
||||
if (type==0) for(var x= 0; x<bpl; x++) data[i+x] = data[di+x];
|
||||
else if(type==1) {
|
||||
for(var x= 0; x<bpp; x++) data[i+x] = data[di+x];
|
||||
for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + data[i+x-bpp])&255;
|
||||
}
|
||||
else if(y==0) {
|
||||
for(var x= 0; x<bpp; x++) data[i+x] = data[di+x];
|
||||
if(type==2) for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x])&255;
|
||||
if(type==3) for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + (data[i+x-bpp]>>1) )&255;
|
||||
if(type==4) for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + paeth(data[i+x-bpp], 0, 0) )&255;
|
||||
}
|
||||
else {
|
||||
if(type==2) { for(var x= 0; x<bpl; x++) data[i+x] = (data[di+x] + data[i+x-bpl])&255; }
|
||||
|
||||
if(type==3) { for(var x= 0; x<bpp; x++) data[i+x] = (data[di+x] + (data[i+x-bpl]>>1))&255;
|
||||
for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + ((data[i+x-bpl]+data[i+x-bpp])>>1) )&255; }
|
||||
|
||||
if(type==4) { for(var x= 0; x<bpp; x++) data[i+x] = (data[di+x] + paeth(0, data[i+x-bpl], 0))&255;
|
||||
for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + paeth(data[i+x-bpp], data[i+x-bpl], data[i+x-bpp-bpl]) )&255; }
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
UPNG.decode._paeth = function(a,b,c)
|
||||
{
|
||||
var p = a+b-c, pa = Math.abs(p-a), pb = Math.abs(p-b), pc = Math.abs(p-c);
|
||||
if (pa <= pb && pa <= pc) return a;
|
||||
else if (pb <= pc) return b;
|
||||
return c;
|
||||
}
|
||||
|
||||
UPNG.decode._IHDR = function(data, offset, out)
|
||||
{
|
||||
var bin = UPNG._bin;
|
||||
out.width = bin.readUint(data, offset); offset += 4;
|
||||
out.height = bin.readUint(data, offset); offset += 4;
|
||||
out.depth = data[offset]; offset++;
|
||||
out.ctype = data[offset]; offset++;
|
||||
out.compress = data[offset]; offset++;
|
||||
out.filter = data[offset]; offset++;
|
||||
out.interlace = data[offset]; offset++;
|
||||
}
|
||||
|
||||
UPNG._bin = {
|
||||
nextZero : function(data,p) { while(data[p]!=0) p++; return p; },
|
||||
readUshort : function(buff,p) { return (buff[p]<< 8) | buff[p+1]; },
|
||||
writeUshort: function(buff,p,n){ buff[p] = (n>>8)&255; buff[p+1] = n&255; },
|
||||
readUint : function(buff,p) { return (buff[p]*(256*256*256)) + ((buff[p+1]<<16) | (buff[p+2]<< 8) | buff[p+3]); },
|
||||
writeUint : function(buff,p,n){ buff[p]=(n>>24)&255; buff[p+1]=(n>>16)&255; buff[p+2]=(n>>8)&255; buff[p+3]=n&255; },
|
||||
readASCII : function(buff,p,l){ var s = ""; for(var i=0; i<l; i++) s += String.fromCharCode(buff[p+i]); return s; },
|
||||
writeASCII : function(data,p,s){ for(var i=0; i<s.length; i++) data[p+i] = s.charCodeAt(i); },
|
||||
readBytes : function(buff,p,l){ var arr = []; for(var i=0; i<l; i++) arr.push(buff[p+i]); return arr; },
|
||||
pad : function(n) { return n.length < 2 ? "0" + n : n; },
|
||||
readUTF8 : function(buff, p, l) {
|
||||
var s = "", ns;
|
||||
for(var i=0; i<l; i++) s += "%" + UPNG._bin.pad(buff[p+i].toString(16));
|
||||
try { ns = decodeURIComponent(s); }
|
||||
catch(e) { return UPNG._bin.readASCII(buff, p, l); }
|
||||
return ns;
|
||||
}
|
||||
}
|
||||
UPNG._copyTile = function(sb, sw, sh, tb, tw, th, xoff, yoff, mode)
|
||||
{
|
||||
var w = Math.min(sw,tw), h = Math.min(sh,th);
|
||||
var si=0, ti=0;
|
||||
for(var y=0; y<h; y++)
|
||||
for(var x=0; x<w; x++)
|
||||
{
|
||||
if(xoff>=0 && yoff>=0) { si = (y*sw+x)<<2; ti = (( yoff+y)*tw+xoff+x)<<2; }
|
||||
else { si = ((-yoff+y)*sw-xoff+x)<<2; ti = (y*tw+x)<<2; }
|
||||
|
||||
if (mode==0) { tb[ti] = sb[si]; tb[ti+1] = sb[si+1]; tb[ti+2] = sb[si+2]; tb[ti+3] = sb[si+3]; }
|
||||
else if(mode==1) {
|
||||
var fa = sb[si+3]*(1/255), fr=sb[si]*fa, fg=sb[si+1]*fa, fb=sb[si+2]*fa;
|
||||
var ba = tb[ti+3]*(1/255), br=tb[ti]*ba, bg=tb[ti+1]*ba, bb=tb[ti+2]*ba;
|
||||
|
||||
var ifa=1-fa, oa = fa+ba*ifa, ioa = (oa==0?0:1/oa);
|
||||
tb[ti+3] = 255*oa;
|
||||
tb[ti+0] = (fr+br*ifa)*ioa;
|
||||
tb[ti+1] = (fg+bg*ifa)*ioa;
|
||||
tb[ti+2] = (fb+bb*ifa)*ioa;
|
||||
}
|
||||
else if(mode==2){ // copy only differences, otherwise zero
|
||||
var fa = sb[si+3], fr=sb[si], fg=sb[si+1], fb=sb[si+2];
|
||||
var ba = tb[ti+3], br=tb[ti], bg=tb[ti+1], bb=tb[ti+2];
|
||||
if(fa==ba && fr==br && fg==bg && fb==bb) { tb[ti]=0; tb[ti+1]=0; tb[ti+2]=0; tb[ti+3]=0; }
|
||||
else { tb[ti]=fr; tb[ti+1]=fg; tb[ti+2]=fb; tb[ti+3]=fa; }
|
||||
}
|
||||
else if(mode==3){ // check if can be blended
|
||||
var fa = sb[si+3], fr=sb[si], fg=sb[si+1], fb=sb[si+2];
|
||||
var ba = tb[ti+3], br=tb[ti], bg=tb[ti+1], bb=tb[ti+2];
|
||||
if(fa==ba && fr==br && fg==bg && fb==bb) continue;
|
||||
//if(fa!=255 && ba!=0) return false;
|
||||
if(fa<220 && ba>20) return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
UPNG.encode = function(bufs, w, h, ps, dels, forbidPlte)
|
||||
{
|
||||
if(ps==null) ps=0;
|
||||
if(forbidPlte==null) forbidPlte = false;
|
||||
|
||||
var nimg = UPNG.encode.compress(bufs, w, h, ps, false, forbidPlte);
|
||||
UPNG.encode.compressPNG(nimg, -1);
|
||||
|
||||
return UPNG.encode._main(nimg, w, h, dels);
|
||||
}
|
||||
|
||||
UPNG.encodeLL = function(bufs, w, h, cc, ac, depth, dels) {
|
||||
var nimg = { ctype: 0 + (cc==1 ? 0 : 2) + (ac==0 ? 0 : 4), depth: depth, frames: [] };
|
||||
|
||||
var bipp = (cc+ac)*depth, bipl = bipp * w;
|
||||
for(var i=0; i<bufs.length; i++)
|
||||
nimg.frames.push({ rect:{x:0,y:0,width:w,height:h}, img:new Uint8Array(bufs[i]), blend:0, dispose:1, bpp:Math.ceil(bipp/8), bpl:Math.ceil(bipl/8) });
|
||||
|
||||
UPNG.encode.compressPNG(nimg, 4);
|
||||
|
||||
return UPNG.encode._main(nimg, w, h, dels);
|
||||
}
|
||||
|
||||
UPNG.encode._main = function(nimg, w, h, dels) {
|
||||
var crc = UPNG.crc.crc, wUi = UPNG._bin.writeUint, wUs = UPNG._bin.writeUshort, wAs = UPNG._bin.writeASCII;
|
||||
var offset = 8, anim = nimg.frames.length>1, pltAlpha = false;
|
||||
|
||||
var leng = 8 + (16+5+4) /*+ (9+4)*/ + (anim ? 20 : 0);
|
||||
if(nimg.ctype==3) {
|
||||
var dl = nimg.plte.length;
|
||||
for(var i=0; i<dl; i++) if((nimg.plte[i]>>>24)!=255) pltAlpha = true;
|
||||
leng += (8 + dl*3 + 4) + (pltAlpha ? (8 + dl*1 + 4) : 0);
|
||||
}
|
||||
for(var j=0; j<nimg.frames.length; j++)
|
||||
{
|
||||
var fr = nimg.frames[j];
|
||||
if(anim) leng += 38;
|
||||
leng += fr.cimg.length + 12;
|
||||
if(j!=0) leng+=4;
|
||||
}
|
||||
leng += 12;
|
||||
|
||||
var data = new Uint8Array(leng);
|
||||
var wr=[0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
|
||||
for(var i=0; i<8; i++) data[i]=wr[i];
|
||||
|
||||
wUi(data,offset, 13); offset+=4;
|
||||
wAs(data,offset,"IHDR"); offset+=4;
|
||||
wUi(data,offset,w); offset+=4;
|
||||
wUi(data,offset,h); offset+=4;
|
||||
data[offset] = nimg.depth; offset++; // depth
|
||||
data[offset] = nimg.ctype; offset++; // ctype
|
||||
data[offset] = 0; offset++; // compress
|
||||
data[offset] = 0; offset++; // filter
|
||||
data[offset] = 0; offset++; // interlace
|
||||
wUi(data,offset,crc(data,offset-17,17)); offset+=4; // crc
|
||||
|
||||
// 9 bytes to say, that it is sRGB
|
||||
//wUi(data,offset, 1); offset+=4;
|
||||
//wAs(data,offset,"sRGB"); offset+=4;
|
||||
//data[offset] = 1; offset++;
|
||||
//wUi(data,offset,crc(data,offset-5,5)); offset+=4; // crc
|
||||
|
||||
if(anim) {
|
||||
wUi(data,offset, 8); offset+=4;
|
||||
wAs(data,offset,"acTL"); offset+=4;
|
||||
wUi(data,offset, nimg.frames.length); offset+=4;
|
||||
wUi(data,offset, 0); offset+=4;
|
||||
wUi(data,offset,crc(data,offset-12,12)); offset+=4; // crc
|
||||
}
|
||||
|
||||
if(nimg.ctype==3) {
|
||||
var dl = nimg.plte.length;
|
||||
wUi(data,offset, dl*3); offset+=4;
|
||||
wAs(data,offset,"PLTE"); offset+=4;
|
||||
for(var i=0; i<dl; i++){
|
||||
var ti=i*3, c=nimg.plte[i], r=(c)&255, g=(c>>>8)&255, b=(c>>>16)&255;
|
||||
data[offset+ti+0]=r; data[offset+ti+1]=g; data[offset+ti+2]=b;
|
||||
}
|
||||
offset+=dl*3;
|
||||
wUi(data,offset,crc(data,offset-dl*3-4,dl*3+4)); offset+=4; // crc
|
||||
|
||||
if(pltAlpha) {
|
||||
wUi(data,offset, dl); offset+=4;
|
||||
wAs(data,offset,"tRNS"); offset+=4;
|
||||
for(var i=0; i<dl; i++) data[offset+i]=(nimg.plte[i]>>>24)&255;
|
||||
offset+=dl;
|
||||
wUi(data,offset,crc(data,offset-dl-4,dl+4)); offset+=4; // crc
|
||||
}
|
||||
}
|
||||
|
||||
var fi = 0;
|
||||
for(var j=0; j<nimg.frames.length; j++)
|
||||
{
|
||||
var fr = nimg.frames[j];
|
||||
if(anim) {
|
||||
wUi(data, offset, 26); offset+=4;
|
||||
wAs(data, offset,"fcTL"); offset+=4;
|
||||
wUi(data, offset, fi++); offset+=4;
|
||||
wUi(data, offset, fr.rect.width ); offset+=4;
|
||||
wUi(data, offset, fr.rect.height); offset+=4;
|
||||
wUi(data, offset, fr.rect.x); offset+=4;
|
||||
wUi(data, offset, fr.rect.y); offset+=4;
|
||||
wUs(data, offset, dels[j]); offset+=2;
|
||||
wUs(data, offset, 1000); offset+=2;
|
||||
data[offset] = fr.dispose; offset++; // dispose
|
||||
data[offset] = fr.blend ; offset++; // blend
|
||||
wUi(data,offset,crc(data,offset-30,30)); offset+=4; // crc
|
||||
}
|
||||
|
||||
var imgd = fr.cimg, dl = imgd.length;
|
||||
wUi(data,offset, dl+(j==0?0:4)); offset+=4;
|
||||
var ioff = offset;
|
||||
wAs(data,offset,(j==0)?"IDAT":"fdAT"); offset+=4;
|
||||
if(j!=0) { wUi(data, offset, fi++); offset+=4; }
|
||||
for(var i=0; i<dl; i++) data[offset+i] = imgd[i];
|
||||
offset += dl;
|
||||
wUi(data,offset,crc(data,ioff,offset-ioff)); offset+=4; // crc
|
||||
}
|
||||
|
||||
wUi(data,offset, 0); offset+=4;
|
||||
wAs(data,offset,"IEND"); offset+=4;
|
||||
wUi(data,offset,crc(data,offset-4,4)); offset+=4; // crc
|
||||
|
||||
return data.buffer;
|
||||
}
|
||||
|
||||
UPNG.encode.compressPNG = function(out, filter) {
|
||||
for(var i=0; i<out.frames.length; i++) {
|
||||
var frm = out.frames[i], nw=frm.rect.width, nh=frm.rect.height;
|
||||
var fdata = new Uint8Array(nh*frm.bpl+nh);
|
||||
frm.cimg = UPNG.encode._filterZero(frm.img,nh,frm.bpp,frm.bpl,fdata, filter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
UPNG.encode.compress = function(bufs, w, h, ps, forGIF, forbidPlte)
|
||||
{
|
||||
//var time = Date.now();
|
||||
if(forbidPlte==null) forbidPlte = false;
|
||||
|
||||
var ctype = 6, depth = 8, alphaAnd=255
|
||||
|
||||
for(var j=0; j<bufs.length; j++) { // when not quantized, other frames can contain colors, that are not in an initial frame
|
||||
var img = new Uint8Array(bufs[j]), ilen = img.length;
|
||||
for(var i=0; i<ilen; i+=4) alphaAnd &= img[i+3];
|
||||
}
|
||||
var gotAlpha = (alphaAnd!=255);
|
||||
|
||||
//console.log("alpha check", Date.now()-time); time = Date.now();
|
||||
|
||||
var brute = gotAlpha && forGIF; // brute : frames can only be copied, not "blended"
|
||||
var frms = UPNG.encode.framize(bufs, w, h, forGIF, brute);
|
||||
//console.log("framize", Date.now()-time); time = Date.now();
|
||||
|
||||
var cmap={}, plte=[], inds=[];
|
||||
|
||||
if(ps!=0) {
|
||||
var nbufs = []; for(var i=0; i<frms.length; i++) nbufs.push(frms[i].img.buffer);
|
||||
|
||||
var abuf = UPNG.encode.concatRGBA(nbufs, forGIF), qres = UPNG.quantize(abuf, ps);
|
||||
var cof = 0, bb = new Uint8Array(qres.abuf);
|
||||
for(var i=0; i<frms.length; i++) { var ti=frms[i].img, bln=ti.length; inds.push(new Uint8Array(qres.inds.buffer, cof>>2, bln>>2));
|
||||
for(var j=0; j<bln; j+=4) { ti[j]=bb[cof+j]; ti[j+1]=bb[cof+j+1]; ti[j+2]=bb[cof+j+2]; ti[j+3]=bb[cof+j+3]; } cof+=bln; }
|
||||
|
||||
for(var i=0; i<qres.plte.length; i++) plte.push(qres.plte[i].est.rgba);
|
||||
//console.log("quantize", Date.now()-time); time = Date.now();
|
||||
}
|
||||
else {
|
||||
// what if ps==0, but there are <=256 colors? we still need to detect, if the palette could be used
|
||||
for(var j=0; j<frms.length; j++) { // when not quantized, other frames can contain colors, that are not in an initial frame
|
||||
var frm = frms[j], img32 = new Uint32Array(frm.img.buffer), nw=frm.rect.width, ilen = img32.length;
|
||||
var ind = new Uint8Array(ilen); inds.push(ind);
|
||||
for(var i=0; i<ilen; i++) {
|
||||
var c = img32[i];
|
||||
if (i!=0 && c==img32[i- 1]) ind[i]=ind[i-1];
|
||||
else if(i>nw && c==img32[i-nw]) ind[i]=ind[i-nw];
|
||||
else {
|
||||
var cmc = cmap[c];
|
||||
if(cmc==null) { cmap[c]=cmc=plte.length; plte.push(c); if(plte.length>=300) break; }
|
||||
ind[i]=cmc;
|
||||
}
|
||||
}
|
||||
}
|
||||
//console.log("make palette", Date.now()-time); time = Date.now();
|
||||
}
|
||||
|
||||
var cc=plte.length; //console.log("colors:",cc);
|
||||
if(cc<=256 && forbidPlte==false) {
|
||||
if(cc<= 2) depth=1; else if(cc<= 4) depth=2; else if(cc<=16) depth=4; else depth=8;
|
||||
if(forGIF) depth=8;
|
||||
}
|
||||
|
||||
for(var j=0; j<frms.length; j++)
|
||||
{
|
||||
var frm = frms[j], nx=frm.rect.x, ny=frm.rect.y, nw=frm.rect.width, nh=frm.rect.height;
|
||||
var cimg = frm.img, cimg32 = new Uint32Array(cimg.buffer);
|
||||
var bpl = 4*nw, bpp=4;
|
||||
if(cc<=256 && forbidPlte==false) {
|
||||
bpl = Math.ceil(depth*nw/8);
|
||||
var nimg = new Uint8Array(bpl*nh);
|
||||
var inj = inds[j];
|
||||
for(var y=0; y<nh; y++) { var i=y*bpl, ii=y*nw;
|
||||
if (depth==8) for(var x=0; x<nw; x++) nimg[i+(x) ] = (inj[ii+x] );
|
||||
else if(depth==4) for(var x=0; x<nw; x++) nimg[i+(x>>1)] |= (inj[ii+x]<<(4-(x&1)*4));
|
||||
else if(depth==2) for(var x=0; x<nw; x++) nimg[i+(x>>2)] |= (inj[ii+x]<<(6-(x&3)*2));
|
||||
else if(depth==1) for(var x=0; x<nw; x++) nimg[i+(x>>3)] |= (inj[ii+x]<<(7-(x&7)*1));
|
||||
}
|
||||
cimg=nimg; ctype=3; bpp=1;
|
||||
}
|
||||
else if(gotAlpha==false && frms.length==1) { // some next "reduced" frames may contain alpha for blending
|
||||
var nimg = new Uint8Array(nw*nh*3), area=nw*nh;
|
||||
for(var i=0; i<area; i++) { var ti=i*3, qi=i*4; nimg[ti]=cimg[qi]; nimg[ti+1]=cimg[qi+1]; nimg[ti+2]=cimg[qi+2]; }
|
||||
cimg=nimg; ctype=2; bpp=3; bpl=3*nw;
|
||||
}
|
||||
frm.img=cimg; frm.bpl=bpl; frm.bpp=bpp;
|
||||
}
|
||||
//console.log("colors => palette indices", Date.now()-time); time = Date.now();
|
||||
|
||||
return {ctype:ctype, depth:depth, plte:plte, frames:frms };
|
||||
}
|
||||
UPNG.encode.framize = function(bufs,w,h,forGIF,brute) {
|
||||
var frms = [];
|
||||
for(var j=0; j<bufs.length; j++) {
|
||||
var cimg = new Uint8Array(bufs[j]), cimg32 = new Uint32Array(cimg.buffer);
|
||||
|
||||
var nx=0, ny=0, nw=w, nh=h, blend=0;
|
||||
if(j!=0 && !brute) {
|
||||
var tlim = (forGIF || j==1 || frms[frms.length-2].dispose==2)?1:2, tstp = 0, tarea = 1e9;
|
||||
for(var it=0; it<tlim; it++)
|
||||
{
|
||||
var pimg = new Uint8Array(bufs[j-1-it]), p32 = new Uint32Array(bufs[j-1-it]);
|
||||
var mix=w,miy=h,max=-1,may=-1;
|
||||
for(var y=0; y<h; y++) for(var x=0; x<w; x++) {
|
||||
var i = y*w+x;
|
||||
if(cimg32[i]!=p32[i]) {
|
||||
if(x<mix) mix=x; if(x>max) max=x;
|
||||
if(y<miy) miy=y; if(y>may) may=y;
|
||||
}
|
||||
}
|
||||
var sarea = (max==-1) ? 1 : (max-mix+1)*(may-miy+1);
|
||||
if(sarea<tarea) {
|
||||
tarea = sarea; tstp = it;
|
||||
if(max==-1) { nx=ny=0; nw=nh=1; }
|
||||
else { nx = mix; ny = miy; nw = max-mix+1; nh = may-miy+1; }
|
||||
}
|
||||
}
|
||||
|
||||
var pimg = new Uint8Array(bufs[j-1-tstp]);
|
||||
if(tstp==1) frms[frms.length-1].dispose = 2;
|
||||
|
||||
var nimg = new Uint8Array(nw*nh*4), nimg32 = new Uint32Array(nimg.buffer);
|
||||
UPNG. _copyTile(pimg,w,h, nimg,nw,nh, -nx,-ny, 0);
|
||||
if(UPNG._copyTile(cimg,w,h, nimg,nw,nh, -nx,-ny, 3)) {
|
||||
UPNG._copyTile(cimg,w,h, nimg,nw,nh, -nx,-ny, 2); blend = 1;
|
||||
}
|
||||
else {
|
||||
UPNG._copyTile(cimg,w,h, nimg,nw,nh, -nx,-ny, 0); blend = 0;
|
||||
}
|
||||
cimg = nimg;
|
||||
}
|
||||
else cimg = cimg.slice(0); // img may be rewrited further ... don't rewrite input
|
||||
frms.push({rect:{x:nx,y:ny,width:nw,height:nh}, img:cimg, blend:blend, dispose:brute?1:0});
|
||||
}
|
||||
return frms;
|
||||
}
|
||||
|
||||
UPNG.encode._filterZero = function(img,h,bpp,bpl,data, filter)
|
||||
{
|
||||
if(filter!=-1) {
|
||||
for(var y=0; y<h; y++) UPNG.encode._filterLine(data, img, y, bpl, bpp, filter);
|
||||
return pako["deflate"](data);
|
||||
}
|
||||
var fls = [];
|
||||
for(var t=0; t<5; t++) { if(h*bpl>500000 && (t==2 || t==3 || t==4)) continue;
|
||||
for(var y=0; y<h; y++) UPNG.encode._filterLine(data, img, y, bpl, bpp, t);
|
||||
fls.push(pako["deflate"](data)); if(bpp==1) break;
|
||||
}
|
||||
var ti, tsize=1e9;
|
||||
for(var i=0; i<fls.length; i++) if(fls[i].length<tsize) { ti=i; tsize=fls[i].length; }
|
||||
return fls[ti];
|
||||
}
|
||||
UPNG.encode._filterLine = function(data, img, y, bpl, bpp, type)
|
||||
{
|
||||
var i = y*bpl, di = i+y, paeth = UPNG.decode._paeth
|
||||
data[di]=type; di++;
|
||||
|
||||
if(type==0) for(var x=0; x<bpl; x++) data[di+x] = img[i+x];
|
||||
else if(type==1) {
|
||||
for(var x= 0; x<bpp; x++) data[di+x] = img[i+x];
|
||||
for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x]-img[i+x-bpp]+256)&255;
|
||||
}
|
||||
else if(y==0) {
|
||||
for(var x= 0; x<bpp; x++) data[di+x] = img[i+x];
|
||||
|
||||
if(type==2) for(var x=bpp; x<bpl; x++) data[di+x] = img[i+x];
|
||||
if(type==3) for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x] - (img[i+x-bpp]>>1) +256)&255;
|
||||
if(type==4) for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x] - paeth(img[i+x-bpp], 0, 0) +256)&255;
|
||||
}
|
||||
else {
|
||||
if(type==2) { for(var x= 0; x<bpl; x++) data[di+x] = (img[i+x]+256 - img[i+x-bpl])&255; }
|
||||
if(type==3) { for(var x= 0; x<bpp; x++) data[di+x] = (img[i+x]+256 - (img[i+x-bpl]>>1))&255;
|
||||
for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x]+256 - ((img[i+x-bpl]+img[i+x-bpp])>>1))&255; }
|
||||
if(type==4) { for(var x= 0; x<bpp; x++) data[di+x] = (img[i+x]+256 - paeth(0, img[i+x-bpl], 0))&255;
|
||||
for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x]+256 - paeth(img[i+x-bpp], img[i+x-bpl], img[i+x-bpp-bpl]))&255; }
|
||||
}
|
||||
}
|
||||
|
||||
UPNG.crc = {
|
||||
table : ( function() {
|
||||
var tab = new Uint32Array(256);
|
||||
for (var n=0; n<256; n++) {
|
||||
var c = n;
|
||||
for (var k=0; k<8; k++) {
|
||||
if (c & 1) c = 0xedb88320 ^ (c >>> 1);
|
||||
else c = c >>> 1;
|
||||
}
|
||||
tab[n] = c; }
|
||||
return tab; })(),
|
||||
update : function(c, buf, off, len) {
|
||||
for (var i=0; i<len; i++) c = UPNG.crc.table[(c ^ buf[off+i]) & 0xff] ^ (c >>> 8);
|
||||
return c;
|
||||
},
|
||||
crc : function(b,o,l) { return UPNG.crc.update(0xffffffff,b,o,l) ^ 0xffffffff; }
|
||||
}
|
||||
|
||||
|
||||
UPNG.quantize = function(abuf, ps)
|
||||
{
|
||||
var oimg = new Uint8Array(abuf), nimg = oimg.slice(0), nimg32 = new Uint32Array(nimg.buffer);
|
||||
|
||||
var KD = UPNG.quantize.getKDtree(nimg, ps);
|
||||
var root = KD[0], leafs = KD[1];
|
||||
|
||||
var planeDst = UPNG.quantize.planeDst;
|
||||
var sb = oimg, tb = nimg32, len=sb.length;
|
||||
|
||||
var inds = new Uint8Array(oimg.length>>2);
|
||||
for(var i=0; i<len; i+=4) {
|
||||
var r=sb[i]*(1/255), g=sb[i+1]*(1/255), b=sb[i+2]*(1/255), a=sb[i+3]*(1/255);
|
||||
|
||||
// exact, but too slow :(
|
||||
var nd = UPNG.quantize.getNearest(root, r, g, b, a);
|
||||
//var nd = root;
|
||||
//while(nd.left) nd = (planeDst(nd.est,r,g,b,a)<=0) ? nd.left : nd.right;
|
||||
|
||||
inds[i>>2] = nd.ind;
|
||||
tb[i>>2] = nd.est.rgba;
|
||||
}
|
||||
return { abuf:nimg.buffer, inds:inds, plte:leafs };
|
||||
}
|
||||
|
||||
UPNG.quantize.getKDtree = function(nimg, ps, err) {
|
||||
if(err==null) err = 0.0001;
|
||||
var nimg32 = new Uint32Array(nimg.buffer);
|
||||
|
||||
var root = {i0:0, i1:nimg.length, bst:null, est:null, tdst:0, left:null, right:null }; // basic statistic, extra statistic
|
||||
root.bst = UPNG.quantize.stats( nimg,root.i0, root.i1 ); root.est = UPNG.quantize.estats( root.bst );
|
||||
var leafs = [root];
|
||||
|
||||
while(leafs.length<ps)
|
||||
{
|
||||
var maxL = 0, mi=0;
|
||||
for(var i=0; i<leafs.length; i++) if(leafs[i].est.L > maxL) { maxL=leafs[i].est.L; mi=i; }
|
||||
if(maxL<err) break;
|
||||
var node = leafs[mi];
|
||||
|
||||
var s0 = UPNG.quantize.splitPixels(nimg,nimg32, node.i0, node.i1, node.est.e, node.est.eMq255);
|
||||
var s0wrong = (node.i0>=s0 || node.i1<=s0);
|
||||
//console.log(maxL, leafs.length, mi);
|
||||
if(s0wrong) { node.est.L=0; continue; }
|
||||
|
||||
|
||||
var ln = {i0:node.i0, i1:s0, bst:null, est:null, tdst:0, left:null, right:null }; ln.bst = UPNG.quantize.stats( nimg, ln.i0, ln.i1 );
|
||||
ln.est = UPNG.quantize.estats( ln.bst );
|
||||
var rn = {i0:s0, i1:node.i1, bst:null, est:null, tdst:0, left:null, right:null }; rn.bst = {R:[], m:[], N:node.bst.N-ln.bst.N};
|
||||
for(var i=0; i<16; i++) rn.bst.R[i] = node.bst.R[i]-ln.bst.R[i];
|
||||
for(var i=0; i< 4; i++) rn.bst.m[i] = node.bst.m[i]-ln.bst.m[i];
|
||||
rn.est = UPNG.quantize.estats( rn.bst );
|
||||
|
||||
node.left = ln; node.right = rn;
|
||||
leafs[mi]=ln; leafs.push(rn);
|
||||
}
|
||||
leafs.sort(function(a,b) { return b.bst.N-a.bst.N; });
|
||||
for(var i=0; i<leafs.length; i++) leafs[i].ind=i;
|
||||
return [root, leafs];
|
||||
}
|
||||
|
||||
UPNG.quantize.getNearest = function(nd, r,g,b,a)
|
||||
{
|
||||
if(nd.left==null) { nd.tdst = UPNG.quantize.dist(nd.est.q,r,g,b,a); return nd; }
|
||||
var planeDst = UPNG.quantize.planeDst(nd.est,r,g,b,a);
|
||||
|
||||
var node0 = nd.left, node1 = nd.right;
|
||||
if(planeDst>0) { node0=nd.right; node1=nd.left; }
|
||||
|
||||
var ln = UPNG.quantize.getNearest(node0, r,g,b,a);
|
||||
if(ln.tdst<=planeDst*planeDst) return ln;
|
||||
var rn = UPNG.quantize.getNearest(node1, r,g,b,a);
|
||||
return rn.tdst<ln.tdst ? rn : ln;
|
||||
}
|
||||
UPNG.quantize.planeDst = function(est, r,g,b,a) { var e = est.e; return e[0]*r + e[1]*g + e[2]*b + e[3]*a - est.eMq; }
|
||||
UPNG.quantize.dist = function(q, r,g,b,a) { var d0=r-q[0], d1=g-q[1], d2=b-q[2], d3=a-q[3]; return d0*d0+d1*d1+d2*d2+d3*d3; }
|
||||
|
||||
UPNG.quantize.splitPixels = function(nimg, nimg32, i0, i1, e, eMq)
|
||||
{
|
||||
var vecDot = UPNG.quantize.vecDot;
|
||||
i1-=4;
|
||||
var shfs = 0;
|
||||
while(i0<i1)
|
||||
{
|
||||
while(vecDot(nimg, i0, e)<=eMq) i0+=4;
|
||||
while(vecDot(nimg, i1, e)> eMq) i1-=4;
|
||||
if(i0>=i1) break;
|
||||
|
||||
var t = nimg32[i0>>2]; nimg32[i0>>2] = nimg32[i1>>2]; nimg32[i1>>2]=t;
|
||||
|
||||
i0+=4; i1-=4;
|
||||
}
|
||||
while(vecDot(nimg, i0, e)>eMq) i0-=4;
|
||||
return i0+4;
|
||||
}
|
||||
UPNG.quantize.vecDot = function(nimg, i, e)
|
||||
{
|
||||
return nimg[i]*e[0] + nimg[i+1]*e[1] + nimg[i+2]*e[2] + nimg[i+3]*e[3];
|
||||
}
|
||||
UPNG.quantize.stats = function(nimg, i0, i1){
|
||||
var R = [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0];
|
||||
var m = [0,0,0,0];
|
||||
var N = (i1-i0)>>2;
|
||||
for(var i=i0; i<i1; i+=4)
|
||||
{
|
||||
var r = nimg[i]*(1/255), g = nimg[i+1]*(1/255), b = nimg[i+2]*(1/255), a = nimg[i+3]*(1/255);
|
||||
//var r = nimg[i], g = nimg[i+1], b = nimg[i+2], a = nimg[i+3];
|
||||
m[0]+=r; m[1]+=g; m[2]+=b; m[3]+=a;
|
||||
|
||||
R[ 0] += r*r; R[ 1] += r*g; R[ 2] += r*b; R[ 3] += r*a;
|
||||
R[ 5] += g*g; R[ 6] += g*b; R[ 7] += g*a;
|
||||
R[10] += b*b; R[11] += b*a;
|
||||
R[15] += a*a;
|
||||
}
|
||||
R[4]=R[1]; R[8]=R[2]; R[9]=R[6]; R[12]=R[3]; R[13]=R[7]; R[14]=R[11];
|
||||
|
||||
return {R:R, m:m, N:N};
|
||||
}
|
||||
UPNG.quantize.estats = function(stats){
|
||||
var R = stats.R, m = stats.m, N = stats.N;
|
||||
|
||||
// when all samples are equal, but N is large (millions), the Rj can be non-zero ( 0.0003.... - precission error)
|
||||
var m0 = m[0], m1 = m[1], m2 = m[2], m3 = m[3], iN = (N==0 ? 0 : 1/N);
|
||||
var Rj = [
|
||||
R[ 0] - m0*m0*iN, R[ 1] - m0*m1*iN, R[ 2] - m0*m2*iN, R[ 3] - m0*m3*iN,
|
||||
R[ 4] - m1*m0*iN, R[ 5] - m1*m1*iN, R[ 6] - m1*m2*iN, R[ 7] - m1*m3*iN,
|
||||
R[ 8] - m2*m0*iN, R[ 9] - m2*m1*iN, R[10] - m2*m2*iN, R[11] - m2*m3*iN,
|
||||
R[12] - m3*m0*iN, R[13] - m3*m1*iN, R[14] - m3*m2*iN, R[15] - m3*m3*iN
|
||||
];
|
||||
|
||||
var A = Rj, M = UPNG.M4;
|
||||
var b = [0.5,0.5,0.5,0.5], mi = 0, tmi = 0;
|
||||
|
||||
if(N!=0)
|
||||
for(var i=0; i<10; i++) {
|
||||
b = M.multVec(A, b); tmi = Math.sqrt(M.dot(b,b)); b = M.sml(1/tmi, b);
|
||||
if(Math.abs(tmi-mi)<1e-9) break; mi = tmi;
|
||||
}
|
||||
//b = [0,0,1,0]; mi=N;
|
||||
var q = [m0*iN, m1*iN, m2*iN, m3*iN];
|
||||
var eMq255 = M.dot(M.sml(255,q),b);
|
||||
|
||||
return { Cov:Rj, q:q, e:b, L:mi, eMq255:eMq255, eMq : M.dot(b,q),
|
||||
rgba: (((Math.round(255*q[3])<<24) | (Math.round(255*q[2])<<16) | (Math.round(255*q[1])<<8) | (Math.round(255*q[0])<<0))>>>0) };
|
||||
}
|
||||
UPNG.M4 = {
|
||||
multVec : function(m,v) {
|
||||
return [
|
||||
m[ 0]*v[0] + m[ 1]*v[1] + m[ 2]*v[2] + m[ 3]*v[3],
|
||||
m[ 4]*v[0] + m[ 5]*v[1] + m[ 6]*v[2] + m[ 7]*v[3],
|
||||
m[ 8]*v[0] + m[ 9]*v[1] + m[10]*v[2] + m[11]*v[3],
|
||||
m[12]*v[0] + m[13]*v[1] + m[14]*v[2] + m[15]*v[3]
|
||||
];
|
||||
},
|
||||
dot : function(x,y) { return x[0]*y[0]+x[1]*y[1]+x[2]*y[2]+x[3]*y[3]; },
|
||||
sml : function(a,y) { return [a*y[0],a*y[1],a*y[2],a*y[3]]; }
|
||||
}
|
||||
|
||||
UPNG.encode.concatRGBA = function(bufs, roundAlpha) {
|
||||
var tlen = 0;
|
||||
for(var i=0; i<bufs.length; i++) tlen += bufs[i].byteLength;
|
||||
var nimg = new Uint8Array(tlen), noff=0;
|
||||
for(var i=0; i<bufs.length; i++) {
|
||||
var img = new Uint8Array(bufs[i]), il = img.length;
|
||||
for(var j=0; j<il; j+=4) {
|
||||
var r=img[j], g=img[j+1], b=img[j+2], a = img[j+3];
|
||||
if(roundAlpha) a = (a&128)==0?0:255;
|
||||
if(a==0) r=g=b=0;
|
||||
nimg[noff+j]=r; nimg[noff+j+1]=g; nimg[noff+j+2]=b; nimg[noff+j+3]=a; }
|
||||
noff += il;
|
||||
}
|
||||
return nimg.buffer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})(UPNG, pako);
|
||||
})();
|
||||
|
||||
|
||||
@ -1,33 +1,173 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
|
||||
var UZIP = {};
|
||||
|
||||
|
||||
UZIP.parse = function(data) // Uint8Array
|
||||
{
|
||||
var bin = UZIP.bin, offset = 0, out = {};
|
||||
|
||||
var eocd = data.length-4;
|
||||
|
||||
while(bin.readUint(data, eocd)!=0x06054b50) eocd--;
|
||||
|
||||
var offset = eocd;
|
||||
offset+=4; // sign = 0x06054b50
|
||||
offset+=4; // disks = 0;
|
||||
var cnu = bin.readUshort(data, offset); offset+=2;
|
||||
var cnt = bin.readUshort(data, offset); offset+=2;
|
||||
|
||||
var csize = bin.readUint (data, offset); offset+=4;
|
||||
var coffs = bin.readUint (data, offset); offset+=4;
|
||||
|
||||
offset = coffs;
|
||||
for(var i=0; i<cnu; i++)
|
||||
{
|
||||
var sign = bin.readUint(data, offset); offset+=4;
|
||||
offset += 4; // versions;
|
||||
offset += 4; // flag + compr
|
||||
offset += 4; // time
|
||||
|
||||
var crc = bin.readUint(data, offset); offset+=4;
|
||||
offset += 8; // sizes
|
||||
var nl = bin.readUshort(data, offset), el = bin.readUshort(data, offset+2), cl = bin.readUshort(data, offset+4); offset += 6; // name, extra, comment
|
||||
offset += 8; // disk, attribs
|
||||
|
||||
var roff = bin.readUint(data, offset); offset+=4;
|
||||
offset += nl + el + cl;
|
||||
|
||||
UZIP._readLocal(data, roff, out);
|
||||
}
|
||||
//console.log(out);
|
||||
return out;
|
||||
}
|
||||
|
||||
UZIP._readLocal = function(data, offset, out)
|
||||
{
|
||||
var bin = UZIP.bin;
|
||||
var sign = bin.readUint(data, offset); offset+=4;
|
||||
var ver = bin.readUshort(data, offset); offset+=2;
|
||||
var gpflg = bin.readUshort(data, offset); offset+=2;
|
||||
//if((gpflg&8)!=0) throw "unknown sizes";
|
||||
var cmpr = bin.readUshort(data, offset); offset+=2;
|
||||
|
||||
var time = PUtils.readUint(data, offset); offset+=4;
|
||||
|
||||
|
||||
var crc32 = bin.readUint (data, offset); offset+=4;
|
||||
var csize = bin.readUint (data, offset); offset+=4;
|
||||
var usize = bin.readUint (data, offset); offset+=4;
|
||||
|
||||
var nlen = bin.readUshort(data, offset); offset+=2;
|
||||
var elen = bin.readUshort(data, offset); offset+=2;
|
||||
|
||||
var name = bin.readASCII(data, offset, nlen); offset+=nlen;
|
||||
offset += elen;
|
||||
|
||||
//console.log(ver, gpflg, cmpr, crc32, csize, usize, nlen, elen, name);
|
||||
|
||||
var file = new Uint8Array(data.buffer, offset);
|
||||
if(false) {}
|
||||
else if(cmpr==0) out[name] = new Uint8Array(file.buffer.slice(offset, offset+csize));
|
||||
else if(cmpr==8) out[name] = pako["inflateRaw"](file);
|
||||
else throw "unknown compression method: "+cmpr;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
UZIP.encode = function(obj) {
|
||||
var tot = 0;
|
||||
for(var p in obj) tot += obj[p].length + 30 + p.length + 46 + p.length;
|
||||
tot += 22;
|
||||
|
||||
var data = new Uint8Array(tot), offset = 0, bin = UZIP.bin;
|
||||
var fof = []
|
||||
|
||||
for(var p in obj) {
|
||||
var file = obj[p]; fof.push(offset);
|
||||
offset = UZIP._writeHeader(data, offset, p, file, 0);
|
||||
}
|
||||
var i=0, ioff = offset;
|
||||
for(var p in obj) {
|
||||
var file = obj[p]; fof.push(offset);
|
||||
offset = UZIP._writeHeader(data, offset, p, file, 1, fof[i++]);
|
||||
}
|
||||
var csize = offset-ioff;
|
||||
|
||||
bin.writeUint (data, offset, 0x06054b50); offset+=4;
|
||||
offset += 4; // disks
|
||||
bin.writeUshort(data, offset, i); offset += 2;
|
||||
bin.writeUshort(data, offset, i); offset += 2; // number of c d records
|
||||
bin.writeUint (data, offset, csize); offset += 4;
|
||||
bin.writeUint (data, offset, ioff ); offset += 4;
|
||||
offset += 2;
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
UZIP._writeHeader = function(data, offset, p, file, t, roff)
|
||||
{
|
||||
var bin = UZIP.bin;
|
||||
|
||||
bin.writeUint (data, offset, t==0 ? 0x04034b50 : 0x02014b50); offset+=4; // sign
|
||||
if(t==1) offset+=2; // ver made by
|
||||
bin.writeUshort(data, offset, 20); offset+=2; // ver
|
||||
bin.writeUshort(data, offset, 0); offset+=2; // gflip
|
||||
bin.writeUshort(data, offset, 0); offset+=2; // cmpr
|
||||
|
||||
bin.writeUint(data, offset, 0); offset+=4; // time
|
||||
bin.writeUint(data, offset, UZIP.crc.crc(file,0,file.length)); offset+=4; // crc32
|
||||
bin.writeUint(data, offset, file.length); offset+=4; // csize
|
||||
bin.writeUint(data, offset, file.length); offset+=4; // usize
|
||||
|
||||
bin.writeUshort(data, offset, p.length); offset+=2; // nlen
|
||||
bin.writeUshort(data, offset, 0); offset+=2; // elen
|
||||
|
||||
if(t==1) {
|
||||
offset += 2; // comment length
|
||||
offset += 2; // disk number
|
||||
offset += 6; // attributes
|
||||
bin.writeUint(data, offset, roff); offset+=4; // usize
|
||||
}
|
||||
|
||||
bin.writeASCII(data, offset, p); offset+= p.length;
|
||||
|
||||
if(t==0) {
|
||||
for(var i=0; i<file.length; i++) data[offset+i] = file[i];
|
||||
offset += file.length;
|
||||
}
|
||||
|
||||
return offset;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
UZIP.crc = {
|
||||
table : ( function() {
|
||||
var tab = new Uint32Array(256);
|
||||
for (var n=0; n<256; n++) {
|
||||
var c = n;
|
||||
for (var k=0; k<8; k++) {
|
||||
if (c & 1) c = 0xedb88320 ^ (c >>> 1);
|
||||
else c = c >>> 1;
|
||||
}
|
||||
tab[n] = c; }
|
||||
return tab; })(),
|
||||
update : function(c, buf, off, len) {
|
||||
for (var i=0; i<len; i++) c = UPNG.crc.table[(c ^ buf[off+i]) & 0xff] ^ (c >>> 8);
|
||||
return c;
|
||||
},
|
||||
crc : function(b,o,l) { return UPNG.crc.update(0xffffffff,b,o,l) ^ 0xffffffff; }
|
||||
}
|
||||
|
||||
UZIP.bin = {
|
||||
readUshort : function(buff,p) { return (buff[p]) | (buff[p+1]<<8); },
|
||||
writeUshort: function(buff,p,n){ buff[p] = (n)&255; buff[p+1] = (n>>8)&255; },
|
||||
readUint : function(buff,p) { return (buff[p+3]*(256*256*256)) + ((buff[p+2]<<16) | (buff[p+1]<< 8) | buff[p]); },
|
||||
writeUint : function(buff,p,n){ buff[p+3]=(n>>24)&255; buff[p+2]=(n>>16)&255; buff[p+1]=(n>>8)&255; buff[p]=n&255; },
|
||||
readASCII : function(buff,p,l){ var s = ""; for(var i=0; i<l; i++) s += String.fromCharCode(buff[p+i]); return s; },
|
||||
writeASCII : function(data,p,s){ for(var i=0; i<s.length; i++) data[p+i] = s.charCodeAt(i); }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,33 +1,127 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
* { margin:0; padding:0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color:#3a3a3a;
|
||||
background-color:#f6f8fa;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
color: white;
|
||||
height:170px;
|
||||
text-align:center;
|
||||
background: linear-gradient(#4fa0eb, #9656d9);
|
||||
}
|
||||
header a {
|
||||
color: white;
|
||||
font-weight:bold;
|
||||
margin-right:14px;
|
||||
}
|
||||
header iframe { vertical-align:middle; }
|
||||
|
||||
.foot {
|
||||
/*background-image:url(grass.png);*/
|
||||
background-repeat: repeat-x;
|
||||
background-position: center bottom;
|
||||
background-size: 200px 50px;
|
||||
padding: 0.5em 0 1.1em 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size:1.5em;
|
||||
height:50px;
|
||||
width:660px;
|
||||
padding: 0.3em 1em 0 1em;
|
||||
background-color:#f6f8fa;
|
||||
box-shadow: 0px 3px 9px rgba(0,0,0,0.55);
|
||||
border-radius:1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
float:left;
|
||||
position:absolute;
|
||||
background-image:url(grid.png);
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1em;
|
||||
background-color: #9656d9;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.2em 0.7em;
|
||||
margin-left: 1em;
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin:0 auto;
|
||||
overflow-x:visible;
|
||||
}
|
||||
|
||||
#lcont {
|
||||
width: 500px;
|
||||
float:left;
|
||||
}
|
||||
#list {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
#list::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
#list::-webkit-scrollbar-thumb {
|
||||
background: rgba(0,0,0, 0.2 );
|
||||
margin:2px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0.5em;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(0,100,190,0.15);
|
||||
}
|
||||
|
||||
.item .fname {
|
||||
display:inline-block;
|
||||
width:8.5em;
|
||||
}
|
||||
.item span {
|
||||
display:inline-block;
|
||||
width:4.5em;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
#bunny {
|
||||
transition: transform .2s ease-out;
|
||||
filter: drop-shadow(5px 7px 5px rgba(0,0,0,0.4));
|
||||
|
||||
position: absolute; width:94px; top:20px; margin-left:500px; cursor:pointer;
|
||||
}
|
||||
#bunny:hover {
|
||||
transform: translate(0, -10px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,33 +1 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
window.jsLoadedOK=true;
|
||||
@ -1,33 +1,153 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0 active"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
|
||||
|
||||
|
||||
<h1>Accounts</h1>
|
||||
|
||||
<p>Photopea allows you to log-in through a third-party service (Google, Facebook ...).
|
||||
Once you do it, Photopea can <b>identify you</b> and store your settings online (theme, language, colors, tool options).
|
||||
Then, settings can be synchronized across all devices, where you use Photopea.</p>
|
||||
|
||||
<p>Photopea offers two types of accounts: <b>Free</b> and <b>Premium</b>. The Free account is available to anybody
|
||||
for free at Photopea.com. The Premium account lets you use Photopea without advertisement and may have other benefits.</p>
|
||||
|
||||
<p>You can see prices and manage your account through the <b id="acc-window">Account Window</b> (click the Account button at the top).
|
||||
Here you can order the Premium account or see, how many days of Premium you have left. Logging in is necessary for having Premium accounts.
|
||||
The basic option is a Premium account for a single user.</p>
|
||||
|
||||
<img src="//i.imgur.com/3q2kgUo.png" class="fullw" />
|
||||
|
||||
<h2 id="teams">Teams</h2>
|
||||
|
||||
<p>You can order a Premium account for the whole team of users. It has three main benefits:</p>
|
||||
|
||||
<ul>
|
||||
<li>Just a single person pays for the whole team (more comfortable)</li>
|
||||
<li>You can change team members at any time</li>
|
||||
<li>You can save money (less expensive per user)</li>
|
||||
</ul>
|
||||
|
||||
<p>Creating teams is very simple. There are no emails, registrations, synchronizations etc.
|
||||
All can be done inside the Account window. First, everybody has to log in (and see their email address).</p>
|
||||
|
||||
<img src="//i.imgur.com/qPnNtCi.png" class="fullw" />
|
||||
<p>
|
||||
Now, scroll down to Team Settings. A team leader (the one who pays for the account) ticks <b>Start a team</b> and fills in email addresses of all members of a team.
|
||||
Other team members tick <b>Join a team</b> and fill in the email address of a team leader. Press "Save Team Settings" to save it.</p>
|
||||
|
||||
<a href="//i.imgur.com/yQUwPXI.png" target="_blank"><img src="//i.imgur.com/yQUwPXI.png" style="width:60%" /></a>
|
||||
|
||||
<p>To be a member of a team, you have to "choose a leader" and the leader has to "choose you" as one of members.
|
||||
The leader can add or remove members at any time, and the member can change the leader at any time.</p>
|
||||
|
||||
|
||||
|
||||
<h2 id="distributors">Distributors</h2>
|
||||
|
||||
<p>Photopea API allows you to have the editor at your own website (using the <code>iframe</code>), and configure it as you wish, <b>for free</b>.
|
||||
But sometimes, you may want to hide advertisement, social media buttons, branding ... let's call it a <b>whitelabel mode</b>.</p>
|
||||
|
||||
<p>We have a list of domains, for which Photopea runs in a whitelabel mode. The <b>Distributor account</b> allows you to add your domain into that list.</p>
|
||||
|
||||
<p>Order a distributor account (through the <a href="#acc-window">Account Window</a>) for the expected
|
||||
<b title="A view is one loading of Photopea in a frame. Each reloading of a page is a new view.">number of views per month</b>.
|
||||
<!--
|
||||
If you exceed that number, just order a higher version next time.
|
||||
If you exceed the number many times (and ignore our emails), your domain may be removed from a list (you will have a standard mode instead of whitelabel).
|
||||
--></p>
|
||||
|
||||
<p>After you pay for the Distributor account, enter the name of your domain into the Account window and click "Save Domain Settings".
|
||||
You can change your domain at any time.</p>
|
||||
|
||||
<img src="//i.imgur.com/h6MAEYu.png" style="width:60%" />
|
||||
|
||||
|
||||
<h2 id="self-hosted">Self-Hosted Version</h2>
|
||||
|
||||
<p>Photopea consists of a HTML file, a CSS file and several JS files (around 2 MB in total).
|
||||
Running it is very simple, there is no need for any server-side technologies (no PHP, no Node.js, no databases).</p>
|
||||
|
||||
<p>We provide a <b>self-hosted package</b> with a complete editor, which you can use on your own server.
|
||||
It has several benefits over Distributor accounts:</p>
|
||||
|
||||
<ul>
|
||||
<li>you can change CSS styles</li>
|
||||
<li>you can run it in a local network without internet access</li>
|
||||
<li>you do not depend on Photopea.com (when you are afraid, that it may go down)</li>
|
||||
<li>you can be sure, that no part of the editor changes while you run it</li>
|
||||
</ul>
|
||||
|
||||
<p>A self-Hosted version costs between $500 and $2000 per month. You should pay for a whole year (12 months) in advance,
|
||||
and you will get resources, that will work for exactly one year. After each year, you can decide, if you want to pay for a next year
|
||||
(and get new resources), or terminate it. You can get two updates during a year for free (at any time), each next update costs $300.</p>
|
||||
|
||||
<p>Write us an email to <a href="mailto:support@photopea.com">support@photopea.com</a>
|
||||
and tell us an estimated number of your users (and the usage frequency), so we can discuss the terms of our agreement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,135 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
.image {
|
||||
display: inline-block;
|
||||
width:9em;
|
||||
height:9em;
|
||||
margin: 1em;
|
||||
}
|
||||
img {
|
||||
width:100%;
|
||||
height:80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var images = [<br />
|
||||
<b>Warning</b>: scandir(img): failed to open dir: No such file or directory in <b>/var/www/vhosts/photopea.com/httpdocs/api/pages/demo.html</b> on line <b>18</b><br />
|
||||
<br />
|
||||
<b>Warning</b>: scandir(): (errno 2): No such file or directory in <b>/var/www/vhosts/photopea.com/httpdocs/api/pages/demo.html</b> on line <b>18</b><br />
|
||||
<br />
|
||||
<b>Warning</b>: sizeof(): Parameter must be an array or an object that implements Countable in <b>/var/www/vhosts/photopea.com/httpdocs/api/pages/demo.html</b> on line <b>19</b><br />
|
||||
];
|
||||
|
||||
function go(e)
|
||||
{
|
||||
var html = "";
|
||||
var fmts = ["png","jpg","jpeg","webp"];
|
||||
for(var i=0; i<images.length; i++)
|
||||
{
|
||||
var editOBJ = {
|
||||
"files" : [
|
||||
"//www.photopea.com/api/img/" + images[i],
|
||||
],
|
||||
"server" : {
|
||||
"version":1,
|
||||
"url" : "//www.photopea.com/api/saveImage.php",
|
||||
"formats" : [ images[i].split(".")[1] ]
|
||||
}
|
||||
}
|
||||
var suff = images[i].split(".").pop();
|
||||
|
||||
var editURL = "//www.photopea.com#" + encodeURI(JSON.stringify(editOBJ));
|
||||
html += "<div class=\"image\">"
|
||||
html += "<a href=\"img/" + images[i] + "\">";
|
||||
if(fmts.indexOf(suff)!=-1) html += "<img src=\"img/" + images[i] + "\" />";
|
||||
else html += "<img src=\"missing.png\" />";
|
||||
html += "</a>";
|
||||
html += "<span>"+images[i]+"</span> <br />";
|
||||
html += "<a href=\"" + editURL + "\">Edit</a>";
|
||||
html += "</div>"
|
||||
}
|
||||
document.getElementById("imgcont").innerHTML = html;
|
||||
//updatePlayground();
|
||||
|
||||
//window.addEventListener("hashchange", onHashChange, false);
|
||||
//onHashChange();
|
||||
|
||||
}
|
||||
document.body.onload = go;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<h1>Editing local images with Photopea</h1>
|
||||
<p>Click "Edit" to open an image in Photopea. Click "File" - "Save (to Server)" in Photopea to save it back.</p>
|
||||
<div id="imgcont"></div> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,154 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1 active"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
<h1>Environment</h1>
|
||||
|
||||
<p>The look of the editor can be customized by the <code>environment</code> property of the JSON.</p>
|
||||
|
||||
<pre>{
|
||||
...
|
||||
"environment" : {
|
||||
"theme" : 2, "lang" : "es",
|
||||
"vmode" : 0, "intro" : true,
|
||||
"eparams" : { "guides" :true, "grid" : true, "gsize": 8,
|
||||
"paths": true, "pgrid": true },
|
||||
"customIO" : { "open": "app.echoToOE(\"Open\");" },
|
||||
"localsave" : false, "autosave" : 120,
|
||||
"showtools" : [0,5,9], "menus" : [ [1,1,0,1], 1, 0, 1, [0] ],
|
||||
"panels" : [0, 2],
|
||||
|
||||
"phrases" : [ [1,0], "Open Design", [1,2], "Save Design" ],
|
||||
|
||||
"topt" : { "t0": ..., "t1": ..., ... },
|
||||
"tmnu" : { "t0": ..., "t1": ..., ... },
|
||||
"icons" : { "tools/crop": "https://www.me.com/img/crop.png", ... },
|
||||
"plugins":[ ... ]
|
||||
}
|
||||
}</pre>
|
||||
<p>Each parameter is optional. They have the following meaning:</p>
|
||||
<ul>
|
||||
<!--
|
||||
<li><code>fcolor</code> - foreground color</li>
|
||||
<li><code>bcolor</code> - background color</li>
|
||||
<li><code>rulers</code> - rulers enabled</li>-->
|
||||
<li><code>theme</code> - theme (0, 1, 2, ...)</li>
|
||||
<li><code>lang</code> - language</li>
|
||||
<li><code>vmode</code> - view mode. 0: regular, 1: panels are collapsed, 2: hide all panels</li>
|
||||
<li><code>intro</code> - when no documents are open, show introduction panel (with buttons etc.)</li>
|
||||
<li><code>eparams</code> - extras: enable or disable guides, grid, paths, pixel grid ...</li>
|
||||
<!--<li><code>showbranding</code> - show / hide Log In, Social media links etc.</li>-->
|
||||
<li><code>customIO</code> - redefine the behavior of File - Open, Save etc. and run a custom script instead.
|
||||
Possible properties: <code>"new", "open", "openFromURL", "takePic", "showTemplates",
|
||||
"save", "saveAsPSD", "publishOnline", "exportLayers"</code>.</li>
|
||||
<li><code>localsave</code> - enable / disable "Save as PSD", "Save for Web" and "Publish Online"</li>
|
||||
<li><code>autosave</code> - with a value X, Photopea will execute "File - Save" each X seconds</li>
|
||||
<li><code>showtools</code> - show only following tools (see tool IDs below) </li>
|
||||
<li><code>menus</code> - specify the structure of File, Edit, Image ... menus with <b>0/1 flags</b>.
|
||||
Each element of an array is either 0: hide the item, 1: show the item with a standard content,
|
||||
or an array of flags for sub-items (works recursively). If your array is shorter than required, zeros will be added to the end.
|
||||
See the current menu structure of Photopea to find the right values.
|
||||
E.g. [1,1] as the first element means, that the "File" menu will be shown with "New" and "Open" items only.</li>
|
||||
<!--<li><code>showpanels</code> - allows you to hide elements on the right side.
|
||||
There are two <b>columns</b>, which contain <b>panel blocks</b>, which contain one or more <b>panels</b>.
|
||||
Each element of an array is either 0: hide the column, 1: show the column with all standard items,
|
||||
or an array of indices of panel blocks, that should be displayed.</li>-->
|
||||
<li><code>panels</code> - what panels should be shown in a sidebar. Use following IDs:<br />
|
||||
0: HISTORY, 1: SWATCHES, 2: LAYERS, 3: INFO, 4: HISTOGRAM, 5: PROPERTIES, 6: CSS, 7: BRUSH, 8: LAYERCOMPS, 9: CHARACTER, 10: PARAGRAPH,
|
||||
11: ACTIONS, 12: NAVIGATOR, 13: COLOR, 14: TPRESET, 15: GUIDEGUY, 16: CHANNELS, 17: PATHS, 18: GALLERY.</li>
|
||||
<li><code>phrases</code> - allows you to replace any phrase inside Photopea with your own.
|
||||
The aray has the form <code>[ ID1, W1, ID2, W2, ... ]</code>, where IDx is the ID of some phrase and Wx is a new phrase, that should be used instead.<br />
|
||||
Some useful IDs: [1,2]: Save (File menu), [2,0]: Step Forward, [2,1]: Step Backward.
|
||||
To discover IDs of other phrases, get familiar with <a href="https://github.com/photopea/OpenWord">OpenWord table structure</a> and find
|
||||
your phrase in <a href="https://www.photopea.com/code/LNG2.js">a current phrase database</a>, or just write us an email to support@photopea.com.</li>
|
||||
<li><code>topt</code> - tool options. Lets you change the settings of each tool.
|
||||
Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
|
||||
<li><code>tmnu</code> - tool menu. Lets you specify the structure of the top menu for each tool.
|
||||
Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
|
||||
<li><code>icons</code> - custom icons. Each icon has an icon ID (key) and the image URL (value).
|
||||
You can find icon IDs <a href="//www.photopea.com/code/DBS.js">here</a>.
|
||||
E.g. the Crop Tool has an ID "tools/crop". The background of the introduction panel as an ID "intro".</li>
|
||||
<li><code>plugins</code> - described <a href="/api/plugins">here</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tool options and menus</h2>
|
||||
|
||||
<h3>Move Tool</h3>
|
||||
<p>Options: <code>[1,0,null]</code>. Three values mean Auto-Select, Transformation controls and Distances.
|
||||
1 means enabled, 0: disabled, null: not specified.</p>
|
||||
<p>Menu: <code>[1,1,1,1,1,1]</code>. Six flags to show / hide six items: Auto-Select, Transformation controls, Distances,
|
||||
Quick Save (Get PNG...), Vertical Align, Horizontal Align.</p>
|
||||
|
||||
<h3>Magic Wand</h3>
|
||||
<p>Options: <code>[0,0,[16,true,true]]</code> - Combining operation, Feather, Select options: Tolerance, Anti-alias, Contiguous.</p>
|
||||
|
||||
<h2>Tool IDs</h2>
|
||||
|
||||
<ul style="column-count:3; list-style-type: none;">
|
||||
<li>0: Move Tool</li><li>1: Rectangle Select</li><li>2: Ellipse Select</li><li>5: Lasso Select</li><li>6: Polygonal Lasso Select</li><li>7: Magnetic Lasso Select</li><li>8: Quick Selection</li><li>9: Magic Wand</li><li>10: Crop Tool</li><li>14: Eyedropper</li><li>16: Ruler</li><li>18: Spot Healing Brush Tool</li><li>19: Healing Brush Tool</li><li>20: Patch Tool</li><li>23: Brush Tool</li><li>24: Pencil Tool</li><li>27: Clone Tool</li><li>31: Eraser Tool</li><li>34: Gradient Tool</li><li>35: Paint Bucket Tool</li><li>36: Blur Tool</li><li>37: Sharpen Tool</li><li>38: Smudge Tool</li><li>39: Dodge Tool</li><li>40: Burn Tool</li><li>41: Sponge Tool</li><li>47: Type Tool</li><li>42: Pen</li><li>43: Free Pen</li><li>51: Path Select</li><li>52: Direct Select</li><li>54: Rectangle</li><li>55: Ellipse</li><li>57: Line</li><li>56: Parametric Shape</li><li>58: Custom Shape</li><li>59: Hand Tool</li><li>61: Zoom Tool</li>
|
||||
|
||||
</ul> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,33 +1,201 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0 active"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
<h1>Passing data to Photopea</h1>
|
||||
|
||||
<!--<p>* * * You can also use <a href="https://www.photopea.com/api/live">Live Messaging</a> to get files to and from Photopea.</p>-->
|
||||
|
||||
<p>Photopea can be configured using a parameter after a hash sign.</p>
|
||||
|
||||
<pre>https://www.photopea.com#STRING_VALUE</pre>
|
||||
|
||||
<p>Such URL can be opened directly, or used as a <code>src</code> of an <code>iframe</code>.
|
||||
String value is encoded into the URL using classic encoding of query parameters (space as %20 etc.).
|
||||
It corresponds to <strong>encodeURI()</strong> in Javascript or <strong>urlencode()</strong> in PHP.
|
||||
This string contains a JSON object.</p>
|
||||
|
||||
|
||||
<h3>JSON configuration object</h3>
|
||||
<p>JSON object must have the following structure:</p>
|
||||
|
||||
<pre>{
|
||||
"files" : [
|
||||
"https://www.mysite.com/images/design.psd",
|
||||
"https://www.mysite.com/images/button.png",
|
||||
"data:image/png;base64,iVBORw0KGgoAAAAN..."
|
||||
],
|
||||
"resources" : [
|
||||
"https://www.xyz.com/brushes/Nature.ABR",
|
||||
"https://www.xyz.com/grads/Gradients.GRD",
|
||||
"https://www.xyz.com/fonts/NewFont.otf"
|
||||
],
|
||||
"server" : {
|
||||
"version" : 1,
|
||||
"url" : "https://www.myserver.com/saveImage.php",
|
||||
"formats" : [ "psd:true", "png", "jpg:0.5" ]
|
||||
},
|
||||
"environment" : {...},
|
||||
"script" : "app.activeDocument.rotateCanvas(90);"
|
||||
}</pre>
|
||||
<p>
|
||||
All parameters are optional.
|
||||
Data URIs can be used - file can be passed inside a request (<a target="_new" href="//www.photopea.com#%7B%22files%22:%5B%22data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==%22%5D%7D">test</a>).
|
||||
</p>
|
||||
<h3>Parameters</h3>
|
||||
<ul>
|
||||
<li><code>files</code> - array of files, that are loaded when Photopea starts</li>
|
||||
<li><code>resources</code> - array of resources (gradients, brushes, fonts ...)</li>
|
||||
<li>
|
||||
<code>server</code> - parameters for saving documents back to a server
|
||||
<ul>
|
||||
<li><code>version</code> - the version of the API</li>
|
||||
<li><code>url</code> - URL address of a server</li>
|
||||
<li><code>formats</code> - formats, in which a document should be sent to a server.
|
||||
The string format corresponds to <a href="https://www.photopea.com/learn/scripts">saveToOE</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>environment</code> - parameters of the environment, see <a href="/api/environment">Environment</a>
|
||||
</li>
|
||||
<li>
|
||||
<code>script</code> - the <a href="/learn/scripts">script</a>, that should be executed after loading each file (can be long)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Saving to server</h2>
|
||||
|
||||
<p>When <code>server</code> parameter is specified in a request to Photopea.com,
|
||||
every document opened in Photopea will have the <code>File - Save</code> option.
|
||||
After a user clicks it, document data are sent to your server in a HTTP request using POST method.</p>
|
||||
|
||||
<p>Photopea will send binary data (a sequence of bytes) to your server, which has two parts:</p>
|
||||
<ul>
|
||||
<li>2000 Bytes - JSON data</li>
|
||||
<li>the rest - one or more image files</li>
|
||||
</ul>
|
||||
|
||||
<p>The JSON will have a following structure:</p>
|
||||
<pre>{
|
||||
"source" : "https://www.mysite.com/images/button.png",
|
||||
"versions" : [
|
||||
{"format":"psd", "start": 0, "size": 700000 },
|
||||
{"format":"jpg", "start": 700000, "size": 100000 },
|
||||
...
|
||||
]
|
||||
}</pre>
|
||||
<ul>
|
||||
<li><code>source</code> - if the file was loaded from your server, the value is the URL of this document.
|
||||
Otherwise (opening a local file, creating an empty file), it contains <code>"local,X,NAME"</code>,
|
||||
where X is the integer ID of the document, and NAME is the name of the document</li>
|
||||
<li>
|
||||
<code>versions</code> different versions of your document
|
||||
<ul>
|
||||
<li><code>format</code> - format of the file, exported from Photopea</li>
|
||||
<li><code>start, size</code> - file offset and the size (relative, from the end of JSON)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Here is a short PHP example, which accepts files from Photopea.</p>
|
||||
|
||||
<pre>$fi = fopen("php://input", "rb"); $p = JSON_decode(fread($fi, 2000));
|
||||
// getting file name from "source"
|
||||
$fname = substr ($p->source, strrpos($p->source,"/")+1);
|
||||
$fo = fopen("img/".$fname,"wb"); while($buf=fread($fi,50000)) fwrite($fo,$buf);
|
||||
fclose($fi); fclose($fo);</pre>
|
||||
<!--<pre>$p = json_decode( $_POST["p"] ); // parse JSON
|
||||
// getting file name from "source";
|
||||
$fname = substr ($p->source, strrpos($p->source,"/")+1);
|
||||
file_put_contents("images/".$fname, base64_decode( $p->versions[0]->data ));</pre>-->
|
||||
|
||||
<h3>Your Response</h3>
|
||||
<p>After the server receives a file, it can send back a JSON response with optional String parameters:</p>
|
||||
<ul>
|
||||
<li><code>message</code> - when specified, will be displayed to the user for a moment</li>
|
||||
<li><code>script</code> - when specified, will be executed (e.g. you can call <code>app.echoToOE("saved");</code>)</li>
|
||||
<li><code>newSource</code> - when specified, will be used as a new value of "source" for saving to a server in the future
|
||||
(can be useful, when a file was created within Photopea: "source" was "local,...")</li>
|
||||
</ul>
|
||||
|
||||
<h2>Cross-Origin Resource Sharing</h2>
|
||||
|
||||
<p>For security reasons, webapps can access only files from the same domain.
|
||||
In order to let Photopea load your file, the response of your server must contain the following header:<p>
|
||||
|
||||
<pre>Access-Control-Allow-Origin: *</pre>
|
||||
|
||||
<p>Find out more at <a href="http://www.w3.org/TR/cors/">CORS specification</a> or at <a href="http://enable-cors.org/">enable-cors.org</a>.</p>
|
||||
|
||||
<h2>Prices</h2>
|
||||
|
||||
<p>Usage of Photopea API is completely free. Keep in mind, that PP is in early stages of development and there may be critical bugs.
|
||||
We do not take any responsibility for documents edited or generated by Photopea.</p>
|
||||
|
||||
<p>If you want to hide advertisement and "colorful buttons", and use a <b>whitelabel mode</b>, look at
|
||||
<a href="https://www.photopea.com/api/accounts#distributors">Distributor account</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,138 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1 active"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
<h1>Live Messaging</h1>
|
||||
|
||||
<p>You can insert Photopea into a webpage (using a frame). Let's call such webpage the <b>Outer Environment (OE)</b>.
|
||||
OE can communicate with Photopea through <a href="http://web.archive.org/web/20150331203017/http://www.w3.org/TR/webmessaging/">Web Messaging</a>.
|
||||
</p>
|
||||
|
||||
<pre>window.addEventListener("message", function(e) { alert(e.data); });
|
||||
var wnd = document.getElementById("pp").contentWindow;
|
||||
wnd.postMessage(msg, "*");</pre>
|
||||
|
||||
|
||||
<p>OE can send <b>two kinds of data</b> to Photopea:</p>
|
||||
|
||||
<ul>
|
||||
<li><b>String</b> - contains a script, which will be executed by Photopea</li>
|
||||
<li><b>ArrayBuffer</b> - a binary file: psd, svg, jpg, ... fonts, brushes, ...</li>
|
||||
</ul>
|
||||
|
||||
<p>When Photopea is initialized and ready to accept commands, it sends the message <code>"done"</code>.
|
||||
After your message is processed, Photopea also sends back the message <code>"done"</code>.</p>
|
||||
|
||||
<a href="https://photopea-api-demo.glitch.me">Some demos of live messsaging in Photopea</a>
|
||||
|
||||
<h2>Retrieving data from Photopea</h2>
|
||||
|
||||
<p>Photopea can send the current image to OE using the following command (inside a script):</p>
|
||||
|
||||
<pre>app.activeDocument.saveToOE("gif");</pre>
|
||||
|
||||
<p>After you run the script above, PP will send a message with an ArrayBuffer of a GIF image,
|
||||
followed by a message with a String <code>"done"</code> (processing the script has finished).</p>
|
||||
|
||||
<p>It can also send any String to OE using the following command (inside a script):</p>
|
||||
|
||||
<pre>app.echoToOE("Hello");</pre>
|
||||
|
||||
<p>The full description at <a href="https://www.photopea.com/learn/scripts">/learn/scripts</a>.</p>
|
||||
|
||||
<h2>Examples of usage</h2>
|
||||
|
||||
<p>This API can replace the main API. Instad of letting Photopea communicate with your server directly,
|
||||
you can load files inside your progrm and transfer them to and from Photopea in a clients device.
|
||||
<!--E.g. you can recreate the autosave feature (by calling <code>saveToOE()</code> in regular intervals).--></p>
|
||||
|
||||
<p>You can use Photopea as a "module", hide its UI and use only the messaging.
|
||||
You can create a batch-processor of images (resizing images, adding watermarks, converting between formats).
|
||||
You can make scripts, that would export each layer of the document as a PNG.
|
||||
You can make scripts, that would replace the text in each text layer by data from your user (to create a generator of business cards, etc.).</p>
|
||||
|
||||
<h2>Example: Integrating with a custom storage</h2>
|
||||
|
||||
<p>We can redefine the default behaviour of File - Open and File - Save.</p>
|
||||
|
||||
<ul>
|
||||
<li>We can send Photopea any image in a message as ArrayBuffer</li>
|
||||
<li>We can call <code>app.activeDocument.saveToOE("psd");</code> to send the current file to OE.</li>
|
||||
<li>We can call <code>app.echoToOE("Hello");</code> to send any string to OE.</li>
|
||||
<li>We can read and write <code>app.activeDocument.source</code> String to identify files.</li>
|
||||
<li>We can set custom scripts to run after pressing Open or Save:
|
||||
<a href="https://www.photopea.com/api/environment">customIO : open, save</a></li>
|
||||
</ul>
|
||||
<p>Now, we can do following:</p>
|
||||
<ul>
|
||||
<li>Set custom scripts to <code>app.echoToOE("Open" / "Save");</code> to be notified, when the user presses the buttons.</li>
|
||||
<li>When the user wants to Open a file, show him your own file input (you can even let the user draw something, or take a picture of him).</li>
|
||||
<li>Once you have the image (ArrayBuffer), send it to Photopea and set the source: <code>app.activeDocument.source="myID2353"</code>.</li>
|
||||
<li>When the user wants to Save a file, read the file (<code>app.activeDocument.saveToOE("psd");</code>) and its source
|
||||
<code>app.echoToOE(app.activeDocument.source);</code>, and save the new version into your storage.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,127 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0 active"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
|
||||
<script>
|
||||
function onMSG(e) {
|
||||
console.log(e.origin, e);
|
||||
if(e.origin.indexOf("photopea.com")==-1) return;
|
||||
var nst;
|
||||
if(typeof e.data=="string") nst = e.data;
|
||||
else nst = "ArrayBuffer["+e.data.byteLength+"]";
|
||||
document.getElementById("msgs").textContent += nst+"\n";
|
||||
};
|
||||
var frame = null;
|
||||
|
||||
function updatePlayground(e)
|
||||
{
|
||||
var json = document.getElementById("json").value;
|
||||
json = JSON.stringify(JSON.parse(json));
|
||||
var url = "https://www.photopea.com";
|
||||
var end = "#"+encodeURI(json);
|
||||
document.getElementById("url").value = url+end;
|
||||
frame.src = url+"?rnd="+Math.floor(Math.random()*0xffffffff)+end;
|
||||
//frame.contentWindow.location.reload(true);
|
||||
//wnd.postMessage(script, "*");
|
||||
}
|
||||
function runScript(e)
|
||||
{
|
||||
var script = document.getElementById("script").value;
|
||||
frame.contentWindow.postMessage(script,"*");
|
||||
}
|
||||
document.body.onload = function(e) {
|
||||
frame = document.getElementById("pp");
|
||||
window.addEventListener("message", onMSG);
|
||||
updatePlayground();
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Playground</h1>
|
||||
<p>Enter the JSON configuration file, which will be encoded into the URL:</p>
|
||||
<textarea rows="8", style="width:100%;" id="json">{
|
||||
"files": [
|
||||
"https://www.photopea.com/api/img2/pug.png"
|
||||
],
|
||||
"environment": {
|
||||
|
||||
}
|
||||
}</textarea>
|
||||
<button onclick="updatePlayground()" style="display:block; font-size:1.2em;" >Update</button> <br />
|
||||
|
||||
<b>URL:</b>
|
||||
<textarea rows="3", style="width:100%;" id="url"></textarea>
|
||||
|
||||
<iframe src="" id="pp" style="border:none; width:100%; height:500px;"></iframe>
|
||||
|
||||
<h2>Run a script</h2>
|
||||
<textarea rows="4", style="width:100%;" id="script">app.activeDocument.activeLayer.translate(20,20);</textarea>
|
||||
<button onclick="runScript()" style="display:block; font-size:1.2em;">Run</button> <br />
|
||||
<b>Messages from Photopea</b>
|
||||
<pre id="msgs"></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,116 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a 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 class="curr" 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" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1 active"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
|
||||
|
||||
<h1>Plugins</h1>
|
||||
<p>Create Plugins for Photopea and provide them to your users through a configuration JSON.</p>
|
||||
<pre>{ "environment": {
|
||||
"plugins" : [
|
||||
{
|
||||
"name" : "Wikipedia",
|
||||
"url" : "https://en.wikipedia.org",
|
||||
"width" : 400,
|
||||
"height": 300,
|
||||
"icon" : "https://en.wikipedia.org/static/favicon/wikipedia.ico"
|
||||
}
|
||||
]
|
||||
} }</pre>
|
||||
<ul>
|
||||
<li><code>name</code> - plugin name</li>
|
||||
<li><code>url</code> - plugin URL</li>
|
||||
<li><code>width</code> - panel width</li>
|
||||
<li><code>height</code> - panel height</li>
|
||||
<li><code>icon</code> - plugin icon (optional)</li>
|
||||
</ul>
|
||||
<p>For each plugin, the button will be added to the right side, below the current buttons.</p>
|
||||
<img src="//i.imgur.com/8tPgmho.png" class="fullw" />
|
||||
<p>After the user clicks the plugin button, the panel is opened with a website <code>url</code>, having the size of <code>width</code> and <code>height</code>.</p>
|
||||
|
||||
<p>Users can drag-and-drop images from your website to Photopea (as Photopea supports dropping images from any website, opened by a browser).</p>
|
||||
|
||||
<p>Your website can connect with Photopea using <a href="/api/live">Live Messaging</a> (your website acts as the OE).
|
||||
It allows your plugin to execute scripts (e.g. to change foreground color, to move a layer, etc.).</p>
|
||||
|
||||
<p>The plugin can give files to Photopea (images: psd, jpg, svg ... or resources: brushes, patterns, fonts ...),
|
||||
or request the current file in a specific format.
|
||||
All this can be controlled e.g. by buttons in your plugin (website).</p>
|
||||
|
||||
<pre>window.parent.postMessage("...script...", "*");
|
||||
window.parent.postMessage(ArrayBuffer, "*");</pre>
|
||||
|
||||
<h2>Examples of usage</h2>
|
||||
|
||||
<p><b>Photo Store</b>. Let users browse your database of images. They can search the database by a keyword.
|
||||
You can add a button "Open" next to each image, which would open that image in Photopea.</p>
|
||||
|
||||
<p><b>Font Gallery</b>. Let users browse your database of fonts. The font will be loaded after clicking the button.
|
||||
You can integrate a payment gateway into the plugin, too (as it is your website, you have full control over it).</p>
|
||||
|
||||
<p>You can make your plugin "commercial" - let users pay for them monthly. The sign-in and the payment interface could still be
|
||||
in the same "iframe" of your plugin, inside Photopea (or you could open a new window and then, come back to Photopea).</p> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
||||
/*
|
||||
var disqus_config = function () {
|
||||
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
*/
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = '//photopeablog.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
9057
www.photopea.com/code/external/ext.js
vendored
9057
www.photopea.com/code/external/ext.js
vendored
File diff suppressed because one or more lines are too long
BIN
www.photopea.com/code/external/fribidi.wasm
vendored
BIN
www.photopea.com/code/external/fribidi.wasm
vendored
Binary file not shown.
BIN
www.photopea.com/code/external/hb.wasm
vendored
BIN
www.photopea.com/code/external/hb.wasm
vendored
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -1,33 +1,5 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
<svg class="gsicon" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<path fill="white" d="M24 12C24 5.37216 18.626 0 12 0C5.37216 0 0 5.37216 0 12C0 18 4.38789 23 10.1242 23.8524V15.4676H7.07758V12H10.1242V9.35553C10.1242 6.34826 12 4.68714 14.6564 4.68714C16 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V12H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 23 24 18 24 12Z"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 473 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 817 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 668 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 146 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 765 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 756 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 924 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 499 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 492 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 579 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 836 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 263 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 150 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 846 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 174 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1.1 KiB |
@ -1,33 +1,5 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
<svg class="gsicon" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<path fill="white" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 14-7.496 14-14 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 762 B |
@ -1,33 +1,84 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<meta name="thumbnail" content="https://www.photopea.com/promo/screens/scr5.png" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<link rel="icon" sizes="256x256" href="promo/thumb256.png">
|
||||
<link rel="image_src" type="image/png" href="promo/thumb256.png" />
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; background-color: #0f171d; /*background-image: linear-gradient(rgb(20, 20, 22), rgb(40,40,45));*/
|
||||
color:#e6e6e6; text-align:center;
|
||||
/*position:absolute; z-index:10; margin:1em; border-radius: 1em;*/
|
||||
}
|
||||
#cap a { color:inherit; font-weight:bold; }
|
||||
#cap p { margin-bottom:1.5em; line-height:1.5em; }
|
||||
h1 { font-size: 2.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
strong { display:inline-block; font-size: 1.1em; background:rgba(0,0,0,0.1); padding:0.1em 0.5em;
|
||||
margin: 0.2em 0.5em 0.2em 0; border-radius:0.3em; font-weight:normal; line-height:1.7}
|
||||
</style>
|
||||
<script>
|
||||
function showCap() {_showCap(true);} function hideCap() {_showCap(false);}
|
||||
function _showCap(vis){
|
||||
document.getElementById("cap").setAttribute("style", vis?"":"display:none;");
|
||||
localStorage.setItem("capShown", ""+vis);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="theme0">
|
||||
<!---->
|
||||
<div id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></script>
|
||||
|
||||
<script src="code/external/ext.js"></script>
|
||||
<!--<script src="code/PIMG.js"></script>
|
||||
<script src="code/FNTS.js"></script>
|
||||
<script src="code/LNG2.js"></script>-->
|
||||
<script src="code/DBS.js"></script>
|
||||
<script src="code/pp.js"></script>
|
||||
|
||||
<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-37', 'photopea.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,128 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Actions</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Actions</h1>
|
||||
|
||||
<p>Sometimes, we need to <b>automate</b> image editing. We can record our work as an <b>action</b> and apply it to other documents later.</p>
|
||||
|
||||
<h2>Actions Panel</h2>
|
||||
|
||||
<p>Actions are managed through the <b>Actions panel</b>. It can be displayed by pressing Window - Actions.
|
||||
Here we see the structure of current actions in the middle. We can manipulate with actions using the buttons at the bottom of the panel.</p>
|
||||
|
||||
<img src="//i.imgur.com/Yrdp6Y1.png" style="width:30%" />
|
||||
|
||||
<p>There is a strict structure of actions. Basic units are <b>Action Sets</b> (which have a Folder icon). An Action Set contains <b>Actions</b> (which have only an arrow).
|
||||
Each Action may contain <b>Steps</b> (which have a checkmark on the left).</p>
|
||||
|
||||
<p>You can click on Action Sets, Actions, or Steps, to select them. Use the buttons at the bottom to modify the structure.</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Record</b> - start recording your work (as Steps) into a selected action. Press it again to stop recording.</li>
|
||||
<li><b>Apply</b> - apply an action to the current document</li>
|
||||
<li><b>New Action Set</b></li>
|
||||
<li><b>New Action</b></li>
|
||||
<li><b>Delete</b> - delete a selected Action Set, an Action or a Step</li>
|
||||
<li><b>Export</b> - export a selected Action Set as an .ATN file</li>
|
||||
</ul>
|
||||
|
||||
<h2>ATN files</h2>
|
||||
|
||||
<p>Photopea can process (load and save) actions inside ATN files. These files are used by Adobe Photoshop and probably other software.</p>
|
||||
|
||||
<p>Each ATN file contains exactly one Action Set. Press File - Open, to load the ATN file into Photopea.
|
||||
Press the Export button (in the Actions panel) to export the current Action Set as an ATN file.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,132 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Adjust. & Filters</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Adjustments and Filters</h1>
|
||||
|
||||
<p>Modifying colors and adding color effects is the essential operation of photo editing.
|
||||
Such operations are separated into two groups in Photopea: <b>Adjustments</b> and <b>Filters</b>.</p>
|
||||
|
||||
<h2>Adjustments</h2>
|
||||
|
||||
<p>Adjustments work <b>only with the color</b>. I.e. if some pixel is changed from the color A to the new color B,
|
||||
all pixels with the color A will be changed to the color B in the whole image.
|
||||
That is true for changing the brightness, saturation, inverting colors etc.</p>
|
||||
|
||||
<p>Adjustments can be applied by clicking Image - Adjustments in the top menu.
|
||||
Some of them have a keyboard shortcut (e.g. Ctrl + L for Levels, Ctrl + M for curves, Ctrl + U for Hue / Saturation).
|
||||
Adjustments also can be applied in the form of <a href="/learn/other-layers">Adjustment Layers</a>.</p>
|
||||
|
||||
<h2>Filters</h2>
|
||||
|
||||
<p>On the other hand, in case of Filters, pixels having the same color can be changed to different colors, as in the blur filter.
|
||||
When the black pixel is surrounded by white pixels, it will become white after blurring.
|
||||
But if the black pixel is surrounded by black pixels, it will remain black after blurring.</p>
|
||||
|
||||
<p>Filters can be applied by clicking Filters in the top menu, choosing the categoriy of filters and then choosing a specific filter.</p>
|
||||
|
||||
|
||||
|
||||
<p>Both Adjustments and Filters can be applied to regular layers (i.e. you can not blur the text layer or a pattern fill layer,
|
||||
you would need to rasterize them first).
|
||||
There is a special way of applying adjustments and filters to Smart Objects called <b>Smart Filters</b>.
|
||||
As you apply adjustments or filters to a Smart Object, they are stacked into a list under the layer (similar to Layer Styles).</p>
|
||||
|
||||
<img src="//i.imgur.com/Ttozm4E.png" />
|
||||
|
||||
<p>The source image of the Smart Object is stored separately, so the list of filters can be reapplied and recalculated at any time.
|
||||
You can enable or disable any smart filter in the list at any time, or change its parameters. We can call it <b>nondestructive editing</b>.
|
||||
Smart Filters even have their own raster mask, which can hide the filter effect (so the original image can be visible at some parts).</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,151 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Advanced Selecting</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Advanced Selecting</h1>
|
||||
|
||||
<p>We already know, how to make basic selections "manually", e.g. with the Ellipse Select or a Lasso tool.
|
||||
But making complex selections with these tools can take a lot of time. There are more advanced tools, that can help us.</p>
|
||||
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/mwand.png" />Magic Wand</h2>
|
||||
|
||||
<p>Magic wand allows you to select pixels with the same (or similar) color. Once you click somewhere with the Magic Wand,
|
||||
the pixel under the mouse will be selected, as well as all other pixels, that have a color similar to that pixel.</p>
|
||||
|
||||
<p>There is a <b>Contiguous mode</b> option (in the top menu). When it is on, the Magic Wand will select only those similar pixels,
|
||||
that are connected to the source pixel (i.e. it will select the whole area, that has the same color, but not other areas, which are separated from this area).
|
||||
When this option is disabled, the Magic Wand will select all similar pixels from the whole image, even if they are not conencted to the source pixel.</p>
|
||||
|
||||
<p>Here you can see the result of clicking on the pixel (marked by the white cross) with the Contiguous mode enabled and disabled.</p>
|
||||
|
||||
<img src="//i.imgur.com/e1TVQ9Q.png" />
|
||||
|
||||
<p>There is also a <b>Tolerance</b> parameter in the top menu, which defines how much similar colors you want to select
|
||||
(larger values produce "wider" selections).</p>
|
||||
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/qselect.png" />Quick Selection</h2>
|
||||
|
||||
<p>This is probably the most advanced selecting tool, that can really save your time.
|
||||
For many people, this is the only selection tool they ever use.</p>
|
||||
|
||||
<p>Quick Selection works like a brush, you can choose the brush tip diameter in the top menu.
|
||||
Then, draw strokes over the area, that you want to select. It adds each stroke to a selection, and it also gradually <b>expands</b> it
|
||||
into the surrounding area, selecting the related parts (similarly to a Magic Wand).</p>
|
||||
|
||||
<p>Sometimes, the tool may go beyond the area, that you want to select, and select much greater part.
|
||||
Switch to the <b>Subtract</b> mode in the top menu (or hold the Alt key) and you can remove the unwanted parts in the same way.</p>
|
||||
|
||||
<p>There is a hidden layer inside the Quick Selection tool. As you draw strokes with the New or Union mode, the tool draws into that layer with the white color.
|
||||
When you draw with the Subtract mode, the strokes are drawn using the black color.
|
||||
This layer is used as a guide for the tool: white areas must always be inside the selection, black areas must not be in the selection,
|
||||
and the remaining area will be smartly deduced from this, by analyzing the actual image.
|
||||
The more white and black strokes you specify, the more information the tool has for making a good selection.</p>
|
||||
|
||||
<p>The <b>New</b> mode makes the tool forget all previously specified strokes and start over with an empty hidden layer.</p>
|
||||
|
||||
<h2>Color Range</h2>
|
||||
|
||||
<p>This tool allows us select a specific color from the image. Unlike the Magic Wand, which either fully selects or fully ignores the area,
|
||||
Color range can create partial selections, depending on how much of that color is present in the area.</p>
|
||||
|
||||
<p>Start the tool by pressing Select - Color Range. Next, click on the color (in the image), that you want to select.
|
||||
The Color Range window shows you the preview of the selection: the brightness corresponds to the degree of selection of each pixel.
|
||||
E.g. if you click on the red t-shirt in the image, this t-shirt should be white in the preview, and other parts, that are not red, should be black in the preview.
|
||||
The <b>Fuzziness</b> parameter lets you add also all similar colors to the selection, or select just the exact color that you clicked on.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,143 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Animations</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Animations</h1>
|
||||
|
||||
<p>Animated images (GIF, APNG, WEBP), are very popular.
|
||||
An animation has several static images - <b>frames</b>, and the information, for how long each frame should be displayed (before going to the next frame).
|
||||
Photopea can open, edit and save animations.</p>
|
||||
|
||||
<h2>Animations in Photopea</h2>
|
||||
|
||||
<p>Photopea can make an animation from layers of the document by showing a different layer in each frame.
|
||||
To define a new frame, the layer name should start with <code>_a_</code>. It can be a regular layer, a folder of layers, or any other layer.</p>
|
||||
|
||||
<p>When you export such document as a GIF, PNG or WEBP, Photopea detects all layers starting with <code>_a_</code>.
|
||||
The first such layer is shown in the first frame (others starting with <code>_a_</code> are hidden).
|
||||
The second such layer is shown in the second frame, etc.</p>
|
||||
|
||||
<p><b>Example</b>: we have five layers: <code>background, _a_dog, _a_cat, _a_tree, watermark</code>.
|
||||
The GIF will have three frames (3 layers start with <code>_a_</code>).
|
||||
<code>background</code> and <code>watermark</code> will be in all frames.
|
||||
<a href="//www.photopea.com#%7B%22files%22:%5B%22https://www.photopea.com/api/img2/anim_dct.psd%22%5D%7D" target="_blank">Try it here!</a></p>
|
||||
|
||||
<img src="//i.imgur.com/UNSrMiz.gif" style="width:60%;">
|
||||
|
||||
<p>When you open an animation (GIF, APNG, WEBP) in Photopea, Photopea will turn every frame into <b>a layer with a proper name</b>.
|
||||
So when you edit an animation (delete frames, reorder frames, resize ...), there is no need to change layer names.</p>
|
||||
|
||||
<h2>Delay</h2>
|
||||
|
||||
<p>A layer which starts with <code>_a_</code> makes a new frame, which will be shown for 50 ms by default.
|
||||
To set your own delay, put <code>,</code> and a number to the end of the layer name. E.g. <code>_a_dog,500</code> will be displayed for half a second.</p>
|
||||
|
||||
<h2>Merge frames</h2>
|
||||
|
||||
<p>Let's say we have 3 frames of one animation and 3 frames of another, i.e. six layer starting with <code>_a_</code>.
|
||||
The resulting GIF will have six frames. Can we make these two animations play simultaneously "in parallel"?</p>
|
||||
|
||||
<p>We need to turn it into 3 frame layers, where each layer contains images from both animations.
|
||||
We can do it manually: merge each two layers into one using Layer - Merge Layers.</p>
|
||||
|
||||
<img src="//i.imgur.com/DhHxnzF.png" style="width:60%" />
|
||||
|
||||
<p>We can do it automatically. Put each animation in a folder and press <b>Layer - Animation - Merge</b>.</p>
|
||||
|
||||
<img src="//i.imgur.com/lTZnWQv.png" style="width:60%" />
|
||||
|
||||
<p>Photopea will find all folders, and merge their frames together.
|
||||
Alternatively, you can select only folders you want to merge (in Layers Panel) before pressing Layer - Animation - Merge.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,164 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Brush Tools</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0 active"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Brush Tools</h1>
|
||||
|
||||
<p>Brush tools are all tools, which use a "brush track". You usually draw strokes on some layer and a brush tool edits pixels along your strokes.
|
||||
It can be a Brush, an Eraser, a Smudge tool etc. When there is a selection, the tool edits only pixels within this selection.</p>
|
||||
|
||||
<p>Each brush tool uses a specific <b>brush</b>, which is the first item in the top menu.</p>
|
||||
|
||||
<img src="//i.imgur.com/2JfzrSN.png" />
|
||||
|
||||
<p>A brush has a track shape (e.g. a circle, a square or a more complex pattern)
|
||||
and behaviour (it can change the shape while you draw, e.g. change the track size).
|
||||
Photopea has a default collection of brushes, but you can import your own brushes in the ABR format into Photopea using File - Open.</p>
|
||||
|
||||
<p>Every brush tool usually draws a stroke by drawing many brush shapes (e.g. circles) next to one another,
|
||||
along the movement of your mouse or other pointing device.</p>
|
||||
|
||||
<img src="//i.imgur.com/QL9dm22.png" />
|
||||
|
||||
<p>It means, that there are actually no "lines", just copies of the same shape, that are tightly
|
||||
squeezed next to each other, which create a look of a continuous line.</p>
|
||||
|
||||
<p>There are two kinds of brush shapes:</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Circular</b> - generated as a circle, can have arbitrary size</li>
|
||||
<li><b>Pattern</b> - made with a raster image. They get pixelated, when the size is too large</li>
|
||||
</ul>
|
||||
|
||||
<p>Each brush has a <b>Size</b> property, which measn "the thickness of the line".
|
||||
Circular brushes have a <b>Hardness</b> property in addition, which generates a soft edge of the circle.</p>
|
||||
|
||||
<h2>Brush panel</h2>
|
||||
|
||||
<p>More brush options are available in a <b>brush panel</b>. You can open it using Window - Brush.
|
||||
Here are several sections of properties. You can see the result of your brush settings on the bottom of it.</p>
|
||||
|
||||
<p>At the top of the brush panel, there is a gallery of predefined brushes. Choosing one of them will replace your current brush settings.<p>
|
||||
|
||||
<img src="//i.imgur.com/qd8A3Jj.png" />
|
||||
|
||||
<p>Here is a brief description of each section of the brush panel. We recommend to play with settings to discover them by yourself.</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Tip Shape</b> - parameters of a static brush
|
||||
<ul>
|
||||
<li>Angle - rotates the shape</li>
|
||||
<li>Roundness - squeezes the shape</li>
|
||||
<li>Spacing - spacing between consequent "shapes" of a stroke. Set it to 25% or less to make a "continuous" line.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Tip dynamics</b> - allows you to use random values of Size, Angle and Roundness along the stroke</li>
|
||||
<li><b>Scatter</b> - lets you put move each shape to the random place near the original position. You can make an effect of "fallen leaves"</li>
|
||||
<li><b>Color Dynamics</b> - lets you change the color of each shape randomly along the stroke</li>
|
||||
</ul>
|
||||
|
||||
<h2>Brush Presets</h2>
|
||||
|
||||
<p>Photopea supports loading custom brushes in a form of <b>.ABR</b> files. Open such file with File - Open, and new brushes will be added to a list of brushes.</p>
|
||||
|
||||
<p>You can make a new Pattern brush from a current layer using Edit - Define New - Brush.</p>
|
||||
|
||||
<p>Any current brush (with current parameters: Size, Hardness, Tip Dynamics ...) can be saved as a new brush through a Brush button and a tiny arrow.
|
||||
Here, you can also open an .ABR file, or export brushes as an .ABR file.</p>
|
||||
|
||||
<img style="width:50%" src="//i.imgur.com/4Mvp2QS.png" />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,124 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Advanced Tools</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Advanced Tools</h1>
|
||||
|
||||
<p>These tools perform advanced effects on the layer.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/blur.png" />
|
||||
<img class="inline" src="//www.photopea.com/img/tools/sharpen.png" />Blur and Sharpen</h2>
|
||||
|
||||
<p>These tools simply blur or sharpen the content of the layer under the stroke. You can change the Strength of the effect at the top menu.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/dodge.png" />
|
||||
<img class="inline" src="//www.photopea.com/img/tools/burn.png" />Dodge and Burn</h2>
|
||||
|
||||
<p>Dodge makes the colors lighter, while Burn makes the colors darker.
|
||||
You can choose the range, to which the effect should be applied (Shadows / Midtones / Highlights) and the strength (Exposure).</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/smudge.png" />Smudge</h2>
|
||||
|
||||
<p>The Smudge tool is probably the most advanced these tools.
|
||||
It is the analogy of moving your finger across the wet paint on the painting.
|
||||
You can spread colors to other areas, make object longer or shorter, or move the border between two objects.</p>
|
||||
|
||||
<img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/02/smudge.png" />
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/sponge.png" />Sponge</h2>
|
||||
|
||||
<p>The Sponge tool can be used to saturate or desaturate parts of the layer (make pixels more "alive").</p>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,124 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Basic Tools</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Basic Tools</h1>
|
||||
|
||||
<p>In previous chapter, we learned, that each brush tool creates some stroke. This stroke can be combined with an existing layer in many ways.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/brush.png" />Brush</h2>
|
||||
|
||||
<p>Brush tool is a basic artistic tool. It lets us draw strokes with a foreground color onto an existing layer.
|
||||
At the top menu, we can choose the blend mode and the opacity of our strokes.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/pencil.png" />Pencil</h2>
|
||||
|
||||
<p>Pencil is very similar to the Brush tool, but it creates sharp edges.
|
||||
Below, you can see the zoomed-in line drawn with the <b>Brush (on the left)</b> and with the <b>Pencil (on the right)</b>.</p>
|
||||
|
||||
<img src="//i.imgur.com/zVIwOZf.png" />
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/eraser.png" />Eraser</h2>
|
||||
|
||||
<p>Eraser tool erases the pixels from an existing layer. We can change the opacity at the top menu,
|
||||
so the pixels will remain partially visible.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/clone.png" />Clone Stamp</h2>
|
||||
|
||||
<p>Clone stamp lets us copy the content from one part of the layer into another part.
|
||||
First, we hold the Alt key and click on the layer, to choose the source of cloning. Then we simply draw strokes in another part,
|
||||
which are filled with the content from the source part. Decrease the Hardness of a brush, so that new strokes have smooth edges,
|
||||
to make a smooth transition between the old and the new content.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,138 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Smart Tools</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Smart Tools</h1>
|
||||
|
||||
<p>These tools use artificial intelligence and can save you a lot of time.</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2017/03/healing_tools.png" />
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/shbrush.png" />Spot Healing Brush</h2>
|
||||
|
||||
<p>Spot Healing brush lets you remove objects and unwanted artifacts from pictures.
|
||||
Simply draw over an unwanted area, just like you do with a Brush tool, and release the mouse.
|
||||
After that, the area, that you drew over, will be "forgotten" and replaced with some appropriate content, that surrounds the area.</p>
|
||||
|
||||
<p>For example, when you have a sandy beach and there is a stone in the middle,
|
||||
you draw over that stone and it will be replaced with sand.
|
||||
If you have a field with yellow flowers and a single red flower, you draw over the red flower and it will be replaced by a yellow flower.
|
||||
You can "heal" the skin, remove scratches from old photographs etc.</p>
|
||||
|
||||
<p>You would have to use Clone Stamp for several minutes to achieve a similar result.
|
||||
Spot Healing Brush usually takes 1 to 5 seconds. In extreme cases, it may take up to 10 seconds to fill the area
|
||||
(when the area, more than 50% of the image area should be healed).</p>
|
||||
|
||||
<p>Below, you can see the original image, the spot, that is being healed,
|
||||
the result from Photopea and the result from Adobe Photoshop.
|
||||
We believe, that Photopea produces better results, than Adobe Photoshop (but it also takes more time).</p>
|
||||
|
||||
<a href="//blog.photopea.com/wp-content/uploads/2017/03/asia.jpg" ><img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/03/asia.jpg" /></a>
|
||||
<a href="//blog.photopea.com/wp-content/uploads/2017/03/beach.jpg"><img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/03/beach.jpg" /></a>
|
||||
<a href="//blog.photopea.com/wp-content/uploads/2017/03/cow.jpg" ><img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/03/cow.jpg" /></a>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/hbrush.png" />Healing Brush</h2>
|
||||
|
||||
<p>Using a Healing brush is the same as using Clone Stamp. The only difference is, that the cloned content is adapted to the surrounding after releasing the mouse.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/patch.png" />Patch</h2>
|
||||
|
||||
<p>With a patch tool, you first have to create a selection over an area that you want to be replaced.
|
||||
Then, you can drag that selection to another place, to choose the source of cloning.
|
||||
And again, the area is adapted after releasing the mouse.</p>
|
||||
|
||||
<p>With the Spot Healing Brush, you only choose an area that should be healed. For next two tools, you have to choose both that area,
|
||||
and the source, from which the new image content should be taken (similar to a Clone Stamp).</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,197 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Color Spaces</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Color Spaces</h1>
|
||||
|
||||
<p>Have you ever walked into a TV store, with many TVs showing the same video? And the video looked a bit different
|
||||
(brighter, more yellow-ish, various contrast) on each TV?
|
||||
</p>
|
||||
|
||||
<p>Capturing devices (digital cameras, scanners) and displaying devices (monitors, printers) have various technical properties.
|
||||
Color Spaces provide the ability to make colors look always the same, no matter what capturing or displaying device has been used.</p>
|
||||
|
||||
<h2>Absolute colors</h2>
|
||||
|
||||
<p>To compare, which object is heavier in a real world, we need to give each object a number: weight (measure it).
|
||||
Two objects have the same weight, if that number is the same for both of them.
|
||||
There are many units of weight (grams, pounds, ounces), which can be converted, one unit to another.</p>
|
||||
|
||||
<p>
|
||||
To compare colors in a real world, each color should be given a number, too.
|
||||
Two colors are the same, if that number is the same for both of them.
|
||||
There are two popular units (<b>color spaces</b>), that are used in practice: <a href="//en.wikipedia.org/wiki/CIELAB_color_space">CIELAB</a>
|
||||
and <a href="//en.wikipedia.org/wiki/CIE_1931_color_space">CIEXYZ</a>.</p>
|
||||
|
||||
<p>
|
||||
While Grams (unit of weight) consist of one number (e.g. 150 grams), CIELAB (unit of color) consists of three numbers (e.g. CIELAB 0.5, 0.7, 0.1).
|
||||
These numbers are called <b>channels</b> or <b>components</b>.
|
||||
</p>
|
||||
|
||||
<p>Let's say we have a square hole in a wall, and there is an apple on the other side, with a blue cloth behind it.
|
||||
We take a picture of it, print it, and put that printed picture behind a second hole in a wall (illuminated by a proper light).
|
||||
We also display the same picture on an LCD monitor, which we put behind a third hole.</p>
|
||||
|
||||
<p>If the digital camera can store real colors into correct CIELAB values, and both the printer and the monitor can correctly reproduce any CIELAB values,
|
||||
we should not be able to distinguish (with our eyes), which hole contains a real apple, which one is the monitor, and which one is the ink on a paper.</p>
|
||||
|
||||
<img src="//i.imgur.com/WxzfiLv.png" class="fullw" />
|
||||
|
||||
<h2>Device-specific colors</h2>
|
||||
|
||||
<p>First monitors created colors by combining three lights, usually referred to as Red, Green and Blue (RGB)
|
||||
(note, that "Red" in terms of color is ambiguous, just like "Heavy" in terms of weight; one would need to specify a CIELAB value to be precise).
|
||||
It was natural to store a color digitally as three numbers: intensities of Red, Green and Blue for that specific monitor.
|
||||
Such color always looked the same on all monitors of that specific brand. But these values had no relation to CIELAB.</p>
|
||||
|
||||
<p>More monitor manufacturers appeared, each of them using materials with different physical properties.
|
||||
The RGB color value for one monitor looked different on another brand of monitor.
|
||||
Finally, a proper system with three components was created, called <b>Standard RGB, or sRGB</b>.
|
||||
There is an exact formula, how to convert between sRGB and CIELAB, so each sRGB color actually corresponds to a real-world (unambiguous) CIELAB color.</p>
|
||||
|
||||
<p>All images were stored in sRGB color space. Each monitor offered many settings, which allowed people to "calibrate" the monitor,
|
||||
until it displayed sRGB values correctly.</p>
|
||||
|
||||
<p>There was the same problem with printers. They usually create colors by mixing four inks, referred to as Cyan, Magenta, Yellow and Black (CMYK).
|
||||
A specific ratio of these inks, that was printed by one printer, could look different on another printer having inks with different chemical properties.
|
||||
Some printers could even use five or more inks. Some printers could produce colors, that other printers could not produce.</p>
|
||||
|
||||
<h2>Color Profiles</h2>
|
||||
|
||||
<p>Let's say, that an absolute CIELAB color [0.3, 0.8, 0.1] can be displayed with RGB signals [224,107,158] on a monitor A, and with RGB signals [231,99,161] on a monitor B.
|
||||
We can say, that each monitor has its own color space, and it can convert any value from CIELAB into its own space.
|
||||
Instead of storing a color digitally as CIELAB, we can store it as any set of numbers, as long as we provide a mechanism,
|
||||
how to convert these numbers into CIELAB.
|
||||
</p>
|
||||
|
||||
<p>All problems with device-specific colors have been solved by <b>ICC profiles</b>.
|
||||
An ICC profile (for a specific color space X) is a set of instructions, how to convert values from the color space X into CIELAB, and back.
|
||||
These instructions are stored in a special file: ICC file (e.g. "Canon_printer_123.icc").
|
||||
Since the ICC profile describes the conversion between the space X and CIELAB, it fully describes the color space X.</p>
|
||||
|
||||
<p>*** Analogy: We could create a "weight space" of "bukalas". A "weight profile" would say, that "one bukala is 1200 grams".
|
||||
It lets us convert between "bukalas" and grams, so it fully describes what a "bukala" is.</p>
|
||||
|
||||
<p>This means, that each digital image (JPG, PNG, PDF) has to be equippeed with an ICC profile
|
||||
(so that we are able to convert its color values into CIELAB),
|
||||
and each printer has to be equipped with an ICC profile (so it can convert absolute CIELAB colors into its own four values of ink).</p>
|
||||
|
||||
<img src="//i.imgur.com/UGZO5Cy.png" class="fullw" />
|
||||
|
||||
<p>Without ICC profiles, each camera would probably store colors in its own color space. Each printer and monitor would have to be equipped with
|
||||
special configurations for images of each model of the camera, and update these configurations, as new cameras appear on the market.
|
||||
I.e. each image-displaying device would have to be aware of all existing image-capturing devices, and make special configurations for their images.</p>
|
||||
|
||||
<p>With ICC profiles, we only specify, how to convert between "our own" device-specific colors, and "common" CIELAB colors.
|
||||
When each party can supply such ICC profile, the result is the same, as if we used the CIELAB space everywhere.</p>
|
||||
|
||||
<p>Usually, the printing software can detect the ICC profile of digital images, and convert them into the printers profile automatically.
|
||||
Also, an image viewer converts colors of the image into CIELAB (using the ICC profile), and CIELAB to sRGB,
|
||||
while a graphics driver takes sRGB colors and converts them into a color space of the monitor (using the ICC profile supplied by the manufacturer of the monitor).
|
||||
We don't deal with any ICC files in practice, the computer (software) takes care of them automatically.</p>
|
||||
|
||||
<p>When we have an image without an ICC profile, "guessing" its color space is very dangerous.
|
||||
It is like having some numbers specifying weights, and guessing, if they are grams or ounces.</p>
|
||||
|
||||
<p>Also, just saying, that an image (file) is in RGB, or in CMYK, makes no sense. The value (255,0,0) could be Red, as well as Green.
|
||||
Unless the color space is specified (with an ICC file), we can not be sure, what color is meant by the values inside a file.</p>
|
||||
|
||||
<p>The sRGB space is very popular for storing digital images. Authors (of images) usually only specify, that the image is in sRGB,
|
||||
without attaching a specific ICC file to it. Converting sRGB to CIELAB is very simple, and the formula
|
||||
is usually built into a graphic software.</p>
|
||||
|
||||
<p>sRGB is also used on the Web: when we specify <code>#ff00ff;</code> or <code>rgb(255,0,255)</code> in CSS,
|
||||
browsers expect these values to be in sRGB space.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,154 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Make Selections</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Creating Selections</h1>
|
||||
|
||||
<p>There are many ways to create selections. Designers often need to select thousands or even millions of pixels.
|
||||
Creating the necessary selection may take a lot of time. It is very useful to learn about all the tools, to be able to create selections effectively.</p>
|
||||
|
||||
<p>The basic operation is selecting <b>all pixels</b> (Select - All or Ctrl + A).
|
||||
Another useful operation is to create a selection according to the transparency of some layer.
|
||||
Hold the Ctrl key and click on the thumbnail of a layer to create such selection.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/rselect.png" />
|
||||
<img class="inline" src="//www.photopea.com/img/tools/eselect.png" /> Rectangle Select, Ellipse Select</h2>
|
||||
|
||||
<p>These tools allow you to create rectangular selections (or ellipse selections). Simply click and drag the mouse to create the selection.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/lasso.png" />Lasso</h2>
|
||||
|
||||
<p>Lasso tool allows you to draw selections by hand. Simply click and drag the mouse around the object, that you want to select.
|
||||
It can be useful to zoom in, to be more precise.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/plasso.png" />Polygonal Lasso</h2>
|
||||
|
||||
<p>Polygonal lasso allows you to draw a polygonal selection. Simply click on the image to add the new corner of a polygon.
|
||||
Press Delete to remove the last corner. Double-click (or hit Enter) to finish the selection.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/mlasso.png" />Magnetic Lasso</h2>
|
||||
|
||||
<p>Magnetic lasso is a smart tool for making selections. It is very similar to the standard lasso, but it "sticks" to edges of objects.</p>
|
||||
|
||||
<p>Click anywhere to add the first point, then move the mouse along the edge to draw the selection. Control points will be added along the selection.
|
||||
Magnetic lasso tries to find the most appropriate path from the last control point to the current position of the mouse.
|
||||
Press Delete to remove the last control point, or click to add the control point manually (to force Magnetic lasso to go in a specific way).
|
||||
Double-click (or hit Enter) to finish the selection.</p>
|
||||
|
||||
|
||||
<h2>Combining selections</h2>
|
||||
|
||||
<p>When you create a new selection, it can either replace the old one, or it can be <b>combined</b> with the old one.
|
||||
Each selection tool has several parameters in the top menu, which define the way, how two selections are combined.
|
||||
There is the default <b>replace</b> mode (to replace the old selection), <b>union</b> mode (to connect two selections together),
|
||||
<b>subtract</b> mode (to remove the new selection from the old one), <b>intersect</b> mode (to select only pixels, that are in both selections)
|
||||
and <b>XOR</b> mode, which corresponds to the union, while subtracting the intersection.</p>
|
||||
|
||||
<img src="//i.imgur.com/7ciDxwm.png" />
|
||||
|
||||
<p>These modes allow you to create selections in multiple steps. E.g. selecting the main area with lasso tools,
|
||||
then adding and subtracting small pieces to make it perfect.</p>
|
||||
|
||||
<p>Selection tools also have a <b>feather</b> parameter, which will apply feather right after the selection is finished.
|
||||
Many designers create all selections with a small blur, to avoid sharp edges between selected and unselected areas.</p>
|
||||
|
||||
<p>When any selection tool is active, you can press the mouse inside the current selection and drag it to move that selection.
|
||||
So e.g. if you made an elliptical selection of the correct size, but you missed its position by several pixels,
|
||||
just click and drag it to the new place. This is possible with the <b>replace mode only</b> (e.g. if you had the subtract mode,
|
||||
clicking and dragging inside an existing selection would draw a new ellipse, that would be removed from the current selection).</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,168 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Free Transform</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Layer Transformation</h1>
|
||||
|
||||
|
||||
<p>We already know, how to add and delete layers, how to move them or change their opacity.
|
||||
Another essential operations is scaling (making the object bigger or smaller) or rotation.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/transform.png" />Free Transform</h2>
|
||||
|
||||
<p>Free Transform is the basic tool for doing transformations. It works as any other regular tool, but it is not present in the toolbar.
|
||||
You can enable it by clicking Edit - Free Transform, or Alt + Ctrl + T.</p>
|
||||
|
||||
<p>When you enable Free Transform, the transformation will be applied to the layers, that are currently selected,
|
||||
i.e. to the same layers (or their parts), which would be moved by the Move tool at that moment.
|
||||
As you enable it, the transformation rectangle will appear around the transformed content.
|
||||
It has four control points on corners, four control points on sides and the rotation center at the middle.</p>
|
||||
|
||||
<img src="//i.imgur.com/Bp8uU9r.png" />
|
||||
|
||||
<p>Press and drag inside the rectangle to move it. Press and drag outside the rectangle to rotate it.
|
||||
Press and drag its corners to change its size. Press and drag its sides to scale it horizontally or vertically.
|
||||
When the Ctrl key is down, press and drag the side to <b>skew</b> the content.
|
||||
</p>
|
||||
|
||||
<p>Besides moving the rectangle, you can set transformation parameters directly in the top menu. Following parameters are available.</p>
|
||||
|
||||
<img src="//i.imgur.com/i4QAQSt.png" />
|
||||
|
||||
<ul>
|
||||
<li><b>X, Y</b>: the position of the object</li>
|
||||
<li><b>W, H</b>: Width and Height. Add "%" or "px" for the value in percent or in pixels</li>
|
||||
<li><b>Angle</b>: the rotation of the object (in degrees)</li>
|
||||
<li><b>Skew X, Y</b>: the skew of the object</li>
|
||||
</ul>
|
||||
|
||||
<p>When the Free Transform is enabled, the environment is locked and you can not do anything else.
|
||||
Once you finish the transforming, confirm it or cancel it using buttons in the top menu.
|
||||
You can also confirm it with the Enter key, or cancel it with the Escape key.</p>
|
||||
|
||||
<h3>Common transforms</h3>
|
||||
|
||||
<p>When you need to do a "common" transform (such as rotating 90 degrees, or "mirror" the image left-to-right), you can do it much faster.
|
||||
Press <b>Edit - Transform - ...</b> and choose one of predefined transformations.</p>
|
||||
|
||||
<h2>Perspective transform</h2>
|
||||
|
||||
<p>Scaling, rotating and skewing the content may be not enough. Imagine, that you need to put your image on a flat surface,
|
||||
that is viewed from the side. The edge, that is near, must be longer, and the edge, that is far, must be shorter.</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2017/01/distort.jpg" class="fullw" />
|
||||
|
||||
<p>You can do it with the <b>perspective transform</b>. Just hold Ctrl key and drag corners: you will be able to move each corner separately, to achieve the 3D effect.</p>
|
||||
|
||||
<h2>Warping</h2>
|
||||
|
||||
<p>Perspective transform may let us do a 3D transformation of an image, but it is still not enough in some cases.
|
||||
Sometimes, we may want to place an image on the surface, which is not flat (a cylinder or a ball).
|
||||
In these cases, we would like to "bend" the image into a more interesting shape.</p>
|
||||
|
||||
<p>Warp allows us to bend the rectangular area using 16 control points.
|
||||
There are four control points for the location of corners, each corner has two control points
|
||||
for the direction of edges near that corner (8 more points)
|
||||
and there are four control points for the center of the image.</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2017/01/warp.jpg" class="fullw" />
|
||||
|
||||
<p>When the Free Transform is on, there will be a "Warp" button in the top panel.
|
||||
Click it to switch between a standard editing mode and a warp editing mode.
|
||||
There are also several predefined shapes, such as Arch or Flag, so you don't have to move points manually.</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,154 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Guides & Snapping</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Guides, Grid and Snapping</h1>
|
||||
|
||||
<p>Precise position of image elements can be very important. The basic tool, which can help us
|
||||
align image elements, are <b>rulers</b>. Rulers can be enabled in View - Rulers.
|
||||
But there are several other ways how to align elements precisely.</p>
|
||||
|
||||
|
||||
<h2>Guides</h2>
|
||||
|
||||
<p>There can be multiple guides in a PSD document. A guide is a horizontal or a vertical line,
|
||||
which is displayed over the document and can help you align elements. </p>
|
||||
|
||||
<img src="//i.imgur.com/ybBw1xv.png" />
|
||||
|
||||
<p>To add or delete a guide, select the Move tool and enable rulers. To add a guide, click on the ruler
|
||||
and drag the mouse into the document. To delete a guide, click on it and drag it onto the ruler.</p>
|
||||
|
||||
<p>To move existing guides, click on them with a Move tool and drag them to a new location.</p>
|
||||
|
||||
<h2>Grid</h2>
|
||||
|
||||
<p>Designers often need to place some elements regularly, with an equal distance between them.
|
||||
Instead of adding many guides with the same spaces between them, we can use the <b>grid</b>.
|
||||
A regular grid will be displayed over your document, which can help you align other elements.</p>
|
||||
|
||||
<img src="//i.imgur.com/tDbXcfB.png" />
|
||||
|
||||
<h2>Pixel Grid</h2>
|
||||
|
||||
<p>The Pixel Grid draws a grid with one pixel gap. It is visible only after zooming in close enough.
|
||||
When an image area has a constant color, the Pixel Grid helps you see the borders between pixels (can be useful for pixel art).</p>
|
||||
|
||||
<p>Guides, Grid or Pixel Grid can be enabled or disabled using View - Show - Guides, Grid or Pixel Grid.
|
||||
There is the main switch: View - Extras, which can disable them all at once.
|
||||
The size of the grid can be changed in Edit - Preferences. Note, that guides are related
|
||||
to a specific document and can be different in each document, while the same grid is displayed over all documents.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Snapping</h2>
|
||||
|
||||
<p>Placing elements precisely on the guide (or on the grid) can be hard. We may need to zoom in
|
||||
and move the object several times, until it is on the right spot.</p>
|
||||
|
||||
<p><b>Snapping</b> can solve this problem. Whenever your object is near the guide (e.g. closer than 5 pixels),
|
||||
it is "snapped" to that guide, i.e. its location is set to the location of that guide.
|
||||
You don't have to be so precise, Photopea finds the nearest guide and moves the object for you.</p>
|
||||
|
||||
<p>Snapping can be enabled or disabled using View - Snap. You can snap to different things, such as guides,
|
||||
grid, document bounds etc. (take a look into View - Snap To). But with snapping, you are less flexible, e.g.
|
||||
when you want to place an object close to the guide, but not exactly on it.
|
||||
It is useful to disable snapping in such cases.</p>
|
||||
|
||||
<p>Snapping can be used with all tools, where you would expect it:
|
||||
Move tool, Free Transform, Crop tool, selections, tools for editing vector graphics etc.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,130 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Image size</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Image size</h1>
|
||||
|
||||
<p>All (PSD) documents, even those with vector-only graphics, have a specific document size (the resolution in pixels).
|
||||
Higher resolution will give you a better precision, but it also makes image files larger.
|
||||
You can change the document resolution in several ways.</p>
|
||||
|
||||
<h2>Scaling the image</h2>
|
||||
|
||||
<p>Photopea allows you to make the resolution lower or larger and scale the content of the document
|
||||
according to the new resolution. You can do it by choosing <b>Image - Image Size</b> and entering a new size.
|
||||
You can also enter a new DPI value there.</p>
|
||||
|
||||
<img src="//i.imgur.com/eGQtaoM.png" style="width:50%" />
|
||||
|
||||
<p>You can also rotate or flip the image using Image - Transform - Rotate etc.</p>
|
||||
|
||||
<h2>Cropping the image</h2>
|
||||
|
||||
<p>Another way of changing the resolution is by cropping the image. It will preserve the resolution and the quality of the content,
|
||||
but it will change the "window", through which you can see the content or its part. The basic way to do it is through
|
||||
<b>Image - Canvas Size</b>.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/crop.png" />Crop tool</h2>
|
||||
|
||||
<p>The crop tool allows you to define the "viewing window" manually. Choose the Crop tool and draw a rectangle over the document.
|
||||
You can drag the rectangle to move it across the document, or drag the corner to change its size.
|
||||
You can also rotate the rectangle by dragging it near the edge, which allows you cropping the image using a different angle.</p>
|
||||
|
||||
<p>Once your cropping rectangle is ready, you can confirm or cancel the cropping in the top menu.</p>
|
||||
|
||||
<img src="//i.imgur.com/Yvmwyip.png" />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,120 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Introduction</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0 active"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Introduction</h1>
|
||||
|
||||
<p>Photopea is an advanced image editor, which can work with both raster and vector graphics.
|
||||
You can use it for simple tasks, such as resizing images, as well as complex tasks, such as designing webpages,
|
||||
creating illustrations, processing photographs and more.</p>
|
||||
|
||||
<p>This website will teach you how to use Photopea <b>step by step</b>. We will start with basic tasks
|
||||
and gradually progress to more complex features. The chapters (on the left) have been organized,
|
||||
such that each chapter uses only the knowledge from previous chapters, so you can learn effectively and efficiently.</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
<p>Right now, Photopea works with the sRGB color space (the basic color space for the web), with the 8-bit color depth.
|
||||
All exported files use sRGB, too.</p>
|
||||
|
||||
<h2>Starting and using Photopea</h2>
|
||||
|
||||
<p>Photopea editor works in a web browser. It can be started by going to <a href="//www.Photopea.com">www.Photopea.com</a>.
|
||||
Photopea can run on any device (desktop, laptop, tablet, phone or any other computer), but for the best comfort,
|
||||
we recommend having a big screen, a precise pointing device (a mouse or a stylus) and a keyboard.</p>
|
||||
|
||||
<p>Photopea runs completely in your device, just like Sketch or Photoshop do. It does not upload any of your files to the internet.
|
||||
You can load Photopea.com, disconnect from the internet and keep using it completely offline.
|
||||
None of your files ever leaves your computer.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,162 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Layer Comps</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Layer Comps</h1>
|
||||
|
||||
<p>Imagine, that you want to have three versions of your project.
|
||||
The first version should have a red background and some buttons at the top.
|
||||
The second version should have a green background and the same buttons on the bottom.
|
||||
The third version should have a blue background and the same buttons on the side.
|
||||
Each background and each button is in a separate layer.
|
||||
</p>
|
||||
|
||||
<p>One way to do it is to prepare the first version and put it all into a new folder.
|
||||
Then, you can duplicate the whole folder of layers and prepare the second version
|
||||
(rearrange buttons, hide the red background and unhide the blue background).
|
||||
Then you can duplicate one more time and prepare the third version.</p>
|
||||
|
||||
<p>Such approach has many disadvantages. If you decide to edit one of buttons, you would have to
|
||||
edit all three copies of it. Duplicate content also makes PSD files larger.</p>
|
||||
|
||||
<h2>What is Layer Comp?</h2>
|
||||
|
||||
<p>The layer comp is an object, which stores "the state" of a PSD document.
|
||||
Precisely, it stores the visibility, the position and the appearance
|
||||
(opacity, blend mode, layer style) of each layer.</p>
|
||||
|
||||
<p>To solve the previous task, we could arrange layers in all three ways and create a Layer Comp for
|
||||
each arrangement. We can switch between layer comps later. Switching layer comps
|
||||
performs the change of visibility, position and a style to a previously stored value in a signle click.</p>
|
||||
|
||||
<p>Each layer comp has the name and three flags: <b>Visibility, Position and Appearance</b>.
|
||||
Each flag can be enabled or disabled. When some layer comp is activated, the change will be
|
||||
performed according to these flags.</p>
|
||||
|
||||
<p>For example, you are making a collage with animals. You want to be able make only birds visible.
|
||||
Also, you want to be able to make only brown animals visible.
|
||||
Splitting animals into three folders Birds, Brown and the Rest is not possible (because some birds
|
||||
are brown). You can create layer comps Birds and Brown, and enable just the Visibility flag on these comps.
|
||||
Later, if you move animals around and switch to Birds, only the visibility of layers will be changed,
|
||||
while the position (an the style) will be preserved.</p>
|
||||
|
||||
<h2>Layer Comps Panel</h2>
|
||||
|
||||
<p>Management of Layer Comps is available through the Layer Comps panel. You can open that panel
|
||||
using Windows - Layer Comps.</p>
|
||||
|
||||
<img class="fullw" src="//i.imgur.com/lBkdjJs.png" />
|
||||
|
||||
<p>At the top, there is the <b>Last Document State</b>, which stores the last document state.
|
||||
Each item has the Apply button on the left. The button contains a checkmark <b>✓</b> when that layer comp is applied,
|
||||
or the dash otherwise. You can switch between layer comps (or the last document state) by clicking this button.
|
||||
</p>
|
||||
|
||||
<p>You can select layer comps in the panel by clicking on their names, without actually applying them.
|
||||
Once a layer comp is selected, you can delete it by clicking the bin button, or update it by clicking the update button.
|
||||
You can also create a new Layer Comp by clicking the New button.</p>
|
||||
|
||||
<p>You can rename any layer comp by double-clicking its name, typing a new name and hitting Enter.
|
||||
Each item also has three buttons, which you can use to switch the Visibility, Position and Appearance flags.
|
||||
</p>
|
||||
|
||||
<p>When you apply a specific layer comp and then start editing the document,
|
||||
the current state (created by the Layer Comp)
|
||||
will become the Last Document State and all your changes will be performed within that Last Document State.
|
||||
If you want to make changes to some Layer Comp, edit the document first (inside the Last Document State),
|
||||
then select the comp in the panel and press the Update button.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,124 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>404 Not Found</TITLE>
|
||||
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Not Found</H1>
|
||||
The requested document was not found on this server.
|
||||
<P>
|
||||
<HR>
|
||||
<ADDRESS>
|
||||
Web Server at photopea.com
|
||||
</ADDRESS>
|
||||
</BODY>
|
||||
</HTML>
|
||||
|
||||
<!--
|
||||
- Unfortunately, Microsoft has added a clever new
|
||||
- "feature" to Internet Explorer. If the text of
|
||||
- an error's message is "too small", specifically
|
||||
- less than 512 bytes, Internet Explorer returns
|
||||
- its own error message. You can turn that off,
|
||||
- but it's pretty tricky to find switch called
|
||||
- "smart error messages". That means, of course,
|
||||
- that short error messages are censored by default.
|
||||
- IIS always returns error messages that are long
|
||||
- enough to make Internet Explorer happy. The
|
||||
- workaround is pretty simple: pad the error
|
||||
- message with a big comment like this to push it
|
||||
- over the five hundred and twelve bytes minimum.
|
||||
- Of course, that's exactly what you're reading
|
||||
- right now.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Layer Editing</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" 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" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0 active"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Layer Manipulation</h1>
|
||||
|
||||
<p>Photopea offers you many ways to manipulate layers. You can move them, rotate, bend etc.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/move.png" />Move Tool</h2>
|
||||
|
||||
<p>The Move tool is the basic tool for moving layers and their parts. It is the first tool in the toolbar.
|
||||
It can be enabled temporarily by pressing Ctrl key (after releasing Ctrl, you will return to your previous tool).
|
||||
By default, it will move all layers, that are currently selected (in the Layers panel).
|
||||
Note, that it is enough to select just the folder, to move all its content.</p>
|
||||
|
||||
<p>If you select just the mask of the layer, and that mask is not linked to the main content, the Move tool will move the mask only.
|
||||
Similarly, you can move only the main content, without moving the mask.</p>
|
||||
|
||||
<p>When the Move tool is active, you can move object also with cursor keys ("arrows") on your keyboard.
|
||||
One keypress will move the content by one pixel. If you hold Shift, content will be moved in ten pixel steps.</p>
|
||||
|
||||
<p>The Move tool has the <b>auto-select feature</b>, which can be enabled in the top menu, or temporarily by holding Ctrl key.
|
||||
With auto-select enabled, you can press anywhere in the image, and Photopea will automatically detect the closest layer under your cursor,
|
||||
and make it selected (in the Layers panel). This way, you don't have to select layrs manually in the Layers panel, but it is enough to click on them.
|
||||
Of course, if some layer is completely covered by another layer, you can not select it this way.</p>
|
||||
|
||||
<h2>Aligning objects</h2>
|
||||
|
||||
<p>Sometimes you want to align two or more layers together (e.g. so they all have centers at the same point,
|
||||
or to get their upper edge to the same height). Just select multiple layers and use <b>one of six buttons</b>
|
||||
in the top menu of the Move tool, to align these layers.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user