Introduction
When I started working on the cover for my ebook You Don’t Need JavaScript, I thought it would be quick. Turns out, I went through a few different experiments before getting something that actually felt right.
Design is rarely linear. It’s more like a loop of small tests, tweaks, and re-thinking. This cover was exactly that kind of loop: a mix of experiments, quick wins, and a few dead ends that eventually shaped the final look.
Trying with ChatGPT
My first idea was to let ChatGPT generate the cover for me. It was a fun starting point. I described the kind of layout I wanted, the vibe, the green color, and the typography direction. It produced some nice compositions at first glance, especially for the shapes and framing.
But it really struggled with text and positioning. The titles came out fuzzy, the fonts weren’t consistent, and sometimes letters would morph or overlap. It was clear that AI image generation still has a hard time with precise typography and visual hierarchy.
So instead of relying on it for the final image, I decided to use it more like a brainstorming partner. It gave me a few directions, but I knew I’d need to design the real thing by hand.
Defining the Colors
Color was one of the key things I wanted to get right. I didn’t want the ebook to look disconnected from my website. The blog uses a warm, cream background with black outlines and a dark green accent for the call-to-action button. The overall feel is minimal and calm.
For the book, I wanted to keep that tone but make it stand out as its own object. I used a deeper green, close to the blog’s accent color but richer and more saturated. Then I adjusted the text to an off-white tone, slightly warmer than pure white, to soften the contrast and match the paper-like background of the site.
That small color shift made a big difference. The ebook feels like it belongs to the same world as the blog, but with its own identity. No gradients, no glossy effects. Just color, typography, and composition doing the work.
Finding a Mockup
Once I had a sense of direction, I wanted to see the design in context, not just flat on a screen, but as a book. That meant finding a mockup: a 3D “skeleton” of a blank book that you can overlay your design onto. It gives you a realistic preview without having to render the object yourself.
After browsing a bit, I found a nice .psd file that fit perfectly: clean angles, soft shadows, and a neutral perspective. I found it on mockups-design.com.
The only issue was that it required Photoshop… and I don’t have Photoshop.
Discovering Photopea
That’s when I remembered Photopea . It’s a free, browser-based alternative to Photoshop, and it’s honestly incredible how powerful it is for something that runs entirely online.
I opened the .psd mockup in Photopea and everything worked perfectly.
All the layers, effects, and masks were preserved. It even recognized the smart objects (called “dynamic objects” in French) that make mockups so efficient.
These dynamic layers let you double-click the cover area, edit it as a flat image, and then automatically update the 3D version once you save. That’s how the “magic” happens: you don’t have to re-render or manually distort anything, Photopea handles the projection for you.
It’s such a neat system. I replaced the placeholder with my design, hit save, and immediately saw it wrapped around the virtual book in the preview. For a web-based app, it felt almost surreal how smoothly it worked.
Creating the Background Pattern
Flat colors alone looked a bit too plain, so I wanted a subtle texture that would keep the surface interesting without pulling attention away from the text.
I asked ChatGPT to generate a few background patterns, something geometric and modern but lightweight enough to blend in. The results were surprisingly close to what I had in mind: simple shapes, lines, and small details that gave depth without clutter.
Still, I spent some time editing them manually. I cleaned up rough edges, toned down the contrast, and adjusted spacing until the pattern almost disappeared into the background. The goal was for you to feel it more than see it. It’s one of those things you only notice when it’s missing.
Assembling Everything
Once all the parts were ready (the colors, the pattern, and the text) I brought them together in the mockup. The title and subtitle were the last steps. I wanted them to stand out clearly while keeping that same quiet confidence that runs through the ebook.
The typography stayed simple: a clean sans-serif for clarity and balance, paired with small spacing tweaks to make it feel intentional. I used the off-white color for the text, which pops nicely against the darker green background.
After a few test exports and minor alignment adjustments, it finally felt right. Nothing flashy, just cohesive. It looked like something I’d actually pick up and read.
Final Thoughts
Designing the cover turned out to be a mix of AI, improvisation, and human touches. ChatGPT helped me brainstorm ideas, Photopea made the practical part easy, and some manual fine-tuning tied everything together.
It’s a good reminder that even with all the new tools available, the final step always comes down to taste and iteration.
If you haven’t seen it yet, the ebook You Don’t Need JavaScript is available. It’s a practical guide to creating modern websites and interfaces using (almost) only CSS.
