Simple Tutorial on Creating Decent Icons - RMXP

Started by Seltzer Cole, December 01, 2013, 03:18:29 am

Previous topic - Next topic

Seltzer Cole

December 01, 2013, 03:18:29 am Last Edit: December 01, 2013, 11:26:14 am by Seltzer Cole
*UPDATED* DEC 01 13

If my tutorial sounds as if I am rambling, I apologize. I tend to have difficulty explaining things so bear with it.

Introduction

Hello and welcome! I will be explaining how to create some decent icons so you can enjoy creating your own instead of ripping them off sprite sheets via google image.  :naughty:

Paint Programs

Firstly, I use regular old Windows XP Paint. You can find many programs to get the job done however. Every new program though will contain different tools and features. The learning curve for different programs can take a lot of time so I highly suggest you stick to 1 program and potentially use a secondary one for just a few features it contains that your primary program does not have.

Where to Begin

This is a tutorial on how to create decent icons, not how to familiarize yourself with your program, so moving on. Open up the program and create a 256X512 white square (Paint Shortcut should be CTRL+E). These are the dimensions for a standard tilesheet used in RMXP. This will make uploading easier. You will be creating a checker board design now. I use 2 colors to separate the board apart, green and pink.

Here is the image you should be going for. You can also just copy/download this image if you don't feel like creating it yourself. Just remember that every square needs to be 32X32. (Shortcuts for copy/paste are CTRL+C and CTRL+V)

Spoiler: ShowHide


3D and Shading

Before we begin designing icons, there are a few things you will need to master. They are creating 3D as opposed to 2D and creating dimension using shading. I cannot stress enough how important these are. They will make a gigantic difference in crappy icons as compared to beautiful icons. Another thing to remember and that will save tons of time, is to go ahead and create a palette. Think of the icon you will be creating and all of the colors that will be used. Then set up your palette with each of the colors and create anywhere from 2-5 different shades of that same color, each being anywhere from 10-30 LUM apart (10-30 is really just all a matter of preference). Example of a color separated by 20 LUM on a palette below.

Spoiler: ShowHide


I will show you below the difference between 2D/3D and no shading compared to shading. So here is an image of a box with each of the previously stated represented.

Spoiler: ShowHide


Not very impressive, no. But it shows the difference between a single sided object (Left), an object revealing 2 sides (Mid), and an object showing 3 sides (Right). Also, it shows no shading (Top), and a single extra shade of brown added in (Bottom).

Here is one more picture demonstrating 3D iconing.

Spoiler: ShowHide


The chairs are turned different directions as you can see. The box was created and then copied and pasted 3 times to create a stack of boxes. You may also notice the big table is all the same size plank whereas the table on the top right has smaller sized width on the planks as it gets further away. This gives dimension.

A more complex icon would be 2 tree's I created a long time ago. You can see really see the different shades (Shades used to give it dimension and create the illusion it is 3D) below.

Spoiler: ShowHide


The lighting on the first tree; on the giant branch like leafs sticking out of it, has a lighter green shade on top and a darker green on the bottom. This gives the illusion that it is curved or as if the sun is directly above the object. The tree bark has lines of light brown giving the illusion that it has dimension rather than being flat. The other tree on the right is brighter in the center of its top and goes darker as you get further out. That makes it appear as if it is curved. Also, ALL of the colors used are the same. Meaning, the tree on the right, its top is all the same green, just different shades of the exact same green. Same with the trunk, all 1 brown, just different LUM. In reality the tree is only 2 colors, just tons of shades of the 2 different colors.

Step Process

Below is an image of the process I use to create an icon. First start with the border. You should use your darkest LUMed shade you have made for it. Then take the brightest and fill it in. Next add the shading. Then you can finish with the details. There were only 4 shades of grey used. I think when I made the icon they were all only 10 LUM apart (Made this icon a long time ago).

Spoiler: ShowHide


Tips

Always think of what you are going to create first. Picture every color needed for your palette. Start by creating the outline of the object first. Try creating a bold outline so the image pops. Imagine a light bulb or the sun hitting the object from any angle you wish and keep it there as you shade the icon. Generally the further away something is, the smaller and darker it will appear. Separating your palette colors with only increments of 10 LUM will make the icon look like a painting whereas separating them by 30 or even 40 LUM will make the image really pop and appear cartoonish. Good luck.

Glad to help anyone out or answer questions. Hope someone makes use of this tutorial and it encourages people to create their own icons! Once you become experienced and familiar with iconing, I highly suggest you take only 5-10 minutes per icon, then throw it into the game and continue with the next icon. If you spend hours on every icon, you will kill yourself. Trust me. You can ALWAYS come back later and fix up your icons. Just create workable icons and when you get a little free time you can perfect them. The two tree's above, the one on the left took about 30 minutes (Odd looking tree, tried being creative) and the one of the right only took about 5 minutes. So use your iconing time wisely and have fun!  :evil:
You know you play video games to much when you put sunglasses on and whisper "Plus 10 Appearance"

If at first you don't succeed, call it version 1.0

locowhiteknight

Nice work on this tutorial!  Hopefully I can finally start making some decent looking icons.  :haha:
"Let's get down to brass tacks. How much for the ape?"

Seltzer Cole

Quote from: locowhiteknight on December 01, 2013, 10:03:56 am
Nice work on this tutorial!  Hopefully I can finally start making some decent looking icons.  :haha:


=P Thanks. Goodluck with your iconing. Lemme know if you need any help!  :^_^':
You know you play video games to much when you put sunglasses on and whisper "Plus 10 Appearance"

If at first you don't succeed, call it version 1.0

WhiteRose

This is a great tutorial. :) I've always wanted to do pixel art, but always struggle with it, so tutorials like this make me want to give it another try.