Re-coloration/Frankenspriting/Animating for Beginners

Read and write tutorials about becoming a great artist.

Moderators: EN - Assistant Moderators, EN - Forum Moderators

User avatar
Zombie
Posts: 281
Joined: Mon Feb 06, 2012 2:54 am
Gender: Male
Spoken languages: English, My written french is horrible.
Location: Your deathbed

Re-coloration/Frankenspriting/Animating for Beginners

Post by Zombie »

Hello everyone! My name is ZombieGun and this is a little tutorial for learning how to sprite on Paint.net. ( My first guide on this site, hurray! ) Unfortunately, I am not the best spriter in the world so modifications by scratch are beyond my level (something I'm trying to improve!). So instead, I will just show basic re-coloration and frakenspriting.

This guide is targeted to people who perhaps never have sprited before. I recommend using Paint.net or GIMP instead of Paint as you can get the transparent background needed for AAO. This guide will use the system I use for animating and organizing my sprite. Feel free to add in your comments/criticism to make this guide even better.

Disclaimer: This guide is a collection of my raw experience in spriting and what has been faster and more easier for me. Feel free to modify anything to suit your personal taste.

This guide has explanations in two ways. You can use the written text, or the Edgeworth lessons which are somewhat less detailed. It is recommended to look at both.

This guide will continue to be updated the following days with several features I want to add.

-Misc Spriting
-Fun Trial Tutorial along with text and images.

Table of contents:
1. What is spriting?
2. Start Spriting
3. Recoloration
4. Frakenspriting
5. Animation


1. What is spriting?

Spriting is the modification of 2D images in video games. (Pardon me if I make any mistakes in my definition :wink:)
Sprites are used in basically every 2D game imaginable. The characters in the Pheonix Wright universe are sprites so that's why they are so relevant to this topic.

2. Start Spriting

Let's start beginning your spriting journey. Unfortunately, as I do not have the talent to work on sprites by scratch, I will start with working on re-coloration and frakenspriting. Before you start this, I advise you to at least have basic knowledge of image editing. Hopefully, even if you never had sprited before, I am assuming you know how to use the bare necessities. I really can't help you if you have never ever used an image editing program before on this guide. ( but I will be glad to answer any questions. )

If you wish to edit sprites, you must use an image editing program. This one focuses on Paint.net but I'm sure there are excellent guides elsewhere.

A quick definition of those two terms in case you don't know:

Recoloration: Recoloring a sprite to make it look different.

Frakenspriting: Grabbing a specific part of a sprite and splicing it together with another one.

The first thing to do is to start getting sprites. The best two sources that are the most popular are:

Courtrecords.net and Doulifee

On a perhaps unrelated note, you should not just directly copy the link of the sprites of these websites and putting them directly on. This is called Hotlinking and uses bandwidth on these sites. All you need to do is just download them yourself and host them up on a site that lets you host these things. ( Like Imgur or Fileden )

Court Records offer the sheets that we want for coloration and such so I suggest to use those. Once you arrive on Court Records, there are two things that really matter. Gifs and Sheets.

Sheets: An image which basically contains every single frame of a specific sprite.

Gif: An animated collection of images/frames to simulate animation. Like flip books.

Once you start, click on sheet of the character of your choosing. This should give you a large image of all the frames of that specific character. Paste this on your Paint.net. You should eliminate all the background color with transparency first.

( A fair warning, my spelling and grammar decreases dramatically on the Paint lesson's so I apologize. )
Spoiler : Edgeworth's Paint.net lesson #1 :
Image
Spoiler : How your sheet should look like :
Image
You should set the background transparency to transparent in order to make copying and pasting faster :).

After you get it transparent, you can start the re-coloration process!

3. Re-coloration

Re-coloration is an incredibly easy process with Paint.net's awesome tools. Recoloring a sprite can be as simple as three clicks. Let's take a look, shall we?

We recolor sprites by using the paintbucket tool.

1. Get the color of your choice you want to use to change something's color. For example, if I want to make Edgeworth's suit say blue, I would pick out a blue from the color wheel. ( I could also use the color picker to take colors from a different sprite. )

2. Before you start coloring, I should explain the concept of shading. Depending on the lighting, light creates darker version of colors because it is under an opaque area. This is true in real life as well as in sprites. When you get your color, you want to change the "V" on the color window. This "v" controls the luminosity of the specific color. You lower the "v" to get darker shades and vice-versa.

You change the "v" to get different shades. Ex: Edgeworth has around three types of magenta's because of shading. If you want to recolor him "blue", you would want to get three types of blue.

3. Before you start coloring, you want to make sure your settings for the paintbucket are good. The changes you want to make should be changing the "globe" from Continuous to Global, change the Tolerance from 50 to 0% and finally change the flask to "overwrite". This will make it so that changing one type of color changes all of that type of color with the one you change it. Effectively saving you boat loads of time.

This also colors all of your sprites on the Spritesheet.

4. Match the coloring of the sprite with yours. Change the lightest color with your lightest color. Change the second lightest with your second lightest etc.

5. You now have a beautiful sprite. If you want to make it a mix of multiple sprites, you can learn Frakenspriting below. If not, you can learn how to animate it in animation.
Spoiler : Edgeworth's Paint.net lesson #2 :
Image
Spoiler : Edgeworth's Paint.net lesson #3 :
Image
If you have problems in coloring the wrong place from Paint.net's recoloring, you have two methods you can do.

A. Recolor that part manually using "Continuous" instead of "Global".
B. Use the Paint Recoloring Trick.

The paint recoloring trick is my preferred method.
Spoiler : Edgeworth's Paint lesson :
Image
4.Frankenspriting

Frakenspriting, while a bit more complex, is relatively simple. It is basically removing parts of certain people and putting them over another character. For example: Putting Payne's head on Manfred's suit.

With Frakenspriting, you will also learn about layers.

1. Get those two/any number sprites and put them on the same sheet.

2. Remove every thing about that sprite except for the part that you want.

3. Get the rectangle select to "copy" then delete the part.

4. Press the white sheet with the green plus to get another layer. Layers are basically "layers" of an editing program. Imagine it like having multiple images and placing them over each other. When you use layers, you effectively take away the transparency from the rectangle select.

5. Paste the copied part onto the second layer and place it where you wanted it to go. If you see some parts of the original sprite sticking out, don't worry! All you need to do is simply go over to that layer and erase it. You don't have to fear deleting your selected part as it is not part of that layer.

6. Merge those layers together and you have a Frankenstein. You can go over to "Animation" to start making that thing talk.

(Before you read Edgeworth's Frakenspriting #2, I would like to clear out some of the terms I use.
Priority: This is basically which sprites go over who. If you look at the layer's window, you can see the order of the sprites. The top one has the most "priority".
Piling: This basically means putting layers over each other
Boxes: This is the rectangle select before I learned what it was :P)
Spoiler : Edgeworth's Frakenspriting #1 :
Image
Spoiler : Edgeworth's Frakenspriting #2 :
Image
5. Animation
My personal method

Finally the good part. You can use this to make the finalized part of any sprite you want. This sprite will be able to talk as well as blink.

1. To make sure your sprites are positioned properly, I would suggest copying a gif of the sprites you are basing it off on Courtrecords.net and pasting it on a new sheet. So if you are making a re-coloration of Pheonix's "Objection" pose, go look for that gif in the gif section and paste it on a different paint.net sheet than your re-coloration.

2. After pasting it, you can press the "crop to selection" button to crop it to it's proper size. It should be now 256 x 192. 256 x 192 is important because that is the size of the DS screen. After it is pasted, you should create another layer.

3. Get your re-coloration using the rectangle select and paste it on the second layer of the original sprite. Your sprite should just cover the original. Once it is, you can delete the first layer. Now your re-coloration is in the right place.

Important: Just so we can understand ourselves, it is important to have an easy way to organize our sprites. In order to make a "pose", you need the work of multiple sprites. Usually, the pose is the same with just the eyes and mouth changing. For example: If we use Pheonix's "Objection" pose: the pose is composed of open,mid and closed eyes and open, mid and closed mouths. For simple organization, I will simply refer to them as O/M/C.

This means the sprite of an open eyes and mid mouth Pheonix would be O/M. For greater clarity if we so choose, we can make it O/M Pheonix Objection. Now when saving the sprites, I use another very simple system: Name|Letter of pose|Number.

For example, O/M Pheonix Objection would be PA2. P is for Pheonix, A is for pose ( so the paper hitting Pheonix pose can be C ) and the number is basically his O/M/C configuration.

In a pose, there is an average of 5 sprites in my system ( this includes them being silent and blinking after they finished talking. )
1 is O/C
2 is O/M
3 is O/O
4 is M/C
5 is C/C

So PA2 is Pheonix, Objection, O/M. The system is what I use to save my sprites as.

I know this is incredibly hard to memorize in one session but this makes communication and organization of sprites precise and clean

4. If you used global mode on your sprite sheet, you should have all of them automatically colored. Just grab all the 5 sprites (aka the ones I just listed before ) needed for every pose and position them properly. Remember to use the gifs at Court-records.net to have them all positioned correctly. Also remember to save them with the system, it does help.

5. Once you have all of the images of the pose you need, go to http://www.myspacegens.com/handler.php? ... age&p=view
This is probably the only site that lets you get a transparent background and customize the speed of the gif.

6. These are the settings you should use on the site:

Select a Size: Leave original sizes

Select the Speed: Custom: 150 or 180, depending on how fast you want it to talk. The lower the faster.

The system should be uploaded in this specific order, just so you know, you must first put the images, then upload them for your gif. You cannot use the same image twice when you first use the system but it allows the same image for the gif. You'll just have to do it separately.

The order for the talking sprite: 2-3 x 5 > 4-5*

The order for the standing sprite: 1* > 4* > 5*

The speed of 4-5 on the talking sprite is half of the speed you set at custom. 75 for 150 and 90 for 180.

The speed of 1 for the standing sprite is 1800, and 4-5 is half of the custom speed.

7. Once this is all done, you can press submit to get how your sprite will look like. If you made any mistake in your sprite creation, it will be very apparent during the gif. When you are satisfied, you can download the gif as a zip. ( You need WinRar! )

9. Rename the two gifs as Name|Pose|Talk and Name|Pose|Stand respectively and upload the image you have saved on imgur. Use that link to for your custom sprites. If you have done everything right, you have a fully animated custom sprite!
Spoiler : Edgeworth Animation lesson #1 :
Image
Spoiler : Edgeworth Animation lesson #2 :
Image
Spoiler : Settings for Talking :
Image
Spoiler : Settings for Standing :
Image
Spoiler : How it should look talking :
Image
Spoiler : How it should look standing :
Image
Final Notes:

At the end of the day, I'm just hoping someone learned something. You are free to not follow this system and experiment. In fact, I encourage.
However, after typing this guide, I would just like to go to sleep. I am incredibly tired and sorry for any mistakes I made. I'll be glad to answer any question if you don't understand anything.

and these are how the sprites I made look like:
Spoiler : Standing :
Image
Spoiler : Talking :
Image
Last edited by Zombie on Sat Feb 18, 2012 7:22 pm, edited 1 time in total.
Image
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: Re-coloration/Frankenspriting/Animating for Beginners

Post by LunchPolice »

No way I had no idea recolouring was so freaking easy in Paint.NET.
I'm not really a beginner so I came into this just to check it out, had
no idea I'd learn something so helpful. Thanks! :O
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: Re-coloration/Frankenspriting/Animating for Beginners

Post by Tap »

A fantastic guide... I would be happy to add it into the Art Guide section provided you make a couple of minor changes, if that's possible. :)
  • Change: In your pictures, the black text is hard to read on the "checkered" background... Perhaps you can add a Stroke Outline to make it stand out, or add an opaque background of a simple colour behind it. =)
  • Change: This image in particular seems to be rather odd... The "Colors" box is incredibly blurry and it makes for a jarring view going from a blurry box overtaking half of the space to reading the text. ^^'
  • Concern/Thought:The animations you've made, and the guide suggested while correct in terms of how sprites are animated (blinking consists of open eyes, half and closed eye frames) doesn't exactly match up with animated sprites from the game. The general format for animating is nine frames for blinking, and 22 for talking -- more if you wish to emulate the AJ!style. It seems like you've cut down on the number of frames and adjusted the timing to reflect this, and although it does cut down the file size, it makes the animations look slightly awkward, with no offense intended. However if you're not as much of a perfectionist like I am ( :XD: ), it is another method you can use.
