Design.Build.Promote

Designing, building & promoting websites.

Designing An Avatar For Social Media

Avatars are an important factor of being visible in social media, here we explore how to design an Avatar for your social media profiles.

Your Social Media Avatar Should Reflect Who You Are

Your social media avatar will be seen by all your friends and should give them an instant reminder of who you are. Often you will want to use a photo of yourself to help the recognition factor, but bear in mind that your avatar will often be displayed at a small size.

So, if an avatar is displayed at a small size how do I go about designing it?

Designing A Small Avatar – Start Big!

Starting big when designing something small helps you in a few ways – a scaled down image retains quality whilst a scaled up image degrades, also on many sites avatars can be viewed in their original size. If you are using a photo of yourself you make it more personal by allowing people to view it at full size :)

So let’s start with our avatar design!

Taking The Photo For Your Avatar

Personally I work on an iMac so have a nifty wee camera built in, but any digital camera will do the trick. You will want to get a photo of yourself against a relatively neutral background, this is the one I started from:

The original photo I took for my social media avatar

The original photo I took for my social media avatar

In the background my lovely assistant is holding up a white banner to give the neutral background.

Making Your Avatar Stick Out

This is where the fun starts! Colour the background or remove it entirely or use photoshop filters to distort your face. I will go into these methods in more detail in future posts on Design.Build.Promote. For now I will show 3 examples, including my own avatar, which have been created in this (or similar ways).

The Big Avatar Ready To Upload

After playing in Photoshop I arrived at this image:

My big avatar - original size 479 x 479 pixels

My big avatar - original size 479 x 479 pixels

Notice that it is square, this is important for most social media sites. It is also large in dimensions but small in size – the original has a total of 112kB which is within the maximum size allowed by most sites.

3 Great Social Media Avatars

These avatars are amongst my favourites (excuse me for including my own here, but I constantly receive compliments on it):

my avatar as seen on Twitter

My avatar - with a coloured background

See my avatar on twitter

lyndoman's avatar as seen on Twitter

lyndoman's avatar where the colour is overlayed on his photo

See lyndoman’s avatar on twitter

darylsws's avatar as seen on Twitter

darylsws's avatar with the background removed entirely

See darylsws’s avatar on twitter

Doubtless you also have your favourite avatars, please do link to them in the comments!

3 Responses to “Designing An Avatar For Social Media”

  1. Daryl SWS (2 comments.) says:

    Thanks for the include here! I really should use a higher res version of my Avatar!

    Cheers Andrew :o)

  2. Andrew says:

    Thanks for the comment Daryl! At first I thought your avatar’s background was just the same colour as the background in tweetdeck, until I saw it on twitter.com – then it creeped me out ;)

  3. Daryl SWS (2 comments.) says:

    Ah – The joys of transparent PNG’s (unless you’ve got to include IE6!)

    I tried out the transparent PNG as an experiment at first and it’s nice to see that it works across the different Twitter clients too :o)

Leave a Reply

Anti-Spam Protection by WP-SpamFree