DESIGN - Create a vector avatar for the Gitcoin avatar builder. (NO LONGER OPEN FOR NEW START WORKs)

[owocki]

I have some fun news.

The Gitcoin avatar builder is about to get the ability to have MANY different avatar types on it.

1

2

3

Starting with the release of the Bufficorn Avatar builder at ETHdenver 2020, we are going to be allowing MANY different avatar types onto the platform soon.

How it works

Checkout these two sample avatar svgs.

If you open them up in your favorite SVG editor this is what youll see as the DOM structure

Basically there are different categories of accessories.. And different permutations of that accessory.. And they are encapsulated as items in the DOM of the svg.

Bounty

Your task is to create an avatar concept for the avatar builder. To participate

1. Design an avatar from the request list below.
2. Post a sketch .
3. We'll chat about it; and I may invite you to post a full vector image of the avatar.
4. We'll chat about it; and I may invite you to post a full layer avatar file.

The prize for a getting a full avatar file on the site will be 5 ETH. I will fund up to 5 of these in Q1 2020.

Asks

Here are some avatar styles that would be cool to add to the site:

• Robot
• Barbarian (think like Barbarian from Diablo Video Game)
• Mage (think like Mage from Diablo Video Game)
• Burning Man Participant
• Orc (from Warcraft)
• a wookie
• a jedi
• superhero / supervillian
• Protoss (from Starcraft)
• alien
• Brooklyn Hipster
• Rainbows/Unicorn Developer
• Economist
• Willy Wonkas Playground
• pixel art avatars
• moloch (from molochDAO and meditatinos on moloch)

How to submit work

Submit a PR to this directory https://github.com/gitcoinco/creative/tree/master/Product/Avatar on the gitcoin creative repo

Must comply with svg specs Must be 350px x 350px in viewport

[theCydonian]

@owocki this should be good size and dom wise. Let me know if it works. Here is my ETH address if it works: 0x513407d8aa17dD03BA1d35F045ba80B05bBB98a1

avatar-01.svg.zip

[nasehim7]

@owocki Each layer is a png(bitmap) but the final export is a svg. I just checked the size of the image is nearly 40 MB, there are two ways to tackle:

1. I can run a svg optimizer on this and cut it down
2. Turn each layer to svg

What do you think should I try out?

[KushMd]

ORC(updated) https://drive.google.com/open?id=1AKXI-mUcl_8zS3vloEB-qJcl6g34NG5a JOKER(updated) https://drive.google.com/open?id=1scizJf35ukObonTeVTC8BxiRw73cl2Cm

Working on jedi

[KushMd]

JEDI(updated) https://drive.google.com/open?id=1h3yv1FFRcr9OeRxbD3uiIvNVaQys_oFu

[owocki]

@nasehim7 i'd prefer each layer was an svg

[owocki]

@theCydonian it works! thanks

[owocki]

closing this bounty for new entrants. only accepting people were already working with now

[alexgetty]

@owocki Wow, it's exciting seeing this functional! Seeing how backgrounds are done, I'd like to revise mine a bit. I left them grey because I incorrectly assumed the background color was editable. I'll take some time to create some more interesting background options and then submit the updated svg as a PR request.

[owocki]

@TheDataDesigner go for it! you can play with it on gitcoin live to see how it works + iterate from there. here is the svg thats in prod if u wanna crank from there https://bits.owocki.com/KouWBdBw

[alexgetty]

@owocki Yeah I'm playing around with it and noticed a few things I need to fix. Do I have any control over which components are set as the default and the order in which each category/option is sorted?

To answer your other question, I don't have any more components ready right now, but if there is a process where I could continually create new options and submit pull requests in the future, I'll happily keep refining it and pumping new options out as I have time.

[owocki]

the avatar bulider just makes the first element in the DOM default

[theCydonian]

@owocki how will payment work?

[owocki]

submit work on gitcoin then ill pay u

[alexgetty]

