4

Is there a way (plugin, add-on, etc) to export assets from Illustrator the way one does with Photoshop Generate? I'm finding myself spending a lot of time meticulously separating everything into many many artboards, and it would be very helpful if I could just have each group output to a different subfolder (dare I say, even exported at different sizes), and then be able to drop the elements into my layouts (or animations...or link them in my code). I believe that Illustrator and SVG is clearly the future of web design/dev, but the workflow (as it stands) is atrocious. I've done a bit of digging online to no avail. The artboards do work, but they are massively tedious to separate, and it doesn't allow separation of overlapping elements the way I'd like.


P.S.: Any useful tools for speeding up a vector => website workflow are also very welcome. I find myself spending way too much time on the export as my procedure stands now, and any way I can streamline it is a step forward!

4 Answers 4

2

You can use Slices in Illustrator to export images using Save For Web.

Slices in Illustrator

I’d advise against using Illustrator to export image assets. It has many issues, like non-dithered gradients, worse shape antialiasing than Photoshop (and other apps), and other problems.

2
  • Thanks for that! I mostly want to use it for SVG output, so those concerns aren't a huge worry in this context. Some exciting stuff going on with the whole SVG world right now. It would be nice to see Adobe start taking Illustrator seriously as a web authoring tool. They're finally getting it together with Photoshop just as everything moves to vector. Classic! Thanks @marc !
    – AVLien
    Apr 28, 2015 at 23:35
  • Just checking that you know this: Photoshop can export SVGs using Generator. There are definitely limitations on what’s possible, but for single colour icons and simpler web interface assets, it’s a good option if want automated SVG exporting. May 3, 2015 at 6:37
1

Using Adobe CC I design assets in illustrator then export to Photoshop via my Adobe Creative Cloud libraries. Photoshop is hands down way better than Sketch3 to export files, particularly when file size matters.

1 - Design in illustrator on a pixel grid and every asset on a separate layer

2 - I select the asset using its layer

3 - I use my Adobe CC library to export the asset Library Panel / Add Graphic [button] and give an appropriate name to my asset (ex.: [email protected]) that reflect my final export format

4 - I create a document in photoshop and drop all the asset I saved in my library. Each asset will show as a layer with the name I gave it.

5 - Select the layers to export then Layer Panel / Export As. The layer name suffix automatically selects the format.

1

I found the Smart Layers Export script a lifesaver. You can export specific layers/artboards to multiple formats at once, svg included, and export at different sizes (@2x, etc).

-1

What about this little plugin? http://www.kodlian.com/apps/magic-exporter

1
  • 1
    Please include some description on what is behind the link. In general one line answers are frowned upon.
    – joojaa
    Oct 18, 2015 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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