Jump to content
OneCutStudio

The Pixel Dojo---[Total Tuts: 15]---Latest: 01-11-2015

Recommended Posts

Great Tutorials, i spent half my afternoon combing through all the content of each section, and i must say it has inspired me to try and do more pixel art, i especially love the landscape series. keep em coming!

 

as for ideas, i try and avoid making my sprites 32x32, maybe a Mack type sprite tutorial is in order.

Share this post


Link to post
Share on other sites

Hi Everyone!

 

So sorry for not adding a new tutorial in a long while. I wanted to keep the Pixel Dojo on a fairly consistent release schedule. But life gets in the way. So...

 

Anyways I wanted to fill my Dojo students in on the latest workings even though nothing new is ready yet.

 

The next tutorial is most likely going to be about Mack sprites because I have received a lot of interest in a Mack tut. The tutorial will use techniques from the previous pixel-over tutorial to create a unique sprite. 

 

Additional tutorials planned for the future:

  • Creating your own unique sprite style
  • More in the landscape series...sand anyone?
  • Texture tutorial...fur, metal...etc.
  • Creating Icons etc.

And one large project I am thinking of doing is taking all my tutorials (after I've had a few more) and compiling them into one large eBook. What do you think?

 

-OCS :)

Share this post


Link to post
Share on other sites

***NEW TUTORIAL ADDED***

 

I almost didn't want to add a tutorial #13 by itself, but for that to happen I would need another tutorial ready and these take quite some time to make. So, #13 is solo. It's not that I am triskaidekaphobic (fear of the number 13), it's just that I don't like the number 13, or 14 for that matter.

 

I wanted to post a new tutorial before I left on my week-long vacation, since it has been about a month from the last time I added to the Pixel Dojo.

 

So, here is the second part of the texture series: fur!

 

-OCS :)

Share this post


Link to post
Share on other sites

Thank you sir, for these indispensable resources! I keep coming back to them over and over for all sorts of things. I have so far made a grass tile, an animation sequence, and now working on some water tiles, though i am going to just go through the whole sheet eventually and make them all custom.

Share this post


Link to post
Share on other sites

Hello everyone!

 

Was my last new tutorial from June!? Wow, it has been way too long. My job is keeping me busy, but I do intend to work on some new tutorials soon. I have reached an impasse with regards to the texture tutorials at the moment. I am planning on doing some basic tutorials aimed at beginners for recolors and edits. Stay tuned for those.

 

-OCS :)

Share this post


Link to post
Share on other sites

***UPDATE***

Tutorial #14 is here! As promised I sat down to create a new tut. For some reason I am having difficulty amending it to the main post. So until I can put it with the others, you can read the tutorial here:

 

Tutorial 14: Re-coloring Sprites

 

 

Sometimes we find graphics we like but the problem is the colors of the graphic do not match with our game’s color scheme. Sometimes we want to create a variant of a graphic, along with the original, to use within a game (like an alternate character outfit). We can accomplish these things by performing basic re-colors. Re-coloring sprites is a great introductory practice into sprite editing

 

Note: Basic re-colors can be done in programs like MSPaint, although it is not the most efficient. For this tutorial, I am using Adobe Photoshop.

 

Note: There are many ways to approach re-coloring in Photoshop. I am just showing you one method.

 

Step 1: Choose the sprite you want to recolor.

 

            I find that pokemon sprites are good for practicing the basics. You can find pokemon sprites easily with a quick online search. I have selected to re-color a Charizard sprite.

LzuagN9.png

 

Step 2: Duplicate the sprite to have a copy of the original just in case.

 

Step 3: Pull the color palette.

 

You could use the eyedropper tool and the pen tool to select each color separately and record them, but this is not efficient and you might miss some colors especially if the sprite has many colors close in value to each other.

 

Instead, go to File è Save for Web. Then press [PrtScn] on your keyboard to copy an image of the screen. Cancel the save window.

 

Now, since the screenshot is captured, paste the screenshot into a new layer. Draw a marquee around the palette with a rectangular marquee and copy + paste it into its own layer.

 

Then delete the screenshot.

 

pLbLKqi.png

 

As you can see this sprite has a total of 12 colors along with black and white.

 

*Dojo Ninja’s Words of Wisdomâ€

 

 

