Adobe® Illustrator® Creative Cloud®: Essentials for Creating Projects

Lesson 56 of 56

SVG Export in Adobe® Illustrator®

 

Adobe® Illustrator® Creative Cloud®: Essentials for Creating Projects

Lesson 56 of 56

SVG Export in Adobe® Illustrator®

 

Lesson Info

SVG Export in Adobe® Illustrator®

When we work with content these days, if were gonna work with websites, we're gonna work with apps, a lot of these different things, we use SVG a lot. SVG, I think I asked you already, what does SVG stand for, was it scalable vector graphics, right, yeah? If we save a file as SVG, which Illustrator can do, we can take it right to a website, for instance, and use it out there. It's gonna stay vector in the webpage. If we want to save out SVG, for instance, I'm gonna show you a kinda nice little trick to do this, we want to get the artwork that we want to save on its own artboard. I'll show you just a little couple of tips here. What I'm gonna do, I'm not going to do that, I'm gonna grab this whole thing. I'm gonna grab this whole thing and I'm gonna copy it and move it off to the side, I just hid some things, blocked some things and grouped it, I know I'm using shortcut keys, I'm sorry. I'm gonna drag this over here and duplicate it, there we go, we get the coffee cup. What I'd like to ...

do, is I'd like to take that and save that as SVG. A couple ways we can do this. We can actually create a brand new artboard and keep it on there if we want, that's pretty easy. I can actually go to the artboard tool and just draw a little artboard, for instance, like this and it's white on white which is just great, I'm gonna make that a little different color, and I'm not going to make that a little looking color, I'll fill that with the blue, that way we can see it. What I can do now, this is actually a nice little tip, I can take selected art, if I want to take that artboard, I'm gonna fit it right around the object, because if we have web objects, a lot of times, we want them to right to the edges. If I go to the artboard tool right now and select it, there is a command up here under presets called Fit to Selected Art or Fit to Artwork Bounds. I use Fit to Selected Art a lot, it's gonna fit it exactly to the artwork. Now, what I can do is I can save that out of here. There are two ways to save as SVG, if I come under File, I'm gonna come up here and you're gonna see that we have Export as SVG and we have Save as SVG. I'm gonna choose Save As and come down here and you'll see for the format we have SVG, you're gonna see two kinds, just don't use SVG Compressed, I don't even want to explain it, just don't use it. Basically, it's a gzip compression on the server, which, not all servers have, it won't be able to work with it, just to be safe, just save it as SVG and go out and say we're gonna use artboards and we have to tell it which artboard, otherwise, it's gonna make a big old file with all that design out there. I'm gonna say this is artboard two, that was artboard two, right. I'm gonna put it on my desktop and I'll save it. This is actually kinda of an older method for doing it, it's still in here, this is why I want to show it to you, because some people still use this in their workflow, but there's a new way to export SVG or save as SVG and I figure we'd do this because, you can see right up here, use File > Export, give it a try. If you use SVG, unless you're locked into this specific dialog box, which you have in your workflow already, use File > Export, it's a much better SVG file, I'll just click Try. If you screw up and you do Save, just click Try and it'll just take you right over there. Now it's gonna say, "Oh, let's go Export". SVG, basically just code, but what it's gonna do, it's gonna save styling, it's gonna save a lot of different things, it's gonna, if there are any fonts in there, it's gonna try to preserve them as best it can, we gotta be careful with fonts in SVG. Down here, the biggest thing, these two things, Minify and Responsive, Minify just means make it as small as you can. In the past, we saved SVG, I would have to go and take the file and make it smaller somewhere else, it's code and it's a pain, just keep that checked. Responsive means this. Anything you put it in it's gonna be a big if it, I'm gonna click Ok, this is gonna be ridiculous, you guys, this is gonna be a white shape on a white background for a browser, I'm gonna go in and change some of these again. I just realized, I was just like, I'm gonna change one, it's not gonna work, let me just change a few other of these just so you can see them, come on, there we go, you notice I'm kinda switching in here to a line mode, that'll look a little bit better. Now I'm gonna export it, I'm gonna go to File > Export, we did save as before, but I'll do export this time, put it on my desktop, I'm gonna save it as SVG, use the artboards, two, export, sorry, I'm running through that, kinda quick I know, same exact dialog we just saw, I'm trying to get back to the same place, I have to put a different color in, I click Ok. There we've got it, it's a lot to show you, it's pretty cool. I'm gonna go to Chrome, open up a new browser window and I'm gonna take that thing and I'm gonna drag it in here, there we go, maybe I should just open it, it's fine, SVG, and there we go. This is in a browser, take a look and you're gonna see, perfectly scalable, perfectly vector, nice and clean, ready to go, pretty neat. That is actually a dot SVG file that we can use, it's still vector, the browser doesn't need plug-in, nothing with it, pretty easy to create and there it is right there, there's the SVG file. Hopefully, that helps with some of the new stuff, kinda gets you looking once you go back you can take a look at some of it. This has been a lot of stuff, I think, and you guys, you've been troopers, I've gotta be honest, you've been amazing, keeping up and working and Brian, I think my third part has been watching these guys follow along getting shots at their computers and it just shows that, these guys, some of them knew a little bit of Illustrator, some none, in this two-day workshop you can really go from zero to in two days if you follow along, you do the exercises, you look at the project file. Thank you, really really well done. and practice. Thank you for joining us, CreativeLive, we'll see you next time, thanks very much. (clapping)

Class Description


The world’s top designers use Adobe® Illustrator® for its powerful, vector-based drawing environment – and now you can gain fluency in it, as well! Join Brian Wood for a dynamic course on everything you need to know about Adobe® Illustrator®.

