mirrors/photopea-v2
1
0
Fork 0
mirror of https://gitflic.ru/project/photopea-v2/photopea-v-2.git synced 2026-06-19 07:01:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
DUOLabs333
2021-03-17 18:48:45 -04:00
parent 520766bc0e
commit 80894dbd6e
170 changed files with 76412 additions and 3256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www.photopea.com/learn/layer-comps
+161 -32
View File
@@ -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. &amp; 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 &amp; 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">&copy; 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>