Posts tagged avatar
Create cool default avatars
0If you are designing a website where users can register and have avatars, and you want them to have those cool "Human shape" avatars as default, well, here is how to do them
This are some avatars I've created for my websites:
How to do this
I recommend using a small size, 100x100 is best for me, although any size will do. Chose two colors that will suit your design, I usually chose a lighter color for the bg of the avatar and a dark one (The same as the font color will do) for the inner shape.
So go ahead and fill in the bg of our avatar with the bg color. Now its time to get that shape. You could draw yours, although I don't recommend this, there are enough resources in Internet to have to create another.
I used a free PNG icon gallery in ArubaMaps. I really like it, it has some good quality, big PNG icons.
Go to the category Creatures, and search for people's faces.
Of course you can use anything else other that faces, but I guess I like the look of the human shape as avatar.
Now you can simply drag and drop the image in Photoshop, copy it and paste into the document, press Control+Click over the layer thumbnail to select its contents, and fill with the darker color in a layer above. Then delete the layer containing the image and position your shape.
You can improve this by using some fades and stuff like that, but that is up to you.
Using Gravatars in your blog comments
0
I'm sure you have seen in some blogs or websites that as soon as you enter your email, or other people do, an avatar is displayed for them. If you haven't still set your own you should do that now.
A Gravatar is a "Globally Recognized Avatar", meaning that anyone can display yours if they know your email address. The good thing for you bloggers out there is that you could use that to display avatars in the comments of your blog, or you could implement it in your forum, or virtually in any website that uses avatars.
I will explain how to do this in a general way, and then some tips for some CMS like WordPress, MovableType...
General Implementation
PHP
Using Gravatars in php is as simple as follows:
First set up the configuration variables
$email = "someone@somewhere.com"; $default = "http://www.somewhere.com/homestar.jpg"; $size = 40;
Now construct the Gravatar code:
$grav_url = "http://www.gravatar.com/avatar.php? gravatar_id=".md5($email). "&default=".urlencode($default). "&size=".$size;
And you are ready to go!
<img src="<?php echo $grav_url; ?/>" alt="My Gravatar" />
Of course you can build your own function to do this:
function gravatar($email,$default,$size){ $grav_url = "http://www.gravatar.com/avatar.php? return gravatar_id=".md5($email). "&default=".urlencode($default). "&size=".$size; }
And that is pretty much it for PHP
Other languages
Visit the documentation site at gravatars.com to find out, or click on the links below:
Installation in blogging software
WordPress
To use in WordPress there is a plugin available that will simplify the whole process a lot for you.
First of all download and activate the plugin.
What this plugin does is it will allow you to easily call the gravatar functions from the comments loop, without worrying for any special code. For a simple insertion just use:
<img src="<?php gravatar(); ?/>" alt="Gravatar" />
And you've got it.
You can personalize this as follows:
- First parameter will determine the minimum rating for the gravatar (G, PG, R, X)
- Second parameter is the height/width (They are the same ). Default is 80
- Last parameter is the default image, if not set gravatar will display their logo.
So a gravatar call with all parameters would look like this:
<img src="<?php gravatar("R", 80, "http://urbanoalvarez.es/img/blog/gravatar.png"); ?/>" alt="Gravatar" />
In order to successfully implement it you need to put the codes above in the comments loop. I'll post my own comment loop code to let you see how it is constructed and displayed:
< ?php foreach ($comments as $comment) : ?> <li <?php adminClass(apply_filters('comment_author',get_comment_author()),$oddcomment) ?>id="comment-< ?php comment_ID() ?>"> <a href="http://en.gravatar.com/"><img src="<?php gravatar("R", 80, "http://urbanoalvarez.es/img/blog/gravatar.png"); ?/>" alt="Gravatar" align="right" class="gravatar" /></a> <div><cite>< ?php comment_author_link() ?> says:</cite> < ?php if ($comment->comment_approved == '0') : ?> <em>Your comment is awaiting moderation.</em> < ?php endif; ?> <small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title="">< ?php comment_date('F jS, Y') ?> at < ?php comment_time() ?></a> < ?php edit_comment_link('edit',' ',''); ?></small> < ?php comment_text() ?></div> </li> < ?php /* Changes every other comment to a different class */ $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?> < ?php endforeach; /* end for each comment */ ?>
Other blogging software
There are several plugins and guides on the usage of the gravatars for most major blogging softwares, so go to the implementation page and browse for yours.
For any problems regarding installation/usage please don't hesitate to contact via the comments at the bottom of the page