How do you make your own Avatar?

[Axeman]

Hello all, as someone who is sick of looking at their premade avatar I think I speak for a lot of people when I say “How do you make an avatar?” This Thread is all about Avatar creation, style, technics and generally how to make your own kick ass one.

First things first, we need an opening topic. So let’s start from the beginning. We know most people prefer there Avatars in the style of Order of the Stick using Flash, right. So I personally went looking for Flash but could not find it. How do you get it?

[Emperor Ing]

Well you'd have to be willing to shell out roughly a hundred bucks for Flash. :smalltongue:

Alternatively, most people here including myself use Inkscape, which you can download off teh interwebs for free.

Then once your lovely creation is completed, file export, then upload it through an image hosting site like Imageshack or Photobucket.

[Elder Tsofu]

*Agrees with The Randomizer*

*Posts obligatory link to a inkscape tutorial on Oots-style*
http://www.trazoi.net/tutorials/inkscape/oots/

[Axeman]

Thank you Randomizer for that helpful info/saving me from paying 100 bucks.:smallbiggrin:

[Serpentine]

I use Adobe Illustrator. I find tracing an excellent place to start - you can be surprised by some of the dimensions of oots style if you don't directly compare it.

[Prime32]

I started using Flash... then switched to Inkscape. :smalltongue:

[AsteriskAmp]

Hello all, as someone who is sick of looking at their premade avatar I think I speak for a lot of people when I say “How do you make an avatar?” This Thread is all about Avatar creation, style, technics and generally how to make your own kick ass one.

First things first, we need an opening topic. So let’s start from the beginning. We know most people prefer there Avatars in the style of Order of the Stick using Flash, right. So I personally went looking for Flash but could not find it. How do you get it?

First of all, OoTS is done on Illustrator.
Second, most people here use Inkscape, but any vector editing program will cut it, heck, if you are truly skilled at one, even a raster editing can be used, or well, even MS Paint as used by Crimmy.
As for Flash, I believe 100$ is for the student edition, and if you are already looking into it, I suggest Illustrator or Fireworks as easier to use alternatives, since Flash is geared toward animation more than vector editing.

Also, if you are starting, and have not software *which probably means you-ll use inkscape, I suggest starting with Trazoi's guide (http://www.trazoi.net/tutorials/inkscape/oots/).

[Teutonic Knight]

Inkscape has served me well these past what, five years?

[Kneenibble]

Are there any arguments against Inkscape?
Honestly, I've found it delightful and easy to use after reading that tutorial and getting a little practice.

& hey... free.

[AsteriskAmp]

Are there any arguments against Inkscape?
Honestly, I've found it delightful and easy to use after reading that tutorial and getting a little practice.

& hey... free.

Crashing? Limited Raster Editing?
If you already for some reason have Illustrator or Fireworks they are more copmlete IMHO.
As for price I got my CS for free thanks to my school screwing up, but I understand this is not the case of almost everybody else.

[Serpentine]

Every time I've gone "dammit Illustrator, why won't you do this thing I want you to do?!", I've discovered that it can, in fact, to it, and I haven't had much trouble with it crashing.
But I've never used Inkscape, so I can't actually compare *shrug*

[Haruki-kun]

Are there any arguments against Inkscape?
Honestly, I've found it delightful and easy to use after reading that tutorial and getting a little practice.

& hey... free.

Inkscape is a real Jewel of Open Source. However, it is not yet on par with its commercial counterparts, specifically Adobe Illustrator. Inkscape can't do a LOT of the things Illustrator can do. It just so happens that what it does do is just enough to make OOTS avatars, where the shading and flares and gradients and such effects are rarely needed.

So, is Illustrator better? Yes. Is it worth the extra effort and money just for making avatars as a hobby? Probably not. If you have access to it, then by all means, learn it and use it. It's a very good piece of software, developed by a very respected company. But if you don't have access to it and don't want to pay, the free option, Inkscape, is very good, too.

tl; dr: Is Inkscape good? YES! Is it better than Illustrator? NO!

EDIT: And yes, I use Inkscape.

[Kislath]

Okay, now for a related question:
Once you have drawn your toon, what dimensions does it need to fit and how do you replace your standard issue avvie with it?

[AsteriskAmp]

Okay, now for a related question:
Once you have drawn your toon, what dimensions does it need to fit and how do you replace your standard issue avvie with it?

120x120 pxls

[Haruki-kun]

