Crop a Photo into a Circle on Canva for your Website

|
Have you ever seen a round image on a testimonial and wondered how to crop a photo into a circle on your own? It’s something you often see, and being able to create a round image is an invaluable skill when designing your website. Plus, they are great for using on social media posts or in downloads. Let me show you how to crop any image at all into a circle using the free tool Canva.
Play Video
Kelly Sparkes Opal and Onyx Founder

Hi, I’m Kelly and I help female entrepreneurs translate their brand and message into a beautiful, responsive website, optimised to draw in and convert their ideal customer.

Signup to our

newsletter

Video Transcript

Hey, everyone. I’m Kelly, and today I’m going to show you how to crop any image at all into a circle using Canva.

Knowing how to create a round image is a valuable skill when designing your website. You will have probably seen round images on testimonials or in the sidebar, at the author’s header on a blog, perhaps. They’re also great for use on social media posts or in downloads.

Let’s go over to canva.com, and if you haven’t got an account already, you’ll need to sign up for one. You can do this by using your Google account, or with Facebook, or you can sign up the traditional way by using your email address.

To create a circle, what you need is a square to start with. So we’re going to start by creating a square template. You can do that by using an Instagram post, which is 1080 x 1080 pixels, or you could create a new one, 1,000 x 1,000 pixels is a good size. If you know the size you’re going to use it on (for example if it’s on your website and it’s only going to be small), just resize it to the image you’re replacing.

All I do now is go to ‘Elements’, and type in ‘circle’. You don’t need the professional version of Canva to do this, you can do everything you need to in the free version, which is brilliant! Then you will see it has all different styles of circles you can add and ones with the cloud means it’s an image, so you can add an image into it.

If you drag it across and fill the space with it, then you can upload any image you want. We’d then have to search for a picture of me, and I can drag that across and into the circle.

Now, if you wanted to change it, you can double click, and you will see (in the video) the square image I had originally.

If I wanted my face more in the middle, I can double click on the picture and make it a bit bigger, drag it around to make sure my face is right in the middle, and then hit return, and it crops it for me.

That’s it, you’ve created a circle image, and now we just need to download it.

Before you click on download, what’s important is that you select PNG as a file type, because we want all the white surround to disappear when we put it on your website. Say you’ve got a great background on your website and you were to put this image in as a JPEG, you’d see the white corners on it, and we don’t want that. Therefore, you want to select PNG, and select ‘transparent background’, because that’s going to make sure the surround is transparent and not white. Then you can click download, and there we go, it’s downloaded.

If we open the image up, we’ve got an image of me with a slightly grey surround (because it’s transparent) and the image is ready to be inserted onto my website, or onto my PDF, or anything else I want to use it for.

And that’s it!

Please let me know what you’re going to be using your round image for, and feel free to ask any questions at all. Thanks for watching. And don’t forget to like and subscribe before you go. And I will see you again soon.

Share the

love

Facebook
Twitter
Pinterest
LinkedIn

Leave a Reply

Your email address will not be published.

Join the List

Signup to the Opal & Onyx newsletter for offers and a weekly dose of Website inspiration & help!