ChatGPT and Gemini can be great for generating images for websites, but only get 90% to what you need. Sometimes you already have a logo, but the background needs to be stripped out or something needs cropping. Sometimes a slight tweak in alignment or aspect ratio of an image asset goes a long way. The best, free resource for this I've found so far is Photopea.

The Problem

I've been guilty a number of times in my career of taking my designer colleagues for granted. Now that I don't have one to rely on for my freelance projects I've realized how nice they are to have around. I touched on my struggles with generating intuitive user interfaces on my own in my post about v0, but one problem v0 doesn't magically handle for you is populating its generated experience with images. It will leave placeholders where it thinks you should place the images, but the rest of the legwork is up to you. Proper images bring a page to life, and in many cases are essential to having a site feel professional and ready for the internet.

I've found out the hard way that there's a lot of ways to get image assets wrong on a page - improper aspect ratio, large file size, poor resolution, wrong file type. I found this guide useful for getting the basic concepts into my brain, and while banging my head on my desk I realized all the work that my former co-workers had put into getting the images assets my team used on our pages just right. And I had complained about how long they took to do it! I was so young then...

The Struggle

AI Image Generation

These tools can be great. I've gotten good use out of both DALL-E and Google Gemini for generating logos, hero images, and shining up existing photos that needed a little bit extra to really make them pop. As many of us know though, AI tools come with their own set of problems. The main one I encountered with image generators was that If you get an image 90-95% where you want it, getting the prompt exactly right to fix the last 5% without ruining the other 95% is VERY difficult. This is particularly true when you're limited to like 3 or 4 images per day on the free tier like me. Let's dive into this with a case study using the logo for this site...

So I had tried with an older version of ChatGPT's image generation tool to create a logo for Amato Digital Labs. I had given it my brand color, what services I offer, and the feel I wanted the logo to have. It came up with some cool stuff, but often added garbled unreadable text to the image. After a couple week's break, and with 4o image generation released, I tried again:

The only text in the image should be "Amato Digital Labs"

Damn near perfect for what I wanted. I just don't know why the machine struggled so much with that last "s". I had gone back and forth with it previously as it put "Labss", then "Lab" but never "Labs".

I then made the mistake of asking it to help me with a prompt to put into v0 for the landing page for this site, which must have muddied its context.

After that, I then replied to the last image it gave me with an (apparently) overly vague prompt:

should be "Labs" not "Lab"

It put a picture of a form in the image! But not the "s"! What a technology! I was so close. I needed to be specific with the prompt. I was worried that it would change the core of what I liked about the image if I kept going. Would it be easier to try to match the font and color in an image manipulation tool and add the S myself? Maybe, but I had one more image generation attempt left before I hit my daily limit:

keep everything the same about this. do not modify it, other than adding an "S" to the end of "LAB"

I had it - the core of what I needed. But once again, I was only 90% of the way to a useable logo for my website. I needed to realign the text with the logo. I needed a version with a transparent background. I needed just the logo for a favicon. AI image generation is great, but it doesn't remove the need for image manipulation to get assets ready for the web.

Gimp

I should start by prefacing that, at the time of writing this, I am very hesitant to pay for tools. I know that the easy choice for this problem is to just pay for Photoshop, but I refuse to give into the capitalist machine without a good fight.

The first free tool I tried to use for image manipulation was Gimp. Gimp is fine. It does just about everything that Photoshop can do, but with a slightly different interface. I got decent use out of it, and it got the job I needed it to do done. The thing about Gimp though - and this is probably a skill issue on my end - was that it just felt clunky. It was a struggle for me to Google how to do something new with it. I had to click into multiple links, read and sink a bunch of time into learning how to use it. Most of the time I'd end up watching a full 15 minute tutorial on Youtube and replaying 30 seconds of it a bunch of times for the exact tidbit I was stuck on. It wasn't as intuitive as I needed it to be as a layperson to image manipulation.

One other downside to Gimp in my case (but can also be an upside for others) was that it runs as a native app. While that cuts out the need for an internet connection after downloading it, my ancient Macbook would really start to chug when I used Gimp at the same time as having my dev environment up. There could have been a number of factors that led to this, but ultimately the software felt like it was eating a lot of resources on my machine when I used it.

With all that said, if you're looking for a free alternative to Photoshop, give Gimp a try. It may be the droid you're looking for, but it wasn't for me.

Enter Photopea

Photopea is a browser-based version of Photoshop. According to ChatGPT...

Photopea is a free, browser-based photo editor that works a lot like Adobe Photoshop — it can open and edit PSD, XCF, Sketch, and common image formats (JPG, PNG, etc.) directly in your web browser without installing anything.

Here's what I like about it:

1. It's free.
2. It's easy to use and dummy-proof enough that even I don't get confused using it. For example - drag and drop the image asset to manipulate into the Photopea window to get started. If you mess up, refresh the page to start over and drag the original asset into the window again.
3. It's documented and used widely enough that google AI results are able to generate useful answers to questions like "How do I invert the colors of a selection in Photopea?". No digging through multiple links or spending hours trying to find the useful part of a tutorial video to accomplish a relatively simple task.
4. It has (at least from what I can tell) all the capabilities and tools of Gimp or Photoshop (minus all the fancy AI stuff photoshop has now). I don't know how to use layers but if I wanted to I sure could.
5. The fact that it runs in a browser keeps it from weighing down my machine too much.

I found Photopea when asking ChatGPT for a workflow for getting image assets ready for a site. When it was suggested to me, I couldn't believe it was a real thing - it seemed too good to be true.

They do, tastefully, run advertisements in the gutter of one side of the webpage. The ads don't overlay any of the workspace though and I've yet to see anything other than benign brands advertising on the site. I have it pulled up now and the ads are for a cruise line and a mobile carrier. If that's what Photopea needs to do to make their ends meet while giving me the service for free, I'm fine with it. They could be doing something with the assets I upload as well, but for where I currently sit I'll take that as well.

So if you're like me and hate paying for tech tools, but want or need to edit images for whatever reason be it personal or professional, give Photopea a shot. I've enjoyed using it thoroughly, and it's become my tool of choice for this purpose. It's what I used to bridge the gap between that last image that ChatGPT gave me above and the logo in the header/footer/favicon for this site, among other things. 10/10 would recommend it to a friend.

The question is... how is it pronounced? Like Utopia? Or like sweet pea?

Cheers,
Jack