The Advanced Guide to Photoshopping Icons Using Batch Processing
Tired of making icons one-by-one? So was I before discovering the magic of Photoshop. This comprehensive tutorial will teach you every step you need to make fantabulous icons as easily as possible! The only manual steps are resizing images and making your template for icons. I am using Photoshop CS6 for this tutorial, but CC is capable of doing the same steps, and previous versions may also be able to handle it.
If you don’t have Photoshop, go ahead and check out my GIMP tutorial! http://dancingbetweenraindrops.tumblr.com/post/167426124590/how-to-batch-process-icons-in-gimp
Tutorial under cut.
Step 1: Set up Photoshop
Open Photoshop and create a new canvas sized 100x100 or whatever size you would like your icons to be. That’s it for this step!
Step 2: Resizing Icons
Paste art or screenshots of your character into the canvas and resize them to how you’d like them to appear within the frame.
Step 3: Export Layers to Files
Select File > Scripts > Export Layers to Files. You will then be given this screen.
Make sure you have your Destination set to the file directory you’d like your icons in. I’d suggest making a dedicated folder for just these icons, as it will help in the Batch Process.
!WARNING!
Only export about 50 icons at once for maximum speed. Even on my gaming computer it takes a while for more than 50 at a time. I like to have all of my icons ready to go and then delete a group of them so I’m left with only increments of 50 at a time. It’s easy to undo deleting in the history window, so just undelete the previous batch and delete the batch you just finished. For example, if I have 100 icons, I delete icons 51-100 and save the first 50. Then I step back in the history window and delete the first 50 icons and save the last 51-100. Now I’d recommend also SAVING while you have all of them cropped, just in case you mess up while deleting and can’t get them back.
Step 4: Create a template
For this step, open one of the icons you saved from the script saving.
You will notice that the icon layer says “Index” and is locked. Go to Image > Mode and select RGB color to fix this. This is the only time we’ll need to worry about this.
Now for the creative part - you can go absolutely crazy with what you want to do with the icon. Add layers, adjustment layers, whatever you want. I usually start by creating a layer beneath my icon layer (You have to double click on the icon layer and change it to layer 0 instead of background first) and making it into a 95x95 or so box centered in the middle and clipping my icon to that layer.
That gives me a nice border space for my icon. Then I add new layers above that layer to make borders, or new adjustment layers to give them cool effects. Always remember to clip the layers to each other!
One of the most common effects I see in a lot of icons is this “Film” photo filter that washes out colours and softens blacks and whites. How to achieve this look is shown below. It is done using a Curves adjustment layer.
Set it to look similar to this
Adjust as needed.
To get a straight border, use the Layer Style for the clipping layer (the layer that all the others is clipped to.) Go ahead and add a stroke, drop shadow, and whatever else you’d like to your border.
Finally, save your template as a .PSD in the same directory as your icons (for ease) and give it an easy name, such as Template.PSD.
Step 5: Create a Script
This is where it gets tricky. You need to create a script in the EXACT order I give for it to work right. Close your template and open any icon. Then, click the arrow-like tool on the toolbar. It will open the Actions tab. Go ahead and press the little file button to create a new script. Name it whatever you want and then start record.
Once the action is recording, select the icon and hit control+c or copy. Then, go to File > Open and open your template. Paste your icon on top of the default icon. It should automatically clip as long as the adjustment layers above are clipped to the mask. Otherwise, right click on the layer and clip it.
Here, I pasted Layer 2 over Layer 0, the default icon.
Then, go to File > Save As and save your file in a subdirectory within your icon folder. Save it as 001.PNG. Make sure to select PNG and not save it as a JPEG or PSD file. Then, delete the layer you just pasted in and close the template.psd by clicking the little “x” at the top.
Finally, hit Stop Recording on the action panel.
Step 6: Batch Process
Go to File > Automate > Batch
After this, a window that looks like this will pop up
Make sure that your action is selected under Action:. Your source needs to be the folder in which you have all your icons saved. Your destination needs to be the folder you want all of your icons to save to. MAKE SURE TO CHECK “Override Action “Save As” Commands”. Finally, Go ahead and press “OK” and let Photoshop work magic!