Start practicing re-colors with a sprite that uses only a few colors. Sprite re-coloring can be difficult the more colors there are.

Take a look at this sprite of Charizard, it only uses four colors:

 

mWZ2czV.png

 

 

 

Step 4: Pick the colors you want to swap the original palette with.

 

Now you may be asking yourself “Adobe Photoshop is a powerful program. Why can’t you just use the color adjustment option to change the sprite’s color?†We could do that.

With the sprite’s layer selected, you go to Image è Adjustment è Hue and Saturation.

Then use the hue slider to change the color of the sprite.

 

But this is not what I want. I want more control of my sprite’s color. I want to manually pick the colors I want for my re-colored sprite. I think I will go with a blue Charizard with yellow wings and a light blue flame. I am not going to swap out the black, white, or any of the grays for this sprite.

 

Sometimes it might be difficult to locate the color you are looking for on the sprite. So use the color selection tool. Go to Select è Color Range. Set the fuzziness to 0, so you will get a selection of only the color you click on with the eyedropper. For example, I am going to click on this red color and it will select everywhere that color is being used on the sprite.

 

ATXn3tM.png

 

As you can see, it selected every instance this color pixel was used on the sprite.

This color appears to be the shadow color used for the main body color. I will keep this in mind when picking my new palette. The color I choose to replace the one selected will be of a darker shade of my new base color.

This will make replacing that color a lot easier when I have my re-color palette all set. All I will need to do is select the color I want to replace and fill it.

 

Here is the re-color palette I am going to use:

 

C3Av7FA.png

 

Step 5: Begin swapping colors.

 

I start off with the larger areas of color first, beginning with the base color for the body. I select the color range again, and select the replacement color with the eyedropper to select it as my foreground color.

 

Now go to Edit è Fill and choose foreground color.

 

This is how my sprite looks after replacing the base body color and the shadow color for the body:

 

kOmFBBT.png

 

I put a line through the color when I have swapped it out. This way helps me stay organized. The crudely drawn letters above the re-color palette indicate which section of the sprite the color beneath it is used on. So B = Body, S = Stomach, W= wing, etc.

After replacing all the colors we get this as a result:

 

rxYGvAu.png

 

Step 6: Fine-Tuning

 

Now is the time we need to fine-tune our and evaluate our color choices. One thing I have to change is the highlight on the skin which the arrows are pointing to. These will have to be filled in with a blue tone. I also may want to change the color of the wings. The current color just doesn’t seem to look good.

 

I recolor the body highlights with a lighter blue and decide to use the same colors used on the stomach for the wings but only a little darker.

 

This is the end result:

 

 

xJ78E6r.png

 

 

 

It almost looks like Mega-Charizard. Of course, if you wanted to make a sprite of Mega Charizard you might have to do more than just re-color. You may have to frakensprite, which will be the topic of the next tutorial…

 

Now go and practice!

 

 

Share this post


Link to post
Share on other sites

New tutorial, number 15 is here! Hopefully I will get it added to the main post soon too!

 

Tutorial 15: Frankenspriting

 

            In this tutorial I will be showing you about a pixel technique called Frankenspriting. Inspired by Frakenstein’s monster, this technique, as implied by its namesake, is when a bunch of parts from different sources are pieced together to form a new whole. At first it would seem as if Frakenspriting is more image manipulation than pixel art, however knowledge of pixel art basics is important for making quality “frankens.†You will often see a lot of this technique being used in the creation of fan-made fake pokemon, or “fakemon.†Frankenspriting is also used in combining elements for RPGMaker sprites. Suppose you wanted to add the outfit from one sprite to the body of another, switch heads, give them wings, etc.

 

This tutorial is going to demonstrate frankenspriting through the creation of a fakemon.

 

Step 1: Find Source Material

 

A quick google search gave me what I was looking for and that is a sprite sheet of all pokemon from first through fifth generations. Since this site does not allow the posting of ripped materials, and I’m almost certain these are ripped sprites, I will not be posting the entire image here. Likewise, I will be showing you only the sprite pieces I will be using to construct my Franken.

 

:ph34r: DOJO NINJA’s WORDS OF WISDOM:

 

 

Don’t assume that the sprite you made from an amalgam of pieces is now your original property. Even though it is your design, you still are using the work of others. Give credit where it’s due and use other people’s graphics appropriately.

 

 

 

