So to get your actions. Go to Window > Actions. Now I’m going to explain a ew things. ALSO, You are going to need TWO FOLDERS (Outside of photoshop) label them FINISHED / COLORED and then one BASES. Don’t move these folders ever or change the names of them. You will need these LATER in this tutorial.

Is the button you click to stop recording your action. 

This will turn red when you are doing your action, that means it is recording what you are doing

You press this to play the action 

Section. I use this to name it so say MIKAELSON ICON PARTS and then one for MIKAELSON ICON FINAL. (There is a reason I normally have two folders for ONE action. Reason is if you change colors, etc, you can have several smaller actions under FINAL ICONS that was different. I’ll explain more about that later)

Subsections. This is of course, where you get your little parts, also known as the action in total.

Of course, this is to delete something even inside of an action.

So when you click that little square next to an action you just did, it means that your action will STOP and you will have a window pop up (Or your crop will be there and you can MANUALLY do that action) once you MANUALLY do the action and hit okay, the action will play as always.

Go to this little gem and a drop down menu will appear. Click on ALLOW TOOL RECORDING. Will save you in the end, promise. This is to help you when you are done and just hitting play on a single action and trying to icon semi fast.

So now open your screencap (Or several at a time to get in an iconing roll).

Make a SUBSECTION in your PART 1 (Or your little pieces/parts). Name it the first part of your icon so CROP Then CROP YOUR ICON. Remember that manual mention of clicking on a box that was above so that you can do it again?

Do it again here so that way you will ALWAYS have it popping up so that you can crop what you want for the icon. Now I would stop this action (Hit the stop button) the reason I say this is because if you ever change your sharpening method, you would have to remake the whole step if we kept going.

This is why I have two folders. One for the pieces parts / smaller things so that way if I change one thing, I won’t have to change everything else down the road. It’s a pain in the ass, you get annoyed by it sometimes but worth it in the end.

Make your FIRST saving action and name it SAVE BASE. Save your BASE (Almost next to no editing besides a crop and resize) to the BASE folder I had you do before we started this tutorial and then stop the action. THIS WAY YOU WON’T HAVE TO RECROP THESE LATER.  I base my icons all at 100x100 so that way if I want to size down, I can do that at a later date. If I decide I am done with this icon style that I am doing one time (Once again, then you can delete a section like say you change your border, delete the border section and remake it and replay the action * Going to get to that soon! Promise on how do do that)

Keep going, piecing things together. Adding small sections for each thing you think you might change. So if you think you might change your border? MAKE IT A SUBSECTION.  

For colorings. I would do the same thing of having lots of MANUAL STOPS so that way you can fix things for an icon.

So you have stops for your border, your coloring, your resize, your first save, etc so your FIRST ICON is all done and ready to be saved for the FINAL time. Go ahead and saving it to your OTHER folder of finished icons. This will make it that every time you icon your finished icon is saved to the same place. Hit stop for the FINAL SAVE action. Once it is saved, you can then make an exiting action. Name it EXIT  CLOSE OUT OF YOUR ICON and then hit stop on the action. 

Putting this all together onto a SINGLE action in your second folder IN PHOTOSOHOP. 

I didn’t do all of the steps like you would have with lots of stops for the tutorial one (My real iconing action is much longer so that way I can edit and change things as I want. Make new color actions, etc)

Make a subsection to this GROUP FOLDER as something simple like what coloring name (Make something up) etc here. 

Is the new section I am doing that will be my final. Don’t STOP this time.

Go ahead and click the FIRST part of your icon making.  So if you want the first thing you do to be CROP then click the CROP action.

Hit play.

In your final (ONE CLICK ICON MAKING ACTION) you will have THIS SORT OF THING GOING ON.  Don’t even change the name of the action in the other folder or the grouped folders name or you will have to redo this step (Although if you change borders or anything you will still have to redo this step.)

Remember that MANUAL EDITING thing for colorings, HERE I CAN DO THAT FOR EVERY ICON.

