mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-18 01:16:00 +00:00
118 lines
6.4 KiB
HTML
118 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> Change Text in an Image Online</title>
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
|
<!--<link rel="stylesheet" href="https://www.photopea.com/tuts/wp-content/themes/simplex/style.css" type="text/css" media="screen" />-->
|
|
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4249565-46"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date()); gtag('config', 'UA-4249565-46');
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page">
|
|
<div id="header">
|
|
<a href="https://www.photopea.com/tuts/" class="title">Photopea Tutorials</a>
|
|
<!--<p>Web-based image editor.</p>-->
|
|
<a href="//blog.photopea.com">Blog</a> |
|
|
<a href="//www.photopea.com/learn">Learn</a> |
|
|
<a class="curr" 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">
|
|
<div id="content">
|
|
|
|
<div class="post" id="post-268">
|
|
<span class="date">July 26, 2019</span>
|
|
<h1>Change Text in an Image Online</h1>
|
|
<div class="entry">
|
|
|
|
<p>Do you have a photo and want to change text in it? It can be done quickly online, see how to do it!</p>
|
|
<span id="more-268"></span>
|
|
|
|
<p>We will edit our photo in a free online editor <a href="//www.Photopea.com" target="_blank">Photopea</a>. Once you are there, press File - Open, and find your image (it can be JPG, PNG, etc.). There are two steps: <b>Removing the old text</b> and <b>typing a new text</b>.</p>
|
|
|
|
<h2>Removing Text</h2>
|
|
|
|
<p>When there is a simple, <b>solid-color background</b>, we can remove text simply by painting over it with a Brush tool. In the toolbar on the left, click the Brush tool icon (or press B on your keyboard).</p>
|
|
|
|
<img src="//i.imgur.com/V8kV2uf.png" style="width:25%" />
|
|
|
|
<p>Hold the Alt key and click into the image. It will pick the color from that spot and set it as the <b>Foreground color</b> (the main color for painting and other operations). Now, release the Alt key and simply paint (click and drag) over the text.</p>
|
|
|
|
<img src="//i.imgur.com/EtYL1Nx.png" class="fullw" />
|
|
|
|
<p>You can increase the brush size in the menu at the top (to paint faster). You may need to pick the color several times, if there are different colors behind each part of the text.</p>
|
|
|
|
<h3>Complex Background</h3>
|
|
<p>What if there is a <b>complex background</b>, like a grass or a sand, behind the text? Painting with a solid color would make our "fix" too obvious. Instead, we will <b>clone</b> the background, and put that cloned part over the text.</p>
|
|
|
|
<p>In the toolbar, choose the <b>Healing Brush tool</b>. It is right above the Brush tool.</p>
|
|
|
|
<img src="//i.imgur.com/9INVZ36.png" style="width:30%" />
|
|
|
|
<p>Hold the Alt key and click into the image (on the background). It defines the source of cloning. Now, release the Alt key and paint over the text. You will see the background (from the source of cloning) appearing under your brush, as if you "cut out" the background with scissors and glued it on top of the text.</p>
|
|
|
|
<img src="//i.imgur.com/wdxmqgZ.jpg" style="width:70%" />
|
|
|
|
<p>You can use this technique to remove anything from a photo (a person, a tree, a tattoo ...).</p>
|
|
|
|
<h2>Add New Text</h2>
|
|
|
|
<p>Switch to a Type tool in the toolbar (or press T). Click into the image, where the text should begin. Now, you can type a new text (you will see it appear on the screen as you type), although, it may not look like the original text.</p>
|
|
|
|
<img src="//i.imgur.com/iCCDakg.jpg" style="width:70%" />
|
|
|
|
<p>Once you are done typing, select the text (Ctrl+A, or press the mouse at the beginning of the text, move to the end and release the mouse). You can change the text style in the top bar. The main parameters are the <b>Font</b>, <b>Size</b> and the <b>Color</b> of the text. Click on them and choose a new value.</p>
|
|
|
|
<img src="//i.imgur.com/I3jquzK.png" style="width:100%" />
|
|
|
|
|
|
<img src="//i.imgur.com/0Yn5c2y.jpg" style="width:70%" />
|
|
|
|
<p>You can learn about more text parameters: <a href="//www.photopea.com/learn/text-style">Advanced text style</a> or about <a href="//www.photopea.com/learn/layer-styles">Layer Styles</a> (Drop Shadow, Stroke, Gradient overlay ...). Once the image looks right, press File - Export As - JPG, and save your file.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!--content-->
|
|
|
|
<div style="width:110px; margin: 0px auto;">
|
|
<a href="#" title="Share on Facebook" onclick="smallWindow('http://www.facebook.com/share.php?u=');"><img src="//www.photopea.com/promo/fb.png" /></a>
|
|
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="//www.photopea.com/promo/gp.png" /></a>
|
|
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="//www.photopea.com/promo/tw.png" /></a>
|
|
<script type="text/javascript">
|
|
function smallWindow(url)
|
|
{
|
|
var w = 640, h = 300;
|
|
window.open(url+"<? echo get_permalink($post); ?>", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="max-width:770px; margin: 0px auto;">
|
|
<h2 style="margin-top: 3em">Comments</h2>
|
|
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
|
</div>
|
|
<div id="disqus_thread"></div>
|
|
<script type="text/javascript">
|
|
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
|
|
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
|
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
|
|
</script>
|
|
<!--main-->
|
|
<?//php get_sidebar(); ?>
|
|
|
|
<div id="footer">© 2013-2021 support@photopea.com</div>
|
|
</div> <!--page-->
|
|
</body>
|
|
</html> |