Illustrator multi-device export

Question

I’m working on an UI app design for both Android and IPhone. I’m using Adobe Illustrator.

Now I’m facing the problem that the exportation of assets is a nightmare.

I need to create a different document only for assets, and create 6 pages for each icon, with the same symbol scaled. Symbols don’t behave correctly with pixel perfection even if the option “align to pixel grid” is activated. So I’m forced to break the link to the symbol, so all this job is not going to be valid when in the future I will need to redesign icons again.

I want to export to PNG files with transparency. I need to export an icon to various PNG sizes, and then repeat the same process for all icons. Then after export, I have to move the images to their folders and rename them, as both Android and iOs require.

Honestly, there should be a way to automate the export. With this system, there is no way to update all icons without missing one of them.

For PhotoShop I have found: http://www.cutandslice.me/ but should exist something similar for Illustrator, isn’t it? Now that Adobe is going to stop developing Fireworks, there should be a good tool for UI design. Does Adobe have any?

I hope someone can please share a workaround for this. Thank you very much!

Answer 1

I want to preface this by saying Illustrator is stupid when it comes to batching saves. You are a lot better off creating large pngs and allowing Photoshop to batch them down to lower sizes. The reason as I just recently found out, is that Adobe Illustrator does not treat "Save for Web" as export as Photoshop does AND even more importantly, doesn't have explicit file name batch settings. This means that during the batch saving process in Illustrator you will have to specify the names of every file you output.

SO, I highly recommend going the Photoshop route, but if you absolutely must batch through Adobe Illustrator, here is how you do it.

So what you want to do can be accomplished by actions and then batch processing. It's first important that you specify your highest output dimensions before you begin.

Let's say, for example, your highest output would be 400px x 400px. You want to create an artboard with those dimensions and save each individual icon as .ai files. Once you have a /BaseCases folder or directory of .ais with your largest dimension you are going to want to open one as your base case.

This incredible gift of awe inspiring graphic design above is my generic base case- and will what I record my actions on. You want to open the action panel and record a new action. Make sure you do only the actions you want to record, because literally everything you do will be recorded. Since you said you wanted to export to pngs at various sizes you are going to "save for web" as a png as you would normally into a separate folder (Note that export will not work because it will not allow you to downsize through the export prompt). Do this for all your various sizes and make sure to close out the image. Then, stop your recording

If all goes well you should have your actions recorded and should be able to batch your /BaseCases directory of .ai files by using "Batch" in the Actions window's dropdown.

Make sure you specify the folder you want to save into, in my case, it was the /testCases folder. Unfortunately, the bad part as you will see is that you will be prompted on each save. So although this will save you time through a batch it's effect will be moderate at best. I highly recommend going the Photoshop route.

The only difference in the process is that you would save your base cases as pngs. Then you would downsample the pngs to various sizes. When it comes to the batch process in Photoshop you can specify file name endings that will automatically change per base case. This makes it incredibly easy because the process then becomes automated as opposed to you naming every file in Illustrator.