6

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.

3

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.

  • Thanks. Never even considered using slices. That's really interesting. I usually layer up gradients so it isn't much of an issue, but if I absolutely need to I'll create a gradient in Ps and place it to Il. I've not noticed any issues with shape anti-aliasing, other than the occasional glitch. What issues are you referring to? – Undistraction Sep 2 '12 at 11:53
  • Stray pixels and less than ideal shapes. I've written more about it here: bjango.com/articles/illustratorandappdesign – Marc Edwards Sep 3 '12 at 1:57
  • 1
    Nice writeup. How depressing. I'm vastly more productive in Illustrator and working with vectors is hugely more flexible. I wonder if there is another workflow. Maybe designing in Illustrator, then placing the doc in Photoshop and rendering/exporting from there. – Undistraction Sep 4 '12 at 14:59
  • Depressing indeed. I've been seeing the stray pixels in AI CC 2015.1.0 (v.19.1.0) while creating icons. I thought maybe I was doing something wrong; didn't realize it was a rendering bug. We're moving toward purely using SVGs, but until then, is it possible to avoid these issues by exporting to PNG via Photoshop or something like that? – Jon Coombs Feb 15 '16 at 18:35
  • TIP: Turning on pixel preview and tweaking sizes/positions is great for clarity and can get rid of the stray pixels too. I generally have to turn snap-to-pixel-grid OFF in order to do this kind of tweak. In fact, I've mostly stopped using it and just rely on pixel preview instead. – Jon Coombs Feb 15 '16 at 18:43
5

Just for fun, on Mac OS, open Terminal

cd folder

tips : you can drag in terminal window the target folder

ls

to list file and check if it's the good place

for f in *.png; do  mv "$f" "${f/SomeFilename_/}"; done

look in Finder

  • One up for providing such a often needed Bash script, even though the OP asked for something else. Nice to keep this for reference. SOME graphic designers are geeks and SOME geeks are graphics designers. :) – Ideogram Oct 16 '14 at 6:58
2

I guess Marc Edwards' answer does the trick but if you want to stick to artboards instead of slices you can use this script that does exactly what you're looking for: http://www.ericson.net/content/2011/06/export-illustrator-layers-andor-artboards-as-pngs-and-pdfs/

1

Why don't you just do a simple file rename of all your files in folder using command prompt after you've saved your PNGs?

ren "Prefix_*.png" "///////*.png

Mind that you have to type as many "/" as there are characters in your prefix (including underscore).

Note: This command can be executed on Windows OS in command prompt.

Subnote: I know this has been answered several times— I'm just adding this answer so others can use this super simple command instead of using complicated cmd scripts or batch files.

  • This is a nice quick workaround for windows users. Once it's there, double-clicking a BAT file really isn't time consuming. – Jon Coombs Feb 15 '16 at 18:44
  • Minor tweak: I named my file trim4chars.bat and made it match any three characters followed by an underscore. ren "???_*.png" "////*.png" . I also added another line for my situation. ren "???_*.svg" "////*.svg" – Jon Coombs Feb 15 '16 at 18:57
0

You have Bridge, if you have Illustrator. Batch Rename is built into Bridge and will do that task for you quite easily after you've exported the art boards.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.