PDA

View Full Version : How do you make your own Avatar?



Axeman
2011-05-11, 03:27 AM
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
2011-05-11, 03:35 AM
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
2011-05-11, 03:52 AM
*Agrees with The Randomizer*

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

Axeman
2011-05-11, 03:53 AM
Thank you Randomizer for that helpful info/saving me from paying 100 bucks.:smallbiggrin:

Serpentine
2011-05-11, 04:18 AM
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
2011-05-11, 10:41 AM
I started using Flash... then switched to Inkscape. :smalltongue:

araveugnitsuga
2011-05-11, 11:48 AM
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
2011-05-11, 09:12 PM
Inkscape has served me well these past what, five years?

Kneenibble
2011-05-11, 09:43 PM
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.

araveugnitsuga
2011-05-11, 10:05 PM
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
2011-05-11, 10:49 PM
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
2011-05-11, 11:55 PM
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
2011-05-12, 02:55 PM
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?

araveugnitsuga
2011-05-12, 03:21 PM
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
2011-05-12, 03:31 PM
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
2011-05-13, 02:12 AM
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:

araveugnitsuga
2011-05-13, 02:25 AM
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
2011-05-13, 02:40 AM
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.

araveugnitsuga
2011-05-13, 02:52 AM
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
2011-05-13, 03:34 AM
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.

Herpestidae
2011-05-17, 05:39 PM
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
2011-05-18, 06:18 AM
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.

Kris on a Stick
2011-05-18, 08:13 AM
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
2011-05-18, 11:08 AM
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.

Herpestidae
2011-05-18, 12:36 PM
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
2011-05-20, 10:39 PM
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?

araveugnitsuga
2011-05-20, 10:47 PM
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
2011-05-21, 10:48 AM
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
2011-05-21, 12:12 PM
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
2011-05-21, 12:42 PM
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
2011-05-21, 07:19 PM
Ah, well... if you still want it, the forum's background color is RGB 240,231,211.

Teddy
2011-05-22, 07:48 AM
You could also take a screenshot with the forum up, paste it into paint and copy the color from there.

Serpentine
2011-05-22, 08:26 AM
Whenever I've wanted to use the forum colour (rarely), I screencap -> Illustrator -> paste -> dropper tool -> copy to palette.

Skavensrule
2011-05-22, 01:31 PM
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.

Kris on a Stick
2011-05-23, 08:27 AM
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
2011-05-23, 01:47 PM
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).

araveugnitsuga
2011-05-23, 04:01 PM
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
2011-05-23, 04:27 PM
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
2011-05-23, 06:00 PM
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).

araveugnitsuga
2011-05-23, 06:28 PM
*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
2011-05-23, 06:40 PM
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...

araveugnitsuga
2011-05-23, 06:46 PM
: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.

Kris on a Stick
2011-05-23, 09:47 PM
I support ara[unspellablename]'s findings.

Skavensrule
2011-05-23, 09:49 PM
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
2011-05-24, 05:13 AM
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
2011-05-24, 07:51 AM
I can see it, Teddy. The difference is only slight, but it's there.

Haruki-kun
2011-05-24, 09:35 AM
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
2011-05-24, 11:01 AM
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
2011-05-24, 11:30 AM
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
2011-05-24, 03:07 PM
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
2011-05-24, 03:31 PM
Eh, well continue it against both the foxes and the explorers then. :smalltongue:

Teddy
2011-05-24, 03:36 PM
Well, it isn't different for little brother who uses Chrome, so I guess that might be a solution... :smalltongue:

Haruki-kun
2011-05-25, 09:33 AM
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.

araveugnitsuga
2011-05-25, 06:07 PM
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...