14 comments

  • Pablo Stanley, 6 days ago

    Avataaars

    Avataaars

    Hello friends!

    I made a gift for you. A Sketch library to create avatar illustrations. I’m calling it Avataaars (the domain for avatars with a single “a” wasn’t available, lol.)

    You can mix & match hairstyles, accessories, clothing, eye expressions, mouths, skin color, and even graphics on t-shirts. Use it freely for your personal or commercial projects.

    Get it here: http://www.avataaars.com/


    About libraries

    In case you don’t know, libraries are just a Sketch document with lots of symbols that you can use in multiple files. Once you download the file do the following: • Go to menu “Sketch / Preferences.” or ⌘ + , • Select the “Libraries” tab. • Click “Add Library” • Select this file from your computer and add.

    Using overrides

    Every avataaar has overrides that you can apply. When you select an avatar, check out the inspector to see all the things you can customize.

    • TOP: The customization starts with the Top (hair and accessories). Some hairstyles have a nested override to change the hair color. Other Tops allow you to modify or remove facial hair and even change the color of it. Neat! • ACCESSORIES: Add or remove glasses from your avatar. More fixtures coming soon :) • EYEBROWS: Select the type of expression you want your eyebrows to have. You can select a “natural” look or “outline” look, which is a bit more cartoonish. • EYES: The window to the soul! Select from different expressions. Inspired by emojis • MOUTH: Select different type of smiles, frowns, or screams! • CLOTHES: Select different types of shirts, jerseys, and overalls! Some of the clothes have a nested override to change the color.
Pro Tip: Select the “Graphic Tee” to add an icon or some custom text to your shirt! • SKIN: Select different skin colors to fine tune your avatars and add diversity to your illustrations. The colors are based on the emoji options + “Yellow” and “Tanned.” • CIRCLE COLOR: Change the color of the circle mask, Only available in avatars with circle background.

    Scaling and transforming.

    Almost all the avatars should be able to be transformed and look good (but some stuff might break). Sketch 48 will allow symbol scaling (not supported on 47 or below.) In the meantime, you can hack this by grouping the symbol first and then scaling up or down the group.

    Customizing

    To customize the library merely jump to the symbols page in this document and go crazy! I recommend duplicating existing symbols and use them as templates to create your own. You can also just edit the existing symbols and fine-tune them to get them just fine :)

    Wanna collaborate?

    If you want to expand on this library, you can either use it as a template, add your stuff, and then publish it for everyone! To make your additions part of the official library, just shoot me a PM on twitter (@pablostaanley) when you have something, and we’ll update it!

    @pablostanley

    6 points
    • Stephen OlmsteadStephen Olmstead, 5 days ago

      Pablo this so great- smart application and delightful implementation. Love it- deepest thanks from Avataaar me. :)

      Thanks Pablo!

      1 point
  • Edgar Chaparro, 5 days ago

    This is amaziinggggg

    1 point
  • Yannis SteriotisYannis Steriotis, 6 days ago

    Inspired use of libraries - amazing work - thank you!

    1 point
    • Pablo Stanley, 6 days ago

      It has been working flawlessly for me. Excited to know that Sketch will allow scaling with Symbols on the next version, too—making libraries even more useful :)

      1 point
  • Adam Kirkwood, 5 days ago

    Beautifully done, Pablo. Thank you for this!

    1 point
  • Lorine ColasLorine Colas, 4 days ago

    <3 Pablo Stanley being as rad as InVision right now <3

    You're probably the person who's inspired me the most lately.

    I've meant to build such a library for months, but never thought about such a smart way to make it with Sketch.

    0 points
  • Philip A, 5 days ago

    Soo cool, great work on this! Is there a way to randomly generate avatars in Sketch using this?

    0 points
  • Aurooba Ahmed, 6 days ago

    This is seriously cool.

    0 points
  • Product Disrupt, 5 days ago

    This is amazing! Thanks Pablo :)

    0 points
  • Carlos Montoya, 5 days ago

    Yaaas :)

    0 points
  • Joe CJoe C, 5 days ago

    Inspired use of symbols and overrides, awesome work! I made one for each person in our office and everyone loved them. Thanks to you, Pablo!

    0 points
  • V. MV. M, 4 days ago

    This one is certainly going to be among my fav design freebies. Arrived just in time as we were putting together an illustration for our website.

    Thank you so much Pablo. God bless your good soul.. :)

    VM

    0 points
  • V. MV. M, 4 days ago

    Hi there, it'd be awesome if someone could create a cheat-sheet here.

    0 points