Okay, now for a related question:
Once you have drawn your toon, what dimensions does it need to fit and how do you replace your standard issue avvie with it?

Upload the picture to an image hosting site like Photobucket or Imageshack. Get an account in either of these. Then go to your User CP and under "Edit Options" pick Custom Avatar and paste the "Direct Link" you get in Photobucket into the Image URL.

[Axeman]

Upload the picture to an image hosting site like Photobucket or Imageshack. Get an account in either of these. Then go to your User CP and under "Edit Options" pick Custom Avatar and paste the "Direct Link" you get in Photobucket into the Image URL.

Thanks, I all ways wondered how I was going to get my Avatar on the net.

Now on too design. You guys are definite pros at this and I’m a noob, so some ideas would be would be nice. I already have some ideas of my own, like my Avatar must wield an axe simply because my name is Axeman. I don’t want him wearing vary heavy armour and such. So some pitched ideas would be great.

Thanks for all this.:smallsmile:

[AsteriskAmp]

Thanks, I all ways wondered how I was going to get my Avatar on the net.

Now on too design. You guys are definite pros at this and I’m a noob, so some ideas would be would be nice. I already have some ideas of my own, like my Avatar must wield an axe simply because my name is Axeman. I don’t want him wearing vary heavy armour and such. So some pitched ideas would be great.

Thanks for all this.:smallsmile:
Actually no, few avatarists could consider themselves pros, most of us are just hobbyist with a fair amount of practice, the only thing you are missing is practice and even then, sometimes technique can work over it easily.

As for what to do with your avatar, search for some reference images on the web and just go along and tweak it for you, the avatar is meant for you to showcase "something", some make characters they've RPed in a game, others use it as a showcase of their work, some match them with their usernames, and some use them for "something", I don't really know the purpose of some, but that's the point, they are meant for you to use it for yourself-

[Axeman]

I hear you. Art is vary objective and some people don’t like what I draw, scarcely knowing what it is that I'm drawing in the first place. But I just had an idea. I will physically draw my Avatar, scan it in to the computer and modify it with Photoshop. I don’t own Photoshop but I have access to it if you wanted to know.

[AsteriskAmp]

I hear you. Art is vary objective and some people don’t like what I draw, scarcely knowing what it is that I'm drawing in the first place. But I just had an idea. I will physically draw my Avatar, scan it in to the computer and modify it with Photoshop. I don’t own Photoshop but I have access to it if you wanted to know.

Try Illustrator if you downloaded the suite, if not, Inkscape is kinda better than photoshop unless you already are good at it.

As for drawing and then scanning, it's a method, but not the only one, I personally suck at drawing so I only use it for posturing and sometimes cloth and hair flow referencing, but if you are already skilled at drawing you've got a head-start.

[Teutonic Knight]

If you have ideas of your own, use them. I get some of my ideas from seeing the works of others, and then use imagination to tweak it until it becomes my own.

[John Cribati]

Inkscape is a real Jewel of Open Source. However, it is not yet on par with its commercial counterparts, specifically Adobe Illustrator. Inkscape can't do a LOT of the things Illustrator can do. It just so happens that what it does do is just enough to make OOTS avatars, where the shading and flares and gradients and such effects are rarely needed.

Things Illustrator can do that Inkscape can not do:

Gradient mesh (planned for future release)
Multiple strokes and fills for one object
Color management for print (ICC Profiles, etc.)
PMS color
Natively work with graphs based on data
Free transform and perspective transform (only via extension)
Blends (only via extension)

Things Inkscape can do that Illustrator can not:

Edit SVG source directly
Clones, tiled clones, edit clones on canvas
Keys to move/rotate/scale by screen pixels
Shapes as objects
Edit gradients with handles on-canvas
Edit nodes with keyboard
One-click paint bucket fill
Color painting over objects

[Serpentine]

Are you very sure about that second list? Cuz seriously, every time I've had something I didn't think Illustrator could do, it turns out it could. Moreover, at least a couple of those sound like things I think I've done.

[Ashen Lilies]

Are there any arguments against Inkscape?
Honestly, I've found it delightful and easy to use after reading that tutorial and getting a little practice.

& hey... free.

Um... vector-based programs hurt my poor, simple brain? :smallredface:
Also, effects. It's harder to do decent effects on Inkscape, at least from what I've seen of other people's work.

[Haruki-kun]

Um... vector-based programs hurt my poor, simple brain? :smallredface:
Also, effects. It's harder to do decent effects on Inkscape, at least from what I've seen of other people's work.

