Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 0 down vote favorite

My graphic/web designer left me with an Adobe Illustrator file of my website. She said it would be easy to extract the images out as PNGs so I can use them in my HTML. But I can't figure this out too easily. The images seem to be many vector drawings. I can separate them from the surrounding art and select all the pieces. But then how do I save that selection as a PNG file?

Using Adobe Illustrator CS6.

share|improve this question
If you aren't familiar with Illustrator, you should really go back to the designer and ask for delivery of items you can use. – Scott Oct 15 '12 at 19:13
@Scott - she's extremely temperamental and feels unwilling to work with someone who needs PNGs instead of an Illustrator file. I'd rather hire someone else to extract the images for me than hire her again. Hopefully it really is as easy as she suggested and I can just do this myself quickly. – at. Oct 15 '12 at 19:19
I don't use illustrator, so I don't know the best approach. But if I had to extract vector layers from it I would probably copy-paste them in a different program (fireworks, photoshop) and use "Save for web". – Yisela♦ Oct 15 '12 at 19:51

1 Answer

up vote 2 down vote accepted
  1. Select what you want
  2. Ctrl + G (Group Selection)
  3. Ctrl + C (Copy)
  4. Ctrl + N (New file)
  5. Ctrl + V (Paste)
  6. File > Save for Web & Devices then on the right switch .JPG to .PNG, then you also want to uncheck at the very bottom under the .PNG options where it says "Clip to Artboard"
share|improve this answer
Kind of a pain, I've got to know the exact resolution or crop the new file. But otherwise exactly what I'm looking for. How do I crop? – at. Oct 15 '12 at 20:58
Actually, it doesn't seem easy. Is there no way to crop in Illustrator. Everything above is great except step 6, if I save the file, I get the whitespace (which is transparent at least) around the object I'm trying to save. I can't easily guess the pixels before creating a new file (is there an easy way?). – at. Oct 15 '12 at 21:05
I found the width and height of a selection and can create a new file of that size. The pasted design is not centered exactly on that new canvas, but close enough for me to easily move I guess. – at. Oct 15 '12 at 21:09
Edited the answer to explain how to do the cropping easily. Let me know if that solves it for you. – Ryan Oct 15 '12 at 22:05
Perfect! Thanks – at. Oct 15 '12 at 22:19
show 1 more 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.