The Mugen Fighters Guild

Help => M.U.G.E.N Development Help => Tips, Tricks, Tutorials => Topic started by: Momotaro on April 08, 2011, 11:02:53 am

Title: A place to share color separation techniques
Post by: Momotaro on April 08, 2011, 11:02:53 am
Hello,
I would like to share my way and surely the way most of us use to make color separations for a character.
Don't hesitate to share your personnal way of making them even if it's a variant of the ones I post here.

The fist one is really simple
Using Paint you just have to select the color to replace as main color (grey in this exemple), and the color who replace the older as second color (green in this exemple), then use the rubber / eraser to replace the color. Repeat the action for other colors.
Fot me it's a precise way to do whay you want, but take a lot of time.
(http://img197.imageshack.us/img197/3401/colorseparation1.png) (http://img197.imageshack.us/i/colorseparation1.png/)

The second-one uses Photoshop or equivalent.
Select all the area you want to change with manual selection tools.
Then apply a color change to it.
It's less complicated, but you have to select all the areas with no mistakes, or you have to restart again.
The good thing about this way is that you can use it with sprite sheet easily, and make color change faster.
(http://img819.imageshack.us/img819/928/colorseparation2.png) (http://img819.imageshack.us/i/colorseparation2.png/)

Fo me both of these techniques are unperfect.
So if you know a better technique, please share it her.

Thanks.
Title: Re: A place to share color separation techniques
Post by: Iced on April 08, 2011, 11:25:36 am
Why do you use manual selection? Wouldnt it be easier to use colour selection?
Title: Re: A place to share color separation techniques
Post by: Momotaro on April 08, 2011, 06:41:22 pm
Why do you use manual selection? Wouldnt it be easier to use colour selection?

Color selection will select all the parts using the same color.
But the idea is to select only some particular parts using this color

In my exemple, I don't want the boots laces to be red too.

Is there a better / faster way to do it?
Title: Re: A place to share color separation techniques
Post by: Formerly Hoshi on April 16, 2011, 07:03:16 am
There is also PotS' tutorial which is very similar.

http://mugenguild.com/forumx/index.php?topic=111207.0

Might be worth checking out to see if there's anything else you might be able to do in Photoshop as opposed to PSP.
Title: Re: A place to share color separation techniques
Post by: Momotaro on April 18, 2011, 07:12:24 pm
Good! Thanks for the link.
Title: Re: A place to share color separation techniques
Post by: Niitris on December 31, 2011, 02:38:39 pm
I have a rather effective technique. I'm bumping this topic because I don't think it's necessary to make a new one.

What I use is paint, Paint shop pro (anything that can work with color palettes will do), and Fighter Factory. I've never been good at explaining things, so bear with me.  :P

1. Make multiple palettes of your character and make every color different. This makes it easier to replace the original color with the one you want. Take a sprite and save it as is (make the default palette sprite a png).

Default (http://i1218.photobucket.com/albums/dd413/NitrousNemesis/tut_01b.png)   2nd (http://i1218.photobucket.com/albums/dd413/NitrousNemesis/tut_02b.png)
For this, I didn't make the skin different, but this is just for show.

2. Next, open Paint Shop Pro (or whatever you use) and open the ones that don't have the default palette. For whatever it is you want separated, change the colors you don't need to the masking (zero) color (I suggest you save the palette after removing the unneeded colors to save time for later sprites). Save the images as png (I don't know if bmp works).

(http://i1218.photobucket.com/albums/dd413/NitrousNemesis/tut_04.png)

3. Then, open MS paint and open the 2nd/3rd palette sprites. Select the part you want to separate and copy it.

(http://i1218.photobucket.com/albums/dd413/NitrousNemesis/tut_06.png) box = selection

4. Open the default palette sprite (on MS paint). Make sure your second/right side color in paint is the masking (transparency) color, and make sure that transparent selection is checked (to do this, go to Select > Selection Options > Transparent Selection). Paste your part on top of the segment your separating. Save the image.

(http://i1218.photobucket.com/albums/dd413/NitrousNemesis/tut_07.png)


If you already have the separated palette saved (or if you can organize palettes in your PSP), you can skip the next two steps.

5. For the sprite you just saved, open it in PSP. Reduce the colors to 256, and save the image.

6. Open that same sprite in the palette section of Fighter Factory and organize the palette (if your PSP can organize palettes, you can do it there instead).

7. Open that same sprite in PSP (reopen it if you had to do the two above steps) and load the palette you're using as the color separated palette (save the palette if you haven't yet). Save the sprite as pcx.

From there, you good to go. Just add the sprite like you would do for any character.

It takes a bit of time when you first start, but it becomes quicker one you have the palettes established. oh, and...

Also I guess step 0 would be firing up a media player. 8)
Title: Re: A place to share color separation techniques
Post by: Momotaro on January 02, 2012, 10:54:42 am
Interesting way!!
I'll try it too.
It works mostly the same way but make it more easy to visualize!!
Nice method!
Title: Re: A place to share color separation techniques
Post by: davismaximus on May 21, 2012, 04:38:48 am
Didn't want to start a new topic, so I figured I'd share a few tips I use for color separation here.  I use Photoshop and Fighter Factory Classic to do most of the work.  Here's a few tips I've learned along the way.


That's about the jist of my process, if anyone has any questions/additions let me know as I'm sure I missed a few steps.
Title: Re: A place to share color separation techniques
Post by: Moon Girard on June 09, 2012, 11:43:51 am
How i do this using Photoshop beware i suck at explaing stuff.

1) So to start you take your template or sprite a in this case, Duplicate the layer  then pick the magic wand tool and select a part you want to separate
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-1.png)

2) now you switch to the rectangular marquee tool(or the box as i call it) and deselect the other parts that share that color for now in ash's case i only have to separate either his shirt or pants and i can leave the other alone
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-2.png)

3) now pick a color and fill it in (Alt+Delete)
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-3.png)