You may have what you need already if you are going to swap pieces out from, let’s say the RTP. If you have a paid for your copy of RPGMaker, there should be no problem with the EULA by you editing the graphics for use in your game. There may be other limitations, so please read the EULA carefully.

 

Step 2: Import Material into Editing Software

 

Collect all the components you will be working with into image editing software. Use a program that supports multiple layers. I am using Photoshop.

 

I literally had hundreds of pokemon to choose from so the combinations of pieces I can use are huge! Like a pokemon trainer, I decided to use six pokemon; Staravia, Makuhita, Bellsprout, Machop, Heracross, and Taillow. I first found a central mass, from which I could build upon…that, was my Makuhita. From there I looked for parts I could add/swap.

 

These are the pieces I used from each:

¡     Makuhita: Body and arms.

¡     Taillow: Wings (Actually just one wing; duplicated and horizontally flipped)

¡     Staravia: Head

¡     Machop: Legs

¡     Heracross: Head horn

¡     Bellsprout: Face

 

Step 3: Dissecting Specimens

 

            It’s important to have each piece you are working with as its own separate layer. Also make sure that you have a duplicate for each sprite you are working with. Label each layer to make your life so much easier.

 

This picture shows the separate elements I will be using:

 

pptqISM.png

 

Step 4: Arranging

 

            Now we simply move pieces around until we are satisfied with where they sit. I chose pieces I thought would work well together. I wanted to add some more height to the sprite which is why I added legs, but I needed thick legs to support the larger mass of the Makuhita torso. Whatever design decisions you make they need to at least have some sense. This is also the same reason I used Taillow’s wings instead of a smaller pokemon’s wings. The Makuhita torso would require some stronger looking wings to get airborne.

 

            In the layer window, move layers forward and backward to position the components. For example, the wings have to go behind the torso layer to look like they are coming from the sprite’s back.

 

*Prior to arranging I also removed the beak and front feathery thing from its head.

 

After arranging the pieces the way I wanted, I got this result:

 

6Kejvtz.png

 

Now you may notice that there is a big hole on the right side of the character’s neck. Well, this is why I said having pixel art knowledge comes in handy. Sometimes you may have to fill in gaps between your pieces.

 

Step 5: Fill in the Gaps

 

Select the entire image and copy it into a new layer as a composite image of all the pieces. Remember to duplicate the layer just in case.

 

So basically, all I do is connect the shoulder to the head and fill in the empty space with the same color used in that ring around Makuhita’s neck.

 

sfmgEZe.png

 

You’ll notice that the shading is a little bit off, but hat’s also where having pixel art experience comes in handy.

 

Step 6: Prep for Coloring

 

To prepare for coloring you should first desaturate the entire composite image. What I am left with now are a bunch of values. It is easier to swap out similar values with a color than it is to look at a whole bunch of colors and try to swap them out like was shown in Tutorial 14, since we are using multiple pieces and the pieces use all sorts of colors.

 

I also fix some of the values on the piece. For example the contrast was too high between the Bellsprout face compared to the Staravia head. I used the same value as the Staravia head into the Bellsprout face. I also changed some of the shading on the Makuhita torso.

 

Md4Vawv.png

 

Step 7: Coloring

 

*Remember that there are many ways to recolor…this is just one method.

 

*Alternately you can also desaturate and color your pieces before putting them together and then do final touchups afterwards. It’s up to you.

 

If you want to get really technical, you can start picking your palette of colors and painstakingly start swapping them out little by little. Of course if you want a product a little faster, there is a different route you can take. Create a new layer above your desaturated composite and set it to a blend mode of overlay or multiply. This will allow us to literally brush over parts of our sprite with colors while leaving the gray values underneath intact.

 

You can start painting over the entire composite or select certain areas to fill in one at a time. The magic wand tool is great for this purpose.

 

*Remember the more passes you make with the brush, the darker your color is going to get and you need to pay attention to the values underneath to keep it from looking muddy.

 

After some slapdash brushing we get:

 

6zqw2Rc.png

 

Step 8: Clean Up

 

Now we can go back to the grayscale composite and select the entire sprite with the magic wand tool. With the selection active, click on the color layer and cut the selection. Everything on the outside of the selection will be gone. Go back in and add any pixels you think are necessary to reinforce a line or fix a value etc.

 

