mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-07-03 03:15:31 +00:00
163 lines
8.3 KiB
Plaintext
163 lines
8.3 KiB
Plaintext
|
|
<!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>
|