Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Photoshop in JavaScript: https://www.photopea.com/

I use it all the time, amazing it was created by a single person!



Oh my god that's literally insane. Sorry, but I am astonished by what it implements.

Layers? Path editing? Blending options? Content-aware fill? Convert text to shape? In a web browser?

I'm just blown away right now. I'm editing a 2000x3000 pixel image and it seems just as fast as my copy of actual Photoshop.

I can't even fathom how much work this must have been. One person? How is that even possible?


He did a few AMAs on Reddit:

https://www.reddit.com/r/IAmA/comments/c8ru2y/i_made_a_free_...

https://www.reddit.com/r/IAmA/comments/9urjmg/i_made_a_free_...

I find this fact mind blowing:

Right now, Photopea is about 1.4 MB (most of it is zipped javascript).

880 kB is the actual program

150 kB are localizations to 38 languages, with 650 phrases in every language

116 kB is a database of gradients, brushes, patterns and contours

84 kB are icons (112 of them, in a 160x160 px resolution)

23 kB is a font database (names, categories and URLs for 4700 TTF files)


i hope he's getting payed


From one of the comments:

"With ads, you can make between 2 to 6 USD per 1000 visits on your webpage. So with 3 millions of visits, I can make between 6 to 18 000 USD a month, it depends on a month and an ad provider (I have been testing several of them lately)."


And some people say 10x programmers don't exist.


It also shows how much an individual can achieve without big corporate and nowadays "agile" bullshit overhead.


So true!


forget 10 , this is some 100x type shit


Woah and it works from a mobile browser too! Albeit the ui is a bit clunky on mobile - but it's running!


Huge work! That's awesome! The power of photoshop for Linux. No install. Supra fast! Wow!


I wonder what are the specs of your machine and how much % RAM and CPU usage is absorbing


Photoshop is very limited by single core anyway due to so much of it being so old and still prefers to page to disk current version refuses to open at all with less than 10 gig free, not sure what feature they added that justifies this because it didn’t use to be the case.

You just take it for granted till you see After Effects blow it out of the water and not demand that much.

Apps for doing graphic work should be maxing out your machines power, that’s what it’s there for. When my rendering engine uses 100% of my two gpus it doesn’t feel sluggish it feels fast.


Easy to tell when Photoshop is sluggish on my MacBook air but Affinity Photo is as smooth as one wants it to be when just scrolling an image but the PSD format dominance is just killing the market competition when you're being sent a PSD file.


BTW they made a very fast inflate lib which I repackaged (with permission) into an unzip library that AFAIK is 6 to 25x faster the most popular unzip library.

https://www.npmjs.com/package/unzipit

That speed mostly comes from their library.

Have not gotten around the making a corresponding zip library.


Nice. Although one of the hidden power of Photoshop is the ability to open ridiculous large image files without any hurdle whatsoever. The other day a client sent a 5GB comp we had to open to modify some text, I was surprised how well Photoshop handled it, on a relatively cheap laptop.

Not sure how it would fair in the browser.


If you don't mind me asking, what's some like meta data you could share on what makes for a 5GB photoshop file? I'm just really curious at how a single photoshop file gets that large. Does it contain a bunch of workflows and auxiliary assets or something?


My wife creates prints for our fabric printer, and the PSD files are often larger than 2GB, containing for example a 55" wide image that is 6+ yards long, at 150-300 dpi with a bunch of layers. Somehow her low-specced 2015 Macbook Pro 13" has handled this type of work just fine, as long as there's enough free space for the scratch disk.


Here's one you can download: https://www.spacetelescope.org/images/heic1502a/

4.3GB Photoshop (PSB) image of the Andromeda galaxy. It's only one layer, but the resolution is 69536 x 22230.


It could be a really large render of a `dot` graph. That's the only kind of 5GB PNGs I've had to work with.

While on that topic, anyone have any good ideas in situations like that? Rendering a really large SVG from scratch is not feasible, also most SVG renderers actually fail on really large SVGs in my experience. I've always had to export as PS or just direct render into PNG.


I recently had a graph that dot refused to render to PNG since its maximum buffer was too small. A scaling factor that made it fit also made it unreadable.

We rendered to a 500MB SVG and opened it in Firefox, which worked quite well after the initial load. Bonus: we used the dev tools to navigate the thing.


My friend designs mobile apps in Photoshop, when I built him a new computer he opened up a 12gb photoshop file to see how it performed because his old iMac crashed. (it was buttery smooth on the new computer and opened almost instantly)

The canvas size is insane, and has like 100 different views of screens all layered with 100s of folders with 100s of layers.

He used to do 1 photoshop file per screen until he took that idea from someone else.


Probably would have been a 100-200 meg Fireworks file of Adobe hadn’t killed that.

Photoshop is incredibly wasteful in its resource usage to do UI design in.

(Fireworks had almost the entire feature set of Sketch but 10 years earlier for those that don’t know)


When I was studying I much preferred fireworks. It was awesome.

I asked my friend last night what his largest photoshop file is but he said he no longer uses photoshop for about a year now. Everything is in sketch. And he’s back on an iMac. I’ve never heard of sketch.