You can use many of your program’s adjustment features to get the result you want.

 

Some of the red mixed into the green and that’s okay because when the sprite is seen at 100% it is hardly noticeable, even though I did fix some of those values.

 

After the clean up this is the result:

 

 

 

 

UKu4lXF.png

 

And normal size:

 

G6PCCWt.png

 

 

 

 

Now I could always add more detail like patterns to the torso, or hand draw some other features of my own to add. I could also add some more highlighting to make the sprite really pop, but I decided not to as this was just for demonstrative purposes. The possibilities are endless. Now I wonder what this thing could be called? Herahita? Makubellavia?

 

Well, I hope you enjoyed this tutorial or found it useful in some way. See you later!

 

 

-OCS  :D

Share this post


Link to post
Share on other sites

New tutorial, number 15 is here! Hopefully I will get it added to the main post soon too!

 

Tutorial 15: Frankenspriting

 

            In this tutorial I will be showing you about a pixel technique called Frankenspriting. Inspired by Frakenstein’s monster, this technique, as implied by its namesake, is when a bunch of parts from different sources are pieced together to form a new whole. At first it would seem as if Frakenspriting is more image manipulation than pixel art, however knowledge of pixel art basics is important for making quality “frankens.†You will often see a lot of this technique being used in the creation of fan-made fake pokemon, or “fakemon.†Frankenspriting is also used in combining elements for RPGMaker sprites. Suppose you wanted to add the outfit from one sprite to the body of another, switch heads, give them wings, etc.

 

This tutorial is going to demonstrate frankenspriting through the creation of a fakemon.

 

Step 1: Find Source Material

 

A quick google search gave me what I was looking for and that is a sprite sheet of all pokemon from first through fifth generations. Since this site does not allow the posting of ripped materials, and I’m almost certain these are ripped sprites, I will not be posting the entire image here. Likewise, I will be showing you only the sprite pieces I will be using to construct my Franken.

 

:ph34r: DOJO NINJA’s WORDS OF WISDOM:

 

 

Don’t assume that the sprite you made from an amalgam of pieces is now your original property. Even though it is your design, you still are using the work of others. Give credit where it’s due and use other people’s graphics appropriately.

 

 

 

You may have what you need already if you are going to swap pieces out from, let’s say the RTP. If you have a paid for your copy of RPGMaker, there should be no problem with the EULA by you editing the graphics for use in your game. There may be other limitations, so please read the EULA carefully.

 

Step 2: Import Material into Editing Software

 

Collect all the components you will be working with into image editing software. Use a program that supports multiple layers. I am using Photoshop.

 

I literally had hundreds of pokemon to choose from so the combinations of pieces I can use are huge! Like a pokemon trainer, I decided to use six pokemon; Staravia, Makuhita, Bellsprout, Machop, Heracross, and Taillow. I first found a central mass, from which I could build upon…that, was my Makuhita. From there I looked for parts I could add/swap.

 

These are the pieces I used from each:

¡     Makuhita: Body and arms.

¡     Taillow: Wings (Actually just one wing; duplicated and horizontally flipped)

¡     Staravia: Head

¡     Machop: Legs

¡     Heracross: Head horn

¡     Bellsprout: Face

 

Step 3: Dissecting Specimens

 

            It’s important to have each piece you are working with as its own separate layer. Also make sure that you have a duplicate for each sprite you are working with. Label each layer to make your life so much easier.

 

This picture shows the separate elements I will be using:

 

pptqISM.png

 

Step 4: Arranging

 

            Now we simply move pieces around until we are satisfied with where they sit. I chose pieces I thought would work well together. I wanted to add some more height to the sprite which is why I added legs, but I needed thick legs to support the larger mass of the Makuhita torso. Whatever design decisions you make they need to at least have some sense. This is also the same reason I used Taillow’s wings instead of a smaller pokemon’s wings. The Makuhita torso would require some stronger looking wings to get airborne.

 

            In the layer window, move layers forward and backward to position the components. For example, the wings have to go behind the torso layer to look like they are coming from the sprite’s back.

 

*Prior to arranging I also removed the beak and front feathery thing from its head.

 

After arranging the pieces the way I wanted, I got this result:

 

