Designing Cover Images for Book Notes for my Blog

I launched my personal website in Dec, 2020. It wasn't and isn't a perfect website. But I try to sneak in a few incremental changes to improve the experience. My blog was also one of the reasons why I wanted a personal website. And improving the reading experience of the blog has been on my wish-list ever since.

Besides articles, I also publish quite a few book notes on my blog, which are just exported highlights from the books I read. Recently, I redesigned the cover images for these book notes (blogpost) to replace the generic images I was using from Unsplash or Google Images.

I spent a few hours yesterday to come up with a template which is easy to replicate for a new book note. The end result is pretty good.

‍

But Why Redesign The Cover Images?

For the first few book notes published on my blog, I shot the cover images myself – with my elderly Nikon D5200, with book covers on my Kindle. It was a lot of work and I got one decent image for 'The Psychology of Money'. I also shot couple more with much less effort for 'Steal Like an Artist' and 'Show Your Work'. Both were horrible looking images – the lack of effort showed brightly in the dimly lit images.

Shooting my own cover images, although tempting, wasn't a sustainable solution in my opinion. It was too much work to create a background, set up the camera and lights properly. Not worth it for a stupid cover image.

For the next few book notes I published, I used generic images from Google Images (with accreditation for image sources). Some of these images turned out to be really inconsistent, low quality. It was also difficult to get an image for less popular books.

It was clear – I needed something custom designed for the cover images.

The Process of Designing Cover Images

I started with the idea of adding book covers on top of a background with some gradient and a line pattern with a reduced opacity. It wasn't really very elegant. But it was the first draft, so I moved on to further iterations.

‍

Eventually, I decided to add some dimensions to the flat book covers. This gave the books a 3D perspective of sorts – like books laid on top of a table. It wasn't perfect, but worked well for the purpose of consistent cover images.

‍

To create a new cover image, I simply have to replace the top layer with the front cover of the book, change the colour of the spine of the book, and the back cover. I take the colour of the spine and back cover from the cover of the book itself with the eyedropper tool in Figma. I export them in the required dimensions and it's good to go.

...

The current cover images look consistent across all the book notes. And almost realistic.