18

I Have

a filefile.eps that I downloaded from http://www.shutterstock.com/ , it looks like this :

enter image description here

I want

to export all those icons into its own piece so that I can use them on my site.

I've tried

doing this manually one-by-one it is very time-consuming, now I'm looking for a better way to export all of them.

I got some questions

Is there any Mac application out there that help me export/slice my file.eps into multiple icon.png file ?

Should I even need to extract them ?

My main goal are :

  • load them on my website
  • keep minimum HTTP request
  • look awesome on retina display devices.
Community
  • 1
  • 1
code-8
  • 54,650
  • 106
  • 352
  • 604

2 Answers2

12

I'm sure there is more than one way to achieve this kind of task, but this is how I get mine done. Here are my steps :

1. Convert .eps to .png

I did that by open my file.eps in Illustrator, and go to File > Save For Web > Select PNG-8 > Save. You should see it export to your desired destination.

2. Create Sprites Stylesheet

Go to http://www.spritecow.com/

I load my exported file.png, and select any objects, a correspond css code should be automatically generated for me like this :

enter image description here

3. Result

I selected multiple icons that I liked, and display them properly.

Finally, I put together my result : HERE

Hope this answer help someone like me.

Community
  • 1
  • 1
code-8
  • 54,650
  • 106
  • 352
  • 604
2

For those on a Mac, you can use the default program in Preview.

Once you open the image, go to File > Export > Format.

You can then select your desired format and there's also an option to choose where to save it to.

Hope this also helps :)

AshNaz87
  • 376
  • 3
  • 14