Export Multiple Artboards to Pngs Named after the Artboard Without the Filename Prepended

by

Given the following setup:

File: SomeFilename.ai

Which contains artboards named:

  1. Artboard_01
  2. Artboard_02
  3. Artboard_03

At the moment if I export the artboards Illustrator insists on prepending the filename to the artboards. So the files generated would be named:

  1. SomeFilename_Artboard_01.png
  2. SomeFilename_Artboard_02.png
  3. SomeFilename_Artboard_02.png

I would like them to be named:

  1. Artboard_01.png
  2. Artboard_02.png
  3. Artboard_02.png

Obviously I know there are a multitude of options for batch renaming files, but this doesn’t fit into my workflow. I do a lot of UI design (iOS or CSS) which involves creating a large number of graphics in Illustrator then exporting them. I often shoot back and forth rapidly between Xcode or a browser and Illustrator tweaking graphics. At the moment I can’t just export and rebuild/refresh. I have to find the file and rename it before it will work. This is a major speed-bump.

Answer

If you use slices in Illustrator, rather than artboards, you can specify exact file names for the export. Just set up a big single artboard and add all your elements as if you were building a sprite sheet, then use Save for Web to export everything in one pass.

Adobe Illustrator: Slices and image maps

Some other reasons to use slices over artboards:

  • Slices snap to the pixel grid. Artboards don’t.
  • You can only have 100 artboards in a document. Slices don’t have that limit.

For file renaming, I usually set up Automator workflows. You could even set up Automator workflows on a per project basis, so renaming and moving can happen with a single click, or even a folder action. In fact, you could probably add it as a build phase in Xcode?

I assume you’ll need to rename your @2x files anyway, unless you have the artwork in Illustrator at both sizes?

Also, I’d be a little careful when using Illustrator for UI design work. Its shape antialiasing has some issues, and gradients can’t be dithered. This means your artwork can be considerably lower standard than if you’d created it in Photoshop or Fireworks.

Attribution
Source : Link , Question Author : Undistraction , Answer Author : Marc Edwards

Leave a Comment