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

Subscribe to my newsletter and never miss my upcoming articles

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!

Keith Rainz's photo

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

Rutik Wankhade's photo

You're welcome 😊

Sandeep Panda's photo

This is amazing Rutik. I am going to try it out for my next article.

Rutik Wankhade's photo

Thank you 😊

Peter Thaleikis's photo

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

Sabarish Rajamohan's photo

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. πŸ‘

Rutik Wankhade's photo

I am glad it helped you.

Chibuzor Obilom's photo

Thank you Rutik Wankhade

Joseph Adediji's photo

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.

Rutik Wankhade's photo

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

Ogundeyi Boluwatife's photo

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

Rutik Wankhade's photo

It means a lot. Thank you.

Mandar Vaze's photo

Rutik Wankhade Timing for this could not be better (for me) I've been experimenting with Canva, but your tool just takes couple of minutes and is extremely cool.

One Feature request : Will you consider feature to use own background image ? (It is cool even if you don't. Tool is already helpful)

Rutik Wankhade's photo

Thank you. I am glad you found it useful. And yes, That feature would be great. I am trying to improve it more. Now you can choose appealing random color themes too.

Sai Laasya Vabilisetty's photo

Wow!! I was about to complete my first blog and publish. I have worked for 1.5hrs on creating a cover image. Boom!! then I found this and now I have a cover image in less than 1 minute. This is amazing.😍

Rutik Wankhade's photo

Wow! Thank you so much. I am glad you find it useful. Looking forward to reading your blog. Good luck!

Ganesh Agrawal's photo

This is an amazing tool bro and solved my problem regarding cover image creation. Many times I didn't share an article due to not having much time to spent on canvas for creating a cover image. But this tool going to help us and I loved the minimal design that you used for the background.

Rutik Wankhade's photo

Thank you so much, Ganesh. I am so happy to know that it will help you for sure. Keep writing and sharing your blogs. cheers πŸ‘

Rahul's photo

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

Rutik Wankhade's photo

πŸ˜…πŸ€— Better late than never. Thanks for reading.

Joel Alberto Vilca Tarazona's photo

Me hiciste mas ligero el trabajo, Β‘Excelente soluciΓ³n!

Rutik Wankhade's photo

Gracias. Me alegro de que te haya facilitado las cosas

Peter's photo

Very cool. Would be also great to change the style of the border - e.g. make all corners round and not only the bottom ones.

Rutik Wankhade's photo

Thank you for your feedback. I will work on it. πŸ‘

Amarachi Emmanuela Azubuike's photo

This is an amazing tool. You solved a real problem right here. Thank you.

Rutik Wankhade's photo

Thank you. It feels great to know that.

Mohd Shad Mirza's photo

Very cool. Good job Rutik Wankhade

Motunrayo Koyejo's photo

Very helpful Rutik!! I'm starring it right away

Rutik Wankhade's photo

Thank you Motunrayo Koyejo. I am glad you found it helpful.

Rajan Panchal's photo

Nice concept!! Good work.

How did you embed GitHub link like this?

Rutik Wankhade's photo

Thank you Rajan Panchal. You can add GitHub repo card using this awesome tool github-readme-stats

Edidiong Etuk's photo

I just tested this!!! Awesome work Rutik

Show +1 replies
Edidiong Etuk's photo

Rutik Wankhade yeah! Here's what I did with it. I'm gonna be using it more often!! Thanks again Rutik

Victoria Lo's photo

What an awesome project! Thanks for sharing the process Rutik!

Skay's photo

Great post Rutik! I'm going to give this a try for sure..

Rutik Wankhade's photo

yeah, go on. Thank you.

Subha Chanda's photo

Awesome project! Going to try it. πŸ˜ƒ

Rutik Wankhade's photo

Thanks. Yeah, try it.

Alyssa Holland's photo

This is so cool and inspiring! I love the fact that you created this project out of a need that you had and have made it open source to share with the community. I will definitely be checking this out and great article! πŸ‘

Rutik Wankhade's photo

Thank you so much Alyssa Holland πŸ™