Twin Matrix
Member
Stemix Academy[/FONT]
Welcome to the Stemix Academy.
Here you will learn to use the rare skill of Stemixing through several assignments and tutorials. There is no prize, nor competition. This is purely for those who want to get the most out of RPG Maker.
But what is Stemixing?
It is a style of art that was originally created by Stevo and then altered by me to fit my RPGs better. It allows for easy and fast creation of charsets, tilesets and other resources. However, this academy will mostly focus on the tileset and charset aspects of the skill.
An example of a tileset made with Stemixing can be found here and here. Note that in those screenshots the outlines of objects are highly visible. That can easily be changed in the process of making them. In fact, I will be dimming the outlines down for the duration of the Academy for those who do not want cartoon-ish RPGs.
Most parts of the academy will consist of the following pattern:
Information - Basic Assignment - Tutorial - Advanced Assignment - Test
Information: The basic information that you have to know for that part of the academy and beyond. You have to read this.
Basic Assignment: Throws you into the information given before and that will be given afterwards. It combines what you know with what you do not know yet, in an attempt to have you find things out yourself and experiment with how you like to work the most. It can be skipped if you wish.
Tutorial: You should definitely read this. It shows you how you should have done the previous assignment. This is where you get the real skill from.
Advanced Assignment: This is basically a variant on what I have explained in the tutorial. I suggest not skipping these assignments, as they give you skill in what I am explaining in this part of the tutorial.
Test: A harder assignment, combining everything you've learned in this part with some other aspects. If you skip these you will miss out on what is the most important part of this academy: practice.
If you wish, you can submit the Test (and other assignments) work to me for evaluation. By no means are you required to do so. However, it would increase your Stemix skill and it's free feedback.
Requirements:
Photoshop CS; or an older version, but I will be showing screenshots of / and explaining CS and not the older versions.
Working eyes.
Note: All images in this post are darker than they actually are, because my image host majhost.com makes everything darker. If you know a good image filehost that doesn't darken images, please PM me with the link.
Warm/Cold Color Wheel:
Layers:
Contents
Chapter 1: Materials
The Basics- Information: Getting Started
- Basic Assignment: The Ball
- Tutorial: Basic Shading
- Advanced Assignment: Multiply and Screen
- Test: A Different Shape
- Information: Wood Texture
- Basic Assignment: The Table
- Tutorial: Basic Furniture
- Advanced Assignment: Rough Wood
- Test: Closets
- Information: Stone Texture
- Basic Assignment: The Rock
- Tutorial: Basic Stone
- Advanced Assignment: Cracked Stone
- Test: The Old Statue
- Information: Metal Shading
- Basic Assignment: The Metal Ball
- Tutorial: Basic Metal
- Advanced Assignment: Metal Pipe
- Test: Metal Machinery
- Information: Glass Shading
- Basic Assignment: The Glass Ball
- Tutorial: Basic Glass
- Advanced Assignment: A Glass Statue
- Test: Stained Glass
- Information: Cloth Shading
- Basic Assignment: The Curtain
- Tutorial: Basic Cloth
- Advanced Assignment: The Cape
- Test: Pinned Cloth
Chapter 2: Scenery
Trees- Information: The Root of All Trees
- Basic Assignment: The Tree
- Tutorial #1: Basic Leaf Trees
- Tutorial #2: Palm Trees
- Tutorial #3: Pine Trees
- Test: Fantasy Tree
- Information: Houses and Sheds
- Tutorial #1: Walls
- Tutorial #2: Roofs
- Tutorial #3: Conjunctions
- Tutorial #4: Windows and Decorations
Chapter 1: Materials
1. The Basics
Stemixing is a quick and easy way to make graphics in a short time.
How is this possible? Well, it is a very loose style. You can't tell exactly where each pixel goes. That's why it takes a lot less time. Instead of putting down one pixel at a time, you will be making whole sweeps of pixels until you get the result that you want. In all this, the brush (shortcut: B), eraser (shortcut: E) and smudger (shortcut: R) will be your friends. I suggest using the shortcuts early on. It might seem awkward to have to look back on your keyboard each time to press a shortcut button when you can just click with it on the mouse, but believe me, it really helps in the long run. After you get the hang of it you can just blindly hit the button and start drawing. As you'll switch between tools often, it will save you a lot of time and trouble.
I will be assuming that you know the basics of Photoshop (opening a new image file, how layers work, etc.). If you don't, I suggest reading this short but to-the-point tutorial on using the program. But then, why did you buy Photoshop without ever having used it? Open up a new file now. Let's start with the standard configuration for your working tools. You can change them as you wish, but I suggest sticking with the ones I recommand until you've got the hang of the style.
Note: A px is a pixel.
Brush Tool for outlines:
Brush: Master Diameter: 1 px
Brush: Hardness: 100%
Mode: Normal
Opacity: 100% (We'll dim this later, but not now)
Flow: 100%
Brush Tool for stone scatter 2:
Brush: Rough Round Bristle (should be around the bottom of the standard brush list)
Brush: Master Diameter: 100 px
Brush: Hardness: -
Mode: Dissolve
Opacity: 100% (We'll dim this later, but not now)
Flow: 2%
Smudge Tool:
Brush: Master Diameter: 10 px (Honestly, this depends completely on what you're drawing, but 10 px is my standard)
Brush: Hardness: 0%
Mode: Normal
Strength: 60%
Sample All Layers: Off
Finger Painting: Off
Eraser Tool:
Brush: Master Diameter: 10 px
Brush: Hardness: 100%
Mode: Brush
Opacity: 100%
Flow: 100%
Erase to History: Off
Got all that? Then there's one more thing that hasn't really got anything to do with the style, but that I will use throughout the academy: mc, sc and hc. Mc: Main Color, sc: Shadow Color, hc: Highlight Color. These three colors are the main colors that you pick to use for your main/shadow/highlight color. However, because you use the smudge tool, the colors will fade into many other ones. Thus, it is necessary to keep a small palette somewhere in the image on a seperate layer with all mc's, sc's and hc's. You can also make a text file or something and paste the hexes of the colors into it. Whatever you like. I personally prefer to make a palette in the image itself so I can visibly see them.
A few words on the brush tool: it usually places several pixels, even when the size of the brush is 1 px. This is become, well, it's a brush. To control this, you need to see how the pixel grid works. For example, if you draw a line with the brush one half onto a pixel and the other half on the pixel next to it, you'll make a blurry line. However, if you draw the line on one pixel line only, you'll get a nice (probably very dark) line. By mastering this, you can use this trick to your advantage in making spiffy lines. The same goes for drawing a line with the Line Tool with Anti-alias turned on (more on that later).Draw a 1mc 1sc 1hc ball.
What? Go, get it done!
You don't know how to? Well, that's too bad.
In all seriousness, I want you to use what I've taught to you before and use it as you see fit. If you make something completely wrong, it doesn't matter. I want you to think about the style. See if the method you use to make the ball matches the one that we'll be using throughout the academy. You can't learn to fully respect a skill until you've tried it yourself.
Stop reading here.
I mean it, don't read on until you've made the ball.
...What did I tell you?So, you've (tried) making the ball (hopefully) without reading the explanation I will be giving here. Now I will give you an explanation of how you're supposed to make it.
Do you remember me saying "1mc 1sc 1hc"? That means that you use three colors only: 1 for the main color, 1 for the shadow and 1 for the highlight. A great way of making shadows and highlights is to use the layer style Multiply and Screen. However, these only work on soft colors. That works for me, as I like to use soft colors in my games, but it might not for you. So I will explain here how to replace the Multiply and Screen effect with a custom shadow/highlight color. In fact, I'll guide you through the whole process of making the ball.
First, open up a new file. I make the file 100 by 100 px. Zoom in. Make a new layer and call it 'Outline'. Select it. Keep the white background, as it makes it easier to see the lines. Now, unless you are a robot with a guided hand, you can't make a perfect circle. But we do want a ball. And balls are round. So hit M for the Marquee Tool. It's probably on the standard rectangular form, so click and hold on the tool icon and select the Elliptical Marquee Tool.
Now hold shift, click and hold (with the left mouse button, of course) somewhere in the top-left of the image. Now drag to the bottom-right and release the mouse button and then shift. You can see that holding shift while doing this creates a perfect circle, but releasing the button too early messes it up again. So keep holding shift until you release the mouse button first. Right click on the circle and select Stroke. Set stroke width: 1 px, color: #000000, location: center, mode: normal, opacity: 100%, preserve transparency: off. OK. Now you have a perfect circle that uses the kind-of 'blurry' Stemix style.
Make a new layer below the Outline one and call it Main Color. Select red (#ff0000) as color. Select the Magic Wand Tool with shortcut: W. Settings of the tool: the 'new selection' (most left one) square, tolerance: 1, anti-alias: on, contiguous: on, sample all layers: off. Now select the Outline layer and click on the outside. Right-click on the selection and hit Select Inverse. Select the Main Color layer again. Hit B for Brush Tool and set its size to 10. You can do this pretty fast by right clicking anywhere and setting the Master Diameter to 10 px. I suggest using the brush instead of the Paint Bucket Tool to fill the circle, as in the future you will have to use the brush or you'll miss spots. Fill the circle up now. I always do it like I'm scrubbing a window. From left to the right, a little bit lower, from the right to the left, a little bit lower and repeat. Now deselect (just hit M and click somewhere outside of the selection area).
Now you've got a red circle. Oh joyous day!
Let's give it some shadow. Make a new layer above Main Color and below Outline. Name it Main Shadow. Set the brush to 8 px. Set the layer style to Multiply. Draw over the circle. See a difference in color? I won't go into details, but that's because the color is too 'bright'. If you had selected a softer red, it would have worked. But it doesn't, so instead, we select our own shadow color. Set the layer style back to normal and select a color that is darker than the mc. This will be the sc. I used #a90000. Now, you should see a ball as an eye that is facing the sun (let's say that the sun is at the top-left). The white is shadow and the pupil the highlight. Because the white is all around the pupil and iris, you will also see shadow on the top-left of the ball. The iris is the part that flows from hc into mc into sc. Let's color the white of the eye first.
Stop!
Don't just start drawing. We're going to use the Stemix style here. Instead of just drawing a shadow, set a few dots with the brush along the bottom-right of the ball. It doesn't matter at all if you go outside of the outline. We're erasing everything outside later anyway. As you go more towards the top-left, start dotting more outside of the circle, so the dark-red on the ball is less. Also start dotting less often. Add a few additional dots in the bottom-right above the first layer. Here's what I mean:
What the hell, TM! It looks like crap! (- Stevo)
Yes, it does. But that will change soon. Hit R for Smudge Tool and put the size to 12 px. Now comes the hardest but most fun part. Start at the top-left. Use click and drag to smudge the colors. Smudge it along the edge, following the side of the circle. What you want is nice round shadow. Stop every now and then and smudge some more here and there where you aren't satisfied with how it looks. Don't start smudging to the center yet. First just make a nice round shadow. Once you get to the bottom-right, you have to smudge towards the bottom-right to get the darkest shadow there. Upon hitting the second layer (at the bottom right) of dots, you need to just scrub the smudge tool into random directions like a little circle to slowly mix the dots into one nice shadow. If you notice that you have a lighter edge around the shadow, smudge towards the outside to erase it (with doing this I suggest setting the smudge tool size to something smaller, such as 5 px). If you see fit, you may add another dot, but I don't suggest doing so unless absolutely necessary.
Now what we're going to do is soften the shadow more to the pupil part (in other words, creating the iris). First smudge just a small border of the shadow onto the iris. Then make small and quick circles with the smudger to soften it into the red. Make sure to keep the shadow at the top-left thinner. If the shadow at the bottom-right has become too light compared to the top-left, add some more dots with the brush tool and smudge those in. In fact, I suggest always doing this to make a darker shadow there. If the top-left is too light, smudge from the pupil onto the eye white and then soften it to make it lighter. First thinner, then softer and its lighter. Note that the point of this style is to do things loosely. It's good if the shadow is messy and not perfectly round. It's actually bad if it is perfectly round and not messy, because then it doesn't match the Stemix style anymore. You need to find the right balance between messy and clean. It's OK if at some parts the shadow is darker than others (like little strokes), unless, of course, you don't want it to be that way. Once you're done it should look something like this:
Now on to the highlight. I suggest placing the highlight over the shadow, so make a new layer called Main Highlight below Outline but above Main Shadow. Select the mc and put the layer style to Screen. Draw onto the red. Notice how it doesn't light up? The same as with the sc, it's because the mc is too bright. Set the layer style back to normal. Select the mc and make it lighter to get the hc. I used #ff6666. Put the brush to 8 px and set a dot on the pupil. One dot. Now take the smudger and only smudge a 1-3 px border of the dot onto the outside. Keep doing this until you got a nice highlight. Now soften it up. You'll notice that it looks like you're changing the shape of the shadow too. This is because the highlight is over the shadow. After you got the highlight nice small, round and soft, get back to the shadow. You're probably going to need to make it smaller and softer to make a better fade-over from eye white to pupil.
After you're satisfied, hit W. Select Outline and click outside of the circle. Now go over all layers and hit delete, thus deleting the colors outside of the ball. Then select the Outline and set its opacity to 50%.
Notice how it looks kind of between 2D, 3D and a waterpainting? Welcome to the Stemix style.
'Cause: congratulations! You just finished your first ball!
Let's put your new knowledge to the test. I want you to make a ball just like explained in the tutorial above, but with a soft color (such as #1AD974). Now instead of making sc and hc yourself, I want you to use the Multiply and Screen layer settings. Then by coloring with the mc, it will automatically become a different shade. This is a great way for getting a basic shadow or highlight color down, but only works with soft colors. On this assignment, I suggest that you experiment a bit. Make a smaller ball, or a larger one. Move the highlight to the top-right and see if you can still do it. Becoming good at the Stemix style isn't that hard but does require some practice and knowing the tricks of the trade. I won't post an example for this assignment, as it's just to get you to practice making shadows and working with different styles.In this test, we're going to apply what we've learned in this part of the academy to a variation: not a ball, but a cube. It's going to be a 3D cube that is seen from such an angle that you see the a left and right side and the top one. I want you to color and shade it using the technique you've applied on the ball. Note that the shadows and highlight on a cube don't use the eye-method, so think before you draw.
The cube should look something like this:
Don't forget to use the Line Tool (it can be selected at the Rectangle Tool; shortcut: U). If you hold shift while drawing a line, it will be either perfectly horizontal, vertical or diagonal. This also works for manual brushing, but only with vertical and horizontal lines. But when you use the line tool, don't forget to switch Anti-Alias on, the Opacity to 100%, mode to Normal and weight to 1 px. Anti-alias is necessary to create the Stemix effect. I suggest using the brush tool for horizontal and vertical lines, and the line tool just for diagonal ones. However, to make a perfect cube, the lines all have to be the same length. To achieve this, first draw the diagonal lines. You can just draw one diagonal line, then copy it 3 times and just rotate it by 90 degrees each time (just select it, right-click, select Free Transform, richt-click and hit rotate 90 degrees). This is probably the safest way to get a perfect diamond. Then select and copy one onto a new layer. Activate Free Transform and select Rotate. At the top, next to the degree icon, type 45.
Or -45, depending on which way you want the line to rotate to get a straight vertical line. Now paste this line onto the diamond to make a cube. Usually after a rotation, the line is completely messed up and blurred. So just draw a new one next to it (with the same length, of course) and delete the rotated one.
Also note that RMXP uses a birds-eye view. So the cube should not have these perfect diamonds. First you should make two perfect diamond shapes over eachother. Lower one of the diamonds down and then draw lines between the two so it becomes a cube. Now select it, right-click, select Free Transform and drag the arrow at the top down to make a 'squashed' effect. I personally prefer to just type in 75% at the top next to the H for height. This is the right perspective for RMXP. You can see what I mean in the example image above.
A random trick to center the outline (or whatever): cut and paste it. When you paste something without having a selection, it automatically centers itself both horizontally and vertically.
Once the cube is finished it should look something like this:
Note: I used Multiply and Screen for this cube. I was able to do this, because I used a soft color, as you learned in the Advanced Assignment.
Note 2: Resize the brush tools as you see fit. When I drew the circle for the tutorial, I used brush size 8 px to dot. For the cube, I used 6 px, because the cube is smaller.
If it doesn't look the same: good! With this style, nothing should look the same. If you are unsure wether you did it right, you can PM it to me and will receive a PM back with feedback.
2. Wood
In this part of the tutorial we're going to get a little more practical and start working on wood. At the end of this part you will be able to draw your own furniture and other things.
Let's start with smooth wood. To make something look like wood, you smudge the shadow dots as lines across the wood, instead of 'softening' it into a nice fading shadow. You place some dots at the part where the shadow is and smudge them into the direction of the wood. Then you slightly smudge the shadow side into eachother so you do get a nice shadow, but it kind of goes into wood as strokes. Another technique used to make it obvious that something is wood is drawing colored lines onto the wood itself on a seperate layer. Then use the smudge tool to soften the line. By drawing these lines, you could also draw one of those wood circles.
Then after drawing your wooden object, you need to add a shadow. Just make a layer beneath all others. Use the Brush Tool to draw the shadow. Set the brush size to something small and draw the outline of the shadow (don't forget that you can draw straight lines by holding the Shift button -- but you have to also let go out of the Shift button after drawing 1 straight line or when you start drawing again it'll draw a straight line from the last point to the new one). After getting the shadow outline done, fill it up with the brush tool. Make sure that it isn't transparent anywhere. Do this in black and then set the opacity to 40%.
There's a third technique that I want to explain to you in this part. It gives the wood a nice rough texture. I'll explain that in the Advanced Assignment, so it doesn't get too complicated too soon.Draw a 1mc 1sc 1hc rectangular table with a shadow and four legs and see what you come up with. Don't forget to try to apply the techniques I've explained (but not yet shown) above. You should stick to 1mc. Let's get the basics down first and focus on decorations and what not later.
Don't forget to download this tileset template. Yea, it's too wide for RMXP, but I prefer drawing in a large image and then moving it I suggest drawing there from now on.
For this academy, I will make most of my examples according to the size of this charset (originally drawn by K-Sama and redrawn by me -- please don't use without permission). However, you can do whatever size you want. I just suggest picking a charset (RTP, HK, Geredreth Advanced, mine, etc.) and going with that size for the rest of the academy. Then at the end of the academy you will have made a lot of resources and you might be motivated to try out some new things and make your very own tilesets!Did you get something nice out of the previous assignment? I'll go over it here, explaining each new step (for the basics of Stemixing see part 1). I'm going to assume that you already know the basics of perspective, furniture and RMXP. I won't go into details here, nor will I give you an extensive lists of links explaining those aspects of RPG Maker XP. I suggest going to Google and searching for some tutorials.
Now on with the furniture. I'll draw the table from the basic assignment.
First get the outline down.
Notice how I placed the charset in the tileset for comparison.
And yes, I am lazy and write the layers as sc, mc, hc, etc. instead of the full phrases.
Now color it. Get a soft brown color. I'll be using Multiply and Screen for the sc and hc. Then place dots for the shadow. Son't forget that you're dealing with a 3D object here. Because the light comes from above (top-left), there will be a lot of shadow on the visible flat side of the table. There is also a small shadow on the top of the table legs. If you don't understand what I mean, just look at where I placed dots on the picture below.
It is important that you didn't put two rows of dots on the right side of the table, as we'll be working on wood strokes. First, smudge the shadow on the side of the main table shelf (yea, I suck at English and don't know the proper word for it -- sorry). A nice tip: holding shift while using the smudge tool works just like with the brush tool. It allows you to make nice straight smudges, which is perfect for that part of the table. Now decrease the size of the smudge tool to the size of the dots. Now smudge only a small part of the left side of the dots on the main table shelf to the left. Keep smudging them a bit to the left, to get a nice striped shadow. Have fun with this process. Add a little bit of variation. Make the stripes a bit twirly, then straight and then curly a bit again. Do whatever you like that you think looks good. Then add a few more dots to the right and make it a normal shadow (don't forget to increase size of the smudge tool again when you do this). Now soften it all up and it should look like the image below.
Now add some highlights. Only slightly. Use the same wood stroke method as before. Don't add a highlight to the table legs and side though -- they're too thin.
Yay, we've got a basic table! But it's not quite done yet. Remember when I talked about those stripes that would make it more like wood? We're coming to that now. Make a new layer above Main Color but below Shadow Color and call it Stripes. Set the brush tool to 1 px and the color to a brown that is a bit darker than the mc. Now draw some nice stripes across the table (and legs or side if you want so, too). It doesn't matter if you color outside of the outline, because you're all erasing those pixels outside of the outline later anyway. Got the stripes done? Good. Now open the smudge tool (all by using shortcuts of course, and in this case, R) and fade the beginning and end of the line out so it looks nice and soft, but the line itself must remain pretty hard. If the line is too hard, you can soften it up. When you're done, select the area outside of the outline using the wand tool (anti-alias and contiguous on, of course) and hit delete on the other layers (excluding mc, because you don't want the main color to go away -- as using this method also slightly erases the color directly on the inside).
If you're not satisfied with the visibility of the stripes, darken them a bit.
Now let's add shadow. Make a new layer below Main Color and name it Shadow. Open up the brush tool with a black color and set the brush size a bit small. Now, using the shift key method to draw straight lines, make a nice shadow. The shadow shouldn't be directly below the table, because the light doesn't come directly from above but from the top-left. Draw the shadow a bit to the right of the table. Then set the transparency of the shadow to 40%.
Notice how I had to move the table around a bit so the shadow would fit. Also, here's a piece of advice: don't move the shadow too much to the right. Only slightly. Otherwise you'll get into trouble later with shadows overlapping into the next tile. And you wouldn't want to have to add a whole 32x32 tile to your game just for a 2 pixel shadow. Don't forget to dim the outline to opacity 50%.
Now compare it to the one you (hopefully) made in the previous assignment. Is it the same? If not, what did you do differently?But what if you want to draw a piece of wood that is rough and not polished? That's what you'll be doing in this assignment. I want you to make a table like in the Basic Assignment, but with some differences. I want the table to be made out of rough wood and have a circular shape. Doing the circular shape is easy. Just use the method we used to draw the ball from the previous part, except that instead of holding shift to make a perfect circle, make an oval shape (horizontally oval, so it's horizontally wide but vertically small -- or the normal perspective is wrong as we're drawing a circular table and not an oval table). Then do everything as I showed in the tutorial. But then after you're done, make a new layer called "Scatter" above the Stripes layer but below Shadow Color. Open up the brush tool (shortcut: B). Set it to a large size in which almost the whole main table shelf fits. Now set the mode to Dissolve. Set the flow to 2%. Select mc and make it darker. Now click several times on the table at different locations to place stray pixels everywhere. Don't click too much -- you don't want too many pixels. You can repeat this process in different colors, including highlights, to make an even more rough effect. I suggest doing at least one with a ligher color than mc.
Now select the smudge tool. Set it to such a size that all the stray pixels fit in it. Now smudge the stray pixels only 1 pixel to the right (or left) so they slightly fade out with the direction of the wood. Now delete the pixels outside of the outline using the same method as before.
We'll be taking all that we've learned in this part and put it into one assignment: drawing closets. I want you to draw a closed closet made out of rough wood and with a shadow on the ground. But that's not all. I want to use two colors in this closet. How do we do that? Well, you place the second color on the same layer as everything else. If you find conflicting trouble, temporarily draw the new color's shadow/highlight/whatever on a new layer and once it's done paste it onto the main one so you don't make a mess. It's not that hard. I suggest using a nice golden yellow color for adding decorations to your closet. Decorate it as you see fit.
Make sure that if you do mass-acts (like using the wand to select everything outside of the outline and then hitting delete) also affects the other objects on that same layer. So I suggest using the brush tool and eraser instead of paint bucket and pressing delete.
Don't forget to erase the stray pixels from parts that aren't wood (like the decorations).
Below is an image of the closet I came up with.
Note that I made it nicely symmetrical by copying one side, flipping it horizontally and pasting it on the other side.
And here's a nice bench that I made for shits 'n giggles. I've set the outline opacity to 60%.
A few more wooden objects: boxes. If you're having trouble making your own, take a look at the ones below (with 100% outline opacity so it's easier for you to see where the lines go).
3. Stone
From now on I will be setting the outline opacity to 65% because I feel that it fits the charset I'm using more and it just generally looks better. You can use whatever you wish. If you want to go with a bloom-fantasy effect decrease opacity. If you want a comic feeling increase it. For a realistic feeling, I suggest doing it around 65%.
Now let's get on with the tutorial. We'll talk about stone. It's actually quite easy. It's the same as what we've done before, except with a little texture twist and information on shading. Stone has a very rough. We'll be working more with the 'scatter' method we used for the wood the previous part, as well as making the shading a little more pixelated by using a Photoshop filter. This should be fun!
Let's start with the first new method: the advanced scatter method. The first part of this scattering is the same as with the wood but with a higher contrast. Lighter light colors and darker dark colors. Now we're going to set the brush tool up for something new. The settings for the brush for this can be found at the top of the post too under the name "stone scatter 2". Make a new layer called "Stone Scatter 2" above Scatter. With this new brush, I want you to quickly go from the left to the right and back again while going over the stone object so you get kind of a hail storm of little pixels. The color has to be darker than the mc, of course. Use the smudge tool to smudge it into a direction for 1 pixel again. Then set the opacity to 50-60%. This gives the stone a nice rough look.
The second technique for stone is making the highlight and shadow more pixelated and rough. Before we do that, I'd like to say that stone has these hard edges and cuts all over (if you're making a natural rock, for example). To make this effect, take the eraser and put its hardness to 75%. Then erase the fadeout of a shadow or highlight. This makes it look like where you erased it there is like this little cut, as if the rock sticks out there. You'll know what I mean when you see it. Afterwards you might want to soften it up just a little bit.
Now to make the shading more pixelated. Select the shadow or highlight. Go to Filters, Sharpen and hit Sharpen. It should now look a little more rocky.Let's put to the test what you've just learned. I want you to make a basic rock with the outline 65%, 1 mc, 1 sc and 1 hc. Use the methods to cut off the shadow to make it look like there are these rock things sticking out and to make the shadow more hard and pixelated. Also use the new pixel scatter method, stone scatter 2.Okay, I'll be making a basic rock for the tutorial.
First draw the outline. I personally like to make a new layer above the outline and draw the outline of where there are cuts in the rock. Then I use that to guide the shading and delete it afterwards. I suggest you do the same. I'll leave it visible for the screenshots of the progress. I suggest using the direct-line drawing technique for stone, so it looks less flubby and more rocky. Just hit somewhere with the brush, press and hold shift and click somewhere else. You'll draw a straight line to that point.
Give the rock an mc, sc and hc (but don't cut nor pixelate it yet).
Now take the erase tool. Set the hardness to 75%. Erase the shadow / highlight on the other side of the cuts, to make it look 3d. Then use the Sharpen filter.
Now it's time for the scatter and stone scatter 2. Put the Stone Scatter 2 layer above the Scatter layer but below Shadow Color. Let's start with the scatter itself. Take the brush tool and set it to a size large enough for the entire rock. Put flow to 2% and mode to dissolve. Take a color a bit darker than mc and hit twice on the rock. Now set the color a bit more darker and hit once on the rock. Do the same for another darker color. Now set the color a bit lighter than mc and hit twice. Set the color more light and hit it once. Then switch to the Stone Scatter 2 layer. Go to the specific brush I mentioned earlier and apply the settings. Use the window-cleaning method to draw a nice haze of pixels over the rock. Set the opacity to 60%. Use the smudge tool to smudge the Scatter and Stone Scatter 2 one pixel into a direction. Don't forget to delete all pixels outside of the outline (including the hc and sc, of course).
If the stone has turned out too dark, select the whole stone without selecting anything else. Go over each layer except outline, going to Image > Adjustments > Brightness/Contrast and adjusting the brightness or contrast for each layer (again, except the outline). I prefer brightness only, but sometimes contrast helps too. Once you're satisfied with your rock, you're done!
As you can see I changed the outline a bit, because I wasn't really satisfied with it.I want you to make a nice, simple rock made out of cracked stone. Making cracks in stone is actually quite easy. It's like making stripes for wood, but instead of making them go along as the wood goes, the cracks go wherever they want to and split into multiple branches at some points. You can make quite some nice effects using cracks. It's a great way to show that something is old.
Random tip: Pressing X switches the primary and secondary color that you are using. I usually have the mc as primary color and the outline as secondary color, so I can quickly switch between them until I have the shape that I desire.For the test you're going to make an old statue. This can be a statue of anything, as long as it isn't too simple and you put some thought to it. It has to be made out of rough stone and be cracked. But first, let's compare the two rocks I made this part.
As you can see, the left one looks more like a rock, while the right one more like a clay-stone blob. This is for several reasons. Firstly, for the left rock I placed less pixels on the Stone Scatter 2 layer and made them darker so instead of getting a full blur, you only get a nice rocky haze. Secondly, for the left rock I used the straight-line-drawing technique, while for the right one I just drew curved lines. Thirdly, the left rock has a simpler shadow. It just has some highlights here and there, and a main shadow going from the bottom-right to the top-left. The right rock, on the other hand, has shadows and highlights all over the place, which gives it a fudgy idea. You can do this and still make it look a lot like a rock, though. But you need to make straight shadows. When drawing rocks, it's all about making sharp edges, rough textures and straight lines. Unless, ofcourse, the rock material you're drawing is fudgy. But I prefer my stone hard.
Now on with the test and something that isn't a natural rock: a statue! Do you think you're up for it? I'm sure you are. I know I am.
Below is what I came up with.
I decided not to smudge the Scatter layer, because it looks better now. You can do whatever you want!
Below are some more rocks.
4. Metal
Now we shall focus less on texture techniques and more on shading methods. The next material we're going to work with is (you guessed it): metal. Metal is awfully annoying to shade properly. So I just say, the heck with it, and take the easy way out. There are still some nasty things you have to take into consideration when shading metal though. Below is an image of a metal ball shaded by Tana. It's a perfect example of how metal should be shaded.
1. Metal never ends with with a dark color at the outlines. At the highlight part, you give it a mc color around the outline. At the shadowed part, you give it a mc color around the outline as well, but at the bottom-right you give it a slight hc because of the reflection.
2. Metal has a higher contrast than stone and wood. The hc and sc should be more contrasted than just Multiply and Screen. You will have to pick your own colors. I personally prefer to still work with Multiply and Screen, but just change the color used for those layers to make it darker/lighter. E.g. if I'm drawing a metal ball and want to work on the highlights, I pick a hc that is only slightly lighter than the mc, because the Screen layer style will make it a lot lighter already.
3. Fall-off. Metal has a quick fall-off. That means that the transition between hc and mc, and mc and sc is very short. You can achieve this by choosing a smaller brush size with the smudge tool for smudging the edges, and placing a lot more dots so its easier to make the shadow.
4. Metal reflects. Other than the regular lighter shade at the top-left, it also has a little highlighted dot which represents the light source, and in most exterior cases, the sun. As this is RMXP I wouldn't worry too much about where the light is coming from and just place the dot. And this is for balls only. These funny highlights takes the shape of the object. So if you'd have like this tube, the highlight 'dot' would stretch all the way out over the tube. If it's a square, it stretches out along the square. It's quite easy, actually. Just keep the clarity, sharpness and small brush size the same.
This all goes for shiny metal. There are a lot of different kinds of metal. There's dusty metal, dull metal and rough metal. Dull metal has no highlight 'dot' (as I like to refer to the special highlights which reflects the light source). Dusty and dull metal have a longer fall-off (longer transition from hc to mc and mc to sc. Rough metal has the Scatter layer. Just be original and make whatever you like. Note that generally all metal has a very small highlighted border around the outline, though. This makes it look 3D and round.Let's put all that new knowlegde to good use! I want you to draw a simple metal ball, like the one drawn by Tana that I showed. It's shiny metal. Just use 1 mc, 1 hc and 1 sc. I want you to pay close attention to the shading details. Decrease all brush size if you want to. It's critical that you get the basics done properly.And now, of course, I will show you step-by-step how to make the shiny metal ball. First, draw the outline and give it an mc. Then give it a sc. Remember to keep the transition short. If the transition is too soft, a good technique to use is to push the sc back. Drag the part where there is nothing onto the shadow. This gives it a sharper line. Don't forget to decrease the smudge brush size and smudge a little stroke that keeps getting thinner from a little bit left of the middle to the top-right, forming a strange half-moon shape. Erase a the border at the outline for later. See the image below for what I mean.
Now let's get the basic highlight down. This works the same as with the sc, but with a light color instead. Don't forget to make it lighter than the normal color you get from taking the mc and giving the layer a Screen style. Also, keep the highlight sharp. It might look funny now, but if you keep it sharp it will all turn out great in the end. Now you need to make a new layer. Call it Metal Dot and place it above the Highlight Color. Set the layer style to Screen and choose a color lighter than hc. Now draw like a very small oval shape. Smudge the borders a bit. Now make a small circle shape above it. This only goes for simple balls, though. Now smudge the borders more, so it becomes soft. Once you're satisfied, take the brush tool and set it to a very light color. Preferably pure white. Now draw the actual light source reflection. It has to be sharp and to the point. Now give the outline a highlighted border. At the part of the hc itself, take the eraser tool and erase the hc at and 1-2 pixels around the outline. At the mc and sc, go to the Highlight Color layer, select the hc and draw a 1-2 pixel border inside and sticking to the outline. We don't want the hc at the bottom-right to go over the outline, because then it looks just weird. So after giving the outline a hc border, use the Magic Wand to select the inside and outside of the outline. Right-click on the selection and hit Select Inverse. Now go to the hc layer and erase the hc on the outline.
Next, we're going to make another new layer (yes, drawing metal sucks -- stick to dull metal so you don't have to worry about all this stuff). Call it Metal Shade. Place the layer above Shadow Color but below Highlight Color. Put the layer style to Multiply and the color mc. Now make a shadow next to the sc that goes like a half-moon. It's thick in the middle and then slowly becomes smaller as it curves to the top. The color has to be between the mc and sc, but a bit more towards the mc. This is to fill up the mc so your ball doesn't look like a button of the sorts. Another way of doing the Metal Shade is by picking a color lighter than the mc and then just drawing the shadow without using the smudge tool to make it lighter. This may be easier.
Looks amazingly beautiful, doesn't it? ...If it turned out right, anyway. I doubt it did for you on the first try. Just compare your ball to mine (sounds wrong) until you notice a difference and then work on that. I do have to warn you that I'm not that good with metal, because I haven't drawn a lot of it.
Confused yet? Good! Let's make it even more confusing. I want you to draw a piece of shiny metal. I want you to draw a pipe. Go through each step as we did in the tutorial and it will work out. Don't make it a straight pipe though. Give it a curve, like it's a bent pipe.
Below is what I came up with.
Shiny.Oooh, time for the test. We're going to delve into machinery, as I want you to draw a machine made out of shiny metal only. You can throw in some other materials if you want to, but the most has to be shiny metal. It needs to consist of atleast four seperate parts. These seperate parts can be just metal plates that are on the object itself or, say, arms and legs. Make sure to check where the shadow falls on the object itself. If there is a part between the sun and an other part, there won't be a highlight 'dot' on this other part. Instead, there would be a shadow from the part blocking the sun.
You can see what I made below.
Phew, that was the metal part. Did you get through it alive? If you did, you will most likely die in the next part, which will focus on: glass! Almost as annoying as metal, but quite pretty if pulled off correctly.
5. Glass
Glass! Aha! It's a lot more complicated than drawing a gray box and setting opacity to 50%. In fact, we're not going to fiddle around with opacities until the object itself is finished. Because changing the opacity of a layer changes it for the whole layer, I suggest drawing the glass object, merging the layers and then copying it. Then make a seperate layer for the glass objects and set the opacity to whatever you like. To merge the layers, just turn off all layers that you don't want merged (including background colors) and click on Layers > Merge Visible, or just hit Shift + Control + E.
Below is an image (drawn by Tana again) of a glass ball.
Drawing glass is a lot like drawing metal, which is why I will be naming the differences between the two, instead of between glass and, say, stone.
1. Glass has less contrast than metal.
2. The hc to mc fall-off is as quick as with metal, but the mc to sc fall-off is slower and spends more time in the mc. I suggest slightly softening the transition between mc and sc up.
3. The shape of the sc and hc are different. The hc becomes thinner as it goes further away from the light source point, but it doesn't go along the border. It wanders 1-2 pixels away from the outline before fading. The sc has a strange marble shape, as you can see in the image above. It kind of bends towards the outline, instead of becoming slowly thinner. This only goes for the bottom shadow, though. At the top, the shadow does follow the border and becomes thinner.
4. Glass has a thinner highlight around the outline. It's about 1 pixel -- barely visible.
5. Because glass is transparent, the light goes through the glass. This is why at the other side of the highlight, there is a second highlight. It is a bit darker than the actual highlight, though. Now, I have to warn you, light does go in a straight line from air to glass to air. Unless the beam of light goes straight to the center of the glass object, it changes its direction inside the glass. However, I feel it is unnecessary to let you study these laws of physics. Just place the second highlight somewhere at the bottom-right (the other side of the real highlight), and if it doesn't look good you can always move it.
Sounds complicated? Yea, well, it is! Fortunately, glass is transparent. So afterwards, you will be setting the opacity of the glass to something like XXXXX%, and it will be harder to spot any spriting mistakes, and the glass will automatically look like glass because you can see through it. So it's not all that bad.Yep, a ball. Again. But this time it's glass! And glass is fun! Draw a 1 hc, 1 mc, 1 sc glass ball just like you did with metal.Get the outline and mc down. Now for the sc, make the shadow the thickest at the bottom-right. Then make it become thinner and fade away as it goes upwards alongside the outline. On the bottom, however, have the shadow bend down and then fade. Soften the edges a bit. Now place a few (just a few) dots around the shadow. Smudge them into a color that is between the mc and sc, but more mc. Make sure you keep the sharp egde of the dark sc. Now smudge this light sc around the dark sc to the top and only a bit left of the bottom. Then smudge a soft stroke of light sc a bit to the right of the bottom-left outline upwards, forming half a moon with the light sc.
The next thing to do is the hc. Give it a nice light color. Take the brush tool, set it to a medium size and draw a line alongside the outline from the top to the left. Select the erase tool. Make it thinner as it goes away from the top-left. At the left, though, have it bend a little away from the outline. Select the smudge tool. Soften the center of the highlight up and smudge it only slightly towards the center. Make a highlighted border (of like 1 pixel) where the sc meets the outline.
Select the Metal Dot layer. Set the brush tool to a very light color (preferably pure white). Draw a small oval-shaped reflection of the light source in the part of the top-left highlight that you softened and smudged to the center, so it looks a bit like a glow. The white of the highlight dot has to be lighter than the glow around it, though, so it's still visible. Now place a small dot to the top-right of the highlight dot. Smudge this dot until it becomes nothing more than a soft and tiny highlight. Next up is the light that shines through the glass and hits the other side of the main highlight. Select the brush tool and draw a short but thick line at the bottom-right. Smudge it a bit alongside the outline and then soften it up.
The last thing to do is to shade the outline. Select the Magic Wand tool (shortcut: W) and set Contiguous off. Then select empty space on the Outside layer. Select Inverse. Make a new layer about the outline and call it Outline Highlight. Set it to opacity 30% and choose white as color. Now use the brush tool to highlight the top-left of the ball. You can use this method for other materials too. It generally makes everything look less cartoonish. I haven't been showing any objects with highlighted outlines before, but I'll do that from now on.
Now if you want you can change the opacity of the glass boll (that includes the outline, of course). I like to set the opacity of glass objects to 85%, though regular windows obviously have a lower opacity. Unless it's like a really dirty and thick window. You can set the opacity of the glass ball to something lower, but it makes it look a bit flat.
I placed grass in the background so you can see the effect of the opacity.Now I want you to make a statue like the one you made in the Stone part, but made out of glass and glass only. With glass it is also important to have nicely curved or straight lines. Ever seen some shiny, sparkling glass in the shape of a blob? No, not really. They do exist, of course. But unless it's part of your storyline or something, I suggest keeping it curved and straight, because the mind has this idea engraved that glass should be smooth. Making glass that isn't smooth would break this chain of thoughts and automatically trigger a 'hey, that's not glass!' reaction, and that's not what we want, now is it?
http://www.majhost.com/gallery/starmies ... tut047.png[/img]
Phew. So we've gone through metal and glass. Two of the hardest materials to draw. Now let's have some fun! We're going to draw Stained Glass as a test. I want you to use your imagination and draw a stained glass window. Not a statue, not a ball, not an object -- just a window. Don't forget to give it a border, though. Have some fun with it. Use colors! Do shade each piece of stained glass, as if each piece is thick and a bit curved. If you're going to draw stained glass for your game, I suggest just making it flat, but I want you to practice a bit more shading glass. Also, the outline for stained glass is not transparent. It's a metal.
Here's what I made:
http://www.majhost.com/gallery/starmies ... tut049.png[/img]
For the colorless glass I made a new layer below Main Color named "Very Transparent Main Color", because I wanted the colorless glass to be more transparent. Because the object has glass and normal material combined you have to put the normal material on a seperate layer when placing it into a tileset. Then change the opacity of the glass and put the normal material over it. It's a bit of a hassle, but it looks great. When drawing the glass you can always draw the normal material on a seperate layer. I also left out the lightsource dot (from the layer 'Metal Dot') because it would have looked too busy and shiny, and I want the stained glass to be down to the point and just have this pretty classy feel to it. It's more of a feeling than anything else.
