mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2026-04-03 06:26:32 +00:00
Fixed silly issue where server must be run from port 8887
This commit is contained in:
DUOLabs333
@@ -1,78 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<serializedJobs xmlns="http://www.narrowteq/darcy/Schema">
|
||||
<version>1.0</version>
|
||||
<id>1617847170074</id>
|
||||
<serializedDownloadJob id="0">
|
||||
<name>Photopea-git</name>
|
||||
<state>71</state>
|
||||
<priority>500</priority>
|
||||
<ignoreFilter>true</ignoreFilter>
|
||||
<url>https://www.photopea.com/</url>
|
||||
<parentJobId xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<depth>0</depth>
|
||||
<maxRetryCount>3</maxRetryCount>
|
||||
<saveToDisk>true</saveToDisk>
|
||||
<savePath>C:\Users\School\Downloads\Git Repos\Photopea-Offline</savePath>
|
||||
<tryResume>true</tryResume>
|
||||
</serializedDownloadJob>
|
||||
<serializedDownloadJobFilter>
|
||||
<maxRecursionDepth>-1</maxRecursionDepth>
|
||||
<urlPrefix>https://www.photopea.com/</urlPrefix>
|
||||
<allowedHostName>.*photopea.com</allowedHostName>
|
||||
<saveToDisk>.*</saveToDisk>
|
||||
<alreadyAddedUri>https://www.photopea.com/code/FNTS.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://github.com/photopea/photopea/issues</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://fonts.googleapis.com/css?family=Open+Sans:400%2C400i%2C700%2C700i</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/promo/icon512.png</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.reddit.com/r/photopea/</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/manifest.json</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/ads.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/code/external/ext.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://blog.photopea.com/introduction.html</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/code/DBS.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/promo/thumb256.png</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/code/PIMG.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/g;m.parentNode.insertBefore(a%2Cm)</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/img/lrs/eye.png</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/code/pp.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.facebook.com/photopea/</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/code/LNG2.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/style/all.css</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://apis.google.com/js/client.js</alreadyAddedUri>
|
||||
<alreadyAddedUri>https://www.photopea.com/rsrc/fonts/fonts.png</alreadyAddedUri>
|
||||
<dontLeaveDomain>false</dontLeaveDomain>
|
||||
<dontStdAnything>false</dontStdAnything>
|
||||
</serializedDownloadJobFilter>
|
||||
<serializedMaxLinksToFollowFilter>
|
||||
<maxLinksToFollow>-1</maxLinksToFollow>
|
||||
</serializedMaxLinksToFollowFilter>
|
||||
<serializedContextParameter>
|
||||
<name>HttpRetrieverConfiguration</name>
|
||||
<serializedHttpRetrieverConfiguration>
|
||||
<maxConnectionsPerServer>2</maxConnectionsPerServer>
|
||||
<sendReferer>true</sendReferer>
|
||||
<bandwidthLimit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<proxyEnabled>false</proxyEnabled>
|
||||
<proxyServer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<proxyPort xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<proxyAuthenticationEnabled>false</proxyAuthenticationEnabled>
|
||||
<proxyUser xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<proxyPassword xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<proxyRealm xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
<userAgent>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1944.0 Safari/537.36</userAgent>
|
||||
</serializedHttpRetrieverConfiguration>
|
||||
</serializedContextParameter>
|
||||
<serializedContextParameter>
|
||||
<name>JobManagerConfiguration</name>
|
||||
<serializedJobManagerConfiguration>
|
||||
<dropIgnoredJobs>true</dropIgnoredJobs>
|
||||
<dropFinishedJobs>false</dropFinishedJobs>
|
||||
</serializedJobManagerConfiguration>
|
||||
</serializedContextParameter>
|
||||
<serializedDispatcherConfiguration>
|
||||
<workerThreads>10</workerThreads>
|
||||
<dispatchDelay xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/>
|
||||
</serializedDispatcherConfiguration>
|
||||
</serializedJobs>
|
||||
@@ -10,5 +10,5 @@ If there are any issues, please let me know. I tried to get fonts working the be
|
||||
1. Download the repository
|
||||
1. Open a terminal
|
||||
1. `cd` into the folder where you downloaded it
|
||||
1. In the folder, type `python -m http.server`
|
||||
1. Open [http://localhost:8000/www.photopea.com/](http://localhost:8000/www.photopea.com/). It should load and you can use it like normal.
|
||||
1. In the folder, type *exactly* this: `python -m http.server 8887`
|
||||
1. Open [http://localhost:8887/www.photopea.com/](http://localhost:8887/www.photopea.com/). It should load and you can use it like normal.
|
||||
|
||||
11
Updater.py
Executable file
11
Updater.py
Executable file
@@ -0,0 +1,11 @@
|
||||
import requests
|
||||
import os
|
||||
root='www.photopea.com/'
|
||||
website='https://photopea.com/'
|
||||
urls=['index.html','style/all.css','code/ext/ext.js','promo/thumb256.png','code/pp/pp.js','code/dbs/DBS.js','rsrc/basic/basic.zip','plugins/gallery.json','code/ext/hb.wasm','code/ext/fribidi.wasm']
|
||||
|
||||
for url in urls:
|
||||
os.makedirs((root+url).rsplit('/',1)[0],exist_ok=True)
|
||||
with open(root+url,'wb') as f:
|
||||
print('Capturing '+website+url)
|
||||
f.write(requests.get(website+url).content)
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#474747">
|
||||
|
||||
<title>Photopea | Online Photo Editor</title>
|
||||
|
||||
<link rel="apple-touch-icon" href="promo/icon512.png">
|
||||
<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">
|
||||
<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
|
||||
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
padding:2% 2% 1em 2%; 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.3em; margin:0.5em 0; letter-spacing: 0em; line-height:1.2em; }
|
||||
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 id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
<p>Create a new image or open existing files from your computer. Save your work as PSD
|
||||
(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
|
||||
<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>.
|
||||
Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
|
||||
<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> | Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.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>
|
||||
@@ -1 +0,0 @@
|
||||
window.jsLoadedOK=true;
|
||||
@@ -1,153 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0 active"><a href="/api/accounts">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 see prices and manage your account through the <b id="acc-window">Account Window</b> (click the Account button 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>
|
||||
|
||||
<img src="//i.imgur.com/3q2kgUo.png" class="fullw" />
|
||||
|
||||
<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 very simple. There are no emails, registrations, synchronizations etc.
|
||||
All can be done inside the Account window. First, everybody has to log in (and see their email address).</p>
|
||||
|
||||
<img src="//i.imgur.com/qPnNtCi.png" class="fullw" />
|
||||
<p>
|
||||
Now, scroll down to Team Settings. A team leader (the one who pays for the account) ticks <b>Start a team</b> and fills in email addresses of all members of a team.
|
||||
Other team members tick <b>Join a team</b> and fill in the email address of a team leader. Press "Save Team Settings" to save it.</p>
|
||||
|
||||
<a href="//i.imgur.com/yQUwPXI.png" target="_blank"><img src="//i.imgur.com/yQUwPXI.png" style="width:60%" /></a>
|
||||
|
||||
<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 the <code>iframe</code>), and configure it as you wish, <b>for free</b>.
|
||||
But sometimes, you may want to hide advertisement, social media buttons, branding ... let's call it a <b>whitelabel mode</b>.</p>
|
||||
|
||||
<p>We have a list of domains, for which Photopea runs in a whitelabel mode. The <b>Distributor account</b> allows you to add your domain into that list.</p>
|
||||
|
||||
<p>Order a distributor account (through the <a href="#acc-window">Account Window</a>) for the expected
|
||||
<b title="A view is one loading of Photopea in a frame. Each reloading of a page is a new view.">number of views per month</b>.
|
||||
<!--
|
||||
If you exceed that number, just order a higher version next time.
|
||||
If you exceed the number many times (and ignore our emails), your domain may be removed from a list (you will have a standard mode instead of whitelabel).
|
||||
--></p>
|
||||
|
||||
<p>After you pay for the Distributor account, enter the name of your domain into the Account window and click "Save Domain Settings".
|
||||
You can change your domain at any time.</p>
|
||||
|
||||
<img src="//i.imgur.com/h6MAEYu.png" style="width:60%" />
|
||||
|
||||
|
||||
<h2 id="self-hosted">Self-Hosted Version</h2>
|
||||
|
||||
<p>Photopea consists of a HTML file, a CSS file and several JS files (around 2 MB in total).
|
||||
Running it is very simple, there is no need for any server-side technologies (no PHP, no Node.js, no databases).</p>
|
||||
|
||||
<p>We provide a <b>self-hosted package</b> with a complete editor, which you can use on your own server.
|
||||
It has several benefits over Distributor accounts:</p>
|
||||
|
||||
<ul>
|
||||
<li>you can change CSS styles</li>
|
||||
<li>you can run it in a local network without internet access</li>
|
||||
<li>you do not depend on Photopea.com (when you are afraid, that it may go down)</li>
|
||||
<li>you can be sure, that no part of the editor changes while you run it</li>
|
||||
</ul>
|
||||
|
||||
<p>A self-Hosted version costs between $500 and $2000 per month. You should pay for a whole year (12 months) in advance,
|
||||
and you will get resources, that will work for exactly one year. After each year, you can decide, if you want to pay for a next year
|
||||
(and get new resources), or terminate it. You can get two updates during a year for free (at any time), each next update costs $300.</p>
|
||||
|
||||
<p>Write us an email to <a href="mailto:support@photopea.com">support@photopea.com</a>
|
||||
and tell us an estimated number of your users (and the usage frequency), so we can discuss the terms of our agreement.</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>
|
||||
@@ -1,129 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">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 = ["1615457106.jpg", "1615751569.jpeg", "1616054747.gif", "1616275992.jpg", "1616435512.PNG", "g270ad358dbc3f1d746fe4020780db84fbcb180203f29524cb3c2cd8c59fc83d5f17c2bc0387f1545559da3c6ab8d3132afda1e4c7360bf7f02d6ded349652e71_1280.png", "g52200e17767de2a975f5dd8196045eaaae2ecdb763d45ce3aa0cc58d5be01aae17ae1a48836f44646fad0ae293d7ebbd9e62a3a6bdc7b94d298995b3f9082aea_1280.jpg", "g8ebb92544baf2eeba36ff4b0f81a1d38991c6ec63c6006c0aa189ac35519584aa467f115680b561025ad158f1e185f9aeadc4903723fb7354d94c2ada92c405a_1280.png", "g92cce0fcb1411212897557d4b0919498fccdfa9b1c3cb584c2a2f940348c238b0827cdf6d8ce77dae8ad79165750c8eb6b27ebbce27d4e69e26ebf0678f81f93_1280.png", "gea0189c1910661a2794f3aa82c5014d224bfb3d12ebe7be4fe5364d6931a76e2533e17f0a8f0879dee6750056385c6c3819e251c66a57adc9fd39f227463698f_1280.jpg", "new-1614700571.png", "new-1614717605.png", "new-1614718455.png", "new-1614724924.png", "new-1614942864.png", "new-1615328805.png", "new-1615328956.png", "new-1615329059.png", "new-1616022182.png", "new-1616280431.png", "new-1616366881.png", "new-1616437241.png", "new-1616537029.png", "pexels-photo-266642.jpeg", "photo-1454006639960-af9b6a303eae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NXx8anVzdGljZXxlbnwwfHx8fDE2MTY1OTA4OTE&ixlib=rb-1.2.1&q=80&w=400", "photo-1491013516836-7db643ee125a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8Mnx8YmFieXxlbnwwfHx8fDE2MTU5MjkwODU&ixlib=rb-1.2.1&q=80&w=400", "photo-1507835661088-ac1e84fe645f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8MXx8RlJFRURPTXxlbnwwfHx8fDE2MTU5OTU2NTI&ixlib=rb-1.2.1&q=80&w=400", "photo-1557125785-9dd832cc42bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NDB8fHJhaXNlZCUyMGhhbmRzfGVufDB8fHx8MTYxNjMxMTI2MQ&ixlib=rb-1.2.1&q=80&w=400", "photo-1575505586569-646b2ca898fc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NXx8bGF3eWVyfGVufDB8fHx8MTYxNjU4MzU4Nw&ixlib=rb-1.2.1&q=80&w=400", "photo-1592323401640-9c24ed330baf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8ODB8fHBob25lfGVufDB8fHx8MTYxNjM1NDQyMg&ixlib=rb-1.2.1&q=80&w=400", "photo-1603899122332-81418ddc0e12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NDd8fG1lc3NlbmdlcnxlbnwwfHx8fDE2MTYzNjE0NTM&ixlib=rb-1.2.1&q=80&w=400", "photo-1604654894610-df63bc536371?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8MXx8bWFuaWN1cmV8ZW58MHx8fHwxNjE1NTQ1NTE3&ixlib=rb-1.2.1&q=80&w=400", "tinyX (15).psd"];
|
||||
|
||||
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" : {
|
||||
"version":1,
|
||||
"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>
|
||||
@@ -1,154 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1 active"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">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 },
|
||||
"customIO" : { "open": "app.echoToOE(\"Open\");" },
|
||||
"localsave" : false, "autosave" : 120,
|
||||
"showtools" : [0,5,9], "menus" : [ [1,1,0,1], 1, 0, 1, [0] ],
|
||||
"panels" : [0, 2],
|
||||
|
||||
"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>customIO</code> - redefine the behavior of File - Open, Save etc. and run a custom script instead.
|
||||
Possible properties: <code>"new", "open", "openFromURL", "takePic", "showTemplates",
|
||||
"save", "saveAsPSD", "publishOnline", "exportLayers"</code>.</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>panels</code> - what panels should be shown in a sidebar. Use following IDs:<br />
|
||||
0: HISTORY, 1: SWATCHES, 2: LAYERS, 3: INFO, 4: HISTOGRAM, 5: PROPERTIES, 6: CSS, 7: BRUSH, 8: LAYERCOMPS, 9: CHARACTER, 10: PARAGRAPH,
|
||||
11: ACTIONS, 12: NAVIGATOR, 13: COLOR, 14: TPRESET, 15: GUIDEGUY, 16: CHANNELS, 17: PATHS, 18: GALLERY.</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="https://www.photopea.com/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="//www.photopea.com/code/DBS.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="/api/plugins">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>
|
||||
|
||||
<h3>Magic Wand</h3>
|
||||
<p>Options: <code>[0,0,[16,true,true]]</code> - Combining operation, Feather, Select options: Tolerance, Anti-alias, Contiguous.</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>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,201 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0 active"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">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="https://www.photopea.com/api/live">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>Such URL can be opened directly, or used as a <code>src</code> of an <code>iframe</code>.
|
||||
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,iVBORw0KGgoAAAAN..."
|
||||
],
|
||||
"resources" : [
|
||||
"https://www.xyz.com/brushes/Nature.ABR",
|
||||
"https://www.xyz.com/grads/Gradients.GRD",
|
||||
"https://www.xyz.com/fonts/NewFont.otf"
|
||||
],
|
||||
"server" : {
|
||||
"version" : 1,
|
||||
"url" : "https://www.myserver.com/saveImage.php",
|
||||
"formats" : [ "psd:true", "png", "jpg:0.5" ]
|
||||
},
|
||||
"environment" : {...},
|
||||
"script" : "app.activeDocument.rotateCanvas(90);"
|
||||
}</pre>
|
||||
<p>
|
||||
All parameters are optional.
|
||||
Data URIs can be used - file can be passed inside a request (<a target="_new" href="//www.photopea.com#%7B%22files%22:%5B%22data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==%22%5D%7D">test</a>).
|
||||
</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>version</code> - the version of the API</li>
|
||||
<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="https://www.photopea.com/learn/scripts">saveToOE</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>environment</code> - parameters of the environment, see <a href="/api/environment">Environment</a>
|
||||
</li>
|
||||
<li>
|
||||
<code>script</code> - the <a href="/learn/scripts">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 the <code>File - Save</code> option.
|
||||
After a user clicks it, document data are sent to your server in a HTTP request using POST method.</p>
|
||||
|
||||
<p>Photopea will send binary data (a sequence of bytes) to your server, which has two parts:</p>
|
||||
<ul>
|
||||
<li>2000 Bytes - JSON data</li>
|
||||
<li>the rest - one or more image files</li>
|
||||
</ul>
|
||||
|
||||
<p>The JSON will have a following structure:</p>
|
||||
<pre>{
|
||||
"source" : "https://www.mysite.com/images/button.png",
|
||||
"versions" : [
|
||||
{"format":"psd", "start": 0, "size": 700000 },
|
||||
{"format":"jpg", "start": 700000, "size": 100000 },
|
||||
...
|
||||
]
|
||||
}</pre>
|
||||
<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>start, size</code> - file offset and the size (relative, from the end of JSON)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Here is a short PHP example, which accepts files from Photopea.</p>
|
||||
|
||||
<pre>$fi = fopen("php://input", "rb"); $p = JSON_decode(fread($fi, 2000));
|
||||
// getting file name from "source"
|
||||
$fname = substr ($p->source, strrpos($p->source,"/")+1);
|
||||
$fo = fopen("img/".$fname,"wb"); while($buf=fread($fi,50000)) fwrite($fo,$buf);
|
||||
fclose($fi); fclose($fo);</pre>
|
||||
<!--<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>-->
|
||||
|
||||
<h3>Your Response</h3>
|
||||
<p>After the server receives a file, it can send back a JSON response with optional String parameters:</p>
|
||||
<ul>
|
||||
<li><code>message</code> - when specified, will be displayed to the user for a moment</li>
|
||||
<li><code>script</code> - when specified, will be executed (e.g. you can call <code>app.echoToOE("saved");</code>)</li>
|
||||
<li><code>newSource</code> - when specified, will be used as a new value of "source" for saving to a server in the future
|
||||
(can be useful, when a file was created within Photopea: "source" was "local,...")</li>
|
||||
</ul>
|
||||
|
||||
<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>If you want to hide advertisement and "colorful buttons", and use a <b>whitelabel mode</b>, look at
|
||||
<a href="https://www.photopea.com/api/accounts#distributors">Distributor account</a>.</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>
|
||||
@@ -1,138 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1 active"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">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 <code>"done"</code>.
|
||||
After your message is processed, Photopea also sends back the message <code>"done"</code>.</p>
|
||||
|
||||
<a href="https://photopea-api-demo.glitch.me">Some demos of live messsaging in Photopea</a>
|
||||
|
||||
<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>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 <code>"done"</code> (processing the script has finished).</p>
|
||||
|
||||
<p>It can also send any String to OE using the following command (inside a script):</p>
|
||||
|
||||
<pre>app.echoToOE("Hello");</pre>
|
||||
|
||||
<p>The full description at <a href="https://www.photopea.com/learn/scripts">/learn/scripts</a>.</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>
|
||||
|
||||
<h2>Example: Integrating with a custom storage</h2>
|
||||
|
||||
<p>We can redefine the default behaviour of File - Open and File - Save.</p>
|
||||
|
||||
<ul>
|
||||
<li>We can send Photopea any image in a message as ArrayBuffer</li>
|
||||
<li>We can call <code>app.activeDocument.saveToOE("psd");</code> to send the current file to OE.</li>
|
||||
<li>We can call <code>app.echoToOE("Hello");</code> to send any string to OE.</li>
|
||||
<li>We can read and write <code>app.activeDocument.source</code> String to identify files.</li>
|
||||
<li>We can set custom scripts to run after pressing Open or Save:
|
||||
<a href="https://www.photopea.com/api/environment">customIO : open, save</a></li>
|
||||
</ul>
|
||||
<p>Now, we can do following:</p>
|
||||
<ul>
|
||||
<li>Set custom scripts to <code>app.echoToOE("Open" / "Save");</code> to be notified, when the user presses the buttons.</li>
|
||||
<li>When the user wants to Open a file, show him your own file input (you can even let the user draw something, or take a picture of him).</li>
|
||||
<li>Once you have the image (ArrayBuffer), send it to Photopea and set the source: <code>app.activeDocument.source="myID2353"</code>.</li>
|
||||
<li>When the user wants to Save a file, read the file (<code>app.activeDocument.saveToOE("psd");</code>) and its source
|
||||
<code>app.echoToOE(app.activeDocument.source);</code>, and save the new version into your storage.</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>
|
||||
@@ -1,127 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0 active"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:80%;">
|
||||
|
||||
<div class="post">
|
||||
|
||||
<script>
|
||||
function onMSG(e) {
|
||||
console.log(e.origin, e);
|
||||
if(e.origin.indexOf("photopea.com")==-1) return;
|
||||
var nst;
|
||||
if(typeof e.data=="string") nst = e.data;
|
||||
else nst = "ArrayBuffer["+e.data.byteLength+"]";
|
||||
document.getElementById("msgs").textContent += nst+"\n";
|
||||
};
|
||||
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.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 = function(e) {
|
||||
frame = document.getElementById("pp");
|
||||
window.addEventListener("message", onMSG);
|
||||
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/img2/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 />
|
||||
<b>Messages from Photopea</b>
|
||||
<pre id="msgs"></pre>
|
||||
|
||||
</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>
|
||||
@@ -1,116 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
<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='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
||||
|
||||
<title>Photopea API</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="/" class="title">Photopea API</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a class="curr" href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div id="main" style="max-width:960px;">
|
||||
<div id="sidebar" style="width:20%;">
|
||||
<!--<h3>Topics</h3>-->
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
||||
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
||||
<li class="lvl1"><a href="/api/live">Live Messaging</a></li>
|
||||
<li class="lvl1 active"><a href="/api/plugins">Plugins</a></li>
|
||||
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
||||
<li class="lvl0"><a href="/api/accounts">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="//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="/api/live">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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
8411
www.photopea.com/code/dbs/DBS.js
Normal file
8411
www.photopea.com/code/dbs/DBS.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
12763
www.photopea.com/code/pp/pp.js
Normal file
12763
www.photopea.com/code/pp/pp.js
Normal file
File diff suppressed because one or more lines are too long
@@ -1,5 +0,0 @@
|
||||
<svg class="gsicon" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<path fill="white" d="M24 12C24 5.37216 18.626 0 12 0C5.37216 0 0 5.37216 0 12C0 18 4.38789 23 10.1242 23.8524V15.4676H7.07758V12H10.1242V9.35553C10.1242 6.34826 12 4.68714 14.6564 4.68714C16 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V12H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 23 24 18 24 12Z"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 473 B |
Binary file not shown.
|
Before Width: | Height: | Size: 817 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 668 B |
Binary file not shown.
|
Before Width: | Height: | Size: 146 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 765 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 756 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 924 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 499 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 492 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 579 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 836 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 263 B |
Binary file not shown.
|
Before Width: | Height: | Size: 150 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 846 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg class="gsicon" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<path fill="white" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 14-7.496 14-14 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 762 B |
@@ -19,8 +19,7 @@
|
||||
<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
|
||||
|
||||
<link rel="stylesheet" href="style/all.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
|
||||
|
||||
<style>
|
||||
#cap {
|
||||
font-size: 1.3em;
|
||||
@@ -47,7 +46,7 @@
|
||||
<!---->
|
||||
<div id="cap">
|
||||
<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
|
||||
<img style="width:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<img style="width:8em; height:8em; margin-top:1em;" src="promo/thumb256.png" alt="Photopea logo" />
|
||||
<h1>Photopea: advanced photo editor</h1>
|
||||
<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats.
|
||||
(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>, <b>Adobe XD</b> and <b>CorelDRAW</b>).</p>
|
||||
@@ -61,15 +60,9 @@
|
||||
|
||||
<script>if(localStorage.getItem("capShown")=="false" || window.self != window.top) hideCap();</script>
|
||||
|
||||
<script src="//apis.google.com/js/client.js"></script>
|
||||
<script src="ads.js"></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/DBS.js"></script>
|
||||
<script src="code/pp.js"></script>
|
||||
<script src="code/ext/ext.js"></script>
|
||||
<script src="code/dbs/DBS.js"></script>
|
||||
<script src="code/pp/pp.js"></script>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Actions</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Actions</h1>
|
||||
|
||||
<p>Sometimes, we need to <b>automate</b> image editing. We can record our work as an <b>action</b> and apply it to other documents later.</p>
|
||||
|
||||
<h2>Actions Panel</h2>
|
||||
|
||||
<p>Actions are managed through the <b>Actions panel</b>. It can be displayed by pressing Window - Actions.
|
||||
Here we see the structure of current actions in the middle. We can manipulate with actions using the buttons at the bottom of the panel.</p>
|
||||
|
||||
<img src="//i.imgur.com/Yrdp6Y1.png" style="width:30%" />
|
||||
|
||||
<p>There is a strict structure of actions. Basic units are <b>Action Sets</b> (which have a Folder icon). An Action Set contains <b>Actions</b> (which have only an arrow).
|
||||
Each Action may contain <b>Steps</b> (which have a checkmark on the left).</p>
|
||||
|
||||
<p>You can click on Action Sets, Actions, or Steps, to select them. Use the buttons at the bottom to modify the structure.</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Record</b> - start recording your work (as Steps) into a selected action. Press it again to stop recording.</li>
|
||||
<li><b>Apply</b> - apply an action to the current document</li>
|
||||
<li><b>New Action Set</b></li>
|
||||
<li><b>New Action</b></li>
|
||||
<li><b>Delete</b> - delete a selected Action Set, an Action or a Step</li>
|
||||
<li><b>Export</b> - export a selected Action Set as an .ATN file</li>
|
||||
</ul>
|
||||
|
||||
<h2>ATN files</h2>
|
||||
|
||||
<p>Photopea can process (load and save) actions inside ATN files. These files are used by Adobe Photoshop and probably other software.</p>
|
||||
|
||||
<p>Each ATN file contains exactly one Action Set. Press File - Open, to load the ATN file into Photopea.
|
||||
Press the Export button (in the Actions panel) to export the current Action Set as an ATN file.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,132 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Adjust. & 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
<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="/learn/other-layers">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="//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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,151 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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="//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="//www.photopea.com/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>Fuzziness</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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,143 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Animations</h1>
|
||||
|
||||
<p>Animated images (GIF, APNG, WEBP), are very popular.
|
||||
An animation has several static images - <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>
|
||||
|
||||
<h2>Animations in Photopea</h2>
|
||||
|
||||
<p>Photopea can make an animation from layers of the document by showing a different layer in each frame.
|
||||
To define a new frame, the layer name should start with <code>_a_</code>. It can be a regular layer, a folder of layers, or any other layer.</p>
|
||||
|
||||
<p>When you export such document as a GIF, PNG or WEBP, Photopea detects all layers starting with <code>_a_</code>.
|
||||
The first such layer is shown in the first frame (others starting with <code>_a_</code> are hidden).
|
||||
The second such layer is shown in the second frame, etc.</p>
|
||||
|
||||
<p><b>Example</b>: we have five layers: <code>background, _a_dog, _a_cat, _a_tree, watermark</code>.
|
||||
The GIF will have three frames (3 layers start with <code>_a_</code>).
|
||||
<code>background</code> and <code>watermark</code> will be in all frames.
|
||||
<a href="//www.photopea.com#%7B%22files%22:%5B%22https://www.photopea.com/api/img2/anim_dct.psd%22%5D%7D" target="_blank">Try it here!</a></p>
|
||||
|
||||
<img src="//i.imgur.com/UNSrMiz.gif" style="width:60%;">
|
||||
|
||||
<p>When you open an animation (GIF, APNG, WEBP) in Photopea, Photopea will turn every frame into <b>a layer with a proper name</b>.
|
||||
So when you edit an animation (delete frames, reorder frames, resize ...), there is no need to change layer names.</p>
|
||||
|
||||
<h2>Delay</h2>
|
||||
|
||||
<p>A layer which starts with <code>_a_</code> makes a new frame, which will be shown for 100 ms by default.
|
||||
To set your own delay, put <code>,</code> and a number to the end of the layer name. E.g. <code>_a_dog,500</code> will be displayed for half a second.</p>
|
||||
|
||||
<h2>Merge frames</h2>
|
||||
|
||||
<p>Let's say we have 3 frames of one animation and 3 frames of another, i.e. six layer starting with <code>_a_</code>.
|
||||
The resulting GIF will have six frames. Can we make these two animations play simultaneously "in parallel"?</p>
|
||||
|
||||
<p>We need to turn it into 3 frame layers, where each layer contains images from both animations.
|
||||
We can do it manually: merge each two layers into one using Layer - Merge Layers.</p>
|
||||
|
||||
<img src="//i.imgur.com/DhHxnzF.png" style="width:60%" />
|
||||
|
||||
<p>We can do it automatically. Put each animation in a folder and press <b>Layer - Animation - Merge</b>.</p>
|
||||
|
||||
<img src="//i.imgur.com/lTZnWQv.png" style="width:60%" />
|
||||
|
||||
<p>Photopea will find all folders, and merge their frames together.
|
||||
Alternatively, you can select only folders you want to merge (in Layers Panel) before pressing Layer - Animation - Merge.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,164 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Brush Tools</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0 active"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Brush Tools</h1>
|
||||
|
||||
<p>Brush tools are all tools, which use a "brush track". You usually draw strokes on some layer and a brush tool edits pixels along your strokes.
|
||||
It can be a Brush, an Eraser, a Smudge tool etc. When there is a selection, the tool edits only pixels within this selection.</p>
|
||||
|
||||
<p>Each brush tool uses a specific <b>brush</b>, which is the first item in the top menu.</p>
|
||||
|
||||
<img src="//i.imgur.com/2JfzrSN.png" />
|
||||
|
||||
<p>A brush has a track shape (e.g. a circle, a square or a more complex pattern)
|
||||
and behaviour (it can change the shape while you draw, e.g. change the track size).
|
||||
Photopea has a default collection of brushes, but you can import your own brushes in the ABR format into Photopea using File - Open.</p>
|
||||
|
||||
<p>Every brush tool usually draws a stroke by drawing many brush shapes (e.g. circles) next to one another,
|
||||
along the movement of your mouse or other pointing device.</p>
|
||||
|
||||
<img src="//i.imgur.com/QL9dm22.png" />
|
||||
|
||||
<p>It means, that there are actually no "lines", just copies of the same shape, that are tightly
|
||||
squeezed next to each other, which create a look of a continuous line.</p>
|
||||
|
||||
<p>There are two kinds of brush shapes:</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Circular</b> - generated as a circle, can have arbitrary size</li>
|
||||
<li><b>Pattern</b> - made with a raster image. They get pixelated, when the size is too large</li>
|
||||
</ul>
|
||||
|
||||
<p>Each brush has a <b>Size</b> property, which measn "the thickness of the line".
|
||||
Circular brushes have a <b>Hardness</b> property in addition, which generates a soft edge of the circle.</p>
|
||||
|
||||
<h2>Brush panel</h2>
|
||||
|
||||
<p>More brush options are available in a <b>brush panel</b>. You can open it using Window - Brush.
|
||||
Here are several sections of properties. You can see the result of your brush settings on the bottom of it.</p>
|
||||
|
||||
<p>At the top of the brush panel, there is a gallery of predefined brushes. Choosing one of them will replace your current brush settings.<p>
|
||||
|
||||
<img src="//i.imgur.com/qd8A3Jj.png" />
|
||||
|
||||
<p>Here is a brief description of each section of the brush panel. We recommend to play with settings to discover them by yourself.</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Tip Shape</b> - parameters of a static brush
|
||||
<ul>
|
||||
<li>Angle - rotates the shape</li>
|
||||
<li>Roundness - squeezes the shape</li>
|
||||
<li>Spacing - spacing between consequent "shapes" of a stroke. Set it to 25% or less to make a "continuous" line.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Tip dynamics</b> - allows you to use random values of Size, Angle and Roundness along the stroke</li>
|
||||
<li><b>Scatter</b> - lets you put move each shape to the random place near the original position. You can make an effect of "fallen leaves"</li>
|
||||
<li><b>Color Dynamics</b> - lets you change the color of each shape randomly along the stroke</li>
|
||||
</ul>
|
||||
|
||||
<h2>Brush Presets</h2>
|
||||
|
||||
<p>Photopea supports loading custom brushes in a form of <b>.ABR</b> files. Open such file with File - Open, and new brushes will be added to a list of brushes.</p>
|
||||
|
||||
<p>You can make a new Pattern brush from a current layer using Edit - Define New - Brush.</p>
|
||||
|
||||
<p>Any current brush (with current parameters: Size, Hardness, Tip Dynamics ...) can be saved as a new brush through a Brush button and a tiny arrow.
|
||||
Here, you can also open an .ABR file, or export brushes as an .ABR file.</p>
|
||||
|
||||
<img style="width:50%" src="//i.imgur.com/4Mvp2QS.png" />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,124 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Advanced Tools</h1>
|
||||
|
||||
<p>These tools perform advanced effects on the layer.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/blur.png" />
|
||||
<img class="inline" src="//www.photopea.com/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="//www.photopea.com/img/tools/dodge.png" />
|
||||
<img class="inline" src="//www.photopea.com/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="//www.photopea.com/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="//blog.photopea.com/wp-content/uploads/2017/02/smudge.png" />
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,124 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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="//www.photopea.com/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="//i.imgur.com/zVIwOZf.png" />
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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="//www.photopea.com/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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,138 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Smart Tools</h1>
|
||||
|
||||
<p>These tools use artificial intelligence and can save you a lot of time.</p>
|
||||
|
||||
<img src="//blog.photopea.com/wp-content/uploads/2017/03/healing_tools.png" />
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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="//blog.photopea.com/wp-content/uploads/2017/03/asia.jpg" ><img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/03/asia.jpg" /></a>
|
||||
<a href="//blog.photopea.com/wp-content/uploads/2017/03/beach.jpg"><img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/03/beach.jpg" /></a>
|
||||
<a href="//blog.photopea.com/wp-content/uploads/2017/03/cow.jpg" ><img class="fullw" src="//blog.photopea.com/wp-content/uploads/2017/03/cow.jpg" /></a>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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="//www.photopea.com/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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,197 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Color Spaces</title>
|
||||
|
||||
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<a href="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Color Spaces</h1>
|
||||
|
||||
<p>Have you ever walked into a TV store, with many TVs showing the same video? And the video looked a bit different
|
||||
(brighter, more yellow-ish, various contrast) on each TV?
|
||||
</p>
|
||||
|
||||
<p>Capturing devices (digital cameras, scanners) and displaying devices (monitors, printers) have various technical properties.
|
||||
Color Spaces provide the ability to make colors look always the same, no matter what capturing or displaying device has been used.</p>
|
||||
|
||||
<h2>Absolute colors</h2>
|
||||
|
||||
<p>To compare, which object is heavier in a real world, we need to give each object a number: weight (measure it).
|
||||
Two objects have the same weight, if that number is the same for both of them.
|
||||
There are many units of weight (grams, pounds, ounces), which can be converted, one unit to another.</p>
|
||||
|
||||
<p>
|
||||
To compare colors in a real world, each color should be given a number, too.
|
||||
Two colors are the same, if that number is the same for both of them.
|
||||
There are two popular units (<b>color spaces</b>), that are used in practice: <a href="//en.wikipedia.org/wiki/CIELAB_color_space">CIELAB</a>
|
||||
and <a href="//en.wikipedia.org/wiki/CIE_1931_color_space">CIEXYZ</a>.</p>
|
||||
|
||||
<p>
|
||||
While Grams (unit of weight) consist of one number (e.g. 150 grams), CIELAB (unit of color) consists of three numbers (e.g. CIELAB 0.5, 0.7, 0.1).
|
||||
These numbers are called <b>channels</b> or <b>components</b>.
|
||||
</p>
|
||||
|
||||
<p>Let's say we have a square hole in a wall, and there is an apple on the other side, with a blue cloth behind it.
|
||||
We take a picture of it, print it, and put that printed picture behind a second hole in a wall (illuminated by a proper light).
|
||||
We also display the same picture on an LCD monitor, which we put behind a third hole.</p>
|
||||
|
||||
<p>If the digital camera can store real colors into correct CIELAB values, and both the printer and the monitor can correctly reproduce any CIELAB values,
|
||||
we should not be able to distinguish (with our eyes), which hole contains a real apple, which one is the monitor, and which one is the ink on a paper.</p>
|
||||
|
||||
<img src="//i.imgur.com/WxzfiLv.png" class="fullw" />
|
||||
|
||||
<h2>Device-specific colors</h2>
|
||||
|
||||
<p>First monitors created colors by combining three lights, usually referred to as Red, Green and Blue (RGB)
|
||||
(note, that "Red" in terms of color is ambiguous, just like "Heavy" in terms of weight; one would need to specify a CIELAB value to be precise).
|
||||
It was natural to store a color digitally as three numbers: intensities of Red, Green and Blue for that specific monitor.
|
||||
Such color always looked the same on all monitors of that specific brand. But these values had no relation to CIELAB.</p>
|
||||
|
||||
<p>More monitor manufacturers appeared, each of them using materials with different physical properties.
|
||||
The RGB color value for one monitor looked different on another brand of monitor.
|
||||
Finally, a proper system with three components was created, called <b>Standard RGB, or sRGB</b>.
|
||||
There is an exact formula, how to convert between sRGB and CIELAB, so each sRGB color actually corresponds to a real-world (unambiguous) CIELAB color.</p>
|
||||
|
||||
<p>All images were stored in sRGB color space. Each monitor offered many settings, which allowed people to "calibrate" the monitor,
|
||||
until it displayed sRGB values correctly.</p>
|
||||
|
||||
<p>There was the same problem with printers. They usually create colors by mixing four inks, referred to as Cyan, Magenta, Yellow and Black (CMYK).
|
||||
A specific ratio of these inks, that was printed by one printer, could look different on another printer having inks with different chemical properties.
|
||||
Some printers could even use five or more inks. Some printers could produce colors, that other printers could not produce.</p>
|
||||
|
||||
<h2>Color Profiles</h2>
|
||||
|
||||
<p>Let's say, that an absolute CIELAB color [0.3, 0.8, 0.1] can be displayed with RGB signals [224,107,158] on a monitor A, and with RGB signals [231,99,161] on a monitor B.
|
||||
We can say, that each monitor has its own color space, and it can convert any value from CIELAB into its own space.
|
||||
Instead of storing a color digitally as CIELAB, we can store it as any set of numbers, as long as we provide a mechanism,
|
||||
how to convert these numbers into CIELAB.
|
||||
</p>
|
||||
|
||||
<p>All problems with device-specific colors have been solved by <b>ICC profiles</b>.
|
||||
An ICC profile (for a specific color space X) is a set of instructions, how to convert values from the color space X into CIELAB, and back.
|
||||
These instructions are stored in a special file: ICC file (e.g. "Canon_printer_123.icc").
|
||||
Since the ICC profile describes the conversion between the space X and CIELAB, it fully describes the color space X.</p>
|
||||
|
||||
<p>*** Analogy: We could create a "weight space" of "bukalas". A "weight profile" would say, that "one bukala is 1200 grams".
|
||||
It lets us convert between "bukalas" and grams, so it fully describes what a "bukala" is.</p>
|
||||
|
||||
<p>This means, that each digital image (JPG, PNG, PDF) has to be equippeed with an ICC profile
|
||||
(so that we are able to convert its color values into CIELAB),
|
||||
and each printer has to be equipped with an ICC profile (so it can convert absolute CIELAB colors into its own four values of ink).</p>
|
||||
|
||||
<img src="//i.imgur.com/UGZO5Cy.png" class="fullw" />
|
||||
|
||||
<p>Without ICC profiles, each camera would probably store colors in its own color space. Each printer and monitor would have to be equipped with
|
||||
special configurations for images of each model of the camera, and update these configurations, as new cameras appear on the market.
|
||||
I.e. each image-displaying device would have to be aware of all existing image-capturing devices, and make special configurations for their images.</p>
|
||||
|
||||
<p>With ICC profiles, we only specify, how to convert between "our own" device-specific colors, and "common" CIELAB colors.
|
||||
When each party can supply such ICC profile, the result is the same, as if we used the CIELAB space everywhere.</p>
|
||||
|
||||
<p>Usually, the printing software can detect the ICC profile of digital images, and convert them into the printers profile automatically.
|
||||
Also, an image viewer converts colors of the image into CIELAB (using the ICC profile), and CIELAB to sRGB,
|
||||
while a graphics driver takes sRGB colors and converts them into a color space of the monitor (using the ICC profile supplied by the manufacturer of the monitor).
|
||||
We don't deal with any ICC files in practice, the computer (software) takes care of them automatically.</p>
|
||||
|
||||
<p>When we have an image without an ICC profile, "guessing" its color space is very dangerous.
|
||||
It is like having some numbers specifying weights, and guessing, if they are grams or ounces.</p>
|
||||
|
||||
<p>Also, just saying, that an image (file) is in RGB, or in CMYK, makes no sense. The value (255,0,0) could be Red, as well as Green.
|
||||
Unless the color space is specified (with an ICC file), we can not be sure, what color is meant by the values inside a file.</p>
|
||||
|
||||
<p>The sRGB space is very popular for storing digital images. Authors (of images) usually only specify, that the image is in sRGB,
|
||||
without attaching a specific ICC file to it. Converting sRGB to CIELAB is very simple, and the formula
|
||||
is usually built into a graphic software.</p>
|
||||
|
||||
<p>sRGB is also used on the Web: when we specify <code>#ff00ff;</code> or <code>rgb(255,0,255)</code> in CSS,
|
||||
browsers expect these values to be in sRGB space.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,154 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/rselect.png" />
|
||||
<img class="inline" src="//www.photopea.com/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="//www.photopea.com/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="//www.photopea.com/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="//www.photopea.com/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="//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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,168 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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 sides and the rotation center at the middle.</p>
|
||||
|
||||
<img src="//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 sides to scale it horizontally or vertically.
|
||||
When the Ctrl key is down, press and drag the side to <b>skew</b> the content.
|
||||
</p>
|
||||
|
||||
<p>Besides moving the rectangle, you can set transformation parameters directly in the top menu. Following parameters are available.</p>
|
||||
|
||||
<img src="//i.imgur.com/i4QAQSt.png" />
|
||||
|
||||
<ul>
|
||||
<li><b>X, Y</b>: the position of the object</li>
|
||||
<li><b>W, H</b>: Width and Height. Add "%" or "px" for the value in percent or in pixels</li>
|
||||
<li><b>Angle</b>: the rotation of the object (in degrees)</li>
|
||||
<li><b>Skew X, Y</b>: the skew of the object</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Common transforms</h3>
|
||||
|
||||
<p>When you need to do a "common" transform (such as rotating 90 degrees, or "mirror" the image left-to-right), you can do it much faster.
|
||||
Press <b>Edit - Transform - ...</b> and choose one of predefined transformations.</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="//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="//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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,154 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - Guides & 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
|
||||
<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="//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="//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 enabled or disabled using View - Show - Guides, Grid or Pixel Grid.
|
||||
There is the main switch: View - Extras, which can disable them all at once.
|
||||
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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,130 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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 precision, but it also makes image files larger.
|
||||
You can change the document resolution in several ways.</p>
|
||||
|
||||
<h2>Scaling the image</h2>
|
||||
|
||||
<p>Photopea allows you to make the resolution 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 enter a new DPI value there.</p>
|
||||
|
||||
<img src="//i.imgur.com/eGQtaoM.png" style="width:50%" />
|
||||
|
||||
<p>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="//www.photopea.com/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="//i.imgur.com/Yvmwyip.png" />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,120 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0 active"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
<h2>Starting and using Photopea</h2>
|
||||
|
||||
<p>Photopea editor works in a web browser. It can be started by going to <a href="//www.Photopea.com">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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,162 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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. Duplicate content also makes PSD files larger.</p>
|
||||
|
||||
<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="//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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,124 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0 active"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Layer Manipulation</h1>
|
||||
|
||||
<p>Photopea offers you many ways to manipulate layers. You can move them, rotate, bend etc.</p>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,139 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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="//i.imgur.com/MbS29Wz.png" />
|
||||
|
||||
|
||||
<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="//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>
|
||||
|
||||
<img src="//i.imgur.com/q6tlfAl.png" style="width:50%" />
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,186 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0 active"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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 has no effect on other layers.</p>
|
||||
|
||||
<img src="//i.imgur.com/34MoKlQ.png" class="fullw" />
|
||||
|
||||
<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 (while still holding Ctrl) 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 your computer.</p>
|
||||
|
||||
<img src="//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 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="//en.wikipedia.org/wiki/Blend_modes">blend mode</a></b>
|
||||
and the <b>opacity</b> of that layer at the top of the Layers panel.</p>
|
||||
|
||||
<img src="https://i.imgur.com/qu5XzNK.png" style="width:40%" />
|
||||
|
||||
<p>Each layer can be <b>locked</b> in several ways:</p>
|
||||
<ul>
|
||||
<li><b>Transparency</b> - the transparency is locked (you can paint only into non-empty areas)</li>
|
||||
<li><b>Pixels</b> - pixel data is locked (you can not paint into the layer)</li>
|
||||
<li><b>Position</b> - position is locked (you can not move the layer, rotate it, etc.)</li>
|
||||
<li><b>All</b> - all previous locks at once</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<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 a 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 layers 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="//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="//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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,153 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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 black 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 shown. Precisely, masks can have many shades of gray,
|
||||
and produce many levels of transparency.</p>
|
||||
|
||||
<img src="//i.imgur.com/J4HHczM.png" class="fullw" />
|
||||
|
||||
<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="//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">chapter about vector graphics</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,121 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Moving Selected 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="//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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,149 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>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>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/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="//www.photopea.com/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>
|
||||
|
||||
<h2><img class="inline" src="//www.photopea.com/img/tools/rview.png" />Rotate View tool</h2>
|
||||
|
||||
<p>This tool allows you to rotate the view of a document. You can find it right under the Hand tool.
|
||||
Click and drag the document to rotate it around the center of the screen. Click <b>Reset</b> at the top to go back to 0°.</p>
|
||||
|
||||
|
||||
<p>Zooming and scrolling is also possible with a <b>mouse wheel</b>. Turn the mouse wheel to scroll vertically, or add Ctrl to scroll horizontally.
|
||||
Hold the Alt key to zoom with the mouse wheel instead of scrolling.</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>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,145 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
||||
|
||||
<title>Photopea - 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="//www.photopea.com/learn/" class="title">Learn Photopea</a>
|
||||
<!--<p>Web-based image editor.</p>-->
|
||||
<a href="//blog.photopea.com">Blog</a> |
|
||||
<a class="curr" href="//www.photopea.com/learn">Learn</a> |
|
||||
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
||||
<a href="//www.photopea.com/templates">Templates</a> |
|
||||
<a href="//www.photopea.com/api">API</a> |
|
||||
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
||||
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
||||
</div>
|
||||
<div id="main" style="max-width:1000px;">
|
||||
<div id="sidebar" style="width:22%;">
|
||||
<h3>Topics</h3>
|
||||
<ul>
|
||||
<li class="lvl0"><a href="/learn/">Introduction</a></li>
|
||||
<li class="lvl0"><a href="/learn/workspace">Workspace</a></li>
|
||||
<li class="lvl1 active"><a href="/learn/opening-saving">Open and Save</a></li>
|
||||
<li class="lvl1"><a href="/learn/navigation">Navigation</a></li>
|
||||
<li class="lvl1"><a href="/learn/image-size">Image size</a></li>
|
||||
<li class="lvl0"><a href="/learn/layers">Layers</a></li>
|
||||
<li class="lvl1"><a href="/learn/masks">Masks</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-styles">Layer Styles</a></li>
|
||||
<li class="lvl1"><a href="/learn/smart-objects">Smart Objects</a></li>
|
||||
<li class="lvl1"><a href="/learn/other-layers">Other Layers</a></li>
|
||||
<li class="lvl0"><a href="/learn/layer-manipulation">Layer Editing</a></li>
|
||||
<li class="lvl1"><a href="/learn/free-transform">Free Transform</a></li>
|
||||
<li class="lvl1"><a href="/learn/adjustments-filters">Adjust. & Filters</a></li>
|
||||
<li class="lvl0"><a href="/learn/selections">Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/creating-selections">Make Selections</a></li>
|
||||
<li class="lvl1"><a href="/learn/advanced-selecting">Advanced Selecting</a></li>
|
||||
<li class="lvl1"><a href="/learn/refine-edge">Refine Edge</a></li>
|
||||
<li class="lvl1"><a href="/learn/moving-selected-data">Move Selected Data</a></li>
|
||||
<li class="lvl0"><a href="/learn/brush-tools">Brush Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-basic">Basic Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-advanced">Advanced Tools</a></li>
|
||||
<li class="lvl1"><a href="/learn/bt-smart">Smart Tools</a></li>
|
||||
<li class="lvl0"><a href="/learn/text">Text</a></li>
|
||||
<li class="lvl1"><a href="/learn/text-style">Text Style</a></li>
|
||||
<li class="lvl0"><a href="/learn/vector-graphics">Vector Graphics</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-structure">The Structure</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-manipulation">Editing Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-creating">Creating Shapes</a></li>
|
||||
<li class="lvl1"><a href="/learn/vg-vectorize">Vectorize Bitmap</a></li>
|
||||
<li class="lvl0"><a href="/learn/other">Other</a></li>
|
||||
<li class="lvl1"><a href="/learn/color-spaces">Color Spaces</a></li>
|
||||
<li class="lvl1"><a href="/learn/guides-grid-snapping">Guides & Snapping</a></li>
|
||||
<li class="lvl1"><a href="/learn/animations">Animations</a></li>
|
||||
<li class="lvl1"><a href="/learn/slices">Slices</a></li>
|
||||
<li class="lvl1"><a href="/learn/layer-comps">Layer Comps</a></li>
|
||||
<li class="lvl1"><a href="/learn/actions">Actions</a></li>
|
||||
<li class="lvl1"><a href="/learn/scripts">Scripts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width:78%;">
|
||||
<div class="post">
|
||||
<h1>Opening and Saving files</h1>
|
||||
|
||||
<p>Digital graphics is stored as a <b>raster</b> image, or a <b>vector</b> image.
|
||||
There are many formats for saving and distributing various 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 use their own file formats, that contain raster and vector graphics, and 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 name, character size, the original image behind the letters would be lost).</p>
|
||||
|
||||
<p>Photopea uses the <a href="//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 opened, 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="//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 As - PNG</b>, JPG etc.</p>
|
||||
|
||||
<p>The Save for Web window lets you choose the output format. You can also enter the resolution of the output image.
|
||||
Now, you can already use Photopea to resize images (File - Open, File - Export As - JPG, enter the new size and Save).</p>
|
||||
|
||||
<p>When a document was opened from your device, the <b>File - Save</b> option will not work
|
||||
(Photopea is just a website, and it can not rewrite files in your device). You have to use File - 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>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 4em">Comments</h2>
|
||||
<p>Do you need help? Ask us at <a href="//www.reddit.com/r/photopea/" target="_blank">our Reddit</a>!</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
(function() { // DON'T EDIT BELOW THIS LINE
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://learn-photopea.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">© 2013-2021 support@photopea.com</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview');
|
||||
</script>
|
||||
</div>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user