Making Friends With SVGs
summary
Builds a custom avatar from photo to vector using Sketch, starts with ovals and key points, uses union/boolean ops and named groups, applies a noise fill for beard texture and gradient fills for glasses, then exports an SVG export with grouped IDs so each feature is addressable by CSS/JS. Several coworkers start requesting versions; final SVGs become stickers, profile images and animatable web assets, demonstrating the method works end to end.
AI-written summary · about
chapters (12)
- 0:00Start
- 5:47insert a new artboard
- 6:40create a color palette for the avatar
- 8:04use the oval shape as a base
- 9:12divide the hair into two sides
- 9:41add more key points to the base shape
- 10:44use the oval as a base
- 12:04lining up the beard to the sideburns
- 12:28add the noise filter
- 17:06create a basic shape for the neck
- 19:06use this illustration from sketch into the real world
- 21:08customize and make your illustrations your own
related talks
25mAn SVG’s Tale
30mDown the SVG Rabbit Hole
30mPretty vector graphics - Playing with SVG in Python
16mTROUBLESHOOTING YOUR DESIGNER'S, AND VECTOR GRAPHICS_DONT
23mAn SVG’s Tale
37mSVG Will Save Us
40mSketch-n-Sketch: Interactive SVG Programming with Direct Manipulation
40mCreating illustration Systems that Work for Everyone