Singidava's spriting tutorial (with GIMP)

Read and write tutorials about becoming a great artist.

Moderators: EN - Assistant Moderators, EN - Forum Moderators

User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Singidava's spriting tutorial (with GIMP)

Post by Singidava »

My tutorial is finally ready~ I hope Parrie doesn't mind I used Nova as an example. Also if you notice any faults in this tutorial, please tell so I can correct them.

Singidava's spriting tutorial (with GIMP):

In this tutorial I'll show how to create custom sprites in GIMP. If you don't have GIMP and don't want to download it (it's free) I recommend reading LunchPolice's spriting tutorial in which he uses MS Paint.

I use Nova Kaine's first emote as an example in this tutorial.
Image
First of all you need a sketch. Don't make too complicated character designs since sprites are going to be small. Smaller the detail harder the spriting. Rest is up to your drawing skill. If those skills are not so good you can also use a photo as a sketch.
Spoiler : My sketch :
Image
Tip: Your sketch can be bigger than AA size! It will be shrunk later.

If you sketch with computer don't use too much zoom. It's easier to understand the big picture when you draw from afar. Also don't use black lines! If you do it becomes diffucult to tell the sketch and the line apart.
Here's my sketch of Cyrus' close up which I have drawn with computer. The clothes aren't ready yet though so girlies may get a nosebleed.
Spoiler : Cyrus :
bishiesketch.png
bishiesketch.png (21.88 KiB) Viewed 8476 times
At this point I decide which colours I'm going to use. You should choose three shades per colour: light, dark and line colour. Line colour should be the darkest.

When your sketch is ready you can start doing lineart. Naturally the line should be drawn on a new layer above your sketch (if you don't know what layers are click here). Instead of black you should use ”line colour” of the colour of the area next to the line (if the line you're drawing is between two colours you should choose the darker line colour). I use brush tool to create my lineart. It creates a softer line than pen tool.
Spoiler : Line :
Image
Tip: Your line doesn't have to be perfect. Since the drawing is shrunk anyways you can afford mistakes.

When the line is ready it's time to move to colours. When colouring the layers are a big help. You can do every color to their own layer or have several on one.

Step 1:
Add the base colour.
Spoiler : Base :
Image
Step 2:
Paint the shadows.
Spoiler : Shadows :
Image
Step 3:
Erase unneccessary colour and repeat.
Spoiler : More colouring :
Image
When you have your colours ready you can edit the picture to a sprite! First we have to resize the drawing to AA size. To do this I merge the layers and create a 256 x 192 -sized (DS screen size) box to a layer below the merged drawing. This helps me to adjust the character's height. Now you can just use scale tool to resize the sprite. After you've done that crop the picture to AA size. Then delete the box you created before.
Spoiler : Size matters :
Image
After the picture is right size it's time to edit the colours. For this we're using indexed colour mode. To find this function go Image > Mode > Indexed. When you click it a box appears. Choose ”Generate optimum palette”. You should try different values for maximum number colours and decide what looks good.
Spoiler : My palette :
I used this palette:
Image
Now you just have to save your sprite and it's ready! Be sure not to save .jpg!!

Here's my sprite ready:
Image
Last edited by Singidava on Sun Nov 14, 2010 3:30 pm, edited 3 times in total.
Tap
Posts: 4799
Joined: Tue Dec 15, 2009 9:01 am
Gender: Male
Spoken languages: English

Re: Singidava's spriting tutorial (with GIMP)

Post by Tap »

How interesting! ^^

I really like this tutorial, Singidava. It's pretty clear as to how to make custom sprites with your method that is similar to the one Capcom uses. :)

I have to ask and the answer is probably yes but do you use a tablet? :)
ImageImage
User avatar
LunchPolice
Posts: 2357
Joined: Sat May 22, 2010 1:05 am
Gender: Male
Spoken languages: English, Namekian, Pezazulian
Location: New Zealand
Contact:

Re: Singidava's spriting tutorial (with GIMP)

Post by LunchPolice »

As I said in the PM, this is awesome.
I think someone should grab all of the tutorials and put links to them in one topic. That would
be helpful for someone who wants to start making sprites.
I make stuff sometimes
Image trophy x 5
MIND-FREAK
Tap
Posts: 4799
Joined: Tue Dec 15, 2009 9:01 am
Gender: Male
Spoken languages: English

Re: Singidava's spriting tutorial (with GIMP)

Post by Tap »

LunchPolice wrote:I think someone should grab all of the tutorials and put links to them in one topic. That would
be helpful for someone who wants to start making sprites.
What an odd coincidence! I grouped them all together just before you posted. :P
ImageImage
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Singidava's spriting tutorial (with GIMP)

Post by Singidava »

Tap wrote:I have to ask and the answer is probably yes but do you use a tablet? :)
Yeah I use one (Wacom Intuos3 A5). It's not really neccessary for spriting but it speeds up my work.
Sigh I SO want A4 tablet (some of my friends have those) but they are so asdfghjkl expensive! At least if you buy Wacom but they're simply the best. Wacom Intuos4 L (which is about A4 size) costs ~450€!!! Aaargh!!! Still my birthday is soon so maybe I... ...but it's so expensive.... skdhfukghseuk!!!
User avatar
Blackrune
Posts: 3805
Joined: Fri Apr 17, 2009 3:11 am
Gender: Male
Spoken languages: English, German, Japanese
Location: The Submarine

Re: Singidava's spriting tutorial (with GIMP)

