Can a browser based Photoshop clone compete with Photoshop? I took PHOTOPEA for a high end retouching test

Stefan Kohler

Stefan Kohler is a full-time retoucher. He’s from Germany and likes bacon. In the last years, he built up a broad community around his retouching classes at the Infinite tool’s website.

https://youtu.be/6F9pukHTAoA

A few days ago I’ve heard about a browser-based Photoshop clone. Of course, I had to test it – not only because I love these crazy projects, but also because of my background as web developer some years ago. So I visited photopea.com and enjoyed what I saw: An in-browser Photoshop clone. A bit simplified but still very impressive.

I quickly tested some of my main tools: the brush, curves, masks, and various healing tools. Apart from the latest, everything was pretty OKish, so I decided to press record on my screen capture software and upload one of my files.

Well – I quickly found out it’s not very clever to upload a RAW file. Second try, after a quick high res JPG conversion with Capture One I was ready to go.

My normal workflow – which I always follow – is Structure first, Shape second and Color third. Translated to tools that means Healing brush, Dodge&Burn and mostly Curves and Color Balance adjustment layers.

Here is what I discovered in my one-hour test. Obviously, Photopea has to face some serious opponent: Photoshop CC2018, which I use on a daily basis.

Look and feel

Starting Photopea is faster than starting Photoshop and it looks – besides the Ads-Bar on the right – very familiar. No need for documentation, no need to guess what is what and where. Excellent.
I quickly created my first document and started with the thing that’s the most important for me: The Brush.

Oh god, I really love Photoshops Brush engine and that broke every other Image editing software – at least for me. I have to admit, my Computer is rather on the “enough power” side of things with it’s 8 (real) cores and 128GB of RAM and a GTX1070 as well as a Quadro for serious color work.

How’s the brush engine in Photopea?

Hell yes! That felt EXACTLY like Photoshops brush! Halleluja, that is good. 4% Flow, soft standard brush – Yes. That’s exactly what I expect and exactly what I am used to. At that moment I had no idea how that changed over time…

The menus are very clean – I wish Photoshops menus would look like that. There wasn’t much I was missing, but you know – I am not really using a lot beside my standard tools. Obviously, a lot of functions are simply not there. Not a big deal. I wanna retouch with a high-end approach and see how far I can push it.

All right – the brush works, let’s load that 36 Megapixel JPG I’ve converted earlier. While I thought “that was fast”, I realized I am actually not working online on a server. I am working on my computer, with my resources and therefore the upload was super fast because it was technically no upload.

The zoom isn’t as smooth as Photoshop does it, a lot of artifacts are visible as soon as I hit a number that wasn’t 50% or 25%. I can live with this.

Ok, let’s get some work done.

The Healing process

Starting with the healing process, I try to give the skin structure a nice even distribution of pores. The healing brush is my favorite tool because I can use it on a blank layer for a non-destructive process as well as I have 100% control over the area where I am sampling from. Photoshops Healing brush does a very good job in putting structures from A to B and fixes luminosity as well as color for me.

In Photopea it’s not that easy… the Healing Brush does something but it wasn’t reliable for me. I ended up with lots of visible edges of my brush. Ok, next tool – the Spot Healing brush.

Damn, this isn’t working the way I expect it either – it left me alone with visible edges or blurry parts – not usable.

The Clone Stamp Tool did work as expected. And did a pretty good job! Ok, there is no magic in the Clone Stamp Tool. Take a portion from A and put it on B. Easy. Unfortunately not very helpful with skin, where small hue, saturation, and luminosity changes are really important for a natural looking image. So I did a dive into the menus and found a solution: the good old Frequency separation with a high pass filter (unfortunately no Apply Image there).

The process is straightforward:

  1. Duplicate the Background layer and name the lower one LOW, the upper one HIGH and hide the HIGH
  2. A Gaussian Blur Filter is set to a radius where everything I needed to fix was not visible anymore. That radius was 6px.
  3. Now the HIGH-frequency layer gets a Highpass Filter with the same 6px radius and it’s Layer Blend Mode is changed to “linear light”.

The difference with and without Frequency Separation is visible, so the filters definitely have some flaws… but we are not doing the September Vogue cover here, so I just pretend to not notice this.

While I keep the LOW completely untouched, the Clone Stamp Tool does a good job on the HIGH layer. For sensor dust, my first help layer – the Solar Curve – comes in handy. Well… it took a while because somehow things are not that fluid anymore and the curves don’t have the input and output numbers. I managed to fix the curve while it’s hidden, so it there was no need to calculate the changes in real-time. Good. nearly no sensor dust so I quickly proceed to my next step: Dodge and Burn.

