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/bt-basic.html

128 lines
6.0 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 - Basic Tools</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"><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 active"><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>Basic Tools</h1>
<p>In previous chapter, we learned, that each brush tool creates some stroke. This stroke can be combined with an existing layer in many 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><img class="inline" src="../img/tools/brush.png" />Brush</h2>
<p>Brush tool is a basic artistic tool. It lets us draw strokes with a foreground color onto an existing layer.
At the top menu, we can choose the blend mode and the opacity of our strokes.</p>
<h2><img class="inline" src="../img/tools/pencil.png" />Pencil</h2>
<p>Pencil is very similar to the Brush tool, but it creates sharp edges.
Below, you can see the zoomed-in line drawn with the <b>Brush (on the left)</b> and with the <b>Pencil (on the right)</b>.</p>
<img src="https://i.imgur.com/zVIwOZf.png" />
<h2><img class="inline" src="../img/tools/eraser.png" />Eraser</h2>
<p>Eraser tool erases the pixels from an existing layer. We can change the opacity at the top menu,
so the pixels will remain partially visible.</p>
<h2><img class="inline" src="../img/tools/clone.png" />Clone Stamp</h2>
<p>Clone stamp lets us copy the content from one part of the layer into another part.
First, we hold the Alt key and click on the layer, to choose the source of cloning. Then we simply draw strokes in another part,
which are filled with the content from the source part. Decrease the Hardness of a brush, so that new strokes have smooth edges,
to make a smooth transition between the old and the new content.</p>
</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>