I think about Fireworks all the time. RIP.

It was what I was most scared about dying when Adobe bought Macromedia... and I was right.

Now only if I could get a "Fireworks" clone in JavaScript, ha.


Im sure he does great work. Just pains me to picture this though, compared to what can be done with Figma or Adobe’s own XD.


I’m sure there are many ways, but I’ve done it by stitching together dozens of photos to create a panorama.


That makes sense I need to go look up how big photo files are now I guess.. It has been many years since I used photoshop for editing photos (or at all I suppose); my last camera (excluding my phone) was a Nikon D70 (only 6 megapixels).


I was surprised recently when my GF was uploading photos from our camera to our file server and it's like 50MB per file and that the last few months of photos was like 100GB of data to upload.


Bert Monroy is known for his hyper-photo-realistic style combining Illustrator with Photoshop, and makes extremely high resolution deeply layered images, on the order of 6.52 GB flattened, with 700,000 layers. He's been using Photoshop since before Adobe had it, wrote the first book on Photoshop, and teaches classes about it. His work is on display at the Computer History Museum!

https://en.wikipedia.org/wiki/Bert_Monroy

https://computerhistory.org/profile/bert-monroy/

https://computerhistory.org/blog/my-journey-into-digital-art...

https://www.bertmonroy.com/timessquare/timessquare.html

Times Square

This is the largest image I have ever created, pushing the boundaries of the software and hardware as far as they can go. It was unveiled at the Photo Plus Expo in New York on October 28, 2010 as a work in progress. A 25 foot light box was constructed to display the piece that has been printed on a new material being introduced by Epson.

• The image size is 60 inches by 300 inches.

• The flattened file weighs in at 6.52 Gigabytes.

• It took four years to create.

• The painting is comprised of almost fifteen thousand individual Photoshop and Illustrator files.

• Taking a cumulative total of all the files, the overall image contains over 700,000 layers.

Excerpts from Wide-Format Imaging Magazine

Nov/Dec 2010

...Displayed at this year’s PhotoPlus Expo in NYC, Monroy’s “Times Square” is action-packed with color and detail. People lean forward to study the print’s many stories depicted under the illuminated signs and bright lights of the city’s iconic landmarks. Hundreds of colorful characters can be seen throughout the image in groups, traveling solo, pointing at the sights, dodging yellow taxis, aiming cameras, shaking their fists, chatting amongst each other, dragging luggage, gazing longingly out of windows, and in some cases even thwarting crime.

Printed on Epson’s DisplayTrans Media with the Epson Stylus Pro 11880 printer, Monroy’s masterpiece is the culmination of four years of work. The digital artist created each element using Adobe Photoshop and Adobe Illustrator. He built the 6.52GB image pixel by pixel, using more than 750,000 Photoshop layers. Monroy spent countless hours creating intensely detailed scenes, the likenesses of his family, friends and many luminaries in the imaging industry, and landmarks in and around Times Square.

The image is a “who’s who” in the world of digital imaging, featuring individuals who have made a significant impact in the industry. Adobe Photoshop founders John and Thomas Knoll stand in the main foreground, surrounded by digital imaging experts such as Russell Brown and Jeff Schewe. An assortment of photographers includes John Paul Caponigro, Greg Gorman, Jay Maisel and Jack Reznicki, each telling their own story. Monroy even included a cameo of his younger self, looking out from the window of a yellow taxicab, reliving a brief stint as a New York taxi driver.

A defining moment in his quest for new digital art techniques was seeing “Times Square” printed for the first time with Epson’s new backlit material designed for ink jet printing. “I was halfway into the Times Square project when I heard Epson was developing DisplayTrans Backlight Media for creating backlit signage to be used in a lightbox,” said Monroy.

The opaque, polyester film has an opacifying layer that diffuses light throughout the printed image so it is evenly lit. "That extraordinary final print of 'Times Square' on DisplayTrans Media with the Epson 118000 printer was exactly the way I'd envisioned the result. The colors are beautiful and vibrant, the blacks are rich and dark, and the flesh tones are warm and natural," said Monroy...


Well, for start, you would need to upload 5GB. Not sure how much time it would take you given that usually normal US consumer has a crap connection when it comes to it.

Always amazed how in Earth USA is still 1st economy with all the crap Verizon/Comcast & Co do to average US citizen.


It's JavaScript. It runs on the client side.


Couldn't you upload the file to a blob, keeping it client side?

Re: MarcellusDrum


lol, so much so, I create games in javascript so I only need a static server.


The script do run on the client side, but it can't access images from your computer, so you will have to upload it first so it can access it from the server.


Yeah, but you don't upload it - you just make it accessible to the browser. So you read it into memory, but you would do the same with a "native" program (despite the fact that a very large file might be read more intelligently if it doesn't fit into RAM).


It may be possible via the FileReader API


That is actually super useful. I've already migrated diagrams to draw.io, and now I can do the same for simple photo editing. Super useful for work too, since a webpage is much easier than installing a program.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: