Web-based image software to make your own avatars!


#1

hey look you can make animated stuff

Spoiler

The big request thread may be getting closed soon, but there’s another way for you to get the avatar you want.

Here are a few FREE image editing programs that operate completely in your web browser. So no downloading. You can then save your work directly to your computer.

UPDATE Aviary tools “Phoenix” seems to be the most powerful. http://aviary.com/tools/phoenix#

Practical concerns:

Is it as good as photoshop/whateverthefuck you guys use?

  • No, you get what you pay for. However, these programs are pretty good in terms of functionality. If all you need are basic imaging editing services then they should be good enough

MSPAINT LOL

  • Yeah, you can use MSpaint if you want. These are better though.

WTF I can’t make a lens flare!

  • It’s probably a good thing you can’t make a lens flare. Once again, you get what you pay for, so you won’t be able to do all the cool effects you can with a paid program. However, there are a lot of filters available so im sure you can make something that looks cool.

I’m not an artist, this is too hard!

  • I’m not an artist either.

The software can be buggy at times, but I haven’t had it crash on me or do anything strange yet.

You’re not going to be able to make animated stuff (i think…), but you can have a picture of an anime girl with your name on it, and then you can be cool like everyone else!

Anyways, here’s a quick tutorial on how to use one of the 6 above programs, Sumopaint. **This is meant to be a guide for the ultimate noob, ** so most of this stuff is on the level of Low Forward > Fireball basic. I all of 10 minutes messing around with Sumopaint, so there’s probably a lot of stuff I haven’t figured out yet and if some of the steps seem awkward as fuck thats probably why. I’m going to go through the process of making a typical premium sized avatar. Since I didn’t want to spend too much time, don’t expect anything amazing, in fact its just a picture with some text on it. For subject matter, I decided I would go with the standard “picture of fighting game character with my name on it”. With that said, here’s Princess Peach from Super Smash Brothers Brawl:

Done laughing yet? Yeah, so am I. Seriously though, I decided to make an avatar of the hero of Street Fighter 4: Sagat.

So anyways it turns out I can’t figure out how to get the border tool to work in sumopaint. So I had to cheat a little and make borders beforehand using photoshop. I have them posted up here, so save those if you want a border. For now they only come in black:

http://img211.imageshack.us/img211/1736/1pxborder160x100.gif

http://img149.imageshack.us/img149/4349/1pxborder160x64.gif

Step 1: if you care about a border, open up the border picture you saved. If you don’t then go ahead and make a new picture.

picture open

Spoiler

http://img134.imageshack.us/img134/3258/sumopaintstart.jpg

Step 2: open up the pictures you want to use, and crop out a chunk that has roughly the length:width ratio you want

crop circle

Spoiler

http://img134.imageshack.us/img134/2378/sumopaintstart2.jpg

Step 3: Use the Image size command under “Edit” or “Image” (I don’t remember which) to get your cropped picture to the exact dimensions. You can also use Edit > Free Transform.

Step 4: Your cropped picture should now be the same size as your avatar will be. Select the whole thing (Select > All) and copy/paste that to the new (blank) picture you made earlier. It will make a new layer on top of the old one.

Step 5: if you care about the border, move the layer you just pasted down, and change the blending mode of the top layer (the layer with your border on it) to MULTIPLY. obviously do nothing if you didn’t use a border.

borders is a bookstore

Spoiler

http://img134.imageshack.us/img134/7214/sumopaintstart3.jpg

Step 6: Ok now to put on some random text. Use the text tool to make a text box in the middle of the picture (its hard to work with otherwise…), make some text and move it around.

words lol

Spoiler

http://img134.imageshack.us/img134/4285/sumopaintstart4.jpg

Step 7: This is how you add layer effects. “Stroke” adds a colored outline to things. Random layer effects make you look like a graphic designer. Wheeeeeee

this is a spoiler

Spoiler

http://img134.imageshack.us/img134/650/sumopaintstart5.jpg

Step 8: Your layers should look something like the picture below. Flatten the image (it’s under “Layer”) and then save it.

layers like an onion

Spoiler

http://img245.imageshack.us/img245/2562/sumopaintstart6.jpg

Yay you’re done. Hopefully yours looks better than this!

hay gaiz its sagat

Spoiler

http://img2.imageshack.us/img2/5863/sagattest.jpg


#2

Man, great job here. Shoot, I think I can even make an av with this tutorial (but i truly do like my animated avs). Really simplified and the pics help a lot.

rep coming your way.


#3

web-based MSPaint 2.0?

you can never replace a good SRK avatar maker.

ever.

plus, our work is free not including ABC. WTF.


#4

Cool stuff man. :rock:


#5

I think youre missing the point.

The idea isnt to replace anything, its just to give people an option when NOBODY feels like taking their requests. My only intent is to keep the big request thread from getting overloaded.

i know the programs don’t reomotely compare with commercial apps but i think theyre slightly better than MSpaint. Phoenix http://aviary.com/tools/phoenix# is pretty good for what it is

I don’t understand your last sentence.

EDIT: okay maybe you’re referring to the parts where i say “you get what you pay for”. I’m just saying that since you can use these programs free of charge, don’t expect to get the same functionality you would get from a $100 commercial application like photoshop.


#6

I use Aviary tools. Google it.Teach them how to fish! So they can fish for themselves.


#7

With the influx of new members i can see where this may help them make quick avs for themselves.

Stickied.


#8

Try the online APNG Assembler.


#9

nice i knew there had to be something like that somewhere

updated first post

gonna try to make something animated with these tools cuz thats what people really want anyways


#10

I must be retarded I can’t do anything with it yet like you. But I’ll keep trying…

Isn’t there a thread on the programs most of SRK members use to make their avatars?


#11

I just tried to follow your tutorial on Sumo Paint to an epic fail… editing software and me don’t get along :sad:


#12

http://animatedpng.com/index.php/assembler/

I used this website to make some cool animations, and they work within the browser window ( it shows you them once it has compiled).

The problem is, when I open it from my hard drive it isn’t animated at all. Anybody got a solution or am I being stupid? I saved it as a PNG


#13

:u: trying saving it as a GIF file.


#14

I’m in the market for a custom Santhrax avatar. I will paypal for a custom one. I prefer animated. I have tried pm’ing one or two avatar makers but no one got back to me. I will pay for a really good one. lemme know if anyone wants to take this task on.


#15

That’s a nice tutorial you have there, I’m gonna tag this so I can read it thoroughly later on, good shit Domino :tup:


#16

Yeah, keep it as a png. I suppose when you open it from the hdd, it launches PhotoEditor or Paint or something. Browsers are the main progs which display the animation, which is ok for an avatar, obviously. Otherwise, if you want further editing/optimisation, try Gamani, XnView, KSquirrel, ImageJ, Imagine, etc.


#17

Cool stuff bro… Thanks a lot…