Change your Designer News’s avatar the “easy” way
A weekend’s little experiment
So here’s a little story.
Meng To (an amazing designer, btw) was kind to invite me to Designer News the other day. As always, the first thing I thought of doing was to work on my profile a little bit.
Turnt out that I can’t just have an avatar. I needed to, you know, draw one. I know it sounds cool — and believe me it is — but I am not that good into drawing stuff this way.
So I thought, why not do it the other way around and make it easier both for me and other people like me who are either bored or don’t have the time to deal with block-painting.
Well, I found an hour today (the kid decided to get some sleep at least), so here are the steps you need to follow to edit your DN avatar your way — or at least way easier.
- Pick this Sketch file or this PNG image (for those not Sketch-ing yet).
- Work on your avatar (on top of the base template).
- Export your avatar.
- Paste the following code into the developer tools console (Chrome, Safari or Firebug).
(function () { s = document.createElement('script'); s.src = "https://dl.dropboxusercontent.com/u/20384/dn-avatar.js"; document.body.appendChild(s); }());
An input dialog will appear below your avatar, so go ahead choose your new avatar.
Voila, the avatar is updated.
All you need to do now is to press “Update profile” in order to save your profile.
Done.
Discuss this, if you care, on Designer News.
Notes:
- Please note this was done in a hurry, and thought it’s tested, issues may arise.
- When editing your avatar, anything other than pure black (rgb: 0,0,0) is treated as white (eventually, this will support color blocks as well).
- Please don’t try this with an IE < 10