By walking you through a series of projects on Adobe® Illustrator®, Brian will give you a comprehensive toolkit that will answer any need, including:

  • Getting started in Adobe® Illustrator® and familiarizing yourself with its workspace
  • Creating color using a variety of methods
  • Creating and transforming artwork, working with text, and importing images
  • Tricks and techniques for drawing: selecting and editing, and working with layers
  • Creating custom patterns, brushes, and symbols
  • Exploring built-in visual effects libraries
You’ll also tackle more advanced Adobe® Illustrator® topics, like the perspective grid, Creative Cloud libraries, effects, live paint groups and selection, blends, and the shape builder tool.

Lessons

  1. Class Introduction
  2. What is Adobe® Illustrator®?
  3. Explore the Interface
  4. Create and Save New Documents
  5. Zoom and Navigate
  6. Working with Artboards
  7. Introduction to Layers
  8. Rulers and Guides
  9. Shapes and Drawing
  10. Aligning and Combining Shapes
  11. Pen Tool
  12. Manipulating Stroke and Fill
  13. Creating and Editing with Color
  14. Painting with Gradients
  15. Getting Started with Patterns
  16. Adding Text To Your Document
  17. Formatting Text
  18. Strokes and Variable Strokes in Adobe® Illustrator®
  19. Rotating Objects in Adobe® Illustrator®
  20. Effects and the Appearance Panel in Adobe® Illustrator®
  21. Adding Photo Images in Adobe® Illustrator®
  22. Working with Linked Content in Adobe® Illustrator®
  23. Packaging your Project for Handoff in Adobe® Illustrator®
  24. Best Formats to Save Your Files
  25. Select Like a Pro: Layers, Groups, & Other Unique Tools
  26. Edit Paths Like a Pro in Adobe® Illustrator®
  27. Editing Paths: Pen Tool in Adobe® Illustrator®
  28. Creating & Applying Brushes to Artwork in Adobe® Illustrator®
  29. Editing Paths: Knife & Scissor Tool in Adobe® Illustrator®
  30. Editing Paths: Join Tool in Adobe® Illustrator®
  31. Editing Paths: Isolation Mode in Adobe® Illustrator®
  32. Pen Tool Shortcuts in Adobe® Illustrator®
  33. Other Drawing Tools & Methods in Adobe® Illustrator®
  34. Transforming Techniques in Adobe® Illustrator®
  35. Shortcut to Reflecting Artwork in Adobe® Illustrator®
  36. Get to Know Your Appearance Panel in Adobe® Illustrator®
  37. Exploring Effects in Adobe® Illustrator®
  38. Work Smarter with Graphic Styles in Adobe® Illustrator®
  39. Color Inspiration in Adobe® Illustrator®
  40. Type Effects in Adobe® Illustrator®
  41. Masking Your Artwork in Adobe® Illustrator®
  42. Using Creative® Cloud® Libraries in Adobe® Illustrator®
  43. Capture Artwork with Creative® Cloud® Apps & Adobe® Illustrator®
  44. Tracing Raster Images in Adobe® Illustrator®
  45. Blending Artwork in Adobe® Illustrator®
  46. Using Symbols in Adobe® Illustrator®
  47. Using a Perspective Grid in Adobe® Illustrator®
  48. Crash Recovery in Adobe® Illustrator®
  49. GPU Performance in Adobe® Illustrator®
  50. Curvature Tool in Adobe® Illustrator®
  51. App Integration in Adobe® Illustrator®
  52. Creative® Cloud® Libraries in Adobe® Illustrator® App
  53. Shaper Tool in Adobe® Illustrator®
  54. Smart Guides in Adobe® Illustrator®
  55. Text Enhancements in Adobe® Illustrator®
  56. SVG Export in Adobe® Illustrator®

Reviews

KATIE Y
 

I am a pretty computer literate person but an Ai beginner i.e. I am completely new to the Creative Cloud/Adobe Illustrator. (This is also the first time I've used CreativeLive.) I think this course it is fantastic. The pace is good as is the content which progressed logically and covers all the basics you'd hope it would. The course is 2 full days' worth of material but it is broken down into segments so you can revisit or skip through as you need to. The presenter is really personable and easy to watch (even for me, a Londoner!). I would also say I think it is pretty good value for money -- I am currently enrolled on a part time course, basically doing the same sort of stuff, and I have to say this is better and a bit cheaper! I definitely recommend it to you!

jackflash
 

A brilliantly designed course. it's almost magic. It's everything you hope for in a follow-along software class. Brian Wood has engineered it so that you start on a project that just needs basics, and then you move on to more & more complicated projects, and almost without realizing it you've learned Illustrator. This doesn't just happen -- Wood has clearly put a LOT of effort into creating this course. Here's one trivial example: he doesn't overload you with a lot of keyboard shortcuts right at the beginning -- you start with the actions themselves, using the (admittedly tedious but easy) pulldown menus, and then after you're comfortable with what you're doing, he'll throw in the shortcut. It may seem obvious, but so many instructors feel they have to give you an extensive foundation of definitions, shortcuts, interfaces, etc., before you ever do anything. Good stuff to know, but you'll never remember it. Wood has you up and working almost immediately. And he's a joy to listen to, at a perfect pace. Highly recommended.

Philippe LIENARD
 

Top course. Very well explained, clear, good examples, pleasant teacher. I like it and recommend it. One suggestion, it would be nice to have a detailed table of content of the course in the material. For instance, it took me quite a while to find back the part of the course where how to make a gear was explained.