And echoing LP, I had no idea it was that easy to recolour in Paint.Net... :)
ImageImage
User avatar
lazyplague
Posts: 2430
Joined: Sun Oct 10, 2010 4:24 pm
Gender: Female
Spoken languages: English
Location: Hell. Gay Hell, to be exact.

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by lazyplague »

This is a simply wonderful guide.
I use the Hue and saturation option if i'm too lazy too make colors. xD
User avatar
Zombie
Posts: 281
Joined: Mon Feb 06, 2012 2:54 am
Gender: Male
Spoken languages: English, My written french is horrible.
Location: Your deathbed

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by Zombie »

Tap wrote:A fantastic guide... I would be happy to add it into the Art Guide section provided you make a couple of minor changes, if that's possible. :)
  • Change: In your pictures, the black text is hard to read on the "checkered" background... Perhaps you can add a Stroke Outline to make it stand out, or add an opaque background of a simple colour behind it. =)
  • Change: This image in particular seems to be rather odd... The "Colors" box is incredibly blurry and it makes for a jarring view going from a blurry box overtaking half of the space to reading the text. ^^'
  • Concern/Thought:The animations you've made, and the guide suggested while correct in terms of how sprites are animated (blinking consists of open eyes, half and closed eye frames) doesn't exactly match up with animated sprites from the game. The general format for animating is nine frames for blinking, and 22 for talking -- more if you wish to emulate the AJ!style. It seems like you've cut down on the number of frames and adjusted the timing to reflect this, and although it does cut down the file size, it makes the animations look slightly awkward, with no offense intended. However if you're not as much of a perfectionist like I am ( :XD: ), it is another method you can use.
