Posts tagged custom

Create cool default avatars

Aug 29th

Posted by alex in Graphic Design

No comments

If 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:

Avatars

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.

Avatars
, ,

sIFR – Use custom fonts in your website safely

May 1st

Posted by alex in Javascript

8 comments

UPDATE: The sIFR WordPress plugin is now available!

This is probably one of the most amazing scripts I've seen nowadays. It was developed by Mike Davidson and Mark Wubben, and what it does is it allows you to change the fonts used in your website to custom fonts without having to worry about them changing in the user's computer.

How this is accomplished is actually very simple. First of all you need a folder with all your fonts (.ttf files), then a JavaScript file has to be called from your html pages which will first check if Flash is enabled, and then if it is it will read through the code and determine where it should insert the flash movies.

Those flash movies take the font you selected and the text that the script found and create a static "animation" with the same text and size but with the new font. Since they are overlayed exactly over the original text, no change is noticed.
The only thing I'm afraid won't work fine is the background color. If you have a solid background it will work perfectly probably, but what if you use a textured background, like I do in this blog? I haven't tested it yet, but their test page works perfectly on solid backgrounds...

As a piece of advice don't over-use it, it is intended only for headlines, quotes, and other small bits of text.

Visit sIRF's homepage for more information on this subject
Visit their demo page

Future planning

Right after I found this tool I thought to my self, "I have to create a WP plugin that will automatically change selected tags or ids to themed fonts!". So well, I am developing now the plugin.
I started today so I guess it will take me no longer that this Sunday. I have about three days, considering that here in Spain we are on holidays... Yea I know, Spain is always on holidays :)

So that is pretty much it, I'll keep on posting about the plugin status, and if you want me to notify you simply post a comment saying so and when I'm done I'll email you ;)

Enjoy sIFR!

, , , , ,