You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
568tools/tools/Open-Photopea/learn/image-size.html

130 lines
6.1 KiB

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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="index.html" class="title">Learn Photopea</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a class="curr" href="index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a href="../api/index.html">API</a> |
<a href="https://www.facebook.com/photopea">Facebook</a> |
<a href="https://www.twitter.com/photopeacom">Twitter</a>
</div>
<div id="main" style="max-width:1000px;">
<div id="sidebar" style="width:22%;">
<h3>Topics</h3>
<ul>
<li class="lvl0"><a href="index.html">Introduction</a></li>
<li class="lvl0"><a href="workspace.html">Workspace</a></li>
<li class="lvl1"><a href="opening-saving.html">Open and Save</a></li>
<li class="lvl1"><a href="navigation.html">Navigation</a></li>
<li class="lvl1 active"><a href="image-size.html">Image size</a></li>
<li class="lvl0"><a href="layers.html">Layers</a></li>
<li class="lvl1"><a href="masks.html">Masks</a></li>
<li class="lvl1"><a href="layer-styles.html">Layer Styles</a></li>
<li class="lvl1"><a href="smart-objects.html">Smart Objects</a></li>
<li class="lvl1"><a href="other-layers.html">Other Layers</a></li>
<li class="lvl0"><a href="layer-manipulation.html">Layer Editing</a></li>
<li class="lvl1"><a href="free-transform.html">Free Transform</a></li>
<li class="lvl1"><a href="adjustments-filters.html">Adjust. &amp; Filters</a></li>
<li class="lvl0"><a href="selections.html">Selections</a></li>
<li class="lvl1"><a href="creating-selections.html">Make Selections</a></li>
<li class="lvl1"><a href="advanced-selecting.html">Advanced Selecting</a></li>
<li class="lvl1"><a href="refine-edge.html">Refine Edge</a></li>
<li class="lvl1"><a href="moving-selected-data.html">Move Selected Data</a></li>
<li class="lvl0"><a href="brush-tools.html">Brush Tools</a></li>
<li class="lvl1"><a href="bt-basic.html">Basic Tools</a></li>
<li class="lvl1"><a href="bt-advanced.html">Advanced Tools</a></li>
<li class="lvl1"><a href="bt-smart.html">Smart Tools</a></li>
<li class="lvl0"><a href="text.html">Text</a></li>
<li class="lvl1"><a href="text-style.html">Text Style</a></li>
<li class="lvl0"><a href="vector-graphics.html">Vector Graphics</a></li>
<li class="lvl1"><a href="vg-structure.html">The Structure</a></li>
<li class="lvl1"><a href="vg-manipulation.html">Editing Shapes</a></li>
<li class="lvl1"><a href="vg-creating.html">Creating Shapes</a></li>
<li class="lvl0"><a href="other.html">Other</a></li>
<li class="lvl1"><a href="guides-grid-snapping.html">Guides &amp; Snapping</a></li>
<li class="lvl1"><a href="animations.html">Animations</a></li>
<li class="lvl1"><a href="layer-comps.html">Layer Comps</a></li>
<li class="lvl1"><a href="scripts.html">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 precission, but it also makes image files larger.
You can change the documents resolution in several ways.</p>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-0885095539348241"
data-ad-slot="5352893134"></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
<h2>Scaling the image</h2>
<p>Photopea allows you to make the resolition 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 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="../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="https://i.imgur.com/Yvmwyip.png" />
</div>
<h2 style="margin-top: 4em">Comments</h2>
<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-2018 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>