mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-17 17:06:21 +00:00
169 lines
8.4 KiB
Plaintext
169 lines
8.4 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 - 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>
|