4) Now back to step one and selecting the parts to change
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-4.png)

5) Since nothing was touching i skipped step two on this part and went to step three then i deselect what i just filled in and go to the next object and repeat till i finish with these colors
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-5.png)
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-6.png)
 
5) Now i do it again with the next shared color set
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-7.png)
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-8.png)

6) now that the only thing sharing colors are the things i want to i go to the layer blending mode and go down to layer.
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-9.png)

7) Now the stuff i chose to separate is separated and has the shading done for it. this won't work on anything with straight white(255/255/255) or straight black(0/0/0) as they will stay the same and share with anything else as those colors so just change them to any other white black before hand.
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-10.png)

8 ) Next go to image mode index to index it chose yes when it asks to flatten the layers have the palette be exact unless you have a palette template already done in that case you got to custom and load it then just leave it on previous on your next sprite as it'll take the last palette used.
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-11.png)

9) now go back image mode go down to color table and you'll have your palette it just won't be organized and you'll meed to change it so it reads your background color as transparent so just follow step one here (http://mugenguild.com/forumx/index.php?topic=104470.0) or if you want to make the palette from scratch and organized it follow the video here (http://www.youtube.com/watch?feature=player_detailpage&list=PL32790842BC51D188&v=k_LmPPw0lsk#t=405s)
and if any one wants to see it visually they can watch these
http://www.youtube.com/playlist?list=PL32790842BC51D188&feature=mh_lolz
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/Untitled-12.png)
anyway here's your end result after all this
(http://i848.photobucket.com/albums/ab43/Moon-Girard/Color%20Separation/ash.png)
Title: Re: A place to share color separation techniques
Post by: Neocargalpha on June 10, 2012, 01:52:51 am
Here 2 ways for separation color:  :sugoi:

 the tools for work

-Photoshop (7 to CS6 )
-Windows Paint
-Digital Tablet (optional)

-Image with indexed color, I use a original Sprite Made with 4 colors and one for background...

(http://img543.imageshack.us/img543/1808/s07g.png)

Palettes and Paint


-So, Go to  Image->Mode->Color Table

-Edit the color gamma you need it.

(http://img59.imageshack.us/img59/4677/s01i.png)

(http://img163.imageshack.us/img163/789/s02v.png)


-Use a gamma of base color and place in Paint, now place the new palette in paint


(http://img13.imageshack.us/img13/4186/s03.png)

-Now cut the selection you need of the palete.

(http://img651.imageshack.us/img651/9524/s04r.png)

-Here the result, now place on the image

(http://img839.imageshack.us/img839/4599/s05r.png)

Done! one color separation

(http://img804.imageshack.us/img804/4102/s06i.png)


Repeat the process for the rest of char with new colors.




Separation on Photoshop


First edit the background and set white, copy the image to new file.

(http://img543.imageshack.us/img543/1808/s07g.png) (http://img225.imageshack.us/img225/9666/s08.png)

-now add new layer in the new file
-change Normal to Linear light
-opacity 50% (prevent high contrast)

(http://img407.imageshack.us/img407/9082/s09t.png)

Select any color you want, and starts coloring, use all colors you need it

(http://img809.imageshack.us/img809/350/s10n.png)

No get worry about the background, you can clean later and in the easy way  ::)

(http://img403.imageshack.us/img403/2590/s010.png)

DONE!!!

-Now, let's clean the background, so do you remember the original file?, so its time to edit the palette again...

-change the colors to white

(http://img135.imageshack.us/img135/1406/s13b.png)

Now, go to :


Image->Mode->RGB

and again,   Image->Mode->Indexed Color :   Set to Exact, appear only 2 color

-Now Go to Image->Mode-> Color Table, set transparency with the eyerdropper tool

(http://img337.imageshack.us/img337/1236/s14e.png)


Copy the Image with transparency and put in the file with the separation color and...  SEE THE MAGIC! LOL


(http://img580.imageshack.us/img580/2005/s11cg.png)


Now you only, have to made the palette, and change the colors:

(http://img20.imageshack.us/img20/5070/s12lx.png)