Once you are done you can then stop your action. That means you will have a lot of PLAY ACTION “SUBSECTION” all the way down to exiting out of your icon. 

First things first -- obviously -- we want to open up photoshop:

We’re going to go FILE > SCRIPTS > LOAD FILES INTO STACK:

After that, this screen is going to come up. You’re going to want to click BROWSE:

From here, navigate to the folder with your screencaps/icons/etc. I highly recommend putting only the files you want to load in the folder, that way you can just select all of them. For just the purpose of this tutorial, I only selected a small handful. Keep in mind, the more you select, the longer its going to take to load them -- as well as the size of the file will impact it as well. 100-300 shouldn’t be too bad; but Photoshop might start having problems ( especially depending on the size of your RAM ) around 400+.

Once you have your files selected, click open, and this page will load the files you have selected; click “OK” and wait for it to open all the files in the stack. You will not be able to do anything in Photoshop until it is finished.

When it is finished, you will get something like below:

Some of the steps at this point can be arranged slightly -- and, of course, once you get the idea of what you’re doing, feel free to toy around with it and add your own steps - making it easier or more effective for you. I’m sure there are easier ways to do this -- this is just how I do it. 

At this point, I open my file that will be where I work on the icons. I’m making 65x65 icons from this, but you can obviously make any sized icon set.

Now, at this point, I’m going to resize my screencap batch. If you’re making icons from base icons, you may not want to do this. And the size you resize it to is completely up to you. From screencaps where the person is the vocal point of the screencap, I usually resize to 300 as the width -- but, it’s all up to your own preference.

Now, in the batch file, select all of your layers and then drag them onto your icon working space. They might be off center, but merely drag and move them while they’re all still selected. Keep in mind, later in the tutorial, you can also go in and move each individual icon for variance. 

Once you move them, you will get this:

At this point, if you want to close the screencap batch file, you can. I always leave it open until I’m done incase I end up messing something up.  Now, you’re going to want to go to the bottom of your Animation bar and click this:  ( Convert to frame animation. ) If you’ve made gifs before, its the same button you would press to make the gif into frames.

Once you’ve changed it to frame animation, you’re going to want to click the drop down pictured below and select Make frames from layers:

It’s going to give you what is pictured below. Your blank background will always be the first frame, you can delete that. Any frames you have will be what will copy over to icons, not your layers. 

It’s at this step you can start editing. DO NOT put your psd on top of the files until you get to this step -- when you click “make frames from layers” if you have your psd on top, it’s going to make a frame from each layer inside of that psd. It saves a lot of deleting if you do it after the fact:

You can add frames, text, watermarks, etc etc at this point as well. If you want to edit just one specific frame, select both the frame and matching layer ( to move the image slightly, adjust the brightness on just that icon, etc ) before doing so.

You’re ready to save? Great! Before saving, make sure all of your frames are at “no delay”/”0 secs” or it will mess up the frame rate of saving them all as images. If you had a background that you deleted after converting to frames, they should all already be at 0 secs, but just make sure you double check.

Now, go FILE > EXPORT > RENDER VIDEO:

It’s going to bring up this window. Here you can change the name of your file, select where its going to save to, name a new file, etc. You can save it as any king of image file you like, I just prefer .png. Just make sure you have IMAGE SEQUENCE selected ( and not QuickTime Export ) and ALL FRAMES. 

If you’ve done it correctly, your selected folder should look like this:

STEPS:

1.  open photoshop.  then go to file --> Scripts --> Load files from stack.

2. when the box pops up, select ‘Browse’.  This will open up your documents, in which you can then select all of the screencaps (or other images) you will be using to make icons out of.  After you have all of your files selected, hit ‘open’, in your documents.

3.  All of the files you selected should now be listed in the space besides the ‘browse’ menu button.  If you want to add more, just hit browse again, and select what you’d like!  When you are satisfied with the images in this area, you can then hit ‘OK’, and photoshop will begin to load all of your images into layers.  Depending on your amount, this may take a while.  ( several hundreds of screencaps tend to take about 5 minutes to completely load for me - they’re big images lol. )

