csxy_dgut202235010623
/
568tools
mirror of https://github.com/PJ-568/568tools.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

新增 Open-Photopea

Browse Source
tools
PJ568 2 years ago
parent 8f4ccb1f49
commit 445e0c9b15
101 changed files with 87130 additions and 0 deletions
Show Stats Download Patch File Download Diff File

5
data.json
Unescape View File

@ -54,6 +54,11 @@
"url":"/lib/tools/geopattern/",
"type":"图像处理"
},
{
"name":"在线 PS 编辑图像",
"url":"/lib/tools/Open-Photopea/",
"type":"图像处理"
},
{
"name":"字符图像编辑",
"url":"/lib/tools/PP/",

5
js/api.js
Unescape View File

@ -31,6 +31,11 @@ var classify = [{
"id": 2,
"name": "图像处理",
"list": [{
"name": "在线 PS 编辑图像",
"url": "/incert/?link=/lib/tools/Open-Photopea/",
"hot": 1,
"img": ""
}, {
"name": "在线思维导图编辑器",
"url": "/incert/?link=/lib/tools/mind-map/",
"hot": 1,

4
tools/Open-Photopea/README.md
Unescape View File

@ -0,0 +1,4 @@
# Open Photopea
Photopea is the best Photoshop alternative. Their program runs as a web app. Photopea is capable of running **PSD, XCF and Sketch** files.
Photopea is a closed source software. So I decide to extract the code and Open Source it, but if they ask me to remove it I will be 100% fine with their decition.

13
tools/Open-Photopea/_downloads.html
Unescape View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Downloads </title>
</head>
<body>
<h1> Downloads </h1>
<ul>
<li><a id="https://www.photopea.com/" href="index.html"> Photopea | Online Image Editor </a></li>
</ul>
</body>
</html>

118
tools/Open-Photopea/api/accounts.html
Unescape View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0"><a href="index.html">API Spec</a></li>
<li class="lvl1"><a href="environment.html">Environment</a></li>
<li class="lvl1"><a href="live.html">Live Messaging</a></li>
<li class="lvl1"><a href="plugins.html">Plugins</a></li>
<li class="lvl0"><a href="playground.html">Playground</a></li>
<li class="lvl0"><a href="demo.html">Demo</a></li>
<li class="lvl0 active"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<h1>Accounts</h1>
<p>Photopea allows you to log-in through a third-party service (Google, Facebook ...).
Once you do it, Photopea can <b>identify you</b> and store your settings online (theme, language, colors, tool options).
Then, settings can be synchronized across all devices, where you use Photopea.</p>
<p>Photopea offers two types of accounts: <b>Free</b> and <b>Premium</b>. The Free account is available to anybody
for free at Photopea.com. The Premium account lets you use Photopea without advertisement and may have other benefits.</p>
<p>You can manage your account through the Account window (the button in the menu at the top).
Here you can order the Premium account or see, how many days of Premium you have left. Logging in is necessary for having Premium accounts.
The basic option is a Premium account for a single user.</p>
<h2 id="teams">Teams</h2>
<p>You can order a Premium account for the whole team of users. It has three main benefits:</p>
<ul>
<li>Just a single person pays for the whole team (more comfortable)</li>
<li>You can change team members at any time</li>
<li>You can save money (less expensive per user)</li>
</ul>
<p>Creating teams is extremely simple. There are no emails, registrations, synchronizations etc.
All can be done inside the Account window.
A team leader (the one who pays for the account) simply ticks "Create a team" and fills in email addresses of all members of a team.
Each team member ticks "Join a team" and fills in the email address of a team leader.</p>
<p>To be a member of a team, you have to "choose a leader" and the leader has to "choose you" as one of members.
The leader can add or remove members at any time, and the member can change the leader at any time.</p>
<h2 id="distributors">Distributors</h2>
<p>Photopea API allows you to have the editor at your own website (using so-called <code>iframe</code>), and configure it as you wish.
But sometimes, you may want to hide advertisement, social media buttons, branding ... let's call it a <b>whitelabel mode</b>.</p>
<p>Photopea has an internal list of whitelabel domains. When you place the editor into your website and your domain is in the list,
Photopea runs in a whitelabel mode, and it runs in a regular mode otherwise. <b>Distributor account</b> allows you to add your domain into that list.</p>
<p>First, you must order a distributor account for the expected number of visitors per month.
If you exceed that number, just order the higher number of visitors the next time.
If you exceed the number twice in a row, you may receive a ban.</p>
<p>After you pay for the Distributor account, enter the name of your domain and click Save. You can change your domain at any time.</p> </div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

128
tools/Open-Photopea/api/demo.html
Unescape View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0"><a href="index.html">API Spec</a></li>
<li class="lvl1"><a href="environment.html">Environment</a></li>
<li class="lvl1"><a href="live.html">Live Messaging</a></li>
<li class="lvl1"><a href="plugins.html">Plugins</a></li>
<li class="lvl0"><a href="playground.html">Playground</a></li>
<li class="lvl0 active"><a href="demo.html">Demo</a></li>
<li class="lvl0"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<style type="text/css">.image {
display: inline-block;
width:9em;
height:9em;
margin: 1em;
}
img {
width:100%;
height:80%;
}
</style>
<script>
var images = ["24Hours.psd", "G4.TIF", "Miranda_kerr.sketch", "alza.psd", "cballs.png", "crown.wmf", "editor.sketch", "educ.emf", "many_lrs.psd", "martian.sketch", "milk.sketch", "mountains.webp", "ocal,0,A5363A75-C861-4982-8EBF-E9B4CB263A72.psd", "ocal,0,DbvX4fKWsAEeBG3.psd", "ocal,0,F67F6084-91C1-4E5A-B31F-B3843FF97E3F.psd", "ocal,0,Koala.psd", "ocal,1,3B75BF93-6216-426C-9AB7-F445F1770EE3.psd", "ocal,1,3E02563D-15B2-4F5B-AD82-E21990B4CFA7.psd", "ocal,3,svg-pdf.psd", "paper.xcf", "pea.psd", "pea_logo.jpg", "pp_gold.psd", "pug.png", "raptor.png"];
function go(e)
{
var html = "";
var fmts = ["png","jpg","jpeg","webp"];
for(var i=0; i<images.length; i++)
{
var editOBJ = {
"files" : [
"//www.photopea.com/api/img/" + images[i],
],
"server" : {
"url" : "//www.photopea.com/api/saveImage.php",
"formats" : [ images[i].split(".")[1] ]
}
}
var suff = images[i].split(".").pop();
var editURL = "//www.photopea.com#" + encodeURI(JSON.stringify(editOBJ));
html += "<div class=\"image\">"
html += "<a href=\"img/" + images[i] + "\">";
if(fmts.indexOf(suff)!=-1) html += "<img src=\"img/" + images[i] + "\" />";
else html += "<img src=\"missing.png\" />";
html += "</a>";
html += "<span>"+images[i]+"</span> <br />";
html += "<a href=\"" + editURL + "\">Edit</a>";
html += "</div>"
}
document.getElementById("imgcont").innerHTML = html;
//updatePlayground();
//window.addEventListener("hashchange", onHashChange, false);
//onHashChange();
}
document.body.onload = go;
</script>
<h1>Editing local images with Photopea</h1>
<p>Click "Edit" to open an image in Photopea. Click "File" - "Save (to Server)" in Photopea to save it back.</p>
<div id="imgcont"></div> </div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

146
tools/Open-Photopea/api/environment.html
Unescape View File

@ -0,0 +1,146 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0"><a href="index.html">API Spec</a></li>
<li class="lvl1 active"><a href="environment.html">Environment</a></li>
<li class="lvl1"><a href="live.html">Live Messaging</a></li>
<li class="lvl1"><a href="plugins.html">Plugins</a></li>
<li class="lvl0"><a href="playground.html">Playground</a></li>
<li class="lvl0"><a href="demo.html">Demo</a></li>
<li class="lvl0"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<h1>Environment</h1>
<p>The look of the editor can be customized by the <code>environment</code> property of the JSON.</p>
<pre>{
...
"environment" : {
"theme" : 2, "lang" : "es",
"vmode" : 0, "intro" : true,
"eparams" : { "guides" :true, "grid" : true, "gsize": 8,
"paths": true, "pgrid": true },
"localsave" : false, "autosave" : 120,
"showtools" : [0,5,9], "menus" : [ [1,1,0,1], 1, 0, 1, [0] ],
"showpanels": [0, [1]],
"phrases" : [ [1,0], "Open Design", [1,2], "Save Design" ],
"topt" : { "t0": ..., "t1": ..., ... },
"tmnu" : { "t0": ..., "t1": ..., ... },
"icons" : { "tools/crop": "https://www.me.com/img/crop.png", ... },
"plugins":[ ... ]
}
}</pre>
<p>Each parameter is optional. They have the following meaning:</p>
<ul>
<!--
<li><code>fcolor</code> - foreground color</li>
<li><code>bcolor</code> - background color</li>
<li><code>rulers</code> - rulers enabled</li>-->
<li><code>theme</code> - theme (0, 1, 2, ...)</li>
<li><code>lang</code> - language</li>
<li><code>vmode</code> - view mode. 0: regular, 1: panels are collapsed, 2: hide all panels</li>
<li><code>intro</code> - when no documents are open, show introduction panel (with buttons etc.)</li>
<li><code>eparams</code> - extras: enable or disable guides, grid, paths, pixel grid ...</li>
<!--<li><code>showbranding</code> - show / hide Log In, Social media links etc.</li>-->
<li><code>localsave</code> - enable / disable "Save as PSD", "Save for Web" and "Publish Online"</li>
<li><code>autosave</code> - with a value X, Photopea will execute "File - Save" each X seconds</li>
<li><code>showtools</code> - show only following tools (see tool IDs below) </li>
<li><code>menus</code> - specify the structure of File, Edit, Image ... menus with <b>0/1 flags</b>.
Each element of an array is either 0: hide the item, 1: show the item with a standard content,
or an array of flags for sub-items (works recursively). If your array is shorter than required, zeros will be added to the end.
See the current menu structure of Photopea to find the right values.
E.g. [1,1] as the first element means, that the "File" menu will be shown with "New" and "Open" items only.</li>
<li><code>showpanels</code> - allows you to hide elements on the right side.
There are two <b>columns</b>, which contain <b>panel blocks</b>, which contain one or more <b>panels</b>.
Each element of an array is either 0: hide the column, 1: show the column with all standard items,
or an array of indices of panel blocks, that should be displayed.</li>
<li><code>phrases</code> - allows you to replace any phrase inside Photopea with your own.
The aray has the form <code>[ ID1, W1, ID2, W2, ... ]</code>, where IDx is the ID of some phrase and Wx is a new phrase, that should be used instead.<br />
Some useful IDs: [1,2]: Save (File menu), [2,0]: Step Forward, [2,1]: Step Backward.
To discover IDs of other phrases, get familiar with <a href="https://github.com/photopea/OpenWord">OpenWord table structure</a> and find
your phrase in <a href="../code/LNG2.js">a current phrase database</a>, or just write us an email to support@photopea.com.</li>
<li><code>topt</code> - tool options. Lets you change the settings of each tool.
Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
<li><code>tmnu</code> - tool menu. Lets you specify the structure of the top menu for each tool.
Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
<li><code>icons</code> - custom icons. Each icon has an icon ID (key) and the image URL (value).
You can find icon IDs <a href="../code/PIMG.js">here</a>.
E.g. the Crop Tool has an ID "tools/crop". The background of the introduction panel as an ID "intro".</li>
<li><code>plugins</code> - described <a href="plugins.html">here</a></li>
</ul>
<h2>Tool options and menus</h2>
<h3>Move Tool</h3>
<p>Options: <code>[1,0,null]</code>. Three values mean Auto-Select, Transformation controls and Distances.
1 means enabled, 0: disabled, null: not specified.</p>
<p>Menu: <code>[1,1,1,1,1,1]</code>. Six flags to show / hide six items: Auto-Select, Transformation controls, Distances,
Quick Save (Get PNG...), Vertical Align, Horizontal Align.</p>
<h2>Tool IDs</h2>
<ul style="column-count:3; list-style-type: none;">
<li>0: Move Tool</li><li>1: Rectangle Select</li><li>2: Ellipse Select</li><li>5: Lasso Select</li><li>6: Polygonal Lasso Select</li><li>7: Magnetic Lasso Select</li><li>8: Quick Selection</li><li>9: Magic Wand</li><li>10: Crop Tool</li><li>14: Eyedropper</li><li>16: Ruler</li><li>18: Spot Healing Brush Tool</li><li>19: Healing Brush Tool</li><li>20: Patch Tool</li><li>23: Brush Tool</li><li>24: Pencil Tool</li><li>27: Clone Tool</li><li>31: Eraser Tool</li><li>34: Gradient Tool</li><li>35: Paint Bucket Tool</li><li>36: Blur Tool</li><li>37: Sharpen Tool</li><li>38: Smudge Tool</li><li>39: Dodge Tool</li><li>40: Burn Tool</li><li>41: Sponge Tool</li><li>47: Type Tool</li><li>42: Pen</li><li>43: Free Pen</li><li>51: Path Select</li><li>52: Direct Select</li><li>54: Rectangle</li><li>55: Ellipse</li><li>57: Line</li><li>56: Parametric Shape</li><li>58: Custom Shape</li><li>59: Hand Tool</li><li>61: Zoom Tool</li>
</ul> </div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

180
tools/Open-Photopea/api/index.html
Unescape View File

@ -0,0 +1,180 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0 active"><a href="index.html">API Spec</a></li>
<li class="lvl1"><a href="environment.html">Environment</a></li>
<li class="lvl1"><a href="live.html">Live Messaging</a></li>
<li class="lvl1"><a href="plugins.html">Plugins</a></li>
<li class="lvl0"><a href="playground.html">Playground</a></li>
<li class="lvl0"><a href="demo.html">Demo</a></li>
<li class="lvl0"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<h1>Passing data to Photopea</h1>
<!--<p>* * * You can also use <a href="live.html">Live Messaging</a> to get files to and from Photopea.</p>-->
<p>Photopea can be configured using a parameter after a hash sign.</p>
<pre>https://www.photopea.com#STRING_VALUE</pre>
<p>String value is encoded into the URL using classic encoding of query parameters (space as %20 etc.).
It corresponds to <strong>encodeURI()</strong> in Javascript or <strong>urlencode()</strong> in PHP.
This string contains a JSON object.</p>
<h3>JSON configuration object</h3>
<p>JSON object must have the following structure:</p>
<pre>{
"files" : [
"https://www.mysite.com/images/design.psd",
"https://www.mysite.com/images/button.png",
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAA\
AAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
],
"resources" : [
"https://www.xyz.com/brushes/Nature.ABR",
"https://www.xyz.com/grads/Gradients.GRD",
"https://www.xyz.com/fonts/NewFont.otf"
],
"server" : {
"url" : "https://www.myserver.com/saveImage.php",
"formats" : [ "psd:true", "png", "jpg:0.5" ]
},
"environment" : {...},
"script" : "app.activeDocument.resizeCanvas(90,80,AnchorPosition.TOPLEFT);"
}</pre>
<p>
Data URIs can be used - file can be passed inside request (<a target="_new" href="../index.html#%7B%22files%22:%5B%22data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==%22%5D%7D">test</a>).
All parameters are optional.
</p>
<h3>Parameters</h3>
<ul>
<li><code>files</code> - array of files, that are loaded when Photopea starts</li>
<li><code>resources</code> - array of resources (gradients, brushes, fonts ...)</li>
<li>
<code>server</code> - parameters for saving documents back to a server
<ul>
<li><code>url</code> - URL address of a server</li>
<li><code>formats</code> - formats, in which a document should be sent to a server.
The string format corresponds to <a href="../learn/scripts.html">saveToOE</a>.</li>
</ul>
</li>
<li>
<code>environment</code> - parameters of the environment, see <a href="environment.html">Environment</a>
</li>
<li>
<code>script</code> - the <a href="../learn/scripts.html">script</a>, that should be executed after loading each file (can be long)
</li>
</ul>
<h2>Saving to server</h2>
<p>When <code>server</code> parameter is specified in a request to Photopea.com, every document opened in Photopea will have <code>File - Save</code> option.
After a user clicks it, document data are sent to your server in HTTP request using POST method.
It will contain a single string parameter <code>p</code>. The string contains a JSON object with the following structure:</p>
<pre>{
"source" : "https://www.mysite.com/images/button.png",
"versions" : [
{"format":"psd", "data": "..."},
{"format":"jpg", "data": "..."},
...
]
}</pre>
<h3>Parameters</h3>
<ul>
<li><code>source</code> - if the file was loaded from your server, the value is the URL of this document.
Otherwise (opening a local file, creating an empty file), it contains <code>"local,X,NAME"</code>,
where X is the integer ID of the document, and NAME is the name of the document</li>
<li>
<code>versions</code> different versions of your document
<ul>
<li><code>format</code> - format of the file, exported from Photopea</li>
<li><code>data</code> - binary data, encoded into a string using <a href="http://en.wikipedia.org/wiki/Base64">Base64</a> encoding </li>
</ul>
</li>
</ul>
<p>Here is a short PHP example, which accepts files from Photopea.</p>
<pre>$p = json_decode( $_POST["p"] ); // parse JSON
// getting file name from "source";
$fname = substr ($p->source, strrpos($p->source,"/")+1);
file_put_contents("images/".$fname, base64_decode( $p->versions[0]->data ));</pre>
<h2>Cross-Origin Resource Sharing</h2>
<p>For security reasons, webapps can access only files from the same domain.
In order to let Photopea load your file, the response of your server must contain the following header:<p>
<pre>Access-Control-Allow-Origin: *</pre>
<p>Find out more at <a href="http://www.w3.org/TR/cors/">CORS specification</a> or at <a href="http://enable-cors.org/">enable-cors.org</a>.</p>
<h2>Prices</h2>
<p>Usage of Photopea API is completely free. Keep in mind, that PP is in early stages of development and there may be critical bugs.
We do not take any responsibility for documents edited or generated by Photopea.</p>
<p>Please, let us know in advance (support@photopea.com), when you expect to have a large regular traffic (thousands of visitors per day).</p>
</div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

116
tools/Open-Photopea/api/live.html
Unescape View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0"><a href="index.html">API Spec</a></li>
<li class="lvl1"><a href="environment.html">Environment</a></li>
<li class="lvl1 active"><a href="live.html">Live Messaging</a></li>
<li class="lvl1"><a href="plugins.html">Plugins</a></li>
<li class="lvl0"><a href="playground.html">Playground</a></li>
<li class="lvl0"><a href="demo.html">Demo</a></li>
<li class="lvl0"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<h1>Live Messaging</h1>
<p>You can insert Photopea into a webpage (using a frame). Let's call such webpage the <b>Outer Environment (OE)</b>.
OE can communicate with Photopea through <a href="http://web.archive.org/web/20150331203017/http://www.w3.org/TR/webmessaging/">Web Messaging</a>.
</p>
<pre>window.addEventListener("message", function(e) { alert(e.data); });
var wnd = document.getElementById("pp").contentWindow;
wnd.postMessage(msg, "*");</pre>
<p>OE can send <b>two kinds of data</b> to Photopea:</p>
<ul>
<li><b>String</b> - contains a script, which will be executed by Photopea</li>
<li><b>ArrayBuffer</b> - a binary file: psd, svg, jpg, ... fonts, brushes, ...</li>
</ul>
<p>When Photopea is initialized and ready to accept commands, it sends the message "done".
After your message is processed, Photopea also sends back the message <code>"done"</code>.</p>
<ul>
<li>Demo: <a href="https://jsfiddle.net/qu4Lfk2k/57/">Wait for "done", then send a script</a></li>
<li>Demo: <a href="https://jsfiddle.net/qu4Lfk2k/59/">Load a file (as ArrayBuffer) and give it to Photopea</a></li>
</ul>
<h2>Retrieving data from Photopea</h2>
<p>Photopea can send the current image to OE using the following command (inside a script):</p>
<pre>app.activeDocument.saveToOE("gif");</pre>
<p>The full description at <a href="../learn/scripts.html">/learn/scripts</a>. The image will be sent as ArrayBuffer.</p>
<p>After you run the script above, PP will send a message with an ArrayBuffer of a GIF image,
followed by a message with a String "done" (processing the script has finished).</p>
<h2>Examples of usage</h2>
<p>This API can replace the main API. Instad of letting Photopea communicate with your server directly,
you can load files inside your progrm and transfer them to and from Photopea in a clients device.
<!--E.g. you can recreate the autosave feature (by calling <code>saveToOE()</code> in regular intervals).--></p>
<p>You can use Photopea as a "module", hide its UI and use only the messaging.
You can create a batch-processor of images (resizing images, adding watermarks, converting between formats).
You can make scripts, that would export each layer of the document as a PNG.
You can make scripts, that would replace the text in each text layer by data from your user (to create a generator of business cards, etc.).</p> </div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

115
tools/Open-Photopea/api/playground.html
Unescape View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0"><a href="index.html">API Spec</a></li>
<li class="lvl1"><a href="environment.html">Environment</a></li>
<li class="lvl1"><a href="live.html">Live Messaging</a></li>
<li class="lvl1"><a href="plugins.html">Plugins</a></li>
<li class="lvl0 active"><a href="playground.html">Playground</a></li>
<li class="lvl0"><a href="demo.html">Demo</a></li>
<li class="lvl0"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<script>
//window.addEventListener("message", function(e) { alert(e.data); });
var frame = null;
function updatePlayground(e)
{
var json = document.getElementById("json").value;
json = JSON.stringify(JSON.parse(json));
var url = "https://www.photopea.com";
var end = "#"+encodeURI(json);
document.getElementById("url").value = url+end;
frame = document.getElementById("pp");
frame.src = url+"?rnd="+Math.floor(Math.random()*0xffffffff)+end;
//frame.contentWindow.location.reload(true);
//wnd.postMessage(script, "*");
}
function runScript(e)
{
var script = document.getElementById("script").value;
frame.contentWindow.postMessage(script,"*");
}
document.body.onload = updatePlayground;
</script>
<h1>Playground</h1>
<p>Enter the JSON configuration file, which will be encoded into the URL:</p>
<textarea rows="8", style="width:100%;" id="json">{
"files": [
"https://www.photopea.com/api/img/pug.png"
],
"environment": {
}
}</textarea>
<button onclick="updatePlayground()" style="display:block; font-size:1.2em;" >Update</button> <br />
<b>URL:</b>
<textarea rows="3", style="width:100%;" id="url"></textarea>
<iframe src="" id="pp" style="border:none; width:100%; height:500px;"></iframe>
<h2>Run a script</h2>
<textarea rows="4", style="width:100%;" id="script">app.activeDocument.activeLayer.translate(20,20);</textarea>
<button onclick="runScript()" style="display:block; font-size:1.2em;">Run</button> <br />
</div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

117
tools/Open-Photopea/api/plugins.html
Unescape View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='casper-google-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
<title>Photopea API</title>
</head>
<body>
<div id="page">
<div id="header">
<a href="../index.html" class="title">Photopea API</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a href="../tuts/index.html">Tutorials</a> |
<a class="curr" href="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:960px;">
<div id="sidebar" style="width:20%;">
<!--<h3>Topics</h3>-->
<ul>
<li class="lvl0"><a href="index.html">API Spec</a></li>
<li class="lvl1"><a href="environment.html">Environment</a></li>
<li class="lvl1"><a href="live.html">Live Messaging</a></li>
<li class="lvl1 active"><a href="plugins.html">Plugins</a></li>
<li class="lvl0"><a href="playground.html">Playground</a></li>
<li class="lvl0"><a href="demo.html">Demo</a></li>
<li class="lvl0"><a href="accounts.html">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<h1>Plugins</h1>
<p>Create Plugins for Photopea and provide them to your users through a configuration JSON.</p>
<pre>{ "environment": {
"plugins" : [
{
"name" : "Wikipedia",
"url" : "https://en.wikipedia.org",
"width" : 400,
"height": 300,
"icon" : "https://en.wikipedia.org/static/favicon/wikipedia.ico"
}
]
} }</pre>
<ul>
<li><code>name</code> - plugin name</li>
<li><code>url</code> - plugin URL</li>
<li><code>width</code> - panel width</li>
<li><code>height</code> - panel height</li>
<li><code>icon</code> - plugin icon (optional)</li>
</ul>
<p>For each plugin, the button will be added to the right side, below the current buttons.</p>
<img src="https://i.imgur.com/8tPgmho.png" class="fullw" />
<p>After the user clicks the plugin button, the panel is opened with a website <code>url</code>, having the size of <code>width</code> and <code>height</code>.</p>
<p>Users can drag-and-drop images from your website to Photopea (as Photopea supports dropping images from any website, opened by a browser).</p>
<p>Your website can connect with Photopea using <a href="live.html">Live Messaging</a> (your website acts as the OE).
It allows your plugin to execute scripts (e.g. to change foreground color, to move a layer, etc.).</p>
<p>The plugin can give files to Photopea (images: psd, jpg, svg ... or resources: brushes, patterns, fonts ...),
or request the current file in a specific format.
All this can be controlled e.g. by buttons in your plugin (website).</p>
<pre>window.parent.postMessage("...script...", "*");
window.parent.postMessage(ArrayBuffer, "*");</pre>
<h2>Examples of usage</h2>
<p><b>Photo Store</b>. Let users browse your database of images. They can search the database by a keyword.
You can add a button "Open" next to each image, which would open that image in Photopea.</p>
<p><b>Font Gallery</b>. Let users browse your database of fonts. The font will be loaded after clicking the button.
You can integrate a payment gateway into the plugin, too (as it is your website, you have full control over it).</p>
<p>You can make your plugin "commercial" - let users pay for them monthly. The sign-in and the payment interface could still be
in the same "iframe" of your plugin, inside Photopea (or you could open a new window and then, come back to Photopea).</p> </div>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//photopeablog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</div>
</html>

34300
tools/Open-Photopea/code/FNTS.js
View File

File diff suppressed because it is too large Load Diff

21166
tools/Open-Photopea/code/LNG2.js
View File

File diff suppressed because it is too large Load Diff

103
tools/Open-Photopea/code/PIMG.js
View File

File diff suppressed because one or more lines are too long

16227
tools/Open-Photopea/code/external/ext.js vendored
View File

File diff suppressed because one or more lines are too long

7842
tools/Open-Photopea/code/pp.js
View File

File diff suppressed because one or more lines are too long

BIN
tools/Open-Photopea/img/lrs/eye.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 817 B

BIN
tools/Open-Photopea/img/tools/blur.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
tools/Open-Photopea/img/tools/brush.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
tools/Open-Photopea/img/tools/burn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
tools/Open-Photopea/img/tools/clone.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 B

BIN
tools/Open-Photopea/img/tools/crop.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 B

BIN
tools/Open-Photopea/img/tools/cshape.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
tools/Open-Photopea/img/tools/dodge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 B

BIN
tools/Open-Photopea/img/tools/dselect.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
tools/Open-Photopea/img/tools/ellipse.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 756 B

BIN
tools/Open-Photopea/img/tools/eraser.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
tools/Open-Photopea/img/tools/eselect.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
tools/Open-Photopea/img/tools/fpen.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
tools/Open-Photopea/img/tools/hand.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 924 B

BIN
tools/Open-Photopea/img/tools/hbrush.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
tools/Open-Photopea/img/tools/htype.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 499 B

BIN
tools/Open-Photopea/img/tools/lasso.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
tools/Open-Photopea/img/tools/line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
tools/Open-Photopea/img/tools/mlasso.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
tools/Open-Photopea/img/tools/move.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
tools/Open-Photopea/img/tools/mwand.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
tools/Open-Photopea/img/tools/patch.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 579 B

BIN
tools/Open-Photopea/img/tools/pen.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
tools/Open-Photopea/img/tools/pencil.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 836 B

BIN
tools/Open-Photopea/img/tools/plasso.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
tools/Open-Photopea/img/tools/pselect.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
tools/Open-Photopea/img/tools/pshape.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
tools/Open-Photopea/img/tools/qselect.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
tools/Open-Photopea/img/tools/rect.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 B

BIN
tools/Open-Photopea/img/tools/rselect.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 B

BIN
tools/Open-Photopea/img/tools/sharpen.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
tools/Open-Photopea/img/tools/shbrush.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
tools/Open-Photopea/img/tools/smudge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
tools/Open-Photopea/img/tools/sponge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
tools/Open-Photopea/img/tools/transform.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 B

BIN
tools/Open-Photopea/img/tools/zoom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

94
tools/Open-Photopea/index.html
Unescape View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
<meta name="thumbnail" content="https://www.photopea.com/promo/screens/scr5.png" />
<title>Photopea | Online Image Editor</title>
<link rel="icon" sizes="256x256" href="promo/thumb256.png">
<link rel="image_src" type="image/png" href="promo/thumb256.png" />
<link rel="manifest" href="manifest.json">
<meta name="description" content="Open and edit PSD, XCF, Sketch (Photoshop, Gimp and Sketch) or any other image files. Inspect PSD and Sketch files. Convert Sketch to PSD. Apply photo effects and filters. A perfect alternative to Photoshop or Gimp." />
<link rel="stylesheet" href="style/all.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
<style>.topfloat a {
text-decoration:none;
color:#ffffff;
padding:2px 6px 3px 6px;
border-radius: 0.3em;
display:inline-block;
white-space: nowrap;
}
#cap {
font-size: 1.3em;
padding:1em 9em 1.8em 3em; background-color: #0f171d; /*background-image: linear-gradient(rgb(20, 20, 22), rgb(40,40,45));*/
color:#e6e6e6; text-align:center;
/*position:absolute; z-index:10; margin:1em; border-radius: 1em;*/
}
#cap a { color:inherit; font-weight:bold; }
#cap p { margin-bottom:1.5em; line-height:1.5em; }
h1 { font-size: 2.5em; margin:0.7em 0; letter-spacing: 0em; }
strong { display:inline-block; font-size: 1.1em; background:rgba(0,0,0,0.1); padding:0.1em 0.5em;
margin: 0.2em 0.5em 0.2em 0; border-radius:0.3em; font-weight:normal; line-height:1.7}
</style>
<script>
function showCap() {_showCap(true);} function hideCap() {_showCap(false);}
function _showCap(vis){
document.getElementById("cap").setAttribute("style", vis?"":"display:none;");
localStorage.setItem("capShown", ""+vis);
}
</script>
</head>
<body class="theme0">
<!---->
<!---->
<div class="topfloat" style="display:none;">
<a class="bbtn" onclick="showCap()" style="background:#ff6600;cursor:pointer;">Info</a>
<!--<a onclick="ga('send','event','Links','story');" href="//blog.photopea.com/creating-photopea.html" style="background:#6827ff;" target="_blank">Story</a>-->
<!-- <a class="bbtn" onclick="ga('send','event','Links','issues');" href="https://github.com/photopea/photopea/issues" style="background:#559900;" target="_blank">Report a bug</a> -->
<a class="bbtn" onclick="ga('send','event','Links','learn');" href="learn/index.html" style="background:#aa0099;" target="_blank">Learn</a>
<a class="bbtn" onclick="ga('send','event','Links','blog');" href="https://blog.photopea.com" style="background:#e30044;" target="_blank">Blog</a>
<a class="bbtn" onclick="ga('send','event','Links','api');" href="api/index.html" style="background:#f1c40f;" target="_blank">API</a>
<!--
<a href="https://chrome.google.com/webstore/detail/photopea/fmophgdjdipcbfjiopifpngdjmemonko" style="background:#9900aa;" target="_blank">Chrome App</a>
<a onclick="ga('send','event','Links','reddit');" href="//www.reddit.com/r/photopea" style="background:#ff4500" target="_blank">Reddit</a>
-->
<!-- <a class="bbtn" onclick="ga('send','event','Links','twitter');" href="https://twitter.com/photopeacom" style="background:#1b95e0" target="_blank">Twi</a> -->
<!-- <a class="bbtn" onclick="ga('send','event','Links','facebook');" href="https://www.facebook.com/photopea/" style="background:#46629e" target="_blank">Facebook</a> -->
<!--<a onclick="ga('send','event','Links','bigDropInc');" href="https://www.bigdropinc.com" style="background:#f1c40f" target="_blank"
title="Big Drop Inc. - get your design done by professionals" >Big Drop Inc</a>-->
</div>
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();
/*var url = window.location.href, eind = url.indexOf("="), pname = null;
if(eind!=-1) pname = url.substring(url.indexOf("?")+1, eind);
if(pname=="p") { var pval = JSON.parse(decodeURI(url.substring(eind+1, url.length)));
if(pval.environment && !pval.environment.showbranding) { document.getElementsByClassName("topfloat")[0].style.display="none"; hideCap(); } }*/
</script>
<script src="code/external/ext.js"></script>
<script src="code/PIMG.js"></script>
<script src="code/FNTS.js"></script>
<script src="code/LNG2.js"></script>
<script src="code/pp.js"></script>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4249565-37', 'photopea.com');
ga('send', 'pageview');
</script>
</body>
</html>

135
tools/Open-Photopea/learn/adjustments-filters.html
Unescape View File

@ -0,0 +1,135 @@
<!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 - Adjust. &amp; Filters</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 active"><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>Adjustments and Filters</h1>
<p>Modifying colors and adding color effects is the essential operation of photo editing.
Such operations are separated into two groups in Photopea: <b>Adjustments</b> and <b>Filters</b>.</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>Adjustments</h2>
<p>Adjustments work <b>only with the color</b>. I.e. if some pixel is changed from the color A to the new color B,
all pixels with the color A will be changed to the color B in the whole image.
That is true for changing the brightness, saturation, inverting colors etc.</p>
<p>Adjustments can be applied by clicking Image - Adjustments in the top menu.
Some of them have a keyboard shortcut (e.g. Ctrl + L for Levels, Ctrl + M for curves, Ctrl + U for Hue / Saturation).
Adjustments also can be applied in the form of <a href="other-layers.html">Adjustment Layers</a>.</p>
<h2>Filters</h2>
<p>On the other hand, in case of Filters, pixels having the same color can be changed to different colors, as in the blur filter.
When the black pixel is surrounded by white pixels, it will become white after blurring.
But if the black pixel is surrounded by black pixels, it will remain black after blurring.</p>
<p>Filters can be applied by clicking Filters in the top menu, choosing the categoriy of filters and then choosing a specific filter.</p>
<p>Both Adjustments and Filters can be applied to regular layers (i.e. you can not blur the text layer or a pattern fill layer,
you would need to rasterize them first).
There is a special way of applying adjustments and filters to Smart Objects called <b>Smart Filters</b>.
As you apply adjustments or filters to a Smart Object, they are stacked into a list under the layer (similar to Layer Styles).</p>
<img src="https://i.imgur.com/Ttozm4E.png" />
<p>The source image of the Smart Object is stored separately, so the list of filters can be reapplied and recalculated at any time.
You can enable or disable any smart filter in the list at any time, or change its parameters. We can call it <b>nondestructive editing</b>.
Smart Filters even have their own raster mask, which can hide the filter effect (so the original image can be visible at some parts).</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>

154
tools/Open-Photopea/learn/advanced-selecting.html
Unescape View File

@ -0,0 +1,154 @@
<!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 - Advanced Selecting</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 active"><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>Advanced Selecting</h1>
<p>We already know, how to make basic selections "manually", e.g. with the Ellipse Select or a Lasso tool.
But making complex selections with these tools can take a lot of time. There are more advanced tools, that can help us.</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/mwand.png" />Magic Wand</h2>
<p>Magic wand allows you to select pixels with the same (or similar) color. Once you click somewhere with the Magic Wand,
the pixel under the mouse will be selected, as well as all other pixels, that have a color similar to that pixel.</p>
<p>There is a <b>Contiguous mode</b> option (in the top menu). When it is on, the Magic Wand will select only those similar pixels,
that are connected to the source pixel (i.e. it will select the whole area, that has the same color, but not other areas, which are separated from this area).
When this option is disabled, the Magic Wand will select all similar pixels from the whole image, even if they are not conencted to the source pixel.</p>
<p>Here you can see the result of clicking on the pixel (marked by the white cross) with the Contiguous mode enabled and disabled.</p>
<img src="https://i.imgur.com/e1TVQ9Q.png" />
<p>There is also a <b>Tolerance</b> parameter in the top menu, which defines how much similar colors you want to select
(larger values produce "wider" selections).</p>
<h2><img class="inline" src="../img/tools/qselect.png" />Quick Selection</h2>
<p>This is probably the most advanced selecting tool, that can really save your time.
For many people, this is the only selection tool they ever use.</p>
<p>Quick Selection works like a brush, you can choose the brush tip diameter in the top menu.
Then, draw strokes over the area, that you want to select. It adds each stroke to a selection, and it also gradually <b>expands</b> it
into the surrounding area, selecting the related parts (similarly to a Magic Wand).</p>
<p>Sometimes, the tool may go beyond the area, that you want to select, and select much greater part.
Switch to the <b>Subtract</b> mode in the top menu (or hold the Alt key) and you can remove the unwanted parts in the same way.</p>
<p>There is a hidden layer inside the Quick Selection tool. As you draw strokes with the New or Union mode, the tool draws into that layer with the white color.
When you draw with the Subtract mode, the strokes are drawn using the black color.
This layer is used as a guide for the tool: white areas must always be inside the selection, black areas must not be in the selection,
and the remaining area will be smartly deduced from this, by analyzing the actual image.
The more white and black strokes you specify, the more information the tool has for making a good selection.</p>
<p>The <b>New</b> mode makes the tool forget all previously specified strokes and start over with an empty hidden layer.</p>
<h2>Color Range</h2>
<p>This tool allows us select a specific color from the image. Unlike the Magic Wand, which either fully selects or fully ignores the area,
Color range can create partial selections, depending on how much of that color is present in the area.</p>
<p>Start the tool by pressing Select - Color Range. Next, click on the color (in the image), that you want to select.
The Color Range window shows you the preview of the selection: the brightness corresponds to the degree of selection of each pixel.
E.g. if you click on the red t-shirt in the image, this t-shirt should be white in the preview, and other parts, that are not red, should be black in the preview.
The <b>Fuziness</b> parameter lets you add also all similar colors to the selection, or select just the exact color that you clicked on.</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>

132
tools/Open-Photopea/learn/animations.html
Unescape View File

@ -0,0 +1,132 @@
<!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 - Animations</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"><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 active"><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>Animations</h1>
<p>Animated images (GIF, PNG / APNG), are very popular.
Such animation consists of several static images called <b>frames</b>, and the information, for how long each frame should be displayed (before going to the next frame).
Photopea can open, edit and save animations.</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>The structure of animation in Photopea</h2>
<p>Photopea can generate an animation from a layered document by showing different layers in each frame.
To define a new frame, there must be a layer with the name starting with "_a_". It can be a regular layer, a folder of layers, or any other layer.</p>
<p>Once you try to save such document as a PNG or GIF, Photopea detects all layers starting with "_a_".
The first layer starting with "_a_" is shown in the first frame (others starting with "_a_" are hidden).
Remaining frames are generated in the same way.</p>
<p><b>Example</b>: let us have layers with names ["background", "_a_dog", "_a_cat", "_a_tree", "watermark"].
The resulting animation will have three frames (dog in the first frame, cat in the second, tree in the third),
"background" and "watermark" will be present in all frames ("background" behind the object, "watermark" in front of the object).</p>
<h2>Delay</h2>
<p>When the layer name starts with "_a_", it will generate a new frame. The delay (from showing this frame until switching to the next frame) is 50 ms by default.
To specify your own delay, put the ",XX" to the end of the name of the layer, where "XX" is the delay time in milliseconds.</p>
<p>For example, the layer wit the name "_a_Dog,500" will generate a frame, that will be shown for half a second.</p>
<h2>Loading animated GIFs and PNGs</h2>
<p>When you load an animated GIF or PNG into Photopea, each frame is converted into a <b>separate layer with a proper name</b>.
It means, that you can easily open an animation, resize it, delete or reorder frames, and save it back, without worrying about layer names.</p>
<p>You can also add new layers to an existing animation (to be shown in all frames, like watermarks) without changing layer names.</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>

154
tools/Open-Photopea/learn/brush-tools.html
Unescape View File

@ -0,0 +1,154 @@
<!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 - 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="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 active"><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>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 allong 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="https://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="https://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>
<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>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="https://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>
</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>

127
tools/Open-Photopea/learn/bt-advanced.html
Unescape View File

@ -0,0 +1,127 @@
<!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 - Advanced 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"><a href="bt-basic.html">Basic Tools</a></li>
<li class="lvl1 active"><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>Advanced Tools</h1>
<p>These tools perform advanced effects on the layer.</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/blur.png" />
<img class="inline" src="../img/tools/sharpen.png" />Blur and Sharpen</h2>
<p>These tools simply blur or sharpen the content of the layer under the stroke. You can change the Strength of the effect at the top menu.</p>
<h2><img class="inline" src="../img/tools/dodge.png" />
<img class="inline" src="../img/tools/burn.png" />Dodge and Burn</h2>
<p>Dodge makes the colors lighter, while Burn makes the colors darker.
You can choose the range, to which the effect should be applied (Shadows / Midtones / Highlights) and the strength (Exposure).</p>
<h2><img class="inline" src="../img/tools/smudge.png" />Smudge</h2>
<p>The Smudge tool is probably the most advanced these tools.
It is the analogy of moving your finger across the wet paint on the painting.
You can spread colors to other areas, make object longer or shorter, or move the border between two objects.</p>
<img class="fullw" src="https://blog.photopea.com/wp-content/uploads/2017/02/smudge.png" />
<h2><img class="inline" src="../img/tools/sponge.png" />Sponge</h2>
<p>The Sponge tool can be used to saturate or desaturate parts of the layer (make pixels more "alive").</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>

127
tools/Open-Photopea/learn/bt-basic.html
Unescape View File

@ -0,0 +1,127 @@
<!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>

141
tools/Open-Photopea/learn/bt-smart.html
Unescape View File

@ -0,0 +1,141 @@
<!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 - Smart 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"><a href="bt-basic.html">Basic Tools</a></li>
<li class="lvl1"><a href="bt-advanced.html">Advanced Tools</a></li>
<li class="lvl1 active"><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>Smart Tools</h1>
<p>These tools use artifficial intelligence and can save you a lot of time.</p>
<img src="https://blog.photopea.com/wp-content/uploads/2017/03/healing_tools.png" />
<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/shbrush.png" />Spot Healing Brush</h2>
<p>Spot Healing brush lets you remove objects and unwanted artifacts from pictures.
Simply draw over an unwanted area, just like you do with a Brush tool, and release the mouse.
After that, the area, that you drew over, will be "forgotten" and replaced with some appropriate content, that surrounds the area.</p>
<p>For example, when you have a sandy beach and there is a stone in the middle,
you draw over that stone and it will be replaced with sand.
If you have a field with yellow flowers and a single red flower, you draw over the red flower and it will be replaced by a yellow flower.
You can "heal" the skin, remove scratches from old photographs etc.</p>
<p>You would have to use Clone Stamp for several minutes to achieve a similar result.
Spot Healing Brush usually takes 1 to 5 seconds. In extreme cases, it may take up to 10 seconds to fill the area
(when the area, more than 50% of the image area should be healed).</p>
<p>Below, you can see the original image, the spot, that is being healed,
the result from Photopea and the result from Adobe Photoshop.
We believe, that Photopea produces better results, than Adobe Photoshop (but it also takes more time).</p>
<a href="https://blog.photopea.com/wp-content/uploads/2017/03/asia.jpg" ><img class="fullw" src="https://blog.photopea.com/wp-content/uploads/2017/03/asia.jpg" /></a>
<a href="https://blog.photopea.com/wp-content/uploads/2017/03/beach.jpg"><img class="fullw" src="https://blog.photopea.com/wp-content/uploads/2017/03/beach.jpg" /></a>
<a href="https://blog.photopea.com/wp-content/uploads/2017/03/cow.jpg" ><img class="fullw" src="https://blog.photopea.com/wp-content/uploads/2017/03/cow.jpg" /></a>
<h2><img class="inline" src="../img/tools/hbrush.png" />Healing Brush</h2>
<p>Using a Healing brush is the same as using Clone Stamp. The only difference is, that the cloned content is adapted to the surrounding after releasing the mouse.</p>
<h2><img class="inline" src="../img/tools/patch.png" />Patch</h2>
<p>With a patch tool, you first have to create a selection over an area that you want to be replaced.
Then, you can drag that selection to another place, to choose the source of cloning.
And again, the area is adapted after releasing the mouse.</p>
<p>With the Spot Healing Brush, you only choose an area that should be healed. For next two tools, you have to choose both that area,
and the source, from which the new image content should be taken (similar to a Clone Stamp).</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>

157
tools/Open-Photopea/learn/creating-selections.html
Unescape View File

@ -0,0 +1,157 @@
<!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 - Make Selections</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 active"><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>Creating Selections</h1>
<p>There are many ways to create selections. Designers often need to select thousands or even millions of pixels.
Creating the necessary selection may take a lot of time. It is very useful to learn about all the tools, to be able to create selections effectively.</p>
<p>The basic operation is selecting <b>all pixels</b> (Select - All or Ctrl + A).
Another useful operation is to create a selection according to the transparency of some layer.
Hold the Ctrl key and click on the thumbnail of a layer to create such selection.</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/rselect.png" />
<img class="inline" src="../img/tools/eselect.png" /> Rectangle Select, Ellipse Select</h2>
<p>These tools allow you to create rectangular selections (or ellipse selections). Simply click and drag the mouse to create the selection.</p>
<h2><img class="inline" src="../img/tools/lasso.png" />Lasso</h2>
<p>Lasso tool allows you to draw selections by hand. Simply click and drag the mouse around the object, that you want to select.
It can be useful to zoom in, to be more precise.</p>
<h2><img class="inline" src="../img/tools/plasso.png" />Polygonal Lasso</h2>
<p>Polygonal lasso allows you to draw a polygonal selection. Simply click on the image to add the new corner of a polygon.
Press Delete to remove the last corner. Double-click (or hit Enter) to finish the selection.</p>
<h2><img class="inline" src="../img/tools/mlasso.png" />Magnetic Lasso</h2>
<p>Magnetic lasso is a smart tool for making selections. It is very similar to the standard lasso, but it "sticks" to edges of objects.</p>
<p>Click anywhere to add the first point, then move the mouse along the edge to draw the selection. Control points will be added along the selection.
Magnetic lasso tries to find the most appropriate path from the last control point to the current position of the mouse.
Press Delete to remove the last control point, or click to add the control point manually (to force Magnetic lasso to go in a specific way).
Double-click (or hit Enter) to finish the selection.</p>
<h2>Combining selections</h2>
<p>When you create a new selection, it can either replace the old one, or it can be <b>combined</b> with the old one.
Each selection tool has several parameters in the top menu, which define the way, how two selections are combined.
There is the default <b>replace</b> mode (to replace the old selection), <b>union</b> mode (to connect two selections together),
<b>subtract</b> mode (to remove the new selection from the old one), <b>intersect</b> mode (to select only pixels, that are in both selections)
and <b>XOR</b> mode, which corresponds to the union, while subtracting the intersection.</p>
<img src="https://i.imgur.com/7ciDxwm.png" />
<p>These modes allow you to create selections in multiple steps. E.g. selecting the main area with lasso tools,
then adding and subtracting small pieces to make it perfect.</p>
<p>Selection tools also have a <b>feather</b> parameter, which will apply feather right after the selection is finished.
Many designers create all selections with a small blur, to avoid sharp edges between selected and unselected areas.</p>
<p>When any selection tool is active, you can press the mouse inside the current selection and drag it to move that selection.
So e.g. if you made an elliptical selection of the correct size, but you missed its position by several pixels,
just click and drag it to the new place. This is possible with the <b>replace mode only</b> (e.g. if you had the subtract mode,
clicking and dragging inside an existing selection would draw a new ellipse, that would be removed from the current selection).</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>

159
tools/Open-Photopea/learn/free-transform.html
Unescape View File

@ -0,0 +1,159 @@
<!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 - Free Transform</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 active"><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>Layer Transformation</h1>
<p>We already know, how to add and delete layers, how to move them or change their opacity.
Another essential operations is scaling (making the object bigger or smaller) or rotation.</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/transform.png" />Free Transform</h2>
<p>Free Transform is the basic tool for doing transformations. It works as any other regular tool, but it is not present in the toolbar.
You can enable it by clicking Edit - Free Transform, or Alt + Ctrl + T.</p>
<p>When you enable Free Transform, the transformation will be applied to the layers, that are currently selected,
i.e. to the same layers (or their parts), which would be moved by the Move tool at that moment.
As you enable it, the transformation rectangle will appear around the transformed content.
It has four control points on corners, four control points on edges and the rotation center in the middle.</p>
<img src="https://i.imgur.com/Bp8uU9r.png" />
<p>Press and drag inside the rectangle to move it. Press and drag outside the rectangle to rotate it.
Press and drag its corners to change its size. Press and drag its edge to scale it horizontally or vertically.
When the Ctrl key is down, press and drag the edge to <b>skew</b> the content.
</p>
<p>Besides moving the rectangle, you can set transformation parameters directly in the top menu.</p>
<img src="https://i.imgur.com/i4QAQSt.png" />
<p>When the Free Transform is enabled, the environment is locked and you can not do anything else.
Once you finish the transforming, confirm it or cancel it using buttons in the top menu.
You can also confirm it with the Enter key, or cancel it with the Escape key.</p>
<h2>Perspective transform</h2>
<p>Scaling, rotating and skewing the content may be not enough. Imagine, that you need to put your image on a flat surface,
that is viewed from the side. The edge, that is near, must be longer, and the edge, that is far, must be shorter.</p>
<img src="https://blog.photopea.com/wp-content/uploads/2017/01/distort.jpg" class="fullw" />
<p>You can do it with the <b>perspective transform</b>. Just hold Ctrl key and drag corners: you will be able to move each corner separately, to achieve the 3D effect.</p>
<h2>Warping</h2>
<p>Perspective transform may let us do a 3D transformation of an image, but it is still not enough in some cases.
Sometimes, we may want to place an image on the surface, which is not flat (a cylinder or a ball).
In these cases, we would like to "bend" the image into a more interesting shape.</p>
<p>Warp allows us to bend the rectangular area using 16 control points.
There are four control points for the location of corners, each corner has two control points
for the direction of edges near that corner (8 more points)
and there are four control points for the center of the image.</p>
<img src="https://blog.photopea.com/wp-content/uploads/2017/01/warp.jpg" class="fullw" />
<p>When the Free Transform is on, there will be a "Warp" button in the top panel.
Click it to switch between a standard editing mode and a warp editing mode.
There are also several predefined shapes, such as Arch or Flag, so you don't have to move points manually.</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>

156
tools/Open-Photopea/learn/guides-grid-snapping.html
Unescape View File

@ -0,0 +1,156 @@
<!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 - Guides &amp; Snapping</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"><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 active"><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>Guides, Grid and Snapping</h1>
<p>Precise position of image elements can be very important. The basic tool, which can help us
align image elements, are <b>rulers</b>. Rulers can be enabled in View - Rulers.
But there are several other ways how to align elements precisely.</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>Guides</h2>
<p>There can be multiple guides in a PSD document. A guide is a horizontal or a vertical line,
which is displayed over the document and can help you align elements. </p>
<img src="https://i.imgur.com/ybBw1xv.png" />
<p>To add or delete a guide, select the Move tool and enable rulers. To add a guide, click on the ruler
and drag the mouse into the document. To delete a guide, click on it and drag it onto the ruler.</p>
<p>To move existing guides, click on them with a Move tool and drag them to a new location.</p>
<h2>Grid</h2>
<p>Designers often need to place some elements regularly, with an equal distance between them.
Instead of adding many guides with the same spaces between them, we can use the <b>grid</b>.
A regular grid will be displayed over your document, which can help you align other elements.</p>
<img src="https://i.imgur.com/tDbXcfB.png" />
<h2>Pixel Grid</h2>
<p>The Pixel Grid draws a grid with one pixel gap. It is visible only after zooming in close enough.
When an image area has a constant color, the Pixel Grid helps you see the borders between pixels (can be useful for pixel art).</p>
<p>Guides, Grid or Pixel Grid can be turned off or turned on using View - Guides, View - Grid or View - Pixel Grid.
The size of the grid can be changed in Edit - Preferences. Note, that guides are related
to a specific document and can be different in each document, while the same grid is displayed over all documents.</p>
<h2>Snapping</h2>
<p>Placing elements precisely on the guide (or on the grid) can be hard. We may need to zoom in
and move the object several times, until it is on the right spot.</p>
<p><b>Snapping</b> can solve this problem. Whenever your object is near the guide (e.g. closer than 5 pixels),
it is "snapped" to that guide, i.e. its location is set to the location of that guide.
You don't have to be so precise, Photopea finds the nearest guide and moves the object for you.</p>
<p>Snapping can be enabled or disabled using View - Snap. You can snap to different things, such as guides,
grid, document bounds etc. (take a look into View - Snap To). But with snapping, you are less flexible, e.g.
when you want to place an object close to the guide, but not exactly on it.
It is useful to disable snapping in such cases.</p>
<p>Snapping can be used with all tools, where you would expect it:
Move tool, Free Transform, Crop tool, selections, tools for editing vector graphics etc.</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>

129
tools/Open-Photopea/learn/image-size.html
Unescape View File

@ -0,0 +1,129 @@
<!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>

123
tools/Open-Photopea/learn/index.html
Unescape View File

@ -0,0 +1,123 @@
<!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 - Introduction</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 active"><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"><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>Introduction</h1>
<p>Photopea is an advanced image editor, which can work with both raster and vector graphics.
You can use it for simple tasks, such as resizing images, as well as complex tasks, such as designing webpages,
creating illustrations, processing photographs and more.</p>
<p>This website will teach you how to use Photopea <b>step by step</b>. We will start with basic tasks
and gradually progress to more complex features. The chapters (on the left) have been organized,
such that each chapter uses only the knowledge from previous chapters, so you can learn effectively and efficiently.</p>
<h3>Colors</h3>
<p>Right now, Photopea works with the sRGB color space (the basic color space for the web), with the 8-bit color depth.
All exported files use sRGB, too.</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>Starting and using Photopea</h2>
<p>Photopea editor works in a web browser. It can be started by going to <a href="../index.html">www.Photopea.com</a>.
Photopea can run on any device (desktop, laptop, tablet, phone or any other computer), but for the best comfort,
we recommend having a big screen, a precise pointing device (a mouse or a stylus) and a keyboard.</p>
<p>Photopea runs completely in your device, just like Sketch or Photoshop do. It does not upload any of your files to the internet.
You can load Photopea.com, disconnect from the internet and keep using it completely offline.
None of your files ever leaves your computer.</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>

165
tools/Open-Photopea/learn/layer-comps.html
Unescape View File

@ -0,0 +1,165 @@
<!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 - Layer Comps</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"><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 active"><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>Layer Comps</h1>
<p>Imagine, that you want to have three versions of your project.
The first version should have a red background and some buttons at the top.
The second version should have a green background and the same buttons on the bottom.
The third version should have a blue background and the same buttons on the side.
Each background and each button is in a separate layer.
</p>
<p>One way to do it is to prepare the first version and put it all into a new folder.
Then, you can duplicate the whole folder of layers and prepare the second version
(rearrange buttons, hide the red background and unhide the blue background).
Then you can duplicate one more time and prepare the third version.</p>
<p>Such approach has many disadvantages. If you decide to edit one of buttons, you would have to
edit all three copies of it. Duplicit content also makes PSD files larger.</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>What is Layer Comp?</h2>
<p>The layer comp is an object, which stores "the state" of a PSD document.
Precisely, it stores the visibility, the position and the appearance
(opacity, blend mode, layer style) of each layer.</p>
<p>To solve the previous task, we could arrange layers in all three ways and create a Layer Comp for
each arrangement. We can switch between layer comps later. Switching layer comps
performs the change of visibility, position and a style to a previously stored value in a signle click.</p>
<p>Each layer comp has the name and three flags: <b>Visibility, Position and Appearance</b>.
Each flag can be enabled or disabled. When some layer comp is activated, the change will be
performed according to these flags.</p>
<p>For example, you are making a collage with animals. You want to be able make only birds visible.
Also, you want to be able to make only brown animals visible.
Splitting animals into three folders Birds, Brown and the Rest is not possible (because some birds
are brown). You can create layer comps Birds and Brown, and enable just the Visibility flag on these comps.
Later, if you move animals around and switch to Birds, only the visibility of layers will be changed,
while the position (an the style) will be preserved.</p>
<h2>Layer Comps Panel</h2>
<p>Management of Layer Comps is available through the Layer Comps panel. You can open that panel
using Windows - Layer Comps.</p>
<img class="fullw" src="https://i.imgur.com/lBkdjJs.png" />
<p>At the top, there is the <b>Last Document State</b>, which stores the last document state.
Each item has the Apply button on the left. The button contains a checkmark <b>✓</b> when that layer comp is applied,
or the dash otherwise. You can switch between layer comps (or the last document state) by clicking this button.
</p>
<p>You can select layer comps in the panel by clicking on their names, without actually applying them.
Once a layer comp is selected, you can delete it by clicking the bin button, or update it by clicking the update button.
You can also create a new Layer Comp by clicking the New button.</p>
<p>You can rename any layer comp by double-clicking its name, typing a new name and hitting Enter.
Each item also has three buttons, which you can use to switch the Visibility, Position and Appearance flags.
</p>
<p>When you apply a specific layer comp and then start editing the document,
the current state (created by the Layer Comp)
will become the Last Document State and all your changes will be performed within that Last Document State.
If you want to make changes to some Layer Comp, edit the document first (inside the Last Document State),
then select the comp in the panel and press the Update button.</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>

127
tools/Open-Photopea/learn/layer-manipulation.html
Unescape View File

@ -0,0 +1,127 @@
<!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 - Layer Editing</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 active"><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>Layer Manipulation</h1>
<p>Photopea offers you many ways to manipulate layers. You can move them, rotate, bend etc.</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/move.png" />Move Tool</h2>
<p>The Move tool is the basic tool for moving layers and their parts. It is the first tool in the toolbar.
It can be enabled temporarily by pressing Ctrl key (after releasing Ctrl, you will return to your previous tool).
By default, it will move all layers, that are currently selected (in the Layers panel).
Note, that it is enough to select just the folder, to move all its content.</p>
<p>If you select just the mask of the layer, and that mask is not linked to the main content, the Move tool will move the mask only.
Similarly, you can move only the main content, without moving the mask.</p>
<p>When the Move tool is active, you can move object also with cursor keys ("arrows") on your keyboard.
One keypress will move the content by one pixel. If you hold Shift, content will be moved in ten pixel steps.</p>
<p>The Move tool has the <b>auto-select feature</b>, which can be enabled in the top menu, or temporarily by holding Ctrl key.
With auto-select enabled, you can press anywhere in the image, and Photopea will automatically detect the closest layer under your cursor,
and make it selected (in the Layers panel). This way, you don't have to select layrs manually in the Layers panel, but it is enough to click on them.
Of course, if some layer is completely covered by another layer, you can not select it this way.</p>
<h2>Aligning objects</h2>
<p>Sometimes you want to align two or more layers together (e.g. so they all have centers at the same point,
or to get their upper edge to the same height). Just select multiple layers and use <b>one of six buttons</b>
in the top menu of the Move tool, to align these layers.</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>

142
tools/Open-Photopea/learn/layer-styles.html
Unescape View File

@ -0,0 +1,142 @@
<!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 - Layer Styles</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 active"><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>Layer Styles</h1>
<p>Designers often need to add some "common" effect to an image, such as <b>stroke</b>, <b>drop shadow</b> or <b>outer glow</b>.
Creating such effects manually (e.g. drawing the stroke with a Brush tool) can be hard.
And once you change the image, the effect has to be redrawn manually again.</p>
<p>Photopea can add such effects automatically for you through <b>Layer Styles</b> (also called Layer Effects).
Each layer (a regular layer, a text layer, even a folder) can have a list of styles attached to it.
Each style has a large set of parameters (e.g. for a Stroke, it is the thickness, the color, the opacity etc.).
These styles are redrawn automatically, when the layer is modified. You can also change their parameters or disable them at any time.
Styles do not modify the content of the layer, but they are added automatically to the final image.</p>
<p>When a layer has styles applied to it, you can see the list of its styles in the Layers panel, right under that layer.
The list of styles can be folded and unfolded using the arrow on the right side.
Each applied style can be enabled or disabled using the eye icon.</p>
<img src="https://i.imgur.com/MbS29Wz.png" />
<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>Add Styles</h2>
<p>Styles are added and managed inside the <b>Layer Styles</b> window. Double-click the layer to see that window,
or right-click the layer and choose Blending Options.</p>
<img src="https://i.imgur.com/YPZVLv2.png" style="width:75%" />
<p>You can see all available layer styles (effects) in the left part of the Layer Styles window.
Click the checkbox of each style to enable it (or to disable it). When you click the name of that style,
style parameters will be opened in the center.</p>
<p>Once you are done with editing layer styles, you can confirm your changes by clicking the OK button in the right part of the window.</p>
<h2>Delete Styles</h2>
<p>To delete styles, right-click the layer and choose Layer Style - Clear, or drag-and-drop a style item to the garbage icon (bottom right corner of the Layers panel).</p>
<h2>Load and save Styles</h2>
<p>Photopea lets you load and save styles. Click "Define New" to add a current style to a style gallery.
Click the style thumbnail (under the "Define New" button) to open a style gallery. Now, you can select a style, that you want to apply to a layer.
You can also click the little arrow next to a gallery, and export current styles (or open existing styles) as .ASL file.</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>

178
tools/Open-Photopea/learn/layers.html
Unescape View File

@ -0,0 +1,178 @@
<!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 - Layers</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 active"><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>Layers</h1>
<p>Each PSD document consists of <b>layers</b>. The layer represents some part of the image.
It is usually an area filled with transparent, partially transparent or opaque pixels.</p>
<p>Layers are rendered one on top of another, to create the final image.
You usually edit just one layer at a time. Changing (moving, rotating, drawing into) one layer does not influence other layers.</p>
<img src="https://i.imgur.com/34MoKlQ.png" class="fullw" />
<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>Layers panel</h2>
<p><b>Layers panel</b> is the main place for working with the layer structure of the document. You can find it in the sidebar on the right.
It cotnains the list of all layers and their thumbnails.
Layers at the bottom of the list are the layers "in the back", while layers at the top are the layers "in the front".</p>
<p>When we have many layers, we need to choose one, wich we want to work with.
A layer can be <b>selected</b> simply by clicking on it (on its name or on its thumbnail) in the Layers panel.</p>
<p>Sometimes we need to select multiple layers at the same time. E.g. if we want to rotate all of them by the same angle, or delete them all at once.
When one or more layers are selected, hold the Ctrl key and click on other layers, to add them to the selection,
or click on already selected layers to unselect them.</p>
<h2>Folders of layers</h2>
<p>When we have hundreds or even thousands of layers in our document, working with them in the Layers panel can be very hard.
We would need to scroll the list for a long time to find a specific layer. But there is a solution.</p>
<p>Photopea (as well as many other image editors) allows you to create <b>folders of layers</b>. You can put related layers
inside one folder. Folders can contain other folders. The folder can be folded and unfolded, just like the folder in the file system of your computer.</p>
<img src="https://i.imgur.com/1TcORWo.png" />
<p>When you select a folder (e.g. by clicking on it), all its content is also selected (even though it is not highlighted in the panel).
By selecting and moving / rotating / deleting one folder, you also move / rotate / delete all the content of that folder.</p>
<h2>Basic layer properties</h2>
<p>There are several basic properties of the layer, that you can change in the Layers panel.
The main property is the <b>visibility</b>, which you can switch by clicking the eye icon of a layer (or a folder).
When some layer is selected, you can edit the <b><a href="https://en.wikipedia.org/wiki/Blend_modes">blend mode</a></b>,
the <b>opacity</b> and the <b>layer lock</b> of that layer at the top of the Layers panel.</p>
<p>Each layer has the name, which can help you understand the sturcture of large documents.
Double-click the name of the layer, then you can enter the new name. After you type a new name,
press Enter to confirm it, or Escape to return to the previous name.</p>
<h2>Changing the structure</h2>
<p>You can drag and drop layers inside the Layers panel. This way, you can reorder layers (e.g. put the layers from the back to the front),
place layrers into folders (or take them out of folders), put a folder into another folder etc.
By selecting multiple layers (folders), you can drag all of them at the same time.</p>
<p>You can find several basic buttons at the bottom of the Layers panel.</p>
<img src="https://i.imgur.com/ote9014.png" />
<p>The <b>garbage bin</b> button lets you delete all selected layers.
The <b>New Layer</b> button will add a new empty layer on top of the current layer (the one that is selected).
The <b>New Folder</b> button will add a new empty folder on top of the current layer. The last button creates the raster mask on the current layer.
Similar options are also available by clicking the <b>Layer</b> button in the menu at the top, or by right-clicking a specific layer in the Layers panel.</p>
<p>Another useful operation is <b>duplicating</b> the layer (right-click - Duplicate, or Ctrl+J).
You can also duplicate layers between different documents (right-click - Duplicate into).
Another convinient way to duplicate layers is to drag them to "another panel" with a Move tool.
Choose a Move tool, click on the layer (in the workspace),
drag it over the label of another document and wait until documents are switched.
Now, you can move the layer iside this second document and release the mouse.
</p>
<img src="https://i.imgur.com/cloz3K1.png" />
<p><b>Merging</b> multiple layers into a single layer is also useful (right-click - Merge down or Merge layers).</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>

156
tools/Open-Photopea/learn/masks.html
Unescape View File

@ -0,0 +1,156 @@
<!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 - Masks</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 active"><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>Masks</h1>
<p>We already know layers. They are building blocks of our document.
Sometimes, we need to hide a part of the layer (so it is not shown in the result), without deleting the actual pixel data.
In Photopea (and many other editors), it can be done with <b>masks</b>.</p>
<p>We can think of a layer mask as an extra image, attached to the layer. It has the same size
as that layer (so each pixel of the mask has a corresponding pixel in the layer). The mask does not have colors -
it can be back and white only. The black color means, that corresponding pixels of the layer are hidden, while the white color means,
that corresponding pixels of the layer are preserved. Precisely, masks can have many shades of gray,
and produce many levels of transparency.</p>
<img src="https://i.imgur.com/J4HHczM.png" class="fullw" />
<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>Working with masks</h2>
<p>There are <b>raster masks</b> and <b>vector masks</b> (the difference will be explained later).
Each layer can have at most one raster mask and at most one vector mask. Folders can also have masks
(in that case, the mask is applied to the whole content of the folder).
We can add a new mask to the active layer using Layer - Raster Mask - Add (or Layer - Vector Mask - Add).
Masks can be deleted through Layer - Raster Mask - Delete (or Layer - Vector Mask - Delete).</p>
<p>Thumbnails of new masks will appear next to the thumbnail of the layer.</p>
<img src="https://i.imgur.com/MPZrmpF.png" />
<p>We can <b>enable</b> or <b>disable</b> each mask. When the mask is disabled, it has no effect on the image.
It can be enabled again at any time. Right-click the thumbnail of the mask and choose Enable / Disable,
or simply click the thumbnail of the mask with the Shift key pressed.</p>
<p>Any change to the layer (e.g. drawing with a Brush tool, rotation etc.) can be applied to the mask, too.
Click the main thumbnail, or the thumbnail of the mask, to choose, what you want to edit.</p>
<p>Masks can be <b>linked</b> to the main content of the layer. It means, that when you move the main content, the mask is moved too, and if you move the mask,
the main content is also moved. The link is represented by the chain icon on the left side of the thumbnail of the mask (each mask has its own link).
Click the chain icon to link or unlink the mask.</p>
<h2>Properties of the mask</h2>
<p>When you select a mask and open the <b>Properties</b> panel in the sidebar (or double-click the thumbnail of the mask),
you can see some properties of the mask. The <b>Density</b> specifies the "opacity" of the mask (100% corresponds to a regular masking,
0% corresponds to no mask, values in between can be useful too). The next property is <b>Feather</b>, which adds a blur to the mask
(i.e. it removes sharp edges between white and black areas of the mask).
Note, that these properties do not change the actual content of the mask.
They are used automatically, when the mask is applied to the image.</p>
<h2>Raster and Vector masks</h2>
<p>There are two kinds of masks: raster masks and vector masks. The difference is in the way how each kind is created and represented.</p>
<p>The <b>raster mask</b> is a simple grayscale image, that consists of pixels. Each tool, that can be applied to a regular layer (e.g. Brush, Eraser, Smudge, fill of the selection etc.)
can also be applied to the raster mask, with the only difference, that all colors will become shades of gray.</p>
<p>The <b>vector mask</b> consists of vector shapes, that are made of Bézier curves. You create it and work with it as with a vector object
(by editing Bézier curves). These vector shapes are internally converted to a grayscale image and applied to the layer automatically.
You can learn more in the <a href="vector-graphics.html">chapter about vector graphics</a>.</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>

116
tools/Open-Photopea/learn/moving-selected-data.html
Unescape View File

@ -0,0 +1,116 @@
<!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 - Move Selected Data</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 active"><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>Moving Seleced Data</h1>
<p>Once you have a selection, and a regular layer is active in the Layers panel, you can work with it in many ways.
You can <b>copy</b> (Edit - Copy or Ctrl + C) or <b>cut</b> (Edit - Cut or Ctrl + X) the selected area.
After you <b>paste</b> it with Edit - Paste or Ctrl + V (you can even paste it into another document), it will be inserted as a new layer.</p>
<p>When you move a layer (with the Move tool) without any selection, the whole layer is moved.
But when you move it with some selection present, the behavior is more interesting.</p>
<p>As you start moving the selected area of the layer, this area is <b>cut</b> (or <b>copied</b>, if you hold the Alt key) out of the layer and moved along the mouse cursor.
It behaves as a separate temporary <b>layer inside a layer</b>. As soon as you deselect, the moved area is combined with the rest of the layer.</p>
<img src="https://i.imgur.com/05GksKb.png" />
<p>This is one of the fastest ways to manipulate parts of a layer. You can switch temporarily from any selection tool
to the Move tool just by pressing the Ctrl key, so no clicking in the Toolbar is required.
Everything happens within a single layer, so you don't have to click into the Layers panel.
Using mouse is not required at all, because once the Move tool is on (after pressing Ctrl),
you can move objects with cursor keys on the keyboard.</p>
<p>You can even apply Free Transform to the selected part of the layer. The part will be cut out and transformed,
and will remain separated after the transformation (still within the single layer), until you deselect it.</p>
<p>Note, that all these operations can also be performed on raster masks.</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>

147
tools/Open-Photopea/learn/navigation.html
Unescape View File

@ -0,0 +1,147 @@
<!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 - Navigation</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 active"><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"><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>Navigation</h1>
<p>We already know, how to open and save files in Photopea. The next step is viewing the image and its parts comfortably and
moving between different areas of the image.</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/zoom.png" />Zoom tool</h2>
<p>The Zoom tool allows you to zoom in and zoom out at different places of the image.
Just select the tool (in the toolbar on the left) and click on the image.
You can switch between zooming in and zooming out in the top panel, or by pressing the Alt key on the keyboard.
You can also click and drag to the right to zoom in, or drag to the left to zoom out.</p>
<p>There is a <b>quick mode</b> for the Zoom tool. By pressing <b>Ctrl + Spacebar</b>, you will switch to the Zoom tool, which you can use in a regular way.
E.g. you can add or release Alt to switch between zooming in and zooming out. After releasing the keyboard keys, you will return back to the previous tool.
It is one of the fastest ways to zoom.</p>
<h2><img class="inline" src="../img/tools/hand.png" />Hand tool</h2>
<p>The Hand tool allows you to move the view to different parts of the image. Choose the Hand tool in the toolbar, then click and drag on the image to
navigate to other places.</p>
<p>There is a <b>quick mode</b> for the Hand tool. Press the <b>Spacebar</b> to switch temporarily to the Hand tool.
Then release the Spacebar to go back to the previous tool.</p>
<p>Zooming and panning is also possible with a mouse wheel. Turn the mouse wheel to pan vertically, or add Ctrl to pan horizontally.
Hold the Alt key to zoom with the mouse wheel instead of panning.</p>
<h2>Rulers</h2>
<p>You can enable Rulers in Photopea (View - Rulers, or Ctrl + R), which will help you navigate inside the document
and to estimate the size of objects.</p>
<h2>History of actions</h2>
<p>Your work in Photopea is represented as a <b>sequence of actions</b>, that are applied to a document.
Each action performs some change to the document, and creates a new state of the document.
This list of actions is shown in the History panel. New actions will appear at the bottom of the list.</p>
<p>Photopea allows you to withdraw your editing and return to previous states.
Clicking the name of an action in the History panel will get you back to the previous state.
Also, you can move forward in the history by clicking last actions (at the bottom of the list).</p>
<p>Another way to return to previous or future states is by choosing Edit - Step Forward (Shift + Ctrl + Z) or Edit - Step Backward (Alt + Ctrl + Z).
You can also use Edit - Undo / Redo (Ctrl + Z) to switch between last two states (it does not allow you to go "deeper" in the history).
</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>

143
tools/Open-Photopea/learn/opening-saving.html
Unescape View File

@ -0,0 +1,143 @@
<!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 - Open and Save</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 active"><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"><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>Opening and Saving files</h1>
<p>Digital graphics is usually stored as a <b>raster</b> image, or a <b>vector</b> image.
There are many formats for saving and distributing different types of graphics.
Let's mention <b>PNG and JPG</b>, which contain a single-layer rectangular raster image (a grid of pixels).</p>
<p>Image editors usually have their own file formats, that besides raster and vector graphics contain additional information,
which can be useful for changing the image in the future. For example, when we add a text into an image and save it as a PNG,
letters would become pixels and such text would be hard to change
(we would have to guess the font family, character size, the original image behind the letters would be lost).</p>
<p>Photopea uses the <a href="https://en.wikipedia.org/wiki/Adobe_Photoshop#File_format">PSD format</a> as the main format
for storing image documents with an additional information. It was designed for the use in Adobe Photoshop and became very popular since then.
All files, that you open in Photopea (such as PNG, JPG, Sketch) are converted to PSD (when they are not PSDs already). When you finish editing,
the result can be saved from the PSD to other formats.</p>
<p>Photopea also supports many kinds of resources, that can be used for editing the image.
You can load your own brushes, gradients, fonts and more, the same way you open images.</p>
<h2 id="opening">Opening files</h2>
<p>There are several ways of opening files. The standard way is through the <b>Open dialog</b> (File - Open).
You can also paste images (from the system clipboard) simply by pressing Ctrl + V.
Another way is to open files by dragging them from your local system and dropping them into the Photopea environment inside a web browser.</p>
<p>When you have no documents open, dropped files will be opened in a regular way.
When some documents are already open in Photopea, you can drop new document into the main area of the current document.
The new file will be inserted into the current document as a new layer (a Smart Object layer).</p>
<p>When some documents are opened, you can drop new files into the top bar of the main area (which contains the list of opened documents).
Then, new files will be opened separately.</p>
<img src="https://i.imgur.com/UNQ83Wm.png" class="fullw" />
<p>There is an experimental feature, which allows you <b>take pictures</b> using the camera of your device right inside Photopea. Press File - Take a picture to take a picture.</p>
<h2 id="saving">Saving files</h2>
<p>You can save your work as a PSD file (to preserve the whole structure of the document) using <b>File - Save as PSD</b>.
You can also save your file for the distribution on the web (through JPG, PNG, SVG, PDF and other formats) using <b>File - Export - PNG</b>, JPG etc.</p>
<p>The Save for Web window lets you choose the otuput format. You can also enter the resolution of the output image.
Now, you can already use Photopea to resize images (File - Open, File - Export - Format, enter the new size ...).</p>
<p>When a file comes from your device, the <b>File - Save</b> option will not wokr
(Photopea is just a website, and it can not rewrite files in your device) - you have to use Save as PSD instead.
But if you opened your file from Google Drive, or as a Smart Object, or from a server (using the API),
File - Save will save your file to a correct destination.</p>
<p>The <b>Move tool</b> (the first tool, that is enabled when you start Photopea) lets you quickly export specific parts of the image.
Right-click any object and press Get PNG or Get SVG. Or select multiple layers and press Get PNG / Get SVG in the top menu.</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>

173
tools/Open-Photopea/learn/other-layers.html
Unescape View File

@ -0,0 +1,173 @@
<!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 - Other Layers</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 active"><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>Other Layers</h1>
<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>Fill Layers</h2>
<p>There are two types of fill layers: <b>solid color fill</b>, <b>gradient fill</b> and <b>pattern fill</b>.
A fill layer has a parameter (e.g. the gradient) and it will produce a full-width rectangle,
that is filled with the corresponding color, the gradient or the pattern.</p>
<img src="https://i.imgur.com/aK7HutT.png" />
<p>Of course, there are many ways how to produce a layer filled with the color the gradient or the pattern.
E.g. you can create an empty layer and use the Brush tool to paint it with the color.
Fill layers have several advantages. They have a special thumbnail, which helps you see the purpose of the layer.
Fill parameters (the color, the gradient or the pattern) can be easily modified. When you change the size of the canvas,
the content of fill layers is regenerated automatically to fill the new canvas.</p>
<p>Press Layer - New Fill Layer in the top menu to add a new fill layer. Parameters of the fill can be chaged in the Properties panel
(the panel will show up after double-clicking the thumbnail of the fill layer).</p>
<h2>Adjustment layers</h2>
<p>Adjustment layers are the special kind of layers. They do not contain any image data, but they perform
a color adjustment to the content below them.</p>
<p>Imagine that you have a photo and you want to make it black and white (grayscale).
Photopea gives you many ways to change the actual pixels of the photo layer, to make them grayscale.
But with adjustment layers, you can make the photo look back and white, without actually cahnging pixels of the photo layer.</p>
<p>You could simply add a Hue / Saturation adjustment layer on top of the photo layer, and set the Saturation parameter to zero.</p>
<img src="https://i.imgur.com/pHcDiXI.png" />
<p>Press Layer - New Adjustment Layer in the top menu to add a new adjustment layer. Parameters of the adjustment can be changed in the Properties panel
(the panel will show up after double-clicking the thumbnail of the adjustment layer).</p>
<p>Just like any other layers, fill layers and adjustment layers can have their own blend mode, opacity, masks etc.
The mask of an adjustment layer will cause, that the adjustment will be performed only to those areas of the content below, which are white inside the mask.</p>
<h2>Rasterizing layers</h2>
<p>Each layer must have some pixel data, that will be used for combining the layer with other layers, to create the final image.
But these pixel data can be generated in many different ways.</p>
<p>We can separate layers inside PSD files into two different groups: <b>direct</b> ("regular") raster layers and <b>undirect</b> raster layers.
For direct raster layers, the pixel information is the only information we have.
For undirect raster layers, the pixel information is generated from some other information.</p>
<p>Undirect layers are e.g. Smart Objects (their pixels are generated from the source image + position + transformation),
fill layers (pixels generated from the fill parameters), text layers (pixels generated from some text and its parameters).
We can not do pixel-specific operations on these layers (e.g. draw into them with a Brush, or blur a part of the layer with a Blur tool).</p>
<p>To convert an undirect layer into a regular raster layer, we have to rasterize it
(right-click - Rasterize, or Layer - Rasterize). Smart objects will lose the link to the source image, text layers will lose the text information,
only pixel data will remain.</p>
<h2>Clipping Masks</h2>
<p>In PSD files, any layer can have the <b>clipping mask</b> option enabled.
When it is on for some layer L, then the transparency of the layer below (let's call it K) will be used as the mask for the layer L.
In other words, botk K and L will be drawn, but only the transparency of K will be used.</p>
<p>Here we can see a text layer containing Photopea, and the photo of grass on top of it. Normally, the layer with grass would cover
the whole text. But since the grass is a clipping mask, the transparency of the text layer is used for both layers.</p>
<img src="https://i.imgur.com/9d0rWVF.png" />
<p>You can have many clipping masks, one on top of another, to create a <b>chain</b> of clipping masks.
In such case, the transparency of the first layer below them will be used for all layers in the chain.</p>
<p>Clipping Mask can be enabled or disabled for any layer by right-clicking and choosing Clipping mask,
or in the top menu: Layer - Clipping Mask, or by pressing Alt + Ctrl + G.</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>

96
tools/Open-Photopea/learn/other.html
Unescape View File

@ -0,0 +1,96 @@
<!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 - Other</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"><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 active"><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>Other</h1>
<p>This section describes other tools.</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>

143
tools/Open-Photopea/learn/refine-edge.html
Unescape View File

@ -0,0 +1,143 @@
<!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 - Refine Edge</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 active"><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>Refine Edge</h1>
<p>Natural images (photographs) may contain parts, that are very hard to select.
We can have partially transparent objects (a glass of water) or objects with a complex shape (trees, hair, fur).
Their colors are mixed with other colors in the background.</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>Refine Edge Tool</h2>
<p>Photopea offers the Refine Edge Tool, which can help you with selecting complex shapes. You can start it by choosing Select - Refine Edge,
or by clicking the "Refine Edge" button in the top panel of any selection tool.</p>
<p>Your goal is to make a <b>Trimap</b>: mark the whole image with trhee colors:<p>
<ul>
<li>Your object (Foreground) with <b>White</b> (fully visible in the result)</li>
<li>Background with <b>Black</b> (deleted in the result)</li>
<li>Uncertain areas with <b>Grey</b></li>
</ul>
<p>After you do so, Photopea will deduce the transparency of the Grey area (part of it will be added to the Foreground, the rest to the Background).</p>
<img src="https://i.imgur.com/Hi0DGyr.jpg" class="fullw" />
<p>The workspace consists of two sides. You can paint the Trimap on the left, and you will see the result on the right.
Choose the brush size and the color (White, Grey or Black) in the top left corner and paint over the image.
The result is updated after you release the mouse.</p>
<img src="https://i.imgur.com/pG233Iz.png" class="fullw" />
<p>If you start Refine Edge with no selection, the whole Trimap is Black (so just add Gray and White).</p>
<p>If you start Refine Edge with a selection, the tool will generate a Trimap for you (selected area as White, the rest as Black).
Then, just paint with Grey over the areas, that are not selected perfectly (edges of the object).</p>
<p>You can auto-generate the Grey area as a border of the initial selection (between black and white). Simply change the <b>Border</b> value in the top menu.</p>
<p>There are three modes, how the result can be used:</p>
<ul>
<li>New Layer: selected object will be inserted as a new layer</li>
<li>Raster Mask: the current layer will get a raster mask, that corresponds to the result</li>
<li>Selection: the new selection will be created, that corresponds to the result</li>
</ul>
<p>Once the selection looks well, choose the Mode and confirm it by hitting OK in the top right corner.</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>

144
tools/Open-Photopea/learn/scripts.html
Unescape View File

@ -0,0 +1,144 @@
<!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 - Scripts</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"><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 active"><a href="scripts.html">Scripts</a></li>
</ul>
</div>
<div id="content" style="width:78%;">
<div class="post">
<h1>Scripts</h1>
<p>In some cases, it is very useful to <b>automate</b> image editing.
For example, we may need to have 30 copies of the layer, and place them all into a regular grid, 5 times 6, and gradually decrease their opacity.
Or if we need to rotate by 90 degrees each layer, that contains "rotate" in its name.</p>
<p>Photopea can execute scripts written in Javascript. It is very useful to know programming and the syntax of Javascript,
however, even beginners can make simple scripts, which will do the job. You can learn how to write scripts from available demos.</p>
<p>Use the <b>Script window</b> (File - Script) to work with scripts. Here you can type (or paste) a new script,
and then click Run to execute it. Several demos are available in the top of the Script window.
Scripts can be also executed through the <a href="../api/index.html">Photopea API</a>.</p>
<img src="https://i.imgur.com/yH7MTi7.png" />
<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>Document Model</h2>
<p>Scripts allow you to access the content of the document through Javascript code.
Instead of describing a new Document model, Photopea provides an interface similar to
<a href="https://www.adobe.com/content/dam/acom/en/devnet/photoshop/pdfs/photoshop-cc-javascript-ref-2015.pdf">Adobe's scripting interface</a>.
It means, that the same scripts, that you wrote previously for Adobe Photoshop, could be used in Photopea to do the same task.</p>
<p>There is a global object <code>app</code>, which represents the application. <code>app.activeDocument</code> lets you access the active document.
A document has properties (<code>width</code>, <code>height</code>, <code>layers</code>, <code>currentLayer</code>, ...)
and methods (<code>resizeImage()</code>, <code>resizeCanvas()</code>, ...).
A layer also has properties (<code>name</code>, <code>visible</code>, <code>opacity</code>, ...)
and methods (<code>rotate()</code>, <code>translate()</code>, ...). You can learn more in the official reference or in demos.
Note, that many properties are <b>read-only</b>, you can not rewrite them directly (e.g. the width of the document - you must call resizeCanvas()).
</p>
<p>
Photopea extends the model of Photoshop by adding several new functions:
</p>
<table>
<tr><td>Document.saveToOE("png")</td><td>Converts the document into a binary file and sends the file to the outer environment (See
<a href="../api/live.html">Live Messaging API</a>).<br/>
JPG and WEBP can have a quallity (0 to 1) after the colon (e.g. "jpg:0.8").
PSD can have a "true" after the colon: "psd:true", to produce minified PSDs (up to 4x smaller, but take 4x longer to generate).
</td></tr>
<tr><td>Layer.convertToSO()</td><td>Converts a layer (or a folder) into a Smart Object</td></tr>
<tr><td>App.open(url, as, asSmart)</td><td>Loads an image from URL. Set <code>asSmart</code> to true to paste an image into a current document as a smart object.
<code>as</code> is ignored.</td></tr>
</table>
</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>

131
tools/Open-Photopea/learn/selections.html
Unescape View File

@ -0,0 +1,131 @@
<!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 - Selections</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 active"><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>Selections</h1>
<p>In this part, we will focus at regular layers with raster images (pixel data).
There are many tools to edit pixel data (Brush, Eraser, adjustments, filters). But we often don't want to edit the whole layer, but just some part of it.</p>
<p>The selection defines a set of pixels, that are "selected" and can be edited by tools. Precisely, it is a "map" over the whole image,
which gives each pixel the value between 0 % and 100 %. This value says, how much color of the pixel can be changed, and how much should be preserved.
Selections are not bound to layers (as masks), but there is just one selection for the whole document, which is used for every layer that you work with.</p>
<p>For example, Photopea has the Fill operation (Edit - Fill). By default, it will fill the whole layer with a foreground color.
Once you have a selection, it will fill only the selected area with that color.</p>
<p>While masks are visualized with the white and the black color (in their thumbnails), selections are visualized
right in the main area of the document with the <b>contour</b>, that is drawn between selected and unselected areas.
We can say, that operations are applied <b>inside</b> the selection, and not outside of it.
Here you can see an example of the selection, and the result, when you draw on top of it with a Brush tool.</p>
<img src="https://i.imgur.com/VHtRoMU.png" />
<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>Working with Selections</h2>
<p>Once you have a selection, there are several basic operations for changing it.
The basic operation is <b>inverting</b> the selection - it will select unselected pixels and unselect selected pixels (available in Select - Inverse).
You can <b>expand</b> the selection by several pixels
(i.e. add pixels close to the selection into the selection), <b>contract</b> it by several pixels (the opposite operation to expanding),
or <b>feather</b> - apply a blur to the selection, to make a smooth transition between 0 % areas and 100 % areas.
All this is available at Select - Modify - Expand / Contract / Feather.</p>
<p>Selected pixels can be Cut, Copied or Pasted (Edit - Cut / Copy / Paste, or Ctrl + X / C / V). This even works between different documents.</p>
<p>Deselection (removing the selection) is possible through Select - Deselect (or Ctrl + D).</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>

140
tools/Open-Photopea/learn/smart-objects.html
Unescape View File

@ -0,0 +1,140 @@
<!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 - Smart Objects</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 active"><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>Smart Objects</h1>
<p>Designers often need to place several copies of the same object into the document
(e.g. when you want to add multiple snowflakes on the sky). It can be done by creating the first object and then duplicating it
(and moving copies to the right place).</p>
<p>There is a disadvantage in such approach. When you need to modify the object, you will need to modify each copy of the object separately.</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>Single Source</h2>
<p>PSD format offers a better solution for dealing with many copies of the same object.
The single source of the image data is created in the background (e.g. the PNG image of the snowflake), and each snowflake layer is linked to
this single source. Once the source is changed, all layers, that are linked to it, are automatically updated.
Such layers are called <b>Smart Objects</b>. A Smart Object is a type of a layer.</p>
<p>Smart Objects may be linked to the same source, but they don't have to look completely the same.
Smart Objects can have different positions and transformations (rotation, scale etc.).
And since they are different layers, they can have different opacity and the layer style.</p>
<p>Smart Objects have another advantage. When you have a regular layer, 100 x 100 pixels, and you scale it down to 10 x 10 pixels,
and then back to 100 x 100 pixels, some image information will be lost.
The Smart Object would have the image information (100 x 100 px image) stored in the background, so after scaling it down and up again,
the new image can be recalculated from the source, which never lost any data. It allows us to do <b>nondestructive editing</b>.</p>
<h2>Working with smart objects</h2>
<p>You can convert any layer (or several layers) to a Smart Object by selecting them and right-click - Convert to Smart Object.
Selected layers will be removed and inserted into a new PSD file, which will become the source of a new Smart Object, that will be added to the document.</p>
<p>Smart Object layers have a little sign in the bottom-right corner of the thumbnail.</p>
<img src="https://i.imgur.com/uycgvaL.png" />
<p>Double-click the thumbnail of the smart object to edit its source. It will be opened as a separate document.
When you finish editing the source, press File - Save. All Smart Objects, that are linked to that source, will be updated in the original document.
Duplicating the smart object would create new Smart Objects, that are still linked to the same source.</p>
<p>Let's return to our initial case. We can solve it by drawing a snowflake and converting it to the Smart Object.
Then, we can duplicate that Smart Object and move copies to different places on the sky. Once we need to change the snowflake,
we simply double-click any thumbnail of a snowflake, change the source and save it. All snowflakes will be updated.</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>

135
tools/Open-Photopea/learn/text-style.html
Unescape View File

@ -0,0 +1,135 @@
<!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 - Text Style</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"><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 active"><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>Text Style</h1>
<p>There are two kinds of style parameters: <b>Character Style</b> (e.g. text size, color, ...), which can be different for each character,
and <b>Paragraph Style</b> (e.g. text aligning, margin etc.), which is shared by the whole paragraph.</p>
<p>Character properties can be found in the Character panel (Window - Character), while Paragraph properties can be found in the Paragraph panel (Window - Paragraph).
Some basic Character and Paragraph properties can be found also in the top menu of a Type tool.</p>
<img src="https://i.imgur.com/lkyQupT.png" style="width:75%" />
<p>When the type layer is selected (in the Layers panel), you can change the style (e.g. the font family or aligning) of the whole layer.
Another option is to enter the layer and select a specific part of the text. As you change the style, it will be applied only to the selected part of the text.</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>Align</h2>
<p>Aligning of a constrained type layer is computed with respect to the sides of the rectangle.
Aligning of a free layer is computed according to the point of origin. Below, we can see a free and a constrained layer with the same three paragraphs.
The first paragraph is aligned to the left, the second is aligned to the right, and the third is aligned to the center.</p>
<img src="https://i.imgur.com/VmoLs1l.png" />
<h2>Writing directions</h2>
<p>When you use e.g. latin and arabic words in the same text, they direction of writing is detected automatically,
just as in any other text editor. But there is so-called <b>base direction</b>, which is necessary for the correct rendering
of bidirectional text and punctuations. You can change the base direction in the Paragraph window.</p>
<h2>Custom fonts</h2>
<p>Photopea has a huge database of royalty-free fonts. If you are using a free font, there is almost a 100% chance, that it is already available in PP.</p>
<p>For all other fonts, Photopea allows you to open them (TTF or OTF files) the same way you open any other file (File - Open, or drag-and-drop).
They will be added to the end of the font list and used, when some type layer needs them.</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>

141
tools/Open-Photopea/learn/text.html
Unescape View File

@ -0,0 +1,141 @@
<!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 - Text</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"><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 active"><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>Text</h1>
<p>Putting text into images is an essential operation of image editing.
Photopea offers a rich set of tools for working with text.
Text is stored in PSD documents inside <b>Type Layers</b>, which have a thumbnail with a capital letter T on it.</p>
<img src="https://i.imgur.com/Z8evhPQ.png" />
<p>There are two types of Type layers:</p>
<ul>
<li><b>Free text</b> - defined by the point of origin. The text starts at that point and continues on a single line. Lines have to be broken manually (by hitting Enter).</li>
<li><b>Constrained text</b> - defined by the rectangle. Words are wrapped automatically into multiple lines to fill the rectangle.</li>
</ul>
<img src="https://i.imgur.com/4yNOt2D.png" />
<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>Creating a Type layer</h2>
<p>The <b>Type tool</b> is used for working with Type layers: <img class="inline" src="../img/tools/htype.png" />.</p>
<p>To create a free type layer, choose a Type tool and click (press and release) the mouse at some place, which will become the origin.
To create a constrained type layer, press the mouse and drag it to draw a rectangle, then release the mouse. After creating the new Type layer, you can start typing.</p>
<h2>Editing a Type layer</h2>
<p>There are two important actions when editing type layers: <b>Entering</b> the layer and <b>Escaping</b> the layer.
To Enter a type layer, just click on it with a Type tool (newly created layers are entered automatically). After entering the layer, the environment is locked
and you can edit the layer (and nothing else). To do something else (e.g. edit another type layer), you must escape the current layer first.
</p>
<p>To escape the type layer, you must confirm or cancel your changes using buttons in the top menu.
Escaping and canceling changes is also possible with the Escape key on the keyboard.</p>
<img src="https://i.imgur.com/Yvmwyip.png" />
<p>When you have entered a type layer, many ways of editing are possible.
You can select any text with mouse, delete it, add a new text, copy and paste etc. When it is a constrained text, you can also
change the size of the rectangle by moving its corners.</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>

105
tools/Open-Photopea/learn/vector-graphics.html
Unescape View File

@ -0,0 +1,105 @@
<!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 - Vector Graphics</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"><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 active"><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>Vector Graphics</h1>
<p>Photopea has a rich set of tools to work with vector graphics. There are two ways of storing vector graphics in a PSD document:</p>
<ul>
<li><b>Vector masks</b> - any layer can have a vector mask. Just as a raster mask, vector mask defines, which part of the layer should be visible and which should be hidden.
Raster and vector masks can be enabled, disabled or edited at any time without changed the actual content of the layer.</li>
<li><b>Shape Layer</b> - a layer containing only the vector shape with a Color fill, a Gradient fill or a Pattern fill. In fact, it is just a Fill Layer with a vector mask.</li>
</ul>
<p>Below is a standard layer with a vector mask and a shape layer is beneath it.</p>
<img src="https://i.imgur.com/SaO79SZ.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>

158
tools/Open-Photopea/learn/vg-creating.html
Unescape View File

@ -0,0 +1,158 @@
<!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 - Creating Shapes</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"><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 active"><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>Creating shapes</h1>
<p>Photopea offers several tools for creating vector graphics: Pen, Free Pen, Rectangle, Ellipse, Polygon etc..
Each tool has one of three modes, which you can switch in the top menu.</p>
<img src="https://i.imgur.com/tndO7TS.png" />
<ul>
<li><b>Path</b> - adds a new path into an existing shape</li>
<li><b>Shape</b> - creates a new Shape layer</li>
<li><b>Pixels</b> - the result is rasterized immidiatelly, then combined with a current raster layer</li>
</ul>
<p>When you choose the Path mode, you can also choose the boolean operation, that will be used for new paths.</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/pen.png" />Pen</h2>
<p>This tool allows you to create paths knot - by - knot. Press in the image to add a knot.
Then drag and release to add handles, or release immidiatelly to keep handles collapsed.
Clicking again on the first knot in the path will close the path.</p>
<p>If there is one knot already selected, the new knot is added right after that knot (into the same path).
Otherwise, the new path is started, and the knot becomes the first knot in the new path.</p>
<p>The regular usage is to click to start a new path, then keep clicking to add more knots
(since each new knot is selected after adding, so the next knot is added right after it).
But you can also select some knot manually (with Direct Select) and new knots will be added after it (into an existing path).</p>
<h2><img class="inline" src="../img/tools/fpen.png" />Free Pen</h2>
<p>Click with mouse and draw some shape. Then, release the mouse. Your stroke will be converted into a smooth vector curve.
Change the Tolerance value to make a curve smoother.</p>
<h2>
<img class="inline" src="../img/tools/rect.png" />
<img class="inline" src="../img/tools/ellipse.png" />
<img class="inline" src="../img/tools/line.png" />
Specific shapes</h2>
<p>Click and drag with a mouse to draw a path with the specific geometric shape. Hold Shift to keep the proportions of the new path.</p>
<h2>
<img class="inline" src="../img/tools/cshape.png" />Custom shape</h2>
<p>With this tool, you can add a complex shape from the current gallery of shapes.
You can import your own collections of shapes in a CSH format using File - Open.</p>
<h2>
<img class="inline" src="../img/tools/pshape.png" />
Parametric Shape</h2>
<p>This tool can draw other exotic shapes, which require some parameters. You can draw <b>a Polygon, a Star, a Spiral</b> and possibly many other shapes in the future.
Each shape has several parameters, which allow you to customize the shape.</p>
<h2>Text to Shape</h2>
<p>You can convert any text layer into a vector shape layer by right-clicking it (in Layers panel) and pressing <b>Convert to Shape</b>.
Each character will become a path with knots, which you can modify manually (e.g. rotate each character by a random angle).</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>

138
tools/Open-Photopea/learn/vg-manipulation.html
Unescape View File

@ -0,0 +1,138 @@
<!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 - Editing Shapes</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"><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 active"><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>Shape manipulation</h1>
<p>To work with a shape, first, we should select the shape in the Layers panel. We can either click on the thumbnail of a vector mask, or a thumbnail of a Shape layer.
We will see the outlines of paths after that.</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/pselect.png" />Path select</h2>
<p>Path select allows us to manupulate paths within a shape. Click on the path to select it, or hold Shift to select multiple paths.</p>
<p>When one or more paths are selected, we can:<p>
<ul>
<li>move them with a mouse or cursor keys</li>
<li>delete them by pressing Delete</li>
<li>Cut / Copy / Paste paths using Edit - Cut / Copy / Paste (or Ctrl + X / C / V), even between different layers or different PSDs</li>
<li>apply Free Transform (Edit - Free Transform)</li>
</ul>
<p>We can also change the boolean operation of each path in the top menu, or reorder paths with an Up and Down button.
In case of the Shape layer, the top menu allows us to change the fill and the stroke of the shape.<p>
<h2><img class="inline" src="../img/tools/dselect.png" />Direct select</h2>
<p>Direct select allows us to manupulate knots within a shape. Click on the outline of the path to see the knots.
Then click on a knot, or hold Shift to select multiple knots. We can even select separate knots from different paths.</p>
<p>When one or more knots are selected, we can:<p>
<ul>
<li>move them with a mouse or cursor keys</li>
<li>delete them by pressing Delete</li>
<li>move the anchor or handles of a knot</li>
</ul>
<p>Double-clicking the handle will collapse it. When some handle is collapsed, double-clicking the anchor will give it back.
Otherwise, double-clicking the anchor will convert the Linked knot to Unlinked knot and vice versa.</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>

151
tools/Open-Photopea/learn/vg-structure.html
Unescape View File

@ -0,0 +1,151 @@
<!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 - The Structure</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"><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 active"><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>The structure</h1>
<p>The content of a vector mask (or a shape layer) is called a <b>Shape</b>. The Shape consists of several <b>Paths</b>.
A Path consists of multiple <b>Knots</b>. Each knot consists of three points: the <b>anchor</b> and two <b>handles</b>.</p>
<p>Here we see a shape consisting of four paths. The path on the right consists of five knots. The knot consists of an anchor (in the middle) and two handles.</p>
<img class="fullw" src="https://i.imgur.com/Ojp1HRL.png" />
<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>Path</h2>
<p>There can be several paths within a shape. Paths have a fixed order (the first, the second, the third ...).
Each path has some <b>boolean operation</b>, which defines, how the path (e.g. the fourth path) is combined with the content under it (i.e. paths 1, 2 and 3).
Boolean operations are <b>Union</b>, <b>Subtract</b>, <b>Intersect</b> and <b>Exclude</b>.</p>
<p>Here we see four shapes with two paths in each shape. The second path (the ellipse) has different boolean operations.</p>
<img class="fullw" src="https://i.imgur.com/aNkQlWi.png" />
<p>When all paths have the Union operation, their order is not important. But e.g. when some path has a Subtract operation, reordering paths may produce a different result.</p>
<p>Paths can be open or closed. Open path means, that the first and the last knot are connected with a straight line (ignoring the adjacent handles).</p>
<h2>Knots</h2>
<p>A path consists of a sequence of knots. Each two consecutive knots are connected with a curve segment, that is shaped by adjacent handles.
A knot can be <b>linked</b> (both handles are located in a line with the anchor) or <b>unlinked</b> (handles have arbitrary locations).
A linked knot guarantees the smooth curve, while an unlinked knot usually creates a corner.</p>
<p>A linked knot is visualised with a circle anchor, while an unlinked one has a square anchor.</p>
<img src="https://i.imgur.com/Ohv874p.png" />
<p>The handle of the knot is <b>collapsed</b>, when it is located at the location of the anchor point.
When all knots in a path have collapsed handles, then the path consists only of straight line segments (i.e. it is a polygon).</p>
<h2>The Look</h2>
<p>We have described the logical structure of vector graphics and the meaning of each part.
But we usually want our shapes to be filled with a specific color, or stroked with a thick line.</p>
<p>While vector masks simply hide the portion of a layer, Shape Layers have more interesting properties.
Each Shape Layer has a Fill and a Stroke value. Fill and Stroke can have one of four values: <b>None, Color, Gradient and Pattern</b>.
Combine different values of Fill and Stroke to create various styles. Have a look at possible combinations.</p>
<img class="fullw" src="https://i.imgur.com/G0pYcNo.png" />
<p>Stroke can have many parameters: Line thickness, position: Inside, Center, Outside, corner shape, gaps (dashed line) etc.
When your shape contains just a single open path, the first and the last knot will not be connected inside a stroke.</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>

149
tools/Open-Photopea/learn/workspace.html
Unescape View File

@ -0,0 +1,149 @@
<!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 - Workspace</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 active"><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"><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>Workspace</h1>
<img src="https://i.imgur.com/gl6lKb7.png" class="fullw" />
<p>The workspace of Photopea is very similar to other image editors. It consists of the
<b>Toolbar</b> on the left, the <b>Sidebar</b> on the right, the <b>Working area</b> in the middle and the <b>Top menu</b> at the top.</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>Toolbar</h2>
<p>The toolbar contains all available tools. You can switch tools by clicking on their icons in the toolbar. Only one tool can be active at a time.
Icons with a little arrow in the corner (e.g. Lasso tool) contain the whole group of related tools.
Click on them to see the menu, then choose a specific tool from that menu.</p>
<p>Hold your mouse over the tool icon for a moment to see the name of that tool. Some tools have capital letters attached to them (e.g. B for Brush tool).
You can also switch tools by pressing corresponding keys on your keyboard.</p>
<p>There is <b>the foreground and the background</b> color at the bottom of the toolbar.
It is a simple palette of two colors, which are used by some tools. You can swap them with the X button,
or reset to default values (black and white) with a D button.</p>
<h2>Sidebar</h2>
<p>The sidebar consists of two vertical columns. Each column can be folded and unfolded by clicking the thick line at the top of the column.</p>
<img src="https://i.imgur.com/Fe0U26E.png" />
<p>These columns contain panels (Layers, History, Paragraph ...), that you may need during your work.
When the column is unfolded, you can see multiple panels, that are inside.
When the column is folded, you can show and hide a specific panel by clicking the corresponding button in the column.</p>
<p>If you don't know where a specific panel is located, press Window - name of that panel.</p>
<h2>Main Area</h2>
<p>Photopea allows you to open multiple documents (e.g. JPG images) at the same time.
The list of opened documents is shown in the bar at the top of the main area.</p>
<img src="https://i.imgur.com/n6vpIgZ.png" />
<p>Here you can switch between documents and choose the one that you want to work with. You can also close
documents by pressing the cross next to the document name. Below that bar, in the middle of the workspace,
is the actual content of your document. It is the active area, whree you can draw, move objects etc.</p>
<h2>Top Menu</h2>
<p>The top menu consists of two parts the first part (File, Edit, Image ...) is the main menu of Photopea. It is always the same.</p>
<p>The second part (below the main menu) contains parameters of the current tool. It has a different content for each tool.
For example, for the Brush tool, it contains the opacity of the brush, while for the Type tool, it contains the size of characters.</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>

12
tools/Open-Photopea/manifest.json
Unescape View File

@ -0,0 +1,12 @@
{
"name": "Photopea",
"short_name": "Photopea",
"display": "standalone",
"icons": [
{ "src": "promo/icon192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "promo/icon512.png", "type": "image/png", "sizes": "512x512" }
],
"start_url": "/?utm_source=homescreen",
"background_color":"#0f171d",
"theme_color": "#474747"
}

BIN
tools/Open-Photopea/promo/fb.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 996 B

BIN
tools/Open-Photopea/promo/gp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
tools/Open-Photopea/promo/icon256.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
tools/Open-Photopea/promo/thumb256.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
tools/Open-Photopea/promo/tw.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 945 B

BIN
tools/Open-Photopea/rsrc/fonts/fonts.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 902 KiB

1115
tools/Open-Photopea/style/all.css
View File

File diff suppressed because it is too large Load Diff

99
tools/Open-Photopea/tuts/add-gif-into-a-still-image/index.html
Unescape View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Add GIF Into a Still Image</title>
<!--<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="../index.html" class="title">Design Tutorials</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../../learn/index.html">Learn</a> |
<a class="curr" href="../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">
<div id="content">
<div class="post" id="post-48">
<span class="date">June 8, 2018</span>
<h1>Add GIF Into a Still Image</h1>
<div class="entry">
<p>Do you want to decorate a still image with an animated GIF? Here is how to do it fast and for free :)</p>
<span id="more-48"></span>
<a href="https://i.imgur.com/KOXOBiN.gif"><img src="https://i.imgur.com/KOXOBiN.gif" style="width:30%" /></a>
<h2>Open your images</h2>
<p>First, go to <a href="../../index.html">Photopea.com</a>. Press File - Open, and open your still image. Then, press File - Open again, and open your GIF. You should see two panels ("tabs") in Photopea.</p>
<a href="https://i.imgur.com/2erZxK3.png"><img src="https://i.imgur.com/2erZxK3.png" style="width:60%" /></a>
<h3>Duplicate layers</h3>
<p>Now, we need to copy all layers of the second document (frames of animation) into the first document (still image). Look into the Layers panel (bottom right): there is a folder (named "animated" in our case), that contains all frame layers.</p>
<p>Now, right-click that folder (in Layers panel) and choose Duplicate Into.</p>
<a href="https://i.imgur.com/4w3KLAR.png"><img src="https://i.imgur.com/dOPGME6.png" style="width:70%;" /></a>
<p>In the new window, choose the document with the still image as a destination. Confirm with OK button.</p>
<h3>Move the GIF to the right spot</h3>
<p>Switch to the panel ("tab") with a still image. You will see your GIF in the top left corner. Now, click and drag it to a new position (notice, that all layers of the animation are still highlighted, so you are moving all frames at the same time).</p>
<p>You can even use <a href="../../learn/free-transform.html">Free Transform</a> to make the GIF larger / smaller, or rotate it, etc.</p>
<a href="https://i.imgur.com/qAbuyCT.png"><img src="https://i.imgur.com/qAbuyCT.png" style="width:60%" /></a>
<p>Now, press File - Export As - GIF, and ... a new animation is ready! Hit Save to save it :)</p>
<a href="https://imgur.com/ikQanUS.gif"><img src="https://imgur.com/ikQanUS.gif" /></a>
</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="../../promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="../../promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="../../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 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">&copy; 2013-2018 support@photopea.com</div>
</div> <!--page-->
</body>
</html>

105
tools/Open-Photopea/tuts/add-watermark-to-photo/index.html
Unescape View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Add Watermark to a Photo</title>
<!--<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="../index.html" class="title">Design Tutorials</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../../learn/index.html">Learn</a> |
<a class="curr" href="../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">
<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="https://i.imgur.com/3CNPx3j.png" target="_blank"><img src="https://i.imgur.com/3CNPx3j.png" class="fullw" /></a>
<h2>Open Your Image</h2>
<p>First, go to <a href="../../index.html">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="../../learn/vg-creating.html">Vector tools</a> to draw a circle or other interesting shapes.</li>
<li><b>Type a text</b>: Use a <a href="../../learn/text.html">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="https://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="../../learn/free-transform.html">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="https://i.imgur.com/ojF9aKa.png" target="_blank"><img src="https://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="../../promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="../../promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="../../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 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">&copy; 2013-2018 support@photopea.com</div>
</div> <!--page-->
</body>
</html>

83
tools/Open-Photopea/tuts/convert-pdf-to-layered-psd/index.html
Unescape View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Convert PDF to layered PSD</title>
<!--<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="../index.html" class="title">Design Tutorials</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../../learn/index.html">Learn</a> |
<a class="curr" href="../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">
<div id="content">
<div class="post" id="post-39">
<span class="date">May 30, 2018</span>
<h1>Convert PDF to layered PSD</h1>
<div class="entry">
<p>Do you want to edit a PDF document, or use some of its graphics elsewhere? Let's see, how to convert it into a PSD with layers, so we can work with it in Photoshop!</p>
<span id="more-39"></span>
<h2>PDF to PSD</h2>
<p>If you try to open a PSD file in Photoshop, it will rasterize it: each page will be a bitmap, consisting only of pixels. </p>
<p>Today (the middle of 2018), Photopea is the best tool to convert PDF documents to Photoshop files. Go to <a href="../../index.html" target="_blank">Photopea.com</a> to start a free online photo editor. If you see a Welcome Screen, close it by pressing the Cross in the top right corner.</p>
<p>Open a PDF file from your computer: click <b>File - Open</b> (in the top left corner), then find and select the PSD file (or use <a href="../../learn/opening-saving.html#opening">drag and drop</a>).</p>
<p>You should see the graphics of the PDF file in front of you, one page next to another. Photopea converted pages into artboards. Text was made into Type Layers (you can see its font name, font size, color etc.). Bitmaps became Smart Objects (you can save them in the original resolution). Vector graphics became Vector Shapes (with a correct fill, stroke style, gradients etc.).</p>
<p>Now, just click <b>File - Save As PSD</b>. 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="../../promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="../../promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="../../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 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">&copy; 2013-2018 support@photopea.com</div>
</div> <!--page-->
</body>
</html>

78
tools/Open-Photopea/tuts/convert-sketch-to-psd/index.html
Unescape View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Convert Sketch to PSD</title>
<!--<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="../index.html" class="title">Design Tutorials</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../../learn/index.html">Learn</a> |
<a class="curr" href="../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">
<div id="content">
<div class="post" id="post-36">
<span class="date">May 30, 2018</span>
<h1>Convert Sketch to PSD</h1>
<div class="entry">
<p>Sometimes, we want to work with Sketch graphics in Photoshop. Converting it manually is hard, but it can be done automatically, see how!</p>
<span id="more-36"></span>
<h2>Sketch to PSD</h2>
<p>Today (the middle of 2018), Photopea is the best tool to convert Sketch graphics to Photoshop files. Go to <a href="../../index.html" target="_blank">Photopea.com</a> to start a free online photo editor. If you see a Welcome Screen, you can close it by pressing the Cross in the top right corner.</p>
<p>Open a Sketch file from your computer: click <b>File - Open</b> (in the top left corner), then find and select the PSD file (or use <a href="../../learn/opening-saving.html#opening">drag and drop</a>).</p>
<p>You should see the graphics of the Sketch file in front of you. Now, just click <b>File - Save As PSD</b>. And that's all! So simple :)</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="../../promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="../../promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="../../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 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">&copy; 2013-2018 support@photopea.com</div>
</div> <!--page-->
</body>
</html>

100
tools/Open-Photopea/tuts/how-to-crop-a-photo-online/index.html
Unescape View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> How To Crop A Photo Online</title>
<!--<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="../index.html" class="title">Design Tutorials</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../../learn/index.html">Learn</a> |
<a class="curr" href="../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">
<div id="content">
<div class="post" id="post-6">
<span class="date">May 30, 2018</span>
<h1>How To Crop A Photo Online</h1>
<div class="entry">
<p>Cropping a picture is a very basic operation. We will show you, how to do it quickly online, with just a couple of clicks.</p>
<span id="more-6"></span>
<h2>Crop A Photo</h2>
<p>Go to <a href="../../index.html" target="_blank">Photopea.com</a> to start a free online photo editor. If you see a Welcome Screen, you can close it by pressing the Cross in the top right corner.</p>
<p>Open a photo from your computer: click File - Open (in the top left corner), then find and select the file in your device (or use <a href="../../learn/opening-saving.html#opening">drag and drop</a>).</p>
<p>Select a Crop Tool from the toolbar on the left side.</p>
<img src="https://imgur.com/1L5SHxo.png" style="width:45%" />
<p>Click into the image and drag the mouse (to the bottom right side), then release the mouse button. A rectangle is drawn. It represents the part of your image, that you want to keep (the rest will be removed). Resize this rectangle by dragging its sides or corners. You can move it by clicking and dragging inside it.</p>
<img src="https://imgur.com/ZKfKdeB.png" class="fullw" />
<p>Once you have the right cropping rectangle, confirm it by clicking the checkmark in the top menu.</p>
<img src="https://imgur.com/8Nh7CG0.png" />
<p>And we are done! Now, press File - Export As - JPG and hit "Save" in the saving window.</p>
<h2>Crop To A Specific Size</h2>
<p>Sometimes, we want our new image to have a specific size, e.g. 100 x 100 pixels. Press Image (at the top) - Canvas Size.</p>
<img src="https://imgur.com/iv50e8M.png" style="width:45%" />
<p>Here, we can enter a new size (Width and Height) and confirm with the OK button. We can still re-position a new image by clicking and dragging it inside a canvas.</p>
<p>When the position is good, we can export it with File - Export As - JPG.</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="../../promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="../../promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="../../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 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">&copy; 2013-2018 support@photopea.com</div>
</div> <!--page-->
</body>
</html>

81
tools/Open-Photopea/tuts/index.html
Unescape View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Design Tutorials</title>
<!--<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="index.html" class="title">Design Tutorials</a>
<!--<p>Web-based image editor.</p>-->
<a href="https://blog.photopea.com">Blog</a> |
<a href="../learn/index.html">Learn</a> |
<a class="curr" href="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">
<div id="content">
<div class="post" id="post-81">
<span class="date">September 6, 2018</span>
<a class="postlink" href="add-watermark-to-photo/index.html">Add Watermark to a Photo</a>
<p>Sometimes, we need to place a watermark into a photo. How can we do it fast and for free?</p>
</div>
<div class="post" id="post-48">
<span class="date">June 8, 2018</span>
<a class="postlink" href="add-gif-into-a-still-image/index.html">Add GIF Into a Still Image</a>
<p>Do you want to decorate a still image with an animated GIF? Here is how to do it fast and for free :)</p>
</div>
<div class="post" id="post-39">
<span class="date">May 30, 2018</span>
<a class="postlink" href="convert-pdf-to-layered-psd/index.html">Convert PDF to layered PSD</a>
<p>Do you want to edit a PDF document, or use some of its graphics elsewhere? Let's see, how to convert it into a PSD with layers, so we can work with it in Photoshop!</p>
</div>
<div class="post" id="post-36">
<span class="date">May 30, 2018</span>
<a class="postlink" href="convert-sketch-to-psd/index.html">Convert Sketch to PSD</a>
<p>Sometimes, we want to work with Sketch graphics in Photoshop. Converting it manually is hard, but it can be done automatically, see how!</p>
</div>
<div class="post" id="post-26">
<span class="date">May 30, 2018</span>
<a class="postlink" href="remove-background-from-photo/index.html">Remove Background From Photo</a>
<p>Cut out an object from a photo, so you can place it elsewhere, or give it another background.</p>
</div>
<div class="post" id="post-6">
<span class="date">May 30, 2018</span>
<a class="postlink" href="how-to-crop-a-photo-online/index.html">How To Crop A Photo Online</a>
<p>Cropping a picture is a very basic operation. We will show you, how to do it quickly online, with just a couple of clicks.</p>
</div>
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
</div>
</div>
<div id="footer">&copy; 2013-2018 support@photopea.com</div>
</div> <!--page-->
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save