Fix Luminosity Issues

My Dodge and Burn Workflow require a bit of preparation (I’ve learned this one from Conny Wallstom):

  • a help layer that makes all color go away
  • a group with a mask
  • a curves layer
  • a hue/saturation adjustment layer

Easy – everything works just fine… besides the brush. Holy moly that is some serious delay here, so the process is not only time consuming, it’s also exhausting. Brushstroke, wait, stroke, wait, wait, wait… Usually, it’s paintpaintpainthurryhurryflopflopchhhhhhhhhhbrushbrushfixthisandthatDONE.

30 Minutes where gone very quickly, so I decided to move on. Too bad, Dodge & Burn is my favorite part in retouching.

Color Grading

There is a dark grey background, so it should be easy to select it in the channels, create a quick mask and … wait… no channels. Okay, quick selection it is then – nope… Magic Ward Tool. Fair enough, we use this and it has to be good enough. It will be good enough as long as the changes are subtle.

A bit less red and a bit less green, a bit of an RGB compensation and that’s it. Less is more.

Contouring

As I’ve reviewed my image, I wasn’t that happy. “Not happy” leads to more work or quick tricks. More work in Photopea means more waiting time, so the technique of choice is “contouring” – basically it’s D&B on a zoomed out image with a big, soft brush.

Save the work

One hour of work, so let’s save this one as PSD and review it in Photoshop – just to be safe, a quick export as JPG … you never know. Well, it turned out I did know because the PSD export was also the end of my working session. The Program shut down.

That’s a nice feature – no one should work too long on one image.

Here’s my semi-final image as before/after:

Before imageAfter image

Conclusion

First I have to give Kudos to the Developer Ivan Kutskir for being awesome and doing this. It’s impressive to see what’s possible in today’s browsers and there is a lot of magic behind this! I worked quite a while as Developer for Web-based solutions and I can only barely imagine how much sweat and tears (and probably coffee) went into Photopea.

I am deeply impressed and that happens not too often!

To make it short: I will keep my Adobe subscription for now. While it was super fun working with Photopea, I can’t produce the quality I am used to. On the other hand, I can see tons of good uses!
It’s perfect for “spontaneous help with images on someone else’s computer”, it’s nice to do title cards and easy stuff with it, when Photoshop is not available or messed up an update (if you know what I mean).

Photopea has a Bookmark in my Browser now.
That says a lot.


Filed Under:

Tagged With:

Find this interesting? Share it with your friends!

Stefan Kohler

Stefan Kohler

Stefan Kohler is a full-time retoucher. He’s from Germany and likes bacon. In the last years, he built up a broad community around his retouching classes at the Infinite tool’s website.

Join the Discussion

DIYP Comment Policy
Be nice, be on-topic, no personal information or flames.

Leave a Reply

Your email address will not be published. Required fields are marked *

8 responses to “Can a browser based Photoshop clone compete with Photoshop? I took PHOTOPEA for a high end retouching test”

    1. Stefan Kohler Avatar

      Alexandre Pontes photopea, but spoken .. yes … pee

    2. Kai Gut Avatar

      Stefan Kohler not like “Utopia”?

    3. Stefan Kohler Avatar

      Kai as far as I understood from the developers AMA on reddit it‘s „pee“

    4. Kai Gut Avatar

      Damn…they literally had the utopia reference in laying there…

    5. Kai Gut Avatar

      But no, let’s call it pee

    6. Midorihafu Avatar
      Midorihafu

      In re. to the pronunciation, I wondered about it as well, but never made the connection to the eutopia/dystopia possibility noted by Kai Gut–and that entirely because of the spelling. I assumed the given spelling allows two different pronunciations depending on the location of stress on the final syllables. I live in Japan where “vowels” are never silent, so I wondered if it was meant to be pronounced phō-tō-pè-ā, but that made about as much sense as placing the stress on the final a (phō-tō-pē-à). Due to the spelling, though, I considered that maybe the inventor intended phò-tō-pē (or phō-tō-pē-, based on the metaphoric sense that the software package was compact (“small as a pea”). On reflection, though, I agree with Kai that the best interpretation is the one based on the concept of “topos” (world or place), with resulting stress on the second “o”, namely phō-tò-pē-ā.

  1. Ayaan Ahad Avatar

    Photopea is an advanced image editing software. Free Online Photoshop supporting PSD, XCF, Sketch,XD and CDR formats. (Adobe Photoshop, GIMP, Sketch App, Adobe XD, CorelDRAW).