How To Make Your Own Default Avatar in 5 Minutes
Thousands of blogs show avatars next to their user's comments. The avatars are a great way to make things more personal and create some variety between the different comments.
But there are always people who don't have an avatar. The result is usually a stack of default gray avatars. The same gray avatar you see on every other blog with Gravatars...
It only takes a few minutes to make your own, branded avatar.
3 Steps To Make An Avatar
Open up your favorite graphics program and run through these steps.
- Draw a box 80px by 80px (Or whatever size your avatar is). Fill the box with a color that is slightly darker than the background color of your comments area.
This will help it blend in more. When the image is going to appear a dozen times on the page, the less noticeable it is, the better!
As an example, here you can see the background of my (upcoming) comments section, the border that will go around all of the avatars, and the color I've chosen for the default avatar is in the center.
- Paste your logo into the box. Take away the color, and then re-color the logo using shades slightly darker than the background of the box. Also try lowering the visibility of the layer, to make the image more faint. The more subtle the effect is, the less likely it is to draw attention.
If you don't have a logo, use the initials of your blog. It works the same.
- Optional. You can add text that says "No Avatar," to explain why the image is showing up.
You could even write "Gravatar.com" (Or MyBlogLog.com) on it to help users figure out how to get one. After all, if the user doesn't have a Gravatar, there's a good chance that they don't know what a Gravatar is in the first place.
Setting The Image as the Default
If you use a plugin to add avatars to your blog, there is like to be a setting in the plugin's options page for choosing the default avatar.
If you use WordPress 2.5+, you probably use a template tag like the following for your avatars.
<?php echo get_avatar( $comment, 32 ); ?>
Just add a comma after the 32 (The pixel size of the image, if you want to change that while you're at it!), and paste in the URL to your image. e.g.
<?php echo get_avatar( $comment, 48, 'http://www.problogdesign.com/wp-content/themes/pro-blog-design/images/pbd_noavatar.png'); ?>
Now the comments on your posts will have a much nicer image that draws less attention, promotes recognition of your logo, and as so few blogs have a unique default avatar, it shows your attention to detail.
What image do you use as your default?
PS - You'll see the avatar above in use in my new design, due in about two weeks!
Enjoy this post? Get future updates sent to you for free! Join by email or RSS.
About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 21st July 2008.
Other posts tagged with Avatars, Comments, Gravatars, WordPress.
21st July, 2:25 am GMT
I've been using a Grue as my default avatar for ages. It's gotten tons of positive feedback.
21st July, 2:57 am GMT
Good tutorial. I've liked the PSDTuts avatar quite a bit.
Speaking of which, you could also add a small snippet of text saying Get your own avatar at Gravatar.
And I hopoe your design comes out soon.
21st July, 6:15 am GMT
Hey Michael:
Dumb question, I've been trying to figure this out.
How do you actually set/use avatars on WP blogs that allow them?
I've never seen an actual place to upload/define where to use them.
21st July, 1:17 pm GMT
Great post, I feel it is important in making blogs stand out. It is also a great way to add a nice design touch to your comments and not the same generic gravator.
Nice Work.
21st July, 2:06 pm GMT
Nice little tut :). I use MBLA still for avatars, so in case there's no avatar I have it set to show the default Gravatar avatar, if that not available mybloglog default avatar.
21st July, 7:23 pm GMT
New design? You never mentioned a new design...
Nice tutorial, I'm adding it to my Saturday speedlinking post.
21st July, 7:44 pm GMT
You can see my gravatar. It's my logo. (Created decades before Apple did something similar, btw)
What I'd like to have is instructions for having my blog's favicon show up as the gravatar for people who haven't created their own yet.
22nd July, 12:33 am GMT
Tyler,
Had to Google that! Good idea though.
Sumesh,
Adding text to explain what a Gravatar is is definitely a good idea. I have it in the new design. Might encourage more people to get avatars!
Niche Store Journey (Tyler is easier to type!
),
Check out this page on the Codex. It explains it all.
Grant,
Agreed. Every little customization makes the overall blog more unique.
Slevi,
So long as it's not the bright blue one with the Gravatar logo!
Redwall,
(Thanks in advance for the link!)
Hehe - I've been keeping it quiet. Been at it for almost a month now, but it's coming on well.
Infmom,
Check out the last section of the post "Setting the Image as the Default." Follow the advice there, but using your blog's favicon (You can't use the favicon file itself though as it's in *.ico format) as the image.
22nd July, 9:34 am GMT
Great little trick, I'm going to have to put this into effect on my site, I have too many boring grey heads at the moment!
23rd July, 2:08 pm GMT
Chris,
I'm using a grey square with 4 white lines!
At least your boxes even have heads.
23rd July, 3:57 pm GMT
ive been looking for somthing like this for ages!!!
now, how would i resize the gravitar?
i want to make it smaller! because the default size looks weird in my new blog (launching in August!)
24th July, 9:02 am GMT
Thanks for the tip. I have been wanting to do that but did not know how. This will help withbranding the Blog and giving it the identity to seperate it from other blogs.
25th July, 5:54 pm GMT
Hey! this is a great tip! Thanks for sharing!
Very useful.
27th July, 2:47 pm GMT
Hi, Thanks for paying me a visit. Just tried the great little default avatar change works a treat. Thanks
Eating Design
Mali
28th July, 2:18 pm GMT
Great post, we have a custom default avatar on our site and it really makes a difference because you can customise it to fit the look and colour scheme of your site. It doesn't look so badly like oh look this person doesn't have one!
28th July, 3:08 pm GMT
Christopher,
(80 is the maximum)
See the number in the get_avatar tag? Change that to whatever size you want
Adelaide,
Cool. I agree. It looks much better.
28th July, 7:18 pm GMT
thanks for the great tip (will link back to you at my new blogsite; launching Aug 01 2008)!
seems that I cant put too many words in my newly created avatar since i'm just using a size of 64px. but i think it looks great! thanks for the trick again!
28th July, 7:39 pm GMT
Jusuchin,
Thanks. Good luck with your site. I'll check back when it launches!
5th August, 11:43 pm GMT
Thank you very much for this guide!
I am using comicpress and wanted to put a more cartoon-themed blank gravatar in there - especially since my theme is black and the default gravatar sticks out like a sore thumb.
11th August, 4:01 pm GMT
Good thing I already have a gravatar.
14th August, 12:44 pm GMT
wow, very useful... good job !
22nd August, 10:09 pm GMT
Very nice!