With this technique, you will definitely need some reference frames from your character. In my example, I just use a stick figure doing a sword slash. If your character uses a sword or weapon that makes a slash then you'll be using this technique a lot. Also, this technique uses paths and vector shapes so if you don't know how to use them or are unfamiliar with them then I suggest you learn before you begin this tutorial to get the hang of things.

1) The first thing you do is to create a PSD image where each one of your character sprites are on a new layer and the opacity of each layer is set about 20% (or at an opacity enough to just see each frame with decent detail).



It makes things easier if you put these bunch of layers into a layer set so you can just turn off the layer set instead of each layer. It's up to you, though.

If you are unfamiliar with layer sets, have a quick browse at the second ray burst tutorial to give you a basic idea.

2) Now, create a new layer and call it something like "slash spare". Here we create the main slash which will the basis for other frames. Although there are a number of ways to do a slash effect, we'll stick with something simple at the moment.

After you have your new layer, click on the pen tool and start draw a curve which covers all the movements of your characters attack. See below to get an idea of what I mean.



For the moment, I've just done a simple curve covering the arc of the tip of the sword.

3) Use the Path selection tool and make a copy of your curve. Paste it then reshape it so that it curves to the base of the blade and matches the tip curve. Look below to see what I mean.



4) Select the Pen tool again then click on these two end points to join the curves up. It should be a straight line as I am using a straight sword. If you want, you can make it a curved line but this is neater.



5) Now do the same with the start points so you get a closed off path.



6) At this point you will want to go into the paths palette and drag the 'work path' layer to the new path icon so that you store your path for future use, otherwise, you can lose it by accident.

7) Don't exit the path palette yet. Make sure that the (whole) path is selected then click on the icon which turns the path into a selection.

8) Now, you can exit the path palette and go back to your layer palette. With the "slash spare" layer active, pick a black colour (temporarily) then press Alt + Delete to fill your selection in.



Once you've done that, you can deselect.

9) Copy this spare layer a few times depending on how many frames your slash is.

Note: you can also have a few extra frames/layers for the end of the slash when it dies out.

For the moment, I have made 5 copies. Rename each copy so that you know which order they go in. Just keep it simple and just rename them 1, 2, 3… etc..

10) Turn off all layers except frame 1 of your slash and the character reference frames. Also, change the opacity of your frame 1 slash to about 50% so that you can see the character reference frames underneath.



11) Slash effects usually occur on the second frame of the sword/weapon swing so, using the second character frame as reference, we delete anything "in front of" the slash. Have a look below to see what I mean.



12) Now turn off your frame 1 slash layer and turn on the frame 2 slash layer. Now, using your frame 3 character reference, delete the part of the slash that is unnecessary.



13) Now keep doing this for all the other frames you have. As well as deleting the "front" of the slash, don't forget to delete the "back" of the slash, too, as it dissipates. Have a look at my samples below to see what I mean. (Note that I have made the slashes white and the background black.)









Note: The slash doesn't actually dissipate (IE dissolve). The slash in fighting games is meant to represent the blurring of a weapon/object to give the idea of movement. I suppose they made them coloured to be more theatrical in their presentation and it just seemed to catch on to become the normal thing to do.

14) And, basically, this is your slash effect. From here, you can decide how you want the slash to work. For example, do you want the slash effect as part of your sprite or do you want to keep it separate? The other thing to think of is shading. If your slash is not too curvy you can easily colour it with gradients or just decide to paint things manually. It's really up to you.



Now let's to make an "Electric Ball"

This effect is really easy because you can do this manually without any special techniques. However, instead of one technique, I'll be showing you two techniques on the one page: a quick polar coordinates way and a manual way. When it comes to animating this it really is up to you because there are so many ways to do so. Electricity is kind of erratic so it can jump from one place to another in your sprite without you worrying about how fluid things look. If you are really good, you can create a nice electric ball animation with just one sprite and the use of PalFX, flipping, sizing and rotating, and an afterimage.

Oh, one more thing, when I say electric ball, I am referring to one that looks like one of those glass plasma balls you can buy from some stores.

1) First off, I am not going to show you how to make an electric ball using polar coordinates (since I've covered the mechanics of the polar coordinates filter in previous tutorials) but I will show you the before and after shots so you can see how easy it is.



As you can see, it is just a couple of gradients and some manually drawn "bolts" that have been blurred. Looks more effective after the polar coordinates filter has been applied, doesn't it?

2) Now, we will cover the second way. For this, create a new 200 by 200 pixel canvas and fill the background with black. Then create a new layer (doesn't matter about the name).



3) Use the circular selection tool and create a selection the full size of your canvas. Hold shift while you do this so that it keeps its shape as a perfect circle.



