When we started making the graphics for our iPhone and iPad game Castle Raid I knew I had to make tons of images. Characters (with multiple body parts), backgrounds, UI elements, you name it! Creating the graphics and art for a new game is really great, saving tons of files however, is not. Today Illustrator (currently CS6) has no easy way of saving different layers in an .ai file into separate files. You basically need to copy and paste your vector art into Photoshop, or turn off all layers you do not want to save and then export to png from Illustrator. When I for example created the UI for the game I had an Illustrator file with about 60 different elements that each needed to be saved into a separate png file. And not only saved once but three (3!) times since we needed to create one for low resolution devices like the iPhone 3GS, one for the retina display iPhone 4 together with the iPad (1 + 2) and now recently a super high resolution one for the “new iPad”, the iPad 3 with retina display! Since I come from a programming background I set out to find a solution to this problem. I found a bunch of scripts that actually could save each layer into a png file from Illustrator. However they often missed some important features that I needed: Said and done I started developing the script and it worked, and wow did it save us some time! The script not only saves us a huge amount of time it also makes creating all the graphics so much more fun. We then set up a workflow using Dropbox where I could simply export all layers to PNG files and have Dropbox sync them, the developers could then simply take those files and directly import them into the game, we even created a small Unity (we use Unity 3d for game development) editor plugin to make this last task even easier. This is especially handy when we are iterating on graphics and making small changes to different elements. Export, sync, import, done! The script has been improved many times and now that the release of Castle Raid is getting close we have a very good version of the script and we want to share it with you! Start by downloading the script at the bottom of this blog post. Then unpack and install the script by placing the .jsx file it in the following location: Note: I use CS5 but if you use CS6 etc change the path accordingly, same goes with the language code, some might have “en_US” for example. Now launch Illlustrator or restart it if it was already open. If you go to the File >,, Scripts menu you should now see something like this: But before you start exporting your layers you must use the correct naming conventions on your layers: Layers that don’t use this naming convention will not be exported. This is a good thing because it means you can still show helper or mockup graphics without it getting exported. You can also nest layers so that you can have a parent layer that you can name anything and then inside this layer you can have the layers that should be exported. You can even nest layers that should be exported inside each other. This is the setup we use for our characters in Castle Raid. When animating we need to save each body part into a separate file, having the script makes this process very simple: Now just run the script from the scripts menu (make sure to save your .ai file first). If everything was set up correctly you will see the “successfully exported” message. We have not yet included a GUI for this script. You can however customize it if you want to. Just open up the .jsx file in the ExtendScript Toolkit Application (or a text editor). At the top of the file you can edit the following parameters: I think the options should be pretty self explanatory. Just edit and save, you don’t even have to restart Illustrator. Good luck with using the script! We hope it will help you as much as it has helped us in really boosting our productivity! If you want to support us please check out the game we built while developing this script, Castle Raid! Oh, how the hours seem to pass by so slowly when waiting for something good. Well, the waiting is finally over! Castle Raid 2 – New Alliances is officially released and available on the iOS App Store and Google Play as of today. Grab it while it’s hot! Trailer time! In celebration of the (more) Source.