4.  Photoshop will look like this when your images load completely.  I have only decided to use 14 images for the sake of saving time.

5. To eventually export all of these images as separate icons, you need to have them each in frames.  To do this you need to convert them.  There is a little dropdown menu in the timeline ( AS SHOWN BELOW ) that you need to click.

6.  Search for the option that says ‘Make Frames from Layers’.  Once you find that, click it.

7.  If you’ve done this successfully, all of your layers should now also have corresponding frames in the timeline!

8. Time to crop!  Most of the time, icons are in a square shape, so we want to crop them!  If you go to the crop tool, and select the drop down menu (AS SHOWN BELOW) you can select the 1x1 Square option.

9.  your cropping selection should now look like this.  feel free to move the square if your subject/muse isn’t in the center, like mine is.

10.  When happy with the placement, select any other tool on the photoshop panel, and it will pop up with a box asking you to confirm that you want to crop the images.  Hit ‘Crop’.  Now your images should look like this:

11.  Time to resize the images, because they are still really big!  If you go up to the tabs next to ‘file’, select ‘image’ and then hit ‘image size’.

12.  When the box pops up, it will show you the current size of your images.  change it to the size you would like your icons to be.  Im going to change mine to 100 x 100 pixels.  Then hit ‘OK’.

13.  After resizing, your image may be zoomed out a bit in photoshop, making it appear smaller than 100 x 100 (or whichever size you chose).  If you go to the lower lefthand corner, right above your image frames, there is a percentage.  That is how zoomed in your image is.  

14. Double click, change that number to 100 and hit enter, and it will zoom in to the accurate size of your image.

15.  Now its time for a psd (the edits you will apply to your icons) !  This is where you can either leave your icons raw, make your own psd, or use a psd that someone has made that you can use!  There are tons of really great ones on here, made by other users!  I will be using one of my own.  

IF YOU INTEND TO LEAVE YOUR ICONS LIKE THEY ARE NOW, SKIP TO STEP 21.

To import your psd, open it as you would a normal image. (note that your separate projects have separate tabs in photoshop)

16.  place your cursor over your psd’s tab and drag it down into the editing space (AS SHOWN BELOW)

17.  Its okay to let go of the cursor, nothing bad will happen.  Your document should now look like this.  It should appear to be hovering above our batch icon project.

18. Place your cursor on the psd image (make sure it is on the image itself and not on the edge of the document) and drag it under itself and onto your batch icon project.  While dragging it, you should see a sort of gray outline of the psd, as shown below.

19.  If you dragged it correctly, the psd should now be applied to your icons!  MAKE SURE YOUR PSD FOLDER IS AT THE TOP, ABOVE ALL OF YOUR ICONS!!!  if it is under any of the icons, those icons above it won’t have the psd applied to them.

20.  Feel free to add anything else extra you’d like, if they aren’t in the psd; such as a border, or a watermark!

21.  Now all thats left to do is save the icons!  To do so, go to file --> export and click ‘render video’.  You click render video because your images are in frames, and you are going to be saving each frame.

22.  After selecting ‘render video’, the box below will pop up.  Feel free to name the icons whatever you’d like, or leave them as untitled.  The ‘select folder’ location is important.  this is where your icons will be saved to.  Click the ‘select folder’ button and choose where you want your icons to go!  ALSO make sure that you have ‘Photoshop Image Sequence’ selected, (PNG) and not a video format.  IF YOU HAVE CIRCULAR ICONS OR ICONS WITH A TRANSPARENT BACKGROUND it is highly important that at the bottom of this box, you change the ‘Alpha Channel’ box from none to ‘straight - unmatted’ or ‘premultiplied with black’.  Either selection will work, but if you leave it as its default of ‘none’, then your icons WILL NOT save with a transparent background.

23.  Hit Render!  If you don’t have very many icons, this should be done without any loading bar popping up.  If you have several hundreds of icons, a progress bar will show up, and you can watch this whole process load!  Your icons should then all be in a folder somewhere where you chose for them to go!  

Step 1 - open timeline - it is located in the Windows tab and can be seen below.