Post by Blackrune »

Awesome tutorial.

... Actually, I use the same program, but this is not how I usually do it. (it's pretty similar though. Sketch as background and tons of layers for lines and colors ^^...) Hmm, maybe I should try using this method and compare the results.
I can see how this works and I bet it will help a lot of people.

I can't even afford a tablet... ;_;
User avatar
Dypo deLina
Posts: 5528
Joined: Fri Apr 02, 2010 7:24 am
Gender: Male
Spoken languages: English, Dutch, German, French, Spanish, Al Bhed
Location: Exactly where you least expect me to be.
Contact:

Re: Singidava's spriting tutorial (with GIMP)

Post by Dypo deLina »

Epic tutorial, Singi-Chan. ;)

I might actually attempt this, though I'm not sure whether I'm capable of even making a proper sketch... *has never even seen a tablet before*

EDIT: I just noticed a spelling mistake. :random:
Last edited by Dypo deLina on Tue Feb 01, 2011 7:27 pm, edited 1 time in total.
チラセ・マギタ
~Married to Evolina deLuna~ <3
~Loving father to ZetaAzuel~


Proud creator of Cynder Janice, Rex Gladiorum, and Raimpius in Endless Time.

Image Image
Mimi
Posts: 10382
Joined: Wed Jan 27, 2010 6:35 am
Gender: Female
Spoken languages: English: the only language I can brag about

Re: Singidava's spriting tutorial (with GIMP)

Post by Mimi »

Hmm... did you do that on paper or computer? If I custom sprite and I did it on paper, no doubt the quality will be upped up a lot.

Either way, your tutorial seems EXCELLENT! It's giving me inspiration to work on a custom Feenie soon or something.
User avatar
Filip1236
Posts: 309
Joined: Wed Mar 11, 2009 9:43 pm
Gender: Male
Spoken languages: English
Location: Croatia (Don't you DARE ask where that is!)

Re: Singidava's spriting tutorial (with GIMP)

Post by Filip1236 »

Mimi Mika wrote:Hmm... did you do that on paper or computer? If I custom sprite and I did it on paper, no doubt the quality will be upped up a lot.

Either way, your tutorial seems EXCELLENT! It's giving me inspiration to work on a custom Feenie soon or something.
She uses a tablet. A.K.A. a machine hooked directly to your computer which registers all your movements with the pencil and shows the results on your monitor in real time. ...At least I think so.
Image
Case 1 l Case 2 Pt. 1 l Case 2 Pt. 2 l Case 3 l Case 4
Mimi
Posts: 10382
Joined: Wed Jan 27, 2010 6:35 am
Gender: Female
Spoken languages: English: the only language I can brag about

Re: Singidava's spriting tutorial (with GIMP)

Post by Mimi »

Yes, I know, I have a tablet!
Mimi
Posts: 10382
Joined: Wed Jan 27, 2010 6:35 am
Gender: Female
Spoken languages: English: the only language I can brag about

Re: Singidava's spriting tutorial (with GIMP)

Post by Mimi »

I'm having a bit of trouble, Singi-chan. The first few steps are fine, I think (I need to do that line color thing though ><), but when I start to color, when the brushes over lap it makes this deeper hue. I don't think that's a real problem but...

It's when I do the scaling when the entire picture goes wrong. You said that size doesn't matter but... for some strange reason, it won't come out right.
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Singidava's spriting tutorial (with GIMP)

Post by Singidava »

Mimi Mika wrote:I'm having a bit of trouble, Singi-chan. The first few steps are fine, I think (I need to do that line color thing though ><), but when I start to color, when the brushes over lap it makes this deeper hue. I don't think that's a real problem but...
You have to set brush opacity to 100% when colouring.
Mimi Mika wrote:It's when I do the scaling when the entire picture goes wrong. You said that size doesn't matter but... for some strange reason, it won't come out right.
I'm not sure what you meant by that but maybe you should select "keep aspect" from scaling tool menu or hold Ctrl when scaling the picture to keep the correct ratio?
Mimi
Posts: 10382
Joined: Wed Jan 27, 2010 6:35 am
Gender: Female
Spoken languages: English: the only language I can brag about

Re: Singidava's spriting tutorial (with GIMP)

Post by Mimi »

I did set it to 100% but then it covers the lines...? Hmm...

I think maybe my picture is too big? Because when I scale it down, it looks kind of too blurry. And it's in PNG form. Or it cuts off half of it off.
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Singidava's spriting tutorial (with GIMP)

Post by Singidava »

Mimi Mika wrote:I did set it to 100% but then it covers the lines...? Hmm...
The layer where the colours are naturally must be under the line layer. If it's not of course it covers the lines.
Mimi Mika wrote:I think maybe my picture is too big? Because when I scale it down, it looks kind of too blurry. And it's in PNG form. Or it cuts off half of it off.
It's supposed to be blurry. If it wasn't then the program wouldn't add the transition colour automatically. Don't worry it looks better when you've used indexed colours. Usually when the amount of the colours goes down it sharpens the picture.
Mimi
Posts: 10382
Joined: Wed Jan 27, 2010 6:35 am
Gender: Female
Spoken languages: English: the only language I can brag about

Re: Singidava's spriting tutorial (with GIMP)

Post by Mimi »

"Under"? OHHHHHHHHHHH... see, this shows how much of a technology amateur I am... :sideglance2:

Okay, I'll try again. That was my first try after all.
Post Reply