And echoing LP, I had no idea it was that easy to recolour in Paint.Net... :)
Everything has been changed except one thing. I didn't know what was the precise order of sprite animation so I obviously couldn't show it. I'm going to look for it around but if anyone has the proper, I can finish editing this last part :).
Image
Tap
Posts: 4799
Joined: Tue Dec 15, 2009 9:01 am
Gender: Male
Spoken languages: English

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by Tap »

Everything has been changed except one thing. I didn't know what was the precise order of sprite animation so I obviously couldn't show it. I'm going to look for it around but if anyone has the proper, I can finish editing this last part :).
Oh, no, don't worry about it. Everyone has their different methods of animating, and this is one of them which can be used, although perhaps that it is your own method should be reflected in the guide. :)

I'll move it into Art Guides momentarily, congrats~! :)
ImageImage
User avatar
VirtAnderson
Posts: 271
Joined: Sat Feb 25, 2012 9:30 pm
Gender: Male
Spoken languages: English
Contact:

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by VirtAnderson »

The animations are a bit off. In the talking, you're making them say "oo-ah-oo-ah-oo-ah" when in reality it's more like "ma-oo-op-ma-oo-op." Meaning basically, it's closed - wide - o - wide - etc. You're making it wide-o-wide-o-wide-etc.
Also, I'm fairly certain that the medium-closed eyes come before the closed as well as after.
Still a great guide, though!
User avatar
Zombie
Posts: 281
Joined: Mon Feb 06, 2012 2:54 am
Gender: Male
Spoken languages: English, My written french is horrible.
Location: Your deathbed

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by Zombie »