@owocki It may have inverted mine on export then, everything is opposite. I'll try reversing the order in my next version and see if that has the desired effect.

[theCydonian]

@owocki I exxpressed interest on the bounty. can you approve so I can submit

[owocki]

new avatar builder is lookin DOPEEEEE AF

[owocki]

just approved everyone whos currently working!

[owocki]

@KushMd before u put much more work in... i may need to put a limit on payouts per person.. i wasnt expecting 3 of these for you. maybe we can meet in the middle here? contact me on chat to discuss?

[owocki]

does anyone have an artist bio they want me to put on their work? @ me with it and ill make sure it makes it on the avatar builder

[theCydonian]

@owocki I submitted to gitcoin!

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work for 20.0 ETH (4541.79 USD @ $227.09/ETH) has been submitted by:

1. @thecydonian
2. @thedatadesigner
3. @hamzaghz
4. @hamzaghz

@owocki please take a look at the submitted work:

• PR by @hamzaghz
• PR by @hamzaghz
• (Link Not Provided) by @TheDataDesigner
• PR by @theCydonian

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $82,317.05 more funded OSS Work available on the Gitcoin Issue Explorer

[owocki]

@theCydonian thanks - will pay u out soon.

one request from peter pan (metacartel leader) is that itd be great if we could have female chillis

[owocki]

does anyone on the thread want to cretea a moloch avatar? u can use this as a base https://bits.owocki.com/4gumjZPp

some things we'd love to add to it Ameen, [Feb 28, 2020 at 10:02:43 AM]: Blood

Fire

Tribute

Or like

Being a hero

Getting a cat out of a tree

Helping grandma with groceries

Cleaning litter

[theCydonian]

@owocki how exactly would you imply chilli gender?

EDIT: I guess I could do a mouth without a mustache. I'll put that in the dropbox folder I submitted as avatar_patch_2.svg soon

[owocki]

maybe some feminine accesssories would help too..

[theCydonian]

I mean, without the stache, it is kinda feminine.

what do you mean by feminine accessories though?

[theCydonian]

@owocki maybe a hat like this:

[theCydonian]

@owocki I made it feminine and put it in the folder I submitted

[theCydonian]

@owocki here is my аттempt at making it female. I put it in the dropbox folder I submitted. When will you be sending the ETH?

[owocki]

that seems in the right direction!

[owocki]

anyone else have any stuff they wanna put in?!?! we'll probalby annou8nce this early next week

[theCydonian]

awesome! I can't wait to customize my avatar.

[theCydonian]

@owocki, wait so is the girl avatar good?

[nasehim7]

@owocki Hi Kevin, I have updated the SVG with each layer being a SVG, also have change the view box to 350 * 350 of each SVG for consistency. Hope this works well this time

Mage: https://drive.google.com/file/d/1xXGnkjc_Rl-xP-TmEivotylj_aaKKrwE/view?usp=sharing Orc: https://drive.google.com/file/d/1npMrY32QGtHXG6apmJ_XLZ-reVsH69-Y/view?usp=sharing

Also, I can sketch out Moloch if you want :)

[nasehim7]

does anyone have an artist bio they want me to put on their work? @ me with it and ill make sure it makes it on the avatar builder

At the moment, I only have an instagram page where I constantly keep putting my artworks if that sounds something of interest :D

[Popeline5]

I finished ! popeline5-jedi.svg.zip

[theCydonian]

@owocki Would you mind answering a couple questions? What will the timeframe be for the payment? I don't want to be a pest, but I'm trying to make an investment and the timeframe is a bit small, so I was just curious when I would have the ETH. Also, do you want me to add anything else? I'd be happy to add anything you want me to even after you pay me. This has been a really fun project, and it has been great contributing to the platform. Gitcoin is amazing platform and I'm so glad I found y'all.

Thanks!

[owocki]

@theCydonian happy to pay out next week. am verifying your submission now ( edit: looks good)

