mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2026-06-19 07:01:15 +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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user