Skip to main content

Command Palette

Search for a command to run...

How I made a tool to create cover images for my blogs quickly

Published
3 min read
How I made a tool to create cover images for my blogs quickly

Do you write blogs? Have you ever struggled to create cover images for your blogs? Well, I did. So I have made a tool that will help you create awesome cover images for your blogs quickly.

frame_chrome_mac_dark (1).png

🗃 The problem

I started blogging a few months back. It's one of the best decisions I have ever made. But every time I wanted to write a post, I had to create and edit a cover image for it. I mean I love creating creative cover images but sometimes I feel I just spend too much time designing it.

And then I saw these comments on my posts. comments.png

I use canva. It's a nice tool. But I thought I need something minimal so that creating those cover images won't be any hassle. Coincidently I just started learning react. I knew some basics and I thought why not implement my knowledge of react and make something out of it. Also, it might help someone else too. And that's how I came up with the idea of this project.

🛠 The process

I started working on this as a fun project. I had an exact visualization of what I wanted to create.

coverview layout.png

So I first created a design of a cover image that can be used as the template user can edit. I asked my self what things I would like to add or what can I do to make the cover image more appealing. And I started playing with it. It was fun. After spending a lot of time, solving problems and finding solutions, this is what I came up with the first build.

cover.gif

📦 The final outcome

I shared it on Twitter and Linkedin and I got a really good response from the developer community. I always wanted to contribute to open source. There are multiple ways to contribute and one of which is creating open-source projects. I open-sourced it. This is my first open-source project with react.

ReadMe Card

And within a few hours, I got my first pull request. Asish Raju made his first open-source contribution by contributing to my project. He added a few more customizable options and refactored the code.

For the first time, I was on the other side of a project. I learned how to manage pull requests, review code, and merged his pull request. Open Source Guides is a great resource to learn.

Features

Then I improved it little by little and added some more features. Here are a few noteworthy features of CoverView.

  • 🛠 Create awesome cover images for your blogs quickly and easily

component (79).png

  • 🌈 Choose different colors for background, foreground, border, and text

screenshot (29).png

  • ✨ Choose from 15+ different background patterns

patterns bg sm.gif

  • 👨‍💻 Add dev icons and author name for personal branding

iconsupdate.gif

  • Update : I saw a lot of people using it but they weren't using nice colors. So I handpicked some appealing color palettes which go well together and now you can choose random color themes on just one click.

randomTheme.gif

  • 💾 Download cover images in .png as well as .jpeg format

I just had a lot of fun making this. You might not be able to create a lot more creative images But having a nice cover is always better than having some random image or no cover image at all.

So check out CoverView

Conclusion

The important lesson I learned while building this is that you don't need to learn a language or framework completely to start making projects. You can start applying while learning it. I feel this way we can learn from our mistakes and understand the importance of one concept over others.


I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

Comments (24)

Join the discussion
K

It has now been 6 months since I started using this tool for my images for my posts. The images now out rank my competitor's posts. I decided to even make a video about this tool , to show appreciation. Click here to watch it

K

Am back again, I have forked (cloned it) from your github, and I intend to edit it and launch it and on my sub domain, I wish to place adsense ads so that I can earn some revenue. I just want to know if this is okay with you or maybe there are things i need to know or do. Your quick reply wil be appreciated.

1
R
Rahul5y ago

Why tf I'm checking this amazing article very late.

1
R

😅🤗 Better late than never. Thanks for reading.

J

Me hiciste mas ligero el trabajo, ¡Excelente solución!

1
R

Gracias. Me alegro de que te haya facilitado las cosas

1
P

Awesome tool. Saves soo much time getting a good image. Thanks for making it!

2
S

I have started posting very recently and this really helps me focus on my content more than designing the cover. I'm definitely going to use this a lot. Thanks Rutik. 👏

2
R

I am glad it helped you.

K

This is going to save me 5 hours per week. I am full time blogger . I dont know how to thank you.

3
R

You're welcome 😊

J

Hi Rutik, this is a nice tool and I will definitely start using it.

I usually use Canva, but your tool seems easier and less clumsy to use. Thanks for building this.

2
R

Thanks Joseph Adediji The motive was to make it super quick and easy.

O

thanks for this, i am definitely bookmarking this, its going to come in handy for me.

2
R

It means a lot. Thank you.

More from this blog

R

Rutik Wankhade

30 posts