In response to a few audience questions, Sarah spends a few minutes demonstrating her Illustrator SVG workflow. She breaks up a logo into layers, exports the SVG code, and optimizes it with SVGOMG.
(electronic oriental music)…- During the break I got a bunch of questions…about my Illustrator workflow and how to work with SVGs…and in Illustrator and how to get them ready for export.…So, I thought we could cover that really quick.…So, I'm just pulling up the Frontend Masters logo…that I worked with for that last animation…that I showed you.…If you look inside of here,…you can see that there's a title.…Good job Mark for having a title in there.…And then, we have just like one composite layer,…like it's just a compound path of everything,…which isn't really gonna help us very much.…
We have the font converted to outlines, which is good,…but when it's in this shape, it's gonna be really hard…to animate because it's all one big block.…So what I'm gonna do is,…I'm gonna grab the pen tool here…and I'm just gonna, kind of,…go in between these lines here.…Making sure that I don't cut off either one of these,…I'm going to press escape to get out of there…and just because it's a little distracting,…I'll turn this into something that's transparent.…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values