Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 :

  • load them on my website
  • keep minimum HTTP request
  • look awesome on retina display devices.
like image 371
code-8 Avatar asked May 04 '15 12:05

code-8


People also ask

Can websites use EPS images?

Most companies build their web pages using images purchased from the internet, usually stock photos. However, they usually don't want to use the photo as-is so they need to make some changes. This is why they need EPS, because they can fit the image into their website and have it conform to the ideals of their brand.


2 Answers

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.

like image 77
code-8 Avatar answered Oct 24 '22 08:10

code-8


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

like image 40
AshNaz87 Avatar answered Oct 24 '22 08:10

AshNaz87