Step 2 - open your screencaps. I suggest grouping them either by lighting or by the location on the caps, I’m going to be doing my ‘left’ ones on this tutorial because the lighting is fairly similar/the psd I have created works for the scenes. Go to File>Scripts>Load Multiple DICOM Files.

Step 3 - find your caps - I suggest putting them on your desktop for ease of access, you can see I have found mine. Then press the folder (if you need a subfolder it is easier to press the little arrow on the left hand side of the folder name and it should bring up all subfolders!) So below the folder I have them in is Caitlins and the subfolder (which I will be iconning) is ‘left’.

This isn’t a step but find your bearings. OK so especially if this is your first time making icons in this way, I feel the need to show you around and not have you going around blindly - so, below I have labelled the things I am going to be using. The sharpen has been linked above and will be on your actions tab, your psd I will not be sharing with you but there are soo many psd’s out there that you can download, or even create yourself (if ever you need a psd I am willing to create one for a particular scene/show etc just give me a message!) 

Step 4 - open your timeline by pressing the “Create your timeline” button in the centre of the timeline box!

Step 5 - when you’ve created your timeline it should come up with those purple looking lines - that is not what we want right now, so press the little three dots at the bottom left of the screen, it should glow and say “Convert to frame animation”, (even if it doesn’t this is the right button so if it looks right press it!) this will create the version of the timeline we need!

Step 6 - Make frames from layers - you have to go to the top right of the box, this should lead to one of the options saying ”Make frames from layers” or something incredibly similar, press it!

Step 7 - after that, you should get this kind of screen where you can now see all your layers - you need to make sure that ALL THE LAYERS ARE SET TO ‘NO DELAY’ or 0 sec. Also be sure to check that the amount of times it replays is ‘ONCE’ rather than forever because it won’t work, we aren’t trying to gif!!

Step 8 - time to CROP. OK so first things first - uncheck the Delete Cropped Pixels, this way if you go wrong (eg accidentally find that there is a logo that gets in the way or after cropping you find you cropped too far on one side) you can go and recrop without tracing back your steps! OK so the crop button (which has been circled on the left-hand side of your screen) should be selected, and then pick the 1x1 option to make them square.

Step 9 - RESIZE - my honest piece of advice, learn the shortcut which is Ctrl+Alt+i, and then press whatever you want to resize it to, I’m doing 100x100 (remember to do it in pixels!)

Step 10 - Convert to Video Timeline - OK now we have a little (rip sorry I didn’t realise how illegible this would be when I sized it!) Go to the right hand side of the box again and press the same thing as last time, only this time select “Convert to Video timeline”

Step 11 - Below is the screen you should get!! OK so don’t worry, this is how it’s meant to look! NOOOW you see the layers on the RIGHT hand side of the screen? Select them, all of them! You need to do this for the next step!

Step 12 - Filter>Convert for Smart Filters

Step 13 - yooo where have my caps gone? Don’t panic! OK so now that they have become one object you can sharpen them all at once! Under the actions tab (where I showed you last time!) make sure it is selected and then press the play button (the little triangle). That will sharpen your icons!

Step 14 - Apply your PSD by dragging the layers (NOT in folders) onto the icons, there are loads of psd’s out there you could use so make sure you use ones that work for your caps! Once you’ve dragged them onto them, they’ll appear as layers as shown by the longer arrow, that means they have been applied. Icons = done. Now all we have to do is get them to be frames again!

Step 15 - Saving your icons. File>Export>Render video

OK so this funky screen comes up when you’re trying to save your icons! Things to watch out for

You need to select your output folder (where all your icons are going to come out in the end!) If you want to create a file just for these icons, you can check the ‘Create New Subfolder’ tab

Make sure that the Format is PNG, you don’t want to save loads of photoshop documents by accident (coughs - like I did - coughs) I’m pretty sure that is the default too so you’ll have to change it to PNG (or jpeg)

All Frames should be picked!

All of that done - Press Render

Go to your output folder and you should find all of your icons! Et voila!

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.