Presented at Web Unleashed 2017. More info at www.fitc.ca/webu Presented by Fatima Remtullah, Rangle.io Overview 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. Objective 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

1. friends
MAKING
WITH SVGS
FATIMA REMTULLAH @amitafr

2. THE
Agenda
Why this? Illustrations
in Sketch
How to Export
&Use
Final Recap&
Key Takeaways

3. THE
Beginning

5. Ai

6. THE
First Avatar

7. MAKING
friendsWITH SVGS

8. THE
Anatomy
WITH SPECIAL GUEST

9. THE
Anatomy
www.hasbro.com

10. THE
Anatomy
www.hasbro.com

11. THE
Anatomy
www.hasbro.com

12. THE
head&
shoulders
(SKIP KNEES & TOES)

13. Open Sketch & Insert a new Artboard
Step 1

14. Insert a picture of your friend for a visual guide
Tip

15. Create a colour palette by using the Colour Picker & adjusting tones
Tip

16. Add custom colours to the Document Colors for easy access
Tip

17. Insert > Shape > Oval for the head & adjust key points
Step 2

18. Add Inner Shadows to the head for depth
Step 2

19. Insert > Shape > Oval as a base for hair add key points & adjust
Step 3

20. Name & Union grouped features for a cleaner exported SVG
Tip

21. Step 4
Insert > Shape > Oval as a base for the ears add key points & adjust

22. Step 5
Use the head shape as a guide to create the beard & adjust the colour

23. Step 5
Duplicate the beard and add noise to create hair texture

24. THE
eyes, ears,
mouth&nose

25. Step 6
Insert > Shape > Oval as glass lens guide
Insert > Shape > Rectangle for frame side & nose bridge

26. Step 6
Use the Color Picker to select glasses frame colours + gradient

27. Step 7
Insert > Shape > Oval to form the top and bottom lip

28. Step 8
Insert > Shape > Oval for eyes, duplicate & position to template

29. Step 9
Add any distinctive facial features for a tailored look

30. Step 10
Insert > Shape > Rectangle for the neck & use shadow colour for contrast

31. Step 11
Be a stylist - dress your Avatar & Add Mask to form the shape

32. Step 12
Make any finishing touches to finesse the look & feel

34. IN THE
Wild

35. THE
Export
Varun Vachhar
@winkerVSbecks

36. THE FINAL
Recap

37. Try Templates Customize Make
Friends

38. Thankyou
FATIMA REMTULLAH @amitafr