VirtAnderson wrote:The animations are a bit off. In the talking, you're making them say "oo-ah-oo-ah-oo-ah" when in reality it's more like "ma-oo-op-ma-oo-op." Meaning basically, it's closed - wide - o - wide - etc. You're making it wide-o-wide-o-wide-etc.
Also, I'm fairly certain that the medium-closed eyes come before the closed as well as after.
Still a great guide, though!
Well, animation depends on the person. I only prefer this method because it is simple and makes little files for demos and such. If you are spriting then being more complex then here is suggested.
Image
nahu0093
Moderator
Posts: 2193
Joined: Wed Oct 26, 2011 2:43 am
Gender: Male
Spoken languages: Español y algo de ingles

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by nahu0093 »

a question like you do Are just a picture to put the entire sheet without bone me to stay as your instructive to the Edegworth?
User avatar
lazyplague
Posts: 2430
Joined: Sun Oct 10, 2010 4:24 pm
Gender: Female
Spoken languages: English
Location: Hell. Gay Hell, to be exact.

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by lazyplague »

nahu0093 wrote:a question like you do Are just a picture to put the entire sheet without bone me to stay as your instructive to the Edegworth?

...
WHAT DO YOU EVEN MEAN?
User avatar
Mick
Moderator
Posts: 6455
Joined: Sun May 29, 2011 10:29 pm
Gender: Male
Spoken languages: English, German, some Italian, some French
Location: Germany

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by Mick »

