Icon Tutorial

[Vember]

I thought that an icon tutorial might help. They're very easy to make.

We'll start with a simple sword. And I will be doing this in photoshop but it can pretty much be done in any program.

Start a new image 24 by 24 pixels. Then I just start with a completely blank layer.

Now with most icons you want to make sure you take up as much space as possible, since they're going to be so small. Swords are very simple to use the space up. I'll start by filling in he corners with my pencil tool with black:

http://img291.imageshack.us/img291/9413/tut1cp7.jpg[/img]

The end of the hilt on the bottom right the tip of the blade on the upper left.

Next I'll finish the hilt outline and blade outline. You want to make sure you have a good balance between the hilt and blade lengths. That can be tricky:

http://img219.imageshack.us/img219/78/tut2fw7.jpg[/img]

Now don't worry too much about the outline and what's filled in with black yet. This is just a rough idea of the sword now.

Next change it up a bit to customize it and make it a little less generic. I decided to funk up my hilt and add the cliche line up the blade:

http://img291.imageshack.us/img291/9421/tut3gb0.jpg[/img]

Now we get to start coloring. This is a little tricky too. But I'm gonna try and keep it simple. So I'll do a greyish blue blade with a brown hilt:

http://img219.imageshack.us/img219/7233/tut4jp4.jpg[/img]

Next, I'm going to add some shading. This is fairly simple. Just go up the lines with lighter and lighter colors. Make sure there is a happy medium. You'll see what I mean in the ss:

http://img246.imageshack.us/img246/2193/tut5dc8.jpg[/img]

And after this process we're pretty much done. In photoshop I generally like to blur the icon a bit to make it look a little more smooth:

http://img219.imageshack.us/img219/8044/tut6xq0.jpg[/img]

And this is the final product in-game:

http://img242.imageshack.us/img242/5766/tut7fv7.jpg[/img]

Well I hope this little tutorial helped someone.

http://img489.imageshack.us/img489/3164/asword15jy.png[/img] http://img489.imageshack.us/img489/7949/asword30nn.png[/img] http://img213.imageshack.us/img213/4924 ... ord5oo.png[/img] http://img48.imageshack.us/img48/7966/rustsword7vt.png[/img]

 

[Mistyrious]

thnx! nice tut

 

[XP Learner]

Nice tutorial. now photoshop has a use. Would it be better to do shading in a new layer.

 

[BlueScope]

Photoshop is the best choice for most of the graphic stuff you need in RMXP, if not for everything, that is if you can/want to afford it ^_^

@Vember: Icons look lore dynamic if they have a sense of gravity in 'em. Your sword hilt is on the upper side, which looks off. You haven't ignored gravity on your other icons
It's a nicely done tutorial, though, the problem is that people like me which are absolutely talentless can't sprite know magically... someone should do a tutorial which is capable of this :D

 

[Michael_Ken]

Great tutorial!

This goes on the list, along with ccoa's and Tanas.

Believe me... I need all the help I can get, when it comes to
<insert scripting/map making/spriting/writing/etc. here>

 

[Vember]

Nice tutorial. now photoshop has a use. Would it be better to do shading in a new layer.

I just do the whole thing on one layer.

Thanks for the input bluescope

the problem is that people like me which are absolutely talentless can't sprite know magically... someone should do a tutorial which is capable of this

what? lol..

Thanks for the comments guys. I'll probably do another tutorial on random misc icons next.

 

[Rubymatt]

You used Photoshop? I'm no good with that

 

[Vember]

Yeah I used photoshot but pretty much the same thing can be done in paint.

 

[Vember]

Ok now I'm just gonna run through the process again but with a different sort of icon.

Swords are simple.. Very generic. But odd icons can sometimes be tough.

But I'll still keep it fairly simple. This time, I'm doing an apple.

Ok so first I'm just gonna make the rough outline:

http://img165.imageshack.us/img165/5484/tut1gy7.jpg[/img]

Now since there's not gonna be much detail other than shading we can already start to color it in:

http://img165.imageshack.us/img165/9347/tut2tk1.jpg[/img]

Now let's shade it in. With round objects it's tougher. Just try and follow the outline. Stick to what you think works:

http://img166.imageshack.us/img166/6277/tut3hz8.jpg[/img]

Now it's a little boring so I think I'll add a cute detail. Also cliche, but hey, most RPGs are.

http://img19.imageshack.us/img19/986/tut4nh9.jpg[/img]

And again I'll fade it a little:

http://img432.imageshack.us/img432/2709/tut5ar0.jpg[/img]

And that's it. Now we have made an apple icon that can be used for anything apple-related :D Yay! and it only took 15 minutes!

http://img432.imageshack.us/img432/6821/tut6ai0.jpg[/img]

I may post a few more icons in step form. But I hope this also will be helpful for someone.

 

[$t3v0]

It's the simple things that make life easier for the newcomer. I adore your tutorial and your style of getting the message accross. Excellent work matey!

~ $t3v0

 

[Despain v.1]

Agreed- good job. And that's a rare comment from me.

Advice: don't use .jpgs, even for tutorial images like this. Always stick with .png or .gif.

 

[$t3v0]

now photoshop has a use.

That comment...Well...=X just about sums it up!

 

[Vember]

Thanks ^_^ and if anyone has any suggestions or icons they wanna see done step by step feel free to ask.

Also feel free to post any icons made via the guidance of this tut ^_^

Thanks despain and yeah, I won't be using jpegs again. The ss of the apple icon in-game is horrid.

 

[$t3v0]

Make me a ham ^_^

 

[Vember]

Alright (Couldn't resist)

Same process as before:

http://img487.imageshack.us/img487/5323/tut1zm9.png[/img]

http://img487.imageshack.us/img487/4021/tut2dy9.png[/img]

http://img487.imageshack.us/img487/7623/tut3fl4.png[/img]

http://img487.imageshack.us/img487/903/tut4vi7.png[/img]

http://img165.imageshack.us/img165/1613/tut5ca6.png[/img]

http://img477.imageshack.us/img477/4569/tut6lx3.png[/img]

Lol and there you have it. Ham ^_^

 

[$t3v0]

Awwww, you actually made me a ham :D Good shit sonny. Check your pm box, I have a proposition for you.

~ $t3v0

 

[ScriptKitty]

Very nice! I'd love to see a decent tutorial for making Japanese-looking scrolls. Really top notch stuff. Though I think the ham might've looked a little more like a ham if the lines on the side had been dark brown and shaded even darker in the shadows, rather than just flat black everywhere.

 

[Vember]

Lol I kinda did that ham in about 5-10 mins :P

I could try doing a scroll, but right now I got work.

 

[~Voiceless]

Very helpful and easy to get done. Thanks; I was useless at icons XD

 

[Balian]

can ya do a gun!?