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!
26th September, 3:23 am GMT
This is great news, especially for a picky designer such as myself
27th September, 11:05 pm GMT
All i want to tell you and your blog is :-
BRAVO Boy.
14th October, 7:21 pm GMT
Works like a charm! All that I wanted to change was the image size and the cite style!
Thanks bud,
Cheers,
Ajith
24th October, 12:31 pm GMT
Hey Michael
Thanks for the tut. I hope this is not a dumb question. I'm currently using Brian's Threaded Comment and the only code I see is
php echo get_avatar( $c, $size = '32' );. Can I just add the url after the code?Yan
4th December, 7:42 pm GMT
Does this work for default admin avatar or for comments only?
12th December, 4:59 pm GMT
nice explanation, but I wonder how to dynamically define the default gravatar...
let me explain:
in stead of using:
hht://www.mysite.org/wp-content/themes/mytheme/images/default_gravatar.jpg
is it possible to (in some way) use:
/images/default_gravatar.jpg ?
it would be much more reliable in case of re-using some of the files of other themes...
thanks in advance !
12th December, 8:07 pm GMT
Koen,
Yep, that should be possible. You're just passing a value to the get_avatar function, so it will try to work with anything you put in there.
I'm not so sure that dynamic images are a great idea (Why get the server to process more than it has to?), but if you think it would be best for you site, then by all means try it out and let us know if it works please!
12th December, 8:44 pm GMT
hey ! thanks, but i've found a "solution" to my problem.
in stead of using a static http:// adress to point to the .jpg, and to use a dynamic wordpress synthax like bloginfo template_directory.
i've found this:
http://www.kremalicious.com/20.....ment-19570
it adds an extra icon in the admin menu with the rest of the gravatars...
and it works just fine...and it's dynamic !!!
cheers !
14th December, 3:11 am GMT
Ah, glad you've solved it now! Thanks for sharing
28th December, 5:27 pm GMT
Thanks for the great info - I found your site when I was trying to figure out gravatars to begin with and came back when I decided I really didn't like the default WP choices. Good job and thanks for making it so painless. =)
3rd January, 12:19 am GMT
Way cool Michael, thanks! This was the simplest solution I found.
And btw, our default gravatar is a grayed out version of the one you see here. I made a few versions in different colors for our blog authors then a gray version for readers who don't have their own.
9th February, 4:43 am GMT
Wonderful Tips. Thanks
14th February, 10:39 am GMT
Nice tips but you can easily install WP-Gravatar Plugin or use default avatar that were build in with WP 2.7
23rd February, 8:52 pm GMT
YES! Thanks! I spent all morning trying to find this solution. Thank You!
11th March, 8:14 pm GMT
I have found that the easiest way to create your own avatar from an image is to use this website called avatardr.com.
2nd April, 12:18 pm GMT
Avatar constructor mentioned above works! Quick solution.
10th April, 4:22 am GMT
let me check it
11th May, 5:09 am GMT
Thx man, I've search this everywhere
It works
Rudi’s Latest Post: Menambahkan “Thumbnail Picture” Untuk Setiap Post di Wordpress
16th May, 5:12 am GMT
where is my avatar?
2nd June, 2:39 pm GMT
Thanks this post really helped me figure this out.