They're a completely different type of art, indeed. Although we can't throw them all together. That problem with effects, (assuming you mean thinks like.. well, gradients, shading, sparkles, things like that) is not a big problem with Illustrator as it is with inkscape. Illustrator can do that sort of thing easily. But yeah, for such things, if you are good with it, raster graphics is best.

It's just that OOTS style happens to fit very well with vectors.

[John Cribati]

Are you very sure about that second list? Cuz seriously, every time I've had something I didn't think Illustrator could do, it turns out it could. Moreover, at least a couple of those sound like things I think I've done.

That's direct from the website, so if there's a discrepancy, it's not my lie.

[Skavensrule]

Can anyone give some advice about how to make the background transparent? I created this avatar in MS Paint (the newer version is much better than the old ones). But when saving the image transparency gets removed. Can inkscape take the exsisting image and get rid of the background?

[AsteriskAmp]

Can anyone give some advice about how to make the background transparent? I created this avatar in MS Paint (the newer version is much better than the old ones). But when saving the image transparency gets removed. Can inkscape take the exsisting image and get rid of the background?

Sort of, Inkscape has tools to delete the white background and leave it transparent, but other than that I don't really know what you mean, and it is a very manual procedure, you have to manually sort out background from anti-aliased-edges. I'd recommend tracing it in Inkscape so you have an svg and vectors, would you ever need to edit it or scale it.

[Haruki-kun]

Can anyone give some advice about how to make the background transparent? I created this avatar in MS Paint (the newer version is much better than the old ones). But when saving the image transparency gets removed. Can inkscape take the exsisting image and get rid of the background?

You can use GIMP or Photoshop to remove white background. Then you need to save is as a PNG or a GIF file. JPG doesn't handle transparency.

An alternative is to copy the forum's background color and fill up the white areas in the image. It'll look like transparency once you put the avatar on.

[Dogmantra]

You could also use Irfanview, save as a png and make sure to check the box that says "choose transparent colour", then when you're prompted just click on the background.

[Skavensrule]

An alternative is to copy the forum's background color and fill up the white areas in the image. It'll look like transparency once you put the avatar on.

(facepalm) Why do I always overlook the simple methods?

Thanks for the suggestion, once I am back at my other computer I will get around to updating the file. I will get a better program eventually and remake the avatar closer to the way I wanted, but for this forum at least it fits.

edit: Well that didn't work Because I couldn't save the background of the sections that have the avatars. But eventually I found a photo of a rat that was under creative commons use and made a section of that to be a background. Photo of rat belongs to r8madamen on flickr. Then added the quote for those who know that rats like the number 13.

[Haruki-kun]

Ah, well... if you still want it, the forum's background color is RGB 240,231,211.

[Teddy]

You could also take a screenshot with the forum up, paste it into paint and copy the color from there.

[Serpentine]

Whenever I've wanted to use the forum colour (rarely), I screencap -> Illustrator -> paste -> dropper tool -> copy to palette.

[Skavensrule]

Thanks for the help everyone. I wound up using Haruki-kun's method of manual color settings. I am happy with the way the new avatar looks, at least until I get a better program to create art again. My old Wacom tablet and the computer it worked on died a few years ago and I have not had the time or money to get a Wacom Cintiq and play with it. I have heard that Wacom also makes a stylus for the IPad. Has anyone used one or seen one in use? An IPad wouldn't be cheap but at least it could do more than just a new drawing tablet. The frustration that I had with my old tablet taught me that I want to be able to draw on the screen itself, not with a mouse or a stylus to the side.

[Ashen Lilies]

Whenever I've wanted to use the forum colour (rarely), I screencap -> Illustrator -> paste -> dropper tool -> copy to palette.

I tend to find putting the forum colors up to be tremendously helpful during the avatar making process, even if you change it to transparent later, just to help with color selection.

[Teddy]

Thanks for the help everyone. I wound up using Haruki-kun's method of manual color settings.

Hmm... I noticed that the color you have is actually just a bit darker than the forum background color, and now I can't stop seeing it, and it disturbs me (the latter part. The former is pretty insignificant).

[AsteriskAmp]

Hmm... I noticed that the color you have is actually just a bit darker than the forum background color, and now I can't stop seeing it, and it disturbs me (the latter part. The former is pretty insignificant).
No it isn't

[Matthias2207]

