How to create round images for your website
Making images round is not a function of WordPress, so you will need to make them round before uploading them. In order to do so you need some graphic program. When it comes to editing images, you can’t go wrong with Gimp / The Gimp.
Ok, Photoshop is the standard and absolute best program for image editing but it’s also extremely expensive and frankly a huge overkill when trying to do basic stuff. The Gimp can do a lot that Photoshop can and it’s completely free.
To start download and install Gimp from https://www.gimp.org/
Click File – Open and open the image you want to edit. I picked this one.
One thing you have to understand is that round shapes don’t realy exists in digital images. Digital images are simply defined as so many pixels high and so many pixels width. You can’t cut of the corners like you would with paper but you can make the corners transparent, so the background shines through and it looks round.
First we need to make the image square:
- Click the rectangle icon on the left.
- Tick the box next to ‘Fixed’ and set it to ‘Aspect Ration’
- Make sure the box below it says: 1:1 so we make a perfect square.
- Now put your mouse on the top but just inside the image, push the mouse button, hold and drag down. You see the square appear. Make it so everything you want is inside it.
- If you click and hold inside the square you can move it around till you have the image you want.
- Now click ‘image’ then ‘ crop to selection’
Now we make the corners transparent to create the circle:
- Click ‘ Layer’ then ‘Transparency’, then ‘ add alpha channel’
- Click the circle icon on the left. Start left-top, click the mouse button, hold and drag to left-bottom. you see the circle appear within the square.
- Click ‘select’, then ‘invert’ to select everything outside the circle.
- Erase the selection by pressing the ‘delete’ or ‘del’ button on your keyboard.
- Now save it in a format that supports transparency (not all do).. png is a good option for web images, jpg is not.
- Click ‘ file’ then ‘ export as’
- Choose where to save it, give it a name and make sure on the bottom it says: PNG image (*.png)
- Leave quality on 90, that’s fine. Click ‘Export’
Now you have a round image!
Some tips:
- Always start from an image that is bigger than the size you want your end product to be. It’s easy to make images smaller as a final step but If you try to enlarge an image, you will lose quality and it will look bad.
- Try to make the image size the same or a little bigger then the size you want to show it on your website. If it’s too big, the code will make sure it’s shown in the right size but the browser still has to download the too large file and the image will take more time to load then necessairy. If you have a hundred of these, your site will slow down, be marked by Google as a slow website and you will drop in the Google rankings.
- If it looks like a piece has been chopped off, you did not make the section entirely inside the image. It’s ok to have your circle a tiny bit smaller then the square.
- Need more tips? just Google on ‘Gimp’ and what you are trying to do. There are a ton of tutorials on the Gimp on the internet.