6Kejvtz.png

 

Now you may notice that there is a big hole on the right side of the character’s neck. Well, this is why I said having pixel art knowledge comes in handy. Sometimes you may have to fill in gaps between your pieces.

 

Step 5: Fill in the Gaps

 

Select the entire image and copy it into a new layer as a composite image of all the pieces. Remember to duplicate the layer just in case.

 

So basically, all I do is connect the shoulder to the head and fill in the empty space with the same color used in that ring around Makuhita’s neck.

 

sfmgEZe.png

 

You’ll notice that the shading is a little bit off, but hat’s also where having pixel art experience comes in handy.

 

Step 6: Prep for Coloring

 

To prepare for coloring you should first desaturate the entire composite image. What I am left with now are a bunch of values. It is easier to swap out similar values with a color than it is to look at a whole bunch of colors and try to swap them out like was shown in Tutorial 14, since we are using multiple pieces and the pieces use all sorts of colors.

 

I also fix some of the values on the piece. For example the contrast was too high between the Bellsprout face compared to the Staravia head. I used the same value as the Staravia head into the Bellsprout face. I also changed some of the shading on the Makuhita torso.

 

Md4Vawv.png

 

Step 7: Coloring

 

*Remember that there are many ways to recolor…this is just one method.

 

*Alternately you can also desaturate and color your pieces before putting them together and then do final touchups afterwards. It’s up to you.

 

If you want to get really technical, you can start picking your palette of colors and painstakingly start swapping them out little by little. Of course if you want a product a little faster, there is a different route you can take. Create a new layer above your desaturated composite and set it to a blend mode of overlay or multiply. This will allow us to literally brush over parts of our sprite with colors while leaving the gray values underneath intact.

 

You can start painting over the entire composite or select certain areas to fill in one at a time. The magic wand tool is great for this purpose.

 

*Remember the more passes you make with the brush, the darker your color is going to get and you need to pay attention to the values underneath to keep it from looking muddy.

 

After some slapdash brushing we get:

 

6zqw2Rc.png

 

Step 8: Clean Up

 

Now we can go back to the grayscale composite and select the entire sprite with the magic wand tool. With the selection active, click on the color layer and cut the selection. Everything on the outside of the selection will be gone. Go back in and add any pixels you think are necessary to reinforce a line or fix a value etc.

 

You can use many of your program’s adjustment features to get the result you want.

 

Some of the red mixed into the green and that’s okay because when the sprite is seen at 100% it is hardly noticeable, even though I did fix some of those values.

 

After the clean up this is the result:

 

 

 

 

UKu4lXF.png

 

And normal size:

 

G6PCCWt.png

 

 

 

 

Now I could always add more detail like patterns to the torso, or hand draw some other features of my own to add. I could also add some more highlighting to make the sprite really pop, but I decided not to as this was just for demonstrative purposes. The possibilities are endless. Now I wonder what this thing could be called? Herahita? Makubellavia?

 

Well, I hope you enjoyed this tutorial or found it useful in some way. See you later!

 

 

-OCS  :D

Look at that thing. I'm crying.

 

*Takes a breath*

 

These tutorials have been insanely helpful, I'm saving them so I can reference them forever, thanks man x3

 

 

...

Mabellviachopcross >:|

Share this post


Link to post
Share on other sites

...Huh, I've always had trouble understanding autotiles. But looking at this seems to make sense of them. Also, the "from scratch" character sprite tutorial is pretty helpful as well, seeing as I struggle to make decent looking sprites. Thanks for taking the time to make this!

Share this post


Link to post
Share on other sites

A: YES! Very interested in Pixel Dojo MV! PDMV I like to call it. Again, yes very much interested. That newscaster is awesome. 

 

B: That's not the reason I was commenting, this is; Thanks for the downed sprites tutorial! ma gad, it has helped a ton. Granted, I am kind of lazy and all of my sprites are downed in one position, but who's counting?

Edited by philteredkhaos

Share this post


Link to post
Share on other sites
18 hours ago, roninator2 said:

It's done in the troop page. 

Set the conditions to do the talking then perform the scene and do the battle.

Thats basically a cutscene. I would do a autorun event and control all the actions. Specifying what every event is doing.

 

Share this post


Link to post
Share on other sites

Your content will need to be approved by a moderator

Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×