PDA

View Full Version : How to make an avatar


sonsofwashington
April-29th-2005, 02:41 PM
I thought this would help the curious get their foot in the door. With the number of cool pics also it may help give birth to more avatars and/or signatures.

Prerequisite: Semi-Sophisticated Image Editing Program

I use Macromedia Fireworks MX 2004 (any version of Fireworks should work), but I am sure other image editing programs like Photoshop and such will work just as well if not better.

It takes about 10 minutes per avatar, but at first it took me longer. You have to have a steady hand and patience.

STEPS
1.) Convert the original *.jpeg file to a GIF format so that you can work with the image in bitmap format.

2.) Open the converted gif file and select the lasso tool. There are two lasso tools. One is a "free form lasso" and the other is the "polygon lasso". Anyway the lasso you want to use is the one where you click the mouse and it sticks at a point until you click the mouse again and it sticks at that point again (The polygon lasso).

3.) Then just trace out the image of the player using the lasso by clicking around his body. This is the hardest part of the entire process. You will get better the more you do. A nice trace is what it is all about. I trace in bits becasue if you trace the entire player and then mess up a mouse click at the end you will have to start all over. So trace the helmet, then an arm, then a leg etc. The lasso works by creating an enclosed area then clikcing "delete". The enclosed area is removed from the GIF and a nice trace of the player remains. Be carefull that you dont enclose the entire player because then you will essentially be taking the player out of the picture.

4.) Once the entire player is traced out and the background is gone I usually copy the traced out image and paste it into a new project so that the canvas is the exact same size as the image. Select the image (so the blue box surrounds it), press CTRL-C, CTRL N, CTRL V. The image should be put in a new canvas with the same dimensions.

5.) Then it's time to futs with the export options. Make the canvas have a transparent background. Export the image as GIF, with 256 colors (use "adaptive" or "exact" palate), use Alpha transparency (very important to eliminate white areas), and use a black mate (cause ES uses a black background). These settings are very important.

6.) At this moment I save the project. I resize the image so that the height is 100 pixels keeping the proportions locked (obviously you can do whatever size you want). Then I save the project again with another name so I have a big version and a small version.

7.) Export the small version as a GIF and you are done. If the trace is good and the export settings are correct the image will look great. If you want to review your trace just export the image with a black background (black cause that is the extremeskins background) as opposed to a transparent one. This way you won't have to upload the image to the server just to see how it looks.

If you send me a PM I'll send you some sameple JPEGS, GIFS, and Fireworks Projects. That way you can see the progression of images and MX projects.

Anyway, the most important things are getting a good trace and exporting with the correct options. It goes slow at first, but now I can do one in 10 minutes or less which is about my patience threshold for doing one of these. It can get annoying in the begining, but once you get the feel for it you can whip em off pretty fast.

Good luck.

BG
April-29th-2005, 05:17 PM
Very cool of you to post this SOW, been meaning to pm you back, but I never really delved back into the avatar thing hardcore. Just been busier than ever lately. Weather is getting nice, and women are wearing less these days... :yikes:

This was actually a tutorial Sons of Washington sent me a while back when I asked him how he got so precise with his graphics. I am glad you are postin this dude...

It helps to have a decent monitor too ;) Mine old one was killing me. Flickering, ghosted staticy 17 incher.

One thing I wanted to mention, and SOW, I dunno if you ever tried this in Photoshop, is using the Magnetic Lasso tool in Photoshop, (looks like the polygon lasso tool but has a magnet icon) and it kinda sets the points for you. Once you have the whole thing selected, you can press what is called the "quick mask" button and paint/unpaint the selected area. Only problem is you sometimes get jagged edges, so you may need to use varying "tranceparencies" when using the paintbrush. That option should be just under the top menu of photoshop when you have a given brush selected.

It saves time for other types of graphic work, but if you want to get extremely precise, then I suggest SOW's method. Proof is in his sig.

One last question though, why convert the JPEG to GIF initially? After all, it gets converted in the end so what's up with that?

sonsofwashington
May-1st-2005, 05:49 PM
To answer BG's question above:

