How can I use icon from .eps file and load them on my site?

Question

I Have

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

---

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.

Barling

Answer 1

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 :

---

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.

Barling

Answer 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 :)

Draughty