What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Illustrator SVG animation .. make one SVG image or split it ?


gautamz07

Power User
Messages
338
Likes
73
How are you doing my old friends ? I had a CSS - SVG question , i beleive quite a few of you guys on this forum use illustrator , Now i actually have the task to animate the below graphic, have a look:

how-it-works.png

Now i first have to recreate this PNG in illustrator i believe , to get the SVG code , the animation should be such that each element pops in with an animation , after a given delay , so the mobile phone will pop in first and than the round circle, and the arrows will start drawing themselves, ... you can see a small DEMO i created HERE (yes i created it in illustrator first and animated the elements using CSS and JS). lets not get into the dynamics of the animation, my queston is i need this component to be responsive on the web, so do i draw the entire png in one image or or do i make indivisual svgs( one of the phone , circle and arrows ) .. the secound option i beleive would be much more messier , This is the first time i am delving into SVG and illustrator , so please guide me.

Thank you.
Gautam.
 

gautamz07

Power User
Messages
338
Likes
73
dv8_fx , if a PNG like this

how-it-works.png

needs to be recreated in AI , can you just load the png in illustrator and draw over it ? like you could in PSD ?
 

dv8_fx

Retired Administrator
Messages
13,761
Likes
4,789
if a PNG like this needs to be recreated in AI , can you just load the png in illustrator and draw over it ? like you could in PSD ?



Yes you can. If you're not versed with re-constructing shapes then try using the LIVE TRACE function. Your image can be easily handled as it's only in a single colour and LT will do almost everything for you with maybe a bit of tweaking if desired.

You'll find it in WINDOW > IMAGE TRACE . The Image Trace panel offers more options and the chance to test your selections and settings in advance before committing the trace. There are presets that you can experiment with.

Here's a couple of tutorials to help you....

https://www.youtube.com/watch?v=argiGgAD0Ck

http://www.adobepress.com/articles/article.asp?p=1928526


I don't do web stuff so I'm sorry I can't help you out with this. But unless I'm wrong, you may have to do each individual SVG image components of the animation. This means you have to break the image down into parts and save them separately. If you've animated individual images for web before then you'll know what needs to be done with them.

https://helpx.adobe.com/illustrator/using/cutting-dividing-objects.html

https://www.youtube.com/watch?v=_KAHswjde0U
 

Top