mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-18 09:26:21 +00:00
109 lines
5.7 KiB
HTML
109 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> Add Watermark to a Photo</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-81">
|
|
<span class="date">September 6, 2018</span>
|
|
<h1>Add Watermark to a Photo</h1>
|
|
<div class="entry">
|
|
|
|
<p>Sometimes, we need to place a watermark into a photo. How can we do it fast and for free?</p>
|
|
|
|
<span id="more-81"></span>
|
|
<a href="//i.imgur.com/3CNPx3j.png" target="_blank"><img src="//i.imgur.com/3CNPx3j.png" class="fullw" /></a>
|
|
|
|
<h2>Open Your Image</h2>
|
|
<p>First, go to <a href="//www.Photopea.com">Photopea.com</a>. Press File - Open, and open open your main (background) image.</p>
|
|
|
|
<h2>Make a Watermark</h2>
|
|
<p>Now, we need an element, that we will use as a watermark. We have several options:</p>
|
|
<ul>
|
|
<li><b>Load another image</b>: Press File - Open & Place. Open your image, and then hit Enter to confirm placing.</li>
|
|
<li><b>Make a watermark yourself</b>: E.g. use a Brush or <a href="//www.photopea.com/learn/vg-creating">Vector tools</a> to draw a circle or other interesting shapes.</li>
|
|
<li><b>Type a text</b>: Use a <a href="//www.photopea.com/learn/text">Type tool</a> to type your own text.</li>
|
|
</ul>
|
|
<p>Once we are done, right-click the watermark layer (in Layers panel) and choose Rasterize.</p>
|
|
<img src="//i.imgur.com/T7OdaCY.png" style="width:36%" />
|
|
|
|
<p><b>Optional:</b> we can also adjust the colors. Press Image - Adjustments - Hue/Saturation. Drag the Lightness to make the watermark completely black or completely white. Confirm with OK.</p>
|
|
|
|
<h2>Position the Watermark</h2>
|
|
|
|
<p>We may want our watermark to be in the corner of the image, or to be repeated over the whole image as a pattern. To move it to the corner, choose a Move tool (the first in the Toolbar) and drag the watermark to a correct position. You can also use <a href="//www.photopea.com/learn/free-transform">Free Transform</a> to make it bigger or smaller.</p>
|
|
|
|
<p>To repeat the watermark across the whole image, press Filter - Other - Repeat. Here, you can choose many parameters, such as Scale, Row Shift, Spacing, Angle etc. Confirm the filter by pressing OK.</p>
|
|
|
|
<a href="//i.imgur.com/ojF9aKa.png" target="_blank"><img src="//i.imgur.com/ojF9aKa.png" style="width:80%" /></a>
|
|
|
|
<h2>Change the Opacity</h2>
|
|
|
|
<p>Once we have the right watermark at the right position, we can change the way it interacts with a background. The main two parameters are the Opacity and the Blend Mode, which you can change at the top of the Layers panel. Useful blend modes are Multiply, Screen and Overlay.</p>
|
|
|
|
<img src="https://i.imgur.com/lN493ns.png" style="width:35%" />
|
|
|
|
<p>Now, press File - Export As - PNG or JPG. And we are done! :)</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> |