Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have been provided an .ai file containing icons for a website project (hundreds of the things). The file consists of all the icons on a single layer each, filling the space of a single artboard for the entire project (see below).

enter image description here

I need to arrange all of these icons into a sprite formation whereby each icon has 6 different color variations. So if there are 100 icons, the sprite image would be 100px x 6px artboard sizes big. From there, I can resize the entire artboard if the client ever needs the sprites at a different size.

The only way I can currently think of doing it is displaying each layer one by one, save it as a web image (transparent .png), import into Photoshop and manually arrange into the sprite layout (using color overlay for the different colors). However, this is going to take hours.

There must be a more automated way to achieve this since every icon is the exact same size (if you include the artboard behind it).

Many thanks for your help.

share|improve this question
3  
Have you tried using the distribute and align buttons in Illustrator? –  Scott Oct 11 '13 at 14:31
    
I would suggest you to create square shape in one size under every icon, center vertically and horizontally every icon with that square. This way you have icons in the same size. Now use as @Scott mentioned distribute and align buttons. If you have all aligned you can delete that squares. Now if you will be using that sprite with css you can easily move the image by the size of that square, otherwise without that square you must know the size of every icon to fit it pixel perfect. //sorry for my english –  Lukaydo Oct 15 '13 at 6:07
add comment

1 Answer

How about this (not perfect but a bit faster)

  1. Replicate the artboard as many times as icons you have. You can use the Artboards panel to replicate them.
  2. Each artboard will have ALL the icons. Show only one icon per artboard and hide the rest (or delete them)
  3. Use object->artboards->rearrange to arrange the artboards in a grid or a row (whatever your sprite arrangement should be)
  4. Save for Web and unselect "Click to Artboard". All the artboards will be exported together as a single image.

You still need to hide (or delete) a lot of icons per artboard but it is less work than exporting and arranging each one of them.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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