CODEWITHSUNDEEP
cssiconsepssprite-sheet
code-8
code-8

Reputation: 58672

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

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 :

Upvotes: 18

Views: 58007

Answers (2)

AshNaz87
AshNaz87

Reputation: 434

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

Upvotes: 1

code-8
code-8

Reputation: 58672

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.

Upvotes: 12

Related Questions