nahu0093 wrote:a question like you do Are just a picture to put the entire sheet without bone me to stay as your instructive to the Edegworth?
This sentence isn't understandable at all. The only thing I could recommend you, would be sending a PM to Danielinhoni, he speaks English and Spanish, so he might be able to help you or at least translate your sentence. :wink:
nahu0093
Moderator
Posts: 2193
Joined: Wed Oct 26, 2011 2:43 am
Gender: Male
Spoken languages: Español y algo de ingles

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by nahu0093 »

Ouch ok the send mp a Dani
Broocevelt
Moderator
Posts: 7319
Joined: Fri Sep 11, 2009 6:06 pm
Gender: Female
Spoken languages: ES/FR/EN/DE
Location: Spain
Contact:

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by Broocevelt »

Dahell man... Google Translate, really?

He's asking how to take a sprite from a spritesheet and put in in paint.net without the green background.
User avatar
Mick
Moderator
Posts: 6455
Joined: Sun May 29, 2011 10:29 pm
Gender: Male
Spoken languages: English, German, some Italian, some French
Location: Germany

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by Mick »

Danielinhoni wrote:He's asking how to take a sprite from a spritesheet and put in in paint.net without the green background.
This makes way more sense.

@nahu0093
Since you don't seem to understand English very well (sorry, but this explanation has to be written in English, because I don't speak Spanish. xD), I set the language of PAINT.NET to Spanish. :)
So, you got your sheet. First of all, you have to mark the part, you want to cut out. Click on Mover la selección and drag the corners of the blue area, so it is around the sprite. Like this:
Spoiler : :
Image
Then, click on Recortar según la selección. Now, you have the sprite with a green background. The next tool, you need, is the Varita mágica. Make sure, to set the Tolerancia to 0% - 10%.
Spoiler : :
Image
Now, just click on the background and press Ctrl + X. So you have a Sprite without a green background. :) I hope, this tutorial helped you. In addition to that, you should cut out the sprite. To do that, click on Mover la selección a second time and just click once on the image and press Ctrl + X again. Then make a new image with a size of 256 x 192. Just paste your sprite there and move it, so it fits.
Short version:
  • Mover la selección
  • Recortar según la selección
  • Varita mágica
  • Ctrl + V
nahu0093
Moderator
Posts: 2193
Joined: Wed Oct 26, 2011 2:43 am
Gender: Male
Spoken languages: Español y algo de ingles

Re: Re-coloration/Frankenspriting/Animating for Beginners

Post by nahu0093 »

Thanks Mick
Post Reply