#circle icon tutorial

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.