4) Now with the gradient tool, select a black and white gradient and make sure it is set to radial.

Create the gradient from the centre of the circle to the outside edge so it looks like below.



5) Because I want the edge to be thin, I adjusted the levels (Image > Adjust > Levels) so it was a bit darker in the centre. Alternatively, you could just fix the gradient from the start to reflect this look.



6) Deselect and copy the layer (rename it "core"). Press Ctrl + t to go into transform mode and shrink this ball to about 10% to 15% of it's size so that it becomes the "core" of the electric ball. However, I don't like the shading so we will change it.

Select the transparency for that layer by going into Layer > Load Selection then press 'OK' (If you don't make any changes when the "load selection" window comes up then it will automatically select the transparency for the layer you are currently on).



Once selected, just use the gradient tool to make a more "spherical" looking gradient. Deselect the selection (Ctrl + d). (I also lightened this layer a bit so the centre wasn't so dark)



7) Create a new layer over or under the "core" layer and begin drawing electric bolts with either the pencil of brush tools. If you are doing this with a brush, use a small hard-edged brush. There is no special technique to this. Just draw jagged-like lines.



Once you are done, use the Gaussian blur filter or the smear tool to smooth the bolts out a bit. Now rename this layer to '1'.



8) Create another layer (rename it to '2') and do the same things but draw your bolts in the spaces of layer '1'. You can be more jagged and curvy this time if you want. Here, randomness is the key.



9) Continue doing this for a few layers until you get the number of frames you want. I've decided to do four.





10) Finally, for a little randomness, when you capture your final frames, you can make slight changes to the opacity to each frame to give that flickering effect.



Now let's try our hands at a "Tornado"

Personally, if I were to make a tornado effect for my character, I would use a 3d program. However, just so I can be a little diverse, I will provide a little Photoshop version for you. But, I should warn you that it might not look as great as it can be. I'm sure that if you experiment that you can make something better.

Well, I'll give it a go anyway.

1) We start off by creating a 300 by 300 canvas filled with black.We are going a bit extra this time because we will be trimming the sprites in the end.



2) Create a new layer and, with the selection tool, select about a third of the width of the canvas. Fill this with white. It doesn't have to be perfect, just roughly this size.



3) Then select Filter > Noise > Add Noise to give it some dark speckles.



4) Use the single column selection tool and select a column somewhere in the speckled area.



5) Now use the transform tool (Ctrl + t) and stretch it out until you get som nice streaks.



6) At this point, you will want some roughness around the edges so get the eraser brush and erase the sides a bit for a little roughness.



7) Now, go into Filter > Blur > Motion Blur. Set it and 0 degrees and give it a nice pixel value for smooth edges.



8) This will be your basic tornado layer. If you want, keep a spare copy of this layer.

Now, we are only going to make this tornado 4 frames so we make 3 copies of this frame and rename them all numerically (EG Layer "1", Layer "2", etc...)

9) Pick layer "2" then select Filter > Other > Offset and set it to: Horizontal = 0 pixels and Vertical = -75 pixels.

We use 75 pixels because we are making four frames and 75 is 1/4 of 300.

Then pick layer "3" and offset twice.

Finally, offset layer 4 three times.

10) For the next part, we need to work sideways but before we do this, we need to create a new layer above all the tornado frames. So, create the new layer and name it "block".

Select a small chunk at the bottom of the layer and fill it with black.



11) Now, we want to rotate the canvas so select Image > Rotate Canvas > 90 degrees CCW.



12) Before we do any deforming, however, we need to create new frames. But, first, set all the opacities for the tornado layers to screen.



13) Now make copies of all 4 of your tornado layers and place them under each respective layer. Set these second sets to 50% opacity and rename them each with a suffix "b". Below is an example of how your layer hiearchy should look.

Layer: Block
Layer: 4
Layer: 4b (at 50% opacity)
Layer: 3
Layer: 3b (at 50% opacity)
Layer: 2
Layer: 2b (at 50% opacity)
Layer: 1
Layer: 1b (at 50% opacity)
Background

14) Finally, before we start, select all the "b" layers and flip them all horizontally (IE select all then Edit > Transform > Flip Horizontal). These "b" layers will be the rear of our tornado for each frame.

15) Now, comes the deforming. First, turn off all the layers except layer "1" and the background. Then select Filter > Distort > Shear.



Basically, you just want a little curve to your tornado like with the settings above. Make sure that you have "wrap around selected.