For anyone who is used to MS Paint, but wants something else for making avatars: IcoFX (http://icofx.ro/)
It's free and specially developed for drawing small pictures like website-icons (or avatars).
Vector-based, so all ye Painters out there can (probably) work with it.
Personally, I prefer MS Paint above all other software, but that is mainly because I have some experience with it and I don't have time (or I'm just lazy) to learn working with other software, like Inkscape.

[Teddy]

No it isn't

*color check in Inkscape*

Yes it is. It's 236 229 207, whereas the background is 240 231 211 (just as Haruki said).

[AsteriskAmp]

*color check in Inkscape*

Yes it is. It's 236 229 207, whereas the background is 240 231 211 (just as Haruki said).

Colour check
It's #F0E7D3
Background is #F0E7D3
Both are
R 240 G 231 B 211
H 028 S 118 L 212

[Teddy]

Colour check
It's #F0E7D3
Background is #F0E7D3
Both are
R 240 G 231 B 211
H 028 S 118 L 212

:smallconfused::smallconfused::smallconfused:
Are we talking about the same avatar? In that case, some computer is doing something very strange here...

[AsteriskAmp]

:smallconfused::smallconfused::smallconfused:
Are we talking about the same avatar? In that case, some computer is doing something very strange here...

Both methods, print screen and image copying yield the same results.

[Ashen Lilies]

I support ara[unspellablename]'s findings.

[Skavensrule]

Hmm... I noticed that the color you have is actually just a bit darker than the forum background color, and now I can't stop seeing it, and it disturbs me (the latter part. The former is pretty insignificant).

I was actually wondering about the saturation and light mixture last night, on my primary moniter it looks just slightly off, I know that I set the background RBG correct to 240,231,211, but did not mess with the others. On the actual screen of the laptop it appears exactly the same. On both work computers it looks the same on the computer screen but when hooked up to the HDTV there was just a slight difference. I will adjust the other aspects at a later date and save the info for when I get some decent software.

[Teddy]

Hmm... I have no idea of what's going on, but it appears that some computers interpret the color codes of at least some pictures differently that how others do. Might be valuable to know in the future.

[Serpentine]

I can see it, Teddy. The difference is only slight, but it's there.

[Haruki-kun]

Really? But that's impossible... I got the numbers from using the eye dropper on the forum color. Several times, to make sure...

I'm not seeing any difference. *checks in Inkscape* Yeah, they're both the same color...

*Checks*

Wait... OK, I can see it now... I just checked it in Internet Explorer. It looks different. There is no difference in Firefox, Opera or Chrome, but when I checked IE it looked slightly different. I do not know how to approach this. <.<

[Elder Tsofu]

I do not know how to approach this. <.<

Easy, continue the crusade against IE. When none use it it won't be a problem anymore. :smallwink:

Hard to please every browser without transparency then it seem - now you just have to face a decision.
Which sort of user do you want to annoy - "the foxes", "the sopranos" and "the bikers" or "the explorers"?

[scienceguy8]

I have the same problem with my web site (http://www.gilberti-industries.com/). I made a child theme in WordPress for my site that relies on foreground images having the same color as the CSS defined solid background. On my computer it looks okay, but on my father's laptop you can tell where the background stops and the image begins. If anyone has a fix I'm all ears.

[Teddy]

Easy, continue the crusade against IE. When none use it it won't be a problem anymore. :smallwink:

Except that I use Firefox (or rather, did when I first noticed it. Currently I'm on our other computer with IE, but the difference is still visible to me).

[Elder Tsofu]

Eh, well continue it against both the foxes and the explorers then. :smalltongue:

[Teddy]

Well, it isn't different for little brother who uses Chrome, so I guess that might be a solution... :smalltongue:

[Haruki-kun]

Except that I use Firefox (or rather, did when I first noticed it. Currently I'm on our other computer with IE, but the difference is still visible to me).

Well, that's bizarre...


Well, it isn't different for little brother who uses Chrome, so I guess that might be a solution... :smalltongue:

Yeah, let's just make everyone switch to Chrome. :smalltongue:

Anyway, here's an easier fix. I removed the background as best I could and now it has transparency. Yay.
http://i163.photobucket.com/albums/t288/Vaarsuvius89/lucky13v2smallb.png

For the future, you can do this with GIMP or with Photoshop if you have access to either of them.

[AsteriskAmp]

For the future, you can do this with GIMP or with Photoshop if you have access to either of them.

GIMP by the way is completely free and downloadable from here (http://www.gimp.org/downloads/)
It's the Raster equivalent of Inkscape, the learning curve is a bit steeper though...