Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Icon Tutorial

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 cliché 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]
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top