16) Now, use the same shear distortion for ALL of the rest of your frames including the "block" layer.

If you just turn on layer "1" and the "block" layer then you should have something that looks like this:



17) I'm sure you are starting to see where this is going...

Now, just turn on layer "1", "block" and the background. Pick layer "1" and then select Filter > Distort > Shear again but this time with different settings.



This distortion will give us a little angle to the tornado gusts. Once you have done this, use the same shear settings for ALL the other layers.

18) Now, when you look at just layer "1" and the "block" layer turned on, you will notice that the "block" layer is screwed up.



Don't worry, this can easily be fixed. Just offset the layer to the right until it 'caps' the edges like so...



19) Now, we are almost done. First, pick your "block" layer and go to Select > Load Selection then press 'OK'. Then invert the selection (Ctrl + Shift + i).

Then go to all the tornado frames and delete everything in the selection. So, layer "1" should now look like this:



20) Deselect and turn off the "block" layer.

Before we turn the canvas back around, we need to flip back all the "b" layers. However, because of the distortion, we will do something different. So, select each "b" layer then select Edit > Transform > Rotate 180 degrees.

Do this for the all the "b" layers.You might also want to move them slightly so they align better with the other layers. With just layer "1" and "1b" turned on, you should have something that looks like this.



21) Now all you need to do now is to select Image > Rotate Canvas > 90 degrees CW to set thing right. Once you are done, make flattened versions of each frame.



OK, so it is not a perfect tornado but at least you get the gist of how you can approach it.

Oh, and be careful because, as I am writing this tutorial, I realised that I made a mistake and frames 1, 3 and 4 are the same (I forgot to offset layers "3" and "4" properly). Caution: when you use this technique, don't miss a step



Now let's at what some of the PS filters can do...

Polar Coordinates

TO

Free Distort

TO

Shear

TO

TO

Twirl

TO

Perspective

TO

TO

There are a few things you should consider when you make your effect.

1) Never do "cut off" sprites. What I mean is sprites that go outside the screen size so are cut off.



The problem with this is that you can see it is cut off when someone makes a character the has some sort of shake effect on the screen (like with a super move). It is always best to draw the whole sprite.



This also applies to ground effects. Try to add a bit of dimension to your ground effects if possible. For example, just say you have a column of energy. The basic thing would be to make it with a flat base. Easy, no? Well, if you add a little extra arc below, you get a little bit more realistic dimension to your effect.



2) Work in greyscale. It is just easier to work with and you can colour afterwards. Trust me, headaches are abound if you create your effects in colour first. Consider the work if you have to redo certain sprites or just fix certain bits or sprites later. That extra time can be better utilised somewhere else.

Oh, and before you colour your sprites, save a greyscale version first so if you make a mistake or just want to change colours, you can use the greyscale back-up to redo your sprites.

3) Try to work as flat as possible at first. You will find that when you try to work with curves and at certain angles, it will be a real pain in the butt. If you can, try to imagine your effect in the most way possible so that you can work faster and easier.


Working straight: Easy! Working curved: Hard!

Also, you will find that may need to do things at right angles or even upside down. For example, with the wind filter or shear filter you can only work horizontally.

Sometimes you will find that you have to animate flat first before distorting for the final sprites. And, as you have seen earlier, sometimes you have to "reverse engineer" beforehand to give you good reference images.

4) Working with a smaller palette can make things easier for you especially if you are creating your first character. But when you create effects it can sometimes be a problem as you warp and distort your sprites because anti-aliasing makes them blurry and adds extra shades of grey. So, the posterize function in Photoshop (Image > Adjustments > Posterize) is useful in this case. Sadly, you should avoid using colour in your sprites before using this function or you will end up with screwed up colours. It is better to desaturate, posterize and then colour using hue/saturation, gradient map, etc… once you are sure of your sprite.

5) As I have shown you a few times in some of the tutorials, it can be a big bonus to work with layer masks because you can preserve the general shape of your effect sprites, leaving you to colour, streak, add details, etc… freely. Just make sure that you have the right layer element selected first in your layer palette. EG if you are painting the layer, have the layer selected. If you are painting the layer mask then make sure that the layer mask is selected.

6) Even though you might not want to create your effects like mine (IE glowing light FX), you can still use my techniques to give you a set of references that you can trace over.

7) There are programs that can help you create your animated effects much more quickly than manually creating them. In some cases you could use a 3d program or even Flash. You could also try Particle Illusion (www.wondertouch.com), which is a great program for non-loop particle effects. Check out their site for a demo of the software. Even though it is a demo and you can't really save out your animations, you still have a screen capture function (hint, hint).