Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Friends With SVGs


Published on

Presented at Web Unleashed 2017. More info at

Presented by Fatima Remtullah,

Creating custom SVGs from scratch can be intimidating. What if we told you that you can learn this skill and make new friends along the way?

In this talk, Fatima will introduce you to the world of vector illustrations using Sketch. You will get to learn the building blocks on how to create an avatar for you and all your friends …and the requests will definitely start coming! She will cover techniques for creating feature images, various UI elements for your applications, and simple animations to enhance your user interface.


Showcase the possibilities of creating vector illustration and how custom SVGs + animations can enhance your applications.

Target Audience

Front-end developers, UX/UI designers and illustrators

Five Things Audience Members Will Learn

Tips on how to get started with creating illustrations
A few core vector illustration techniques
Where you can use SVGs in your application
Adding animation to your SVGs
How to have fun while working with SVGs

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Making Friends With SVGs

  1. 1. friends MAKING WITH SVGS FATIMA REMTULLAH @amitafr
  2. 2. THE Agenda Why this? Illustrations in Sketch How to Export &Use Final Recap& Key Takeaways
  3. 3. THE Beginning
  4. 4. Ai
  5. 5. THE First Avatar
  6. 6. MAKING friendsWITH SVGS
  8. 8. THE Anatomy
  9. 9. THE Anatomy
  10. 10. THE Anatomy
  11. 11. THE head& shoulders (SKIP KNEES & TOES)
  12. 12. Open Sketch & Insert a new Artboard Step 1
  13. 13. Insert a picture of your friend for a visual guide Tip
  14. 14. Create a colour palette by using the Colour Picker & adjusting tones Tip
  15. 15. Add custom colours to the Document Colors for easy access Tip
  16. 16. Insert > Shape > Oval for the head & adjust key points Step 2
  17. 17. Add Inner Shadows to the head for depth Step 2
  18. 18. Insert > Shape > Oval as a base for hair add key points & adjust Step 3
  19. 19. Name & Union grouped features for a cleaner exported SVG Tip
  20. 20. Step 4 Insert > Shape > Oval as a base for the ears add key points & adjust
  21. 21. Step 5 Use the head shape as a guide to create the beard & adjust the colour
  22. 22. Step 5 Duplicate the beard and add noise to create hair texture
  23. 23. THE eyes, ears, mouth&nose
  24. 24. Step 6 Insert > Shape > Oval as glass lens guide Insert > Shape > Rectangle for frame side & nose bridge
  25. 25. Step 6 Use the Color Picker to select glasses frame colours + gradient
  26. 26. Step 7 Insert > Shape > Oval to form the top and bottom lip
  27. 27. Step 8 Insert > Shape > Oval for eyes, duplicate & position to template
  28. 28. Step 9 Add any distinctive facial features for a tailored look
  29. 29. Step 10 Insert > Shape > Rectangle for the neck & use shadow colour for contrast
  30. 30. Step 11 Be a stylist - dress your Avatar & Add Mask to form the shape
  31. 31. Step 12 Make any finishing touches to finesse the look & feel
  32. 32. IN THE Wild
  33. 33. THE Export Varun Vachhar @winkerVSbecks
  34. 34. THE FINAL Recap
  35. 35. Try Templates Customize Make Friends
  36. 36. Thankyou FATIMA REMTULLAH @amitafr