do you know of any tips/tutorials on how to make round icons?
So I don’t know of any tutorials on making round icons, BUT I can totally show you how I made mine because the way I did it was super simple and easy. I’ll even attach pictures. I don’t use photoshop, so if you’re looking for something complex like that, this isn’t it.
So the first thing you need to do is go to this website called Lunapic. It’s an online image editor that you can use for free. Click on “More Upload Options” down towards the bottom right.
Next, click “Choose File” and find the image you want to make into a circle. To make my current icon I started with the square version of it. After you’ve selected the item from your gallery press “Upload Now!” toward the bottom.
At this point you’ll see your starting image. From here, click on the little dashed square icon in the top left corner.
This takes you to the menu for cropping images. Click on “cutout.”
Under where it says “Select Crop Shape” pick the circle, then drag the corners of the circle to where you want the edges of you icon to be. When you’re finished, press “Crop Image.”
And there you have it. Everything with the checkerboard pattern in the background is now transparent, and you have a circular icon.
How to edit square icons into circle icons, batch icon method.
Alrighty, so first off, here’s the link to the tutorial I made on my rp blog for how to batch edit your icons. This method for creating icons is what I’ll be using as the base of this tutorial. Please note that this does require either the animation toolbar or the timeline one depending on which version of photoshop you’re using.
This shows you how to go from this
to
Okay, so first things first, you can either do this step directly after you’ve just made icons, or you can load your previously made icons via the batch method. Go to file > scripts > Load files into stack and this will take you to a screen that looks like this.
From there, you’re going to want to hit browse and select all the files you want to edit.
(don’t mind the file names, my computer wouldn’t let me cap this part of the process, so this is from my batch icon tutorial) Once those are selected, you’re going to hit okay, and they’ll start to load.
Once they’re all loaded, they should look something like this.
Alrighty, so what you’re going to want to do here, is select the icon that I’ve circled below, and you’re going to want to hit make frames from layers, then you’re going to want to hit reverse frames.
From there, you’re going to want to create a separate new file using the Ellipse tool or you can just hit U to make it. The document size can vary depending on how large you want your circle icons to be. I created a file that was 100px by 100px and made it transparent for the background instead of white. Then I used the tool with the settings below to create my circle.
From here, you’re going to want to pull that entire file off to the side so you end up with something that looks like this.
Then you’re going to want to click and drag the circle you just made and put it under the very bottom icon file, so you get something that looks like this.
Now you’re going to want to deselect the circle layer and select the actual icons layers themselves on the side of the screen. Once you’ve done that, you’re going to want to right click and select create clipping mask.
This will leave you with something that looks like this.
From here, you’re going to want to go up to file > export > render video
From here, a screen is gonna pop up that looks like this.
Make sure you select where you want your files to go, what you want them to be called, etc. BUT, and here’s the mOST important part, go down to where you see render options, and make sure you change Alpha Channel to Straight - Unmatted. This is what allows your icons to be transparent everywhere else but the circle, if you don’t change this, you’ll end up with a white square under your nice circle icon.
BUUUUT, once you’ve hit render, it’ll save your icons where you told it to, and you’ll end up with a nice neat folder with icons that look something like this.
Please note that some adjustments should probably be made so you don’t end up with slightly cut off sides to your icon. But here’s how you can do it in batches...I hope this is at least a bit helpful.
Also, per usual, if you have any questions whatsoever, send me an ask and I’ll try to help you!
