Illustrator Basics Lightning Talk Vector Raster Pen Tool Layers SVG Text
•
1 like•501 views
Mikaila Waters is a current student in the Firehose Project curriculum and works at an edtech startup called Gradeable on all aspects of the product. She started at Gradeable as the designer, coming from a background in Architecture, and taught herself HTML, CSS, and Javascript. Mikaila walks you through the common tools she uses in Illustrator and how to create an SVG image for your front end.
Recommended
More Related Content
Similar to Illustrator Basics Lightning Talk Vector Raster Pen Tool Layers SVG Text
Similar to Illustrator Basics Lightning Talk Vector Raster Pen Tool Layers SVG Text (20)
Recently uploaded
Recently uploaded (20)
Illustrator Basics Lightning Talk Vector Raster Pen Tool Layers SVG Text
- 1. Illustrator, the basics A lightning talk. September 10, 2015 mikailawaters@gmail.com
- 2. Illustrator, the basics mikailawaters@gmail.com Illustrator, the basics Vector vs Rastor Pen tool, layers, and color Saving to an SVG Object expand and pathfinder Quick commands I use often Laying out text
- 3. Illustrator, the basics mikailawaters@gmail.com Raster vs Vector
- 4. Illustrator, the basics mikailawaters@gmail.com Your workspace, multiple artboards, and quick commands Windows/ Workspace/ Essentials - what I use, sometimes I get lost and then I just reset it. Like coding - google is your friend if you’re confused. Setting Up Your Environment v a m l p t Cmd + Cmd - Cmd f Cmd b selection tool - I spend like 80% of my time here Direct selection tool - more on that later marquee (rectangle) tool, shift to grow as square oval... not line. hold alt grow from center, shift to grow circle line. pen tool - crazy text box zoom in zoom out copy in front copy in back To learn more, just hover over tools, hold down on tools, and just try everything out. Also, Google. You’re not going to break anything and you can always undo... like forever, it’s amazing.
- 5. Illustrator, the basics mikailawaters@gmail.com Tools and skills - layers, pen(p), eyedropper(i), direct selection(a) Learn By Tracing
- 6. Save as SVG Open new document - Command + N Document Setup - Alt + Command + P Define Artboard Adjust settings - Only glyphs used Link location Style elements 1 Decimal Places Unicode UTF-8 Encoding Output fewer <tspan> elements Use <textPath> elements Paste Image Save as - SVG Illustrator, the basics mikailawaters@gmail.com
- 7. Laying Out Text Build text box first, then write in it. This will keep text from becoming an object, meaning it won’t get stretched if you resize it. Text with box Illustrator, the basics mikailawaters@gmail.com Textwithoutbox Text with box text
- 8. Expanding Text for SVGs Text can also be turned into an object with points, meaning you won’t be able to edit it as text any longer but instead as a series of points and lines. You can then save it as part of an svg. Select text Object / Expand object and fill Illustrator, the basics mikailawaters@gmail.com