The file needs to be converted from JPEG to GIF in order to work with a bitmap format. I don't think it is possible to use the lasso tool with JPEG images. The GIF images are essentially a series of little dots (hence the name bitmap) where the JPEG images are not (not sure what they really are). All the avatars I have made end up a GIF files. So besically it is so you can eliminate all parts of the image except the player.

That is the short non-technical answer.

The magnetic lasso is a really cool tool, but since I don't have Photoshop it isn't an option for me (I use Macromedia Fireworks). I get some rigid edges when working as well, but they seem to disappear to the naked eye once the image is reduced in size.

Adobe, the makers of Photoshop, just purchased Macromedia so it will be interesting to see what kind of products they will be realeasing in the future. Kinda bummed about the aquisition because now Adobe will have a monopoly in several areas.

Have fun in the sun!

TK
May-1st-2005, 06:16 PM
Originally posted by BG
One thing I wanted to mention, and SOW, I dunno if you ever tried this in Photoshop, is using the Magnetic Lasso tool in Photoshop, (looks like the polygon lasso tool but has a magnet icon) and it kinda sets the points for you.
That's usually what I do. You can alsouse the Magic Wand & the earser on the background.

SkinsForLife260
June-20th-2005, 12:09 AM
http://img12.echo.cx/img12/9894/done5ox.jpg (http://www.imageshack.us)

I am trying to make it trasparent!

http://img12.echo.cx/img12/2706/lazy0ss.gif (http://www.imageshack.us)

sonsofwashington
June-22nd-2005, 10:05 AM
BG or TK would probably know how to make the background transparent in photoshop. I am almost positive the image must be exported as a GIF file. So if you are exporting to JPEG and not having any success export to GIF. Maybe that helps. Cheers. Nice work.

CHUBAKAH
June-22nd-2005, 11:07 AM
Ear

SkinsForLife260
June-22nd-2005, 02:25 PM
http://img241.echo.cx/img241/2579/portisdone17cr.gif (http://www.imageshack.us)

http://img241.echo.cx/img241/9835/portist10em.gif (http://www.imageshack.us)

CrazyZeb
September-6th-2005, 12:54 PM
Another tip - don't give up on a potential avatar because a foot or something is missing, or another player is a bit in the way. If you work at it, you can draw it in, and when resized, its barely if at all noticable. A couple examples from my Bulls-related site (guess the missing limb! heh):

http://yourchicagobulls.com/forum/images/avatars/gallery/Current%20Bulls/hinrich03.gifhttp://yourchicagobulls.com/forum/images/avatars/gallery/Current%20Bulls/pargo01.gifhttp://yourchicagobulls.com/forum/images/avatars/gallery/Current%20Bulls/hinrich06.gifhttp://yourchicagobulls.com/forum/images/avatars/gallery/Current%20Bulls/davis04.gifhttp://yourchicagobulls.com/forum/images/avatars/gallery/Current%20Bulls/curry07.gifhttp://yourchicagobulls.com/forum/images/avatars/gallery/Current%20Bulls/harrington01.gif

They look fairly natural.

CHUBAKAH
September-6th-2005, 03:31 PM
Far right, right leg, but I will know for sure when I get home and see it on my 1000:1
lol

KingLEO
September-6th-2005, 03:36 PM
I think its the second from the right..it looks like he dont have a leg but its ok its cool though!

CrazyZeb
September-6th-2005, 03:49 PM
Far right, right leg, but I will know for sure when I get home and see it on my 1000:1
lol
Believe it or not, that's real, ha. BUT, look at his right leg (our left) and the guy with the headband's right leg. lol

mrdoctor
September-22nd-2005, 05:36 PM
you can also download animated gif freeware if you goto

www.google.com
and search for
animated gif maker or somthng of that sort, alot of differnt programs to choose from

skinfan13
March-11th-2006, 01:14 AM
id really like to see a sam huff one

http://www.geocities.com/ashburnband/samhuffavatar.JPG

the burgundy and gold
March-19th-2006, 11:15 AM
anyone wanna make me one