@nasehim7 both of your svgs just have bitmaps (not vector) in the DOM .... did u upload the wrong files? heres what i see in sketch https://bits.owocki.com/9ZuAXvvB

@Popeline5 your jedi looks good - will be pushed to prod over the weekend

@writeprovidence the artwork looks cool visually pls ensure that your SVG dom structure follows the spec ( heres what it looks like: https://bits.owocki.com/eDuxBW9B )

spec details DOM structure here => https://github.com/gitcoinco/web/issues/5893

[nasehim7]

@owock Kevin I sketched everything in PNG in procreate then using Illustrator I changed each part of the sketch to SVG. After that, I assembled each SVG to make each of the characters I checked, Iuploaded the right files Is it causing any issue in the avatar builder?

[theCydonian]

@owocki sounds good! Thanks! Can’t wait to see it on the website

[owocki]

@nasehim7 it loads into the avatar builder but these are the problems:

• bc the bitjmaps are big, its about 4MB per download, and user has to download a new avatar everytime they click a new permutation (we also have to load each permutation several times as they click around)
• we can't filter out the outfit colors / skin color without the vector parts
• (this is unrelated to the vector vs not) can u give me a new veresion where none of the avatar items protrude out of the background? it messes up the framing of the avatar builder to have them outside of the frame.

[nasehim7]

@owocki The elements were inside the background when I tested. Something is fishy, I will have to check. Sure I will create a new version, this time will use sketch to create for consistency. Posting it out soon :)

[owocki]

one idea: if you can't find a way to make them into vector assets.. then maybe exporting the bitmaps into the svg at 350px x 350px will be a good way to keep filesize way down. right now the files are 9MB, if we can cut that by a factor of 10 i think the performance issues will go away

[nasehim7]

Thanks Kevin for the suggestion. I will try it out and lets see how it goes :)

[theCydonian]

@owocki The new avatars are looking pretty sweet on the website! I noticed my pepper is a bit weirdly centered when put in the circle. I'll try to add a new patch tomorrow to fix this.

I have a question regarding this fix though. Is the circle crop just a simple circle incribed in the 350x350 square, or is there a margin? I want to be able to visualize this fix while I'm working on it so I do it right.

Also, in the About the Artist section, can you mention that I adapted franky's work for the avatar creator. Ex: "( About the artist: This piece was originally created by @frankynies, an amazing artist of Mexican heritage who works at Dapper Labs, and was adapted for the avatar creator by @theCydonian )"

[nasehim7]

@owocki Hi Kevin, I tried to change it. Can you test this and see if it works properly: Mage: https://drive.google.com/file/d/1QhAXylmrWAQZZtSSd7kS3mrPbJR1owAd/view?usp=sharing

I tried cutting it down to 2.3 MB I used Sketch to export my PNGs to SVG like this:

Then stacked it up in the aforementioned Mage SVG. All SVGs are of canvas size 350*350. I feel to sketch everything as a high res PNG was a mistake from my side as SVG exports of PNGs are always a challenge

[KushMd]

@owocki left some messages on the chat.....

[owocki]

@theCydonian will do (i dontthink theres any margin on there no)

@nasehim7 trying that now

@KushMd i have like 200 unread messages on chat rn bc i was on leave. can u just comment here?

[owocki]

@nasehim7 i got it to work by putting all the images in the bitmap into their own groups + cropping out the 'mage' element. here is the edited svg https://bits.owocki.com/04uKq0jv

can u make those edits to the protoss/orc too and post those?

btw do u have a bio u want me to put by ur image?

[nasehim7]

@owocki Thanks Kevin for helping me out. I have a question, in the updated SVG the elements like facial hair and accessories are a bit misaligned. Is it coming okay in the builder? Example this is how the SVG looks:

Ideal Case:

For Orc, I will do the grouping as stated. Update you soon here.

The bio can be: Animesh is a self taught artist | freelance illustrator. You can follow his work at: @animesh.tewari on Instagram :D