165 lines
8.0 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 - Brush 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="//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 active"><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"><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>Brush Tools</h1>
<p>Brush tools are all tools, which use a "brush track". You usually draw strokes on some layer and a brush tool edits pixels along your strokes.
It can be a Brush, an Eraser, a Smudge tool etc. When there is a selection, the tool edits only pixels within this selection.</p>
<p>Each brush tool uses a specific <b>brush</b>, which is the first item in the top menu.</p>
<img src="//i.imgur.com/2JfzrSN.png" />
<p>A brush has a track shape (e.g. a circle, a square or a more complex pattern)
and behaviour (it can change the shape while you draw, e.g. change the track size).
Photopea has a default collection of brushes, but you can import your own brushes in the ABR format into Photopea using File - Open.</p>
<p>Every brush tool usually draws a stroke by drawing many brush shapes (e.g. circles) next to one another,
along the movement of your mouse or other pointing device.</p>
<img src="//i.imgur.com/QL9dm22.png" />
<p>It means, that there are actually no "lines", just copies of the same shape, that are tightly
squeezed next to each other, which create a look of a continuous line.</p>
<p>There are two kinds of brush shapes:</p>
<ul>
<li><b>Circular</b> - generated as a circle, can have arbitrary size</li>
<li><b>Pattern</b> - made with a raster image. They get pixelated, when the size is too large</li>
</ul>
<p>Each brush has a <b>Size</b> property, which measn "the thickness of the line".
Circular brushes have a <b>Hardness</b> property in addition, which generates a soft edge of the circle.</p>
<h2>Brush panel</h2>
<p>More brush options are available in a <b>brush panel</b>. You can open it using Window - Brush.
Here are several sections of properties. You can see the result of your brush settings on the bottom of it.</p>
<p>At the top of the brush panel, there is a gallery of predefined brushes. Choosing one of them will replace your current brush settings.<p>
<img src="//i.imgur.com/qd8A3Jj.png" />
<p>Here is a brief description of each section of the brush panel. We recommend to play with settings to discover them by yourself.</p>
<ul>
<li><b>Tip Shape</b> - parameters of a static brush
<ul>
<li>Angle - rotates the shape</li>
<li>Roundness - squeezes the shape</li>
<li>Spacing - spacing between consequent "shapes" of a stroke. Set it to 25% or less to make a "continuous" line.</li>
</ul>
</li>
<li><b>Tip dynamics</b> - allows you to use random values of Size, Angle and Roundness along the stroke</li>
<li><b>Scatter</b> - lets you put move each shape to the random place near the original position. You can make an effect of "fallen leaves"</li>
<li><b>Color Dynamics</b> - lets you change the color of each shape randomly along the stroke</li>
</ul>
<h2>Brush Presets</h2>
<p>Photopea supports loading custom brushes in a form of <b>.ABR</b> files. Open such file with File - Open, and new brushes will be added to a list of brushes.</p>
<p>You can make a new Pattern brush from a current layer using Edit - Define New - Brush.</p>
<p>Any current brush (with current parameters: Size, Hardness, Tip Dynamics ...) can be saved as a new brush through a Brush button and a tiny arrow.
Here, you can also open an .ABR file, or export brushes as an .ABR file.</p>
<img style="width:50%" src="//i.imgur.com/4Mvp2QS.png" />
</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>