Fun with SocialSpark Avatars

Before we begin: Please keep in mind that you can not do this as of yet (April 16, 2008). My changes to the cropping tool are being tested internally before we release to the world. But once it’s live, you’ll be ready to have some fun!

The other day I was working on some updates to the image cropping tool we have in SocialSpark to allow members to create their Avatars. The cropping tool has some excellent new features such as zooming in/out, and scrolling the image around. All things to help you create the perfect Avatar for yourself. As I was polishing up the code, Ted walks by and says… “You know what would be cool, if I could have one image for the square set and a different image for the wide set”.

Yeah, that would be cool, but the sound of more work with all the other outstanding issues I have piling up for launch made me a little nervous.

But you know what? With the ability to scroll the image, you CAN have a different image for square and wide avatars, EASILY… I’ll show you how.

The first thing we need to do is take the two images we want to use and make one image out of them. So I opened each picture I wanted to use and lined them up side by side and… ready for the hard part? Just take a screen shot, no biggie! 🙂

Now that I have my master image, let’s change our Avatar. Just go to manage your account, click on the profile button, then go to the Avatar tab.

Upload your new image and here comes the sexy new cropper! See the zoom in/out icons above the image? Click those a few times… see the scroll bars, yeah, slide them around some! Pretty cool, huh? Have an idea where I’m going with this? 🙂

Now scale, scroll, and line up your square avatar and click the “crop square” button.

Now just scroll over to the other image and do the same.

Awesome, yes?

It would be great in the future to give our members all kinds of neat tools to customize their Avatars, but until then, here’s one way to have fun!

Ok, time to go throw the frisbee with Phoenix 🙂