1) Start off by creating a 200 by 200 square canvas and filling it with black.



2) Make a copy of your background layer and rename it "top".

3) Then select a hard edged paint brush and make sure the white is your paint colour.



4) Now, before we paint, you should find out how many rays you want. For this tutorial, I've decided on four big rays and four thinner ones.

5) Paint some small white blobs at the top of the screen. They don't need to be perfectly aligned with anything, I just had them spread out at various intervals. They may not look like much at the moment but you will understand how things work later.



6) We are now going to use a really nifty tool that you might not have thought of using or just didn't considered it useful. Go to you selection button in your toolbox and select the single row selection tool.



7) Once you have selected the tool, select a single row close to the top edge of your channel.



8) With this single row selected we are going to stretch it out to full screen. So, press Ctrl + T or select 'Edit > Free Transform' to go into transform mode.



9) Now grab the middle square of the transformation box (which should look like long grey line) and stretch the selection down until you have long streaks down your channel. Before you press 'enter' to confirm the transformation, pull up the top middle square so that the streaks take up the full screen. Now you can press 'enter'.



10) Now here comes the magic! Go to 'Filter > Distort > Polar Coordinates' and select 'Rectangular to Polar'. This will give you the base for your rays.



Info Break) OK, for those of you who are confused by what happened, I'll give you a quick overview. What' Polar Coordinates' does is warp the selected area around. To give you an idea of how it warps, I've prepared a simple example.



With this tool, you can do some fun things. Apart from rays of light, you can make flowers and funky patterns. The best thing to do is to basically experiment and have fun! You might even discover something new for yourself that would just make your graphic life easier.

I think that I should mention that this filter works in two ways. Firstly to warp your images and secondly to figure out how things will warp. For example, when you are using 'Polar Coordinates' to make hitsparks, you need to give yourself an idea of sizes and stuff for a nice clean spark so you would make some rough spark shapes then use 'Polar to Rectangular' to reverse the warp. This would give you a good reference of how to work on your sparks.

11) We want to clean up the rays so you get nice hard edges so go to 'Image > Adjustments > Levels' and adjust the sliders similar to below. Don't go all the way in together with the sliders or you will lose the anti-aliasing.



12) Because this is the master layer, IE the black parts of the layer cover up everything, we make sure that this layer remains on top (as its layer name suggests). Now, set this layer to "multiply".



Note: Originally, I was going to use layer masks for this technique but realised later, to my stupidity, that this technique was easier.

13) Now, under the "top" layer, create a new layer and call it "ref" or something. Fill this layer with some sort of purplish colour.



Your canvas should now look like this.



14) Above this "ref" layer, create a new layer and call it "1". Duplicate this layer 5 more times then rename each of the new layers 2, 3, 4, etc… Your layer hierarchy should look like this:

Layer "top"
Layer "6"
Layer "5"
Layer "4"
Layer "3"
Layer "2"
Layer "1"
Layer "Ref"
Background

15) Now select layer "1", pick a white colour and a hard-edged brush. Pick a nice size brush and click at the centre of the burst so you get a nice white set of rays which become the start of your animation.



16) Now select layer "2" (and turn off layer "1") and do the same thing but with a bigger brush. Keep doing this to all the frame layers until you get nice big rays.



17) Once you are done, turn off the purple "ref" layer as we don't need it anymore. The sequences should look like this:




Note that for the last few frames that I deleted the centres of the rays so the rays could "die out.

18) After this, it is up to you what you want to do with the images. You can use gradients to colour them, radial blur to smooth the frames out or simply just colour them manually.

I hope this has given you a good basis of how to make a ray burst.



Now let's start another version of the technique.

If you don't want to use the 'Polar Coordinates' method to make your ray burst there is another alternative. This ray burst will have a different shape and will not get bigger as it spreads 'outwards'

1) Start with a new 200 x 200 canvas and fill it black.



Create a new layer and name it '1'. We start off by creating a simple diamond shape with the polygon lasso tool and filling it with white. Not too big, though, because it will be the start of our ray.



Note: just like the last animation this ray burst will be six frames

2) Copy this layer, change the new layer's name to '2' and press 'Ctrl + t' to activate the transform function. Stretch the diamond out a bit so it is longer.



3) Copy layer '2' (and rename the new layer to '3') and stretch the diamond even longer.



4) Copy layer '3' (and rename the new layer to '4') and do the same thing except move it a bit right. Do similarly to frames '5' and '6' until you get something like in my sample below.




5) This technique can be a bit layer intensive depending on how many rays you plan to create so, to make it easier to navigate, we are going to be using layer sets. Click on the little folder button at the bottom of the layer palette.



This creates a new folder where you can place your layers. The good thing about layer sets if that you can hide a whole bunch of layers in one click instead of individually. You can also manipulate layer sets as if one to a certain extent. And, just like layers, you can add layer masks, colour code and rename layers sets.

6) Now, if you want, rename your layer set to 'rays'. Then, begin selecting each layer (from '1' to '6') and click and drag each one over 'rays' folder so that you place your layers into the folder.

Once you've dragged your layers into the folder, it should look something like this.



7) When you have all six of your layers in the folder, click on the empty square in the folder layer to link all six of the layers inside it.



8) Now we are going to copy the 'rays' until you have the number you want. For this example, I have chosen three but feel free to create more.

To do this, you select the 'rays' layer set and select 'Duplicate Layer Set' in your layer palette (the little sideways triangle button) OR you can select and drag the layer set over the little folder button.

9) Now because all the layers in the 'rays' layer set are linked, you can transform everything at once. So, select 'rays' and press 'Ctrl + t' to activate the Transform function. Rotate and move the objects so they seem to be radiating from your centre point.



Note: Make sure that ALL the layers in each layer set is visible before you transform so all layers are transformed.

10) Now pick a different copy of 'rays' and do the same thing but at a different angle. Keep doing this with all your other layer sets until you have all your rays in place. They should look something like this (with ALL the layers visible):



You are almost done. All you need to do now is to turn off ALL the unnecessary layers in each of the layer sets (IE Only layer "1" from each layer (ray) set for frame 1, only layer "2" from each layer (ray) set for frame 2, etc….) and make merged copies of each frame. Below is an example of how each frame should look once they are correctly merged.




12) And NOW we are done. All YOU have to do is to shade and colour it.

But don't feel restricted to the diamond shape. You can use your own funky custom shapes limited only by your imagination.

For this technique, we will be using the polar coordinates filter just like with the first ray burst technique. Actually, to be honest, this is more of a "this is the limitation of this filter" lesson. I'm going to start the spike burst to give you the initial shape but, in doing so, I will illustrate a big flaw in using polar coordinates. However, if you wish to continue making your "spike burst" using this technique then I suggest the second have of technique 2, which will cover how to make the animation frames.

1) We start off by creating a simple black filled canvas at 48 by 240.



2) What we begin with is a small fraction of the spike burst. You will understand what I mean soon. For this, we need to use the grid, so press Ctrl + k which should bring up the preference settings.



Then, from the top pull-down menu, select "Guides, Grids & Slices". Set gridline every to "8 pixels" and subdivisions to "1" then press "OK".



3) You don't see the grid yet so go into View > Show > Grid from your top menu. Also, make sure that "Extras" in the View menu is ticked.

We also want grid snapping so go into View > Snap to > Grid from your top menu. Also, make sure that "Snap" in the View menu is ticked.

4) Create a new layer and name it "ref". With the grid visible, we select the polygon select tool and create a group of spikes of varying heights.



Fill this selection in with white and press Ctrl + h to hide the grid and stop any more grid snapping.



5) Oddly enough, this layer is just a reference layer. If I were to continue with the technique and use the polar coordinates filter, the result would look like this.

As interestingly diverse it would be for a hit spark, I want my spike burst to have straight edges so we need to fix things so they appear relatively straight in the end.

6) Lower the opacity of the "ref" layer and use the pen tool to create 'scalloped' spikes (using the "ref" layer as reference) rather than straight ones.



7) Turn off your "ref" layer then create a new layer and name it "spikes". In the path palette, select the "load path as selection" button at the bottom of the panel.



8) Your path should disappear to be replaced by a selection. Fill this selection with white in the "spikes" layer.



9) Make sure that your background colour is set to black. Then go to Image > Canvas Size from the top menu, which will bring up this window:



Change it to these settings: Width = 240 pixels, Height = 240 pixels, and set the anchor to your left middle. 10) Now copy the "spikes" layer four more times and move them so that they fill out the width of the canvas. Once you've done this, merge down all the "spikes" layers to one single layer.



11) If you are wary, you can make a spare copy of your new "spikes" layer. Press Ctrl + a to select your whole image then select Filter > Polar Coordinates > Rectangular to Polar to warp your layer to the final shape.



Now, do you notice that even though we tried to correct the curvature of the spikes earlier, that the warped shape still has spikes that slightly bulge and a curvier look. This is a major flaw in the polar coordinates technique despite how useful the filter really is.

But if you are happy with the result, then continue onwards to make your animation frames. I suggest the second half of the next tutorial to help you get your frames.



Now let's continue on to the 2nd version of the "Spike Burst"

Again, if you are not happy with the polar coordinates version of the spike burst, there is an alternative. With this technique, we use paths and vector shapes to make the base shape for the sprites. If you are not familiar with paths and vector tools, I suggest you get to know them because they are good for making nice clean shapes.

I must warn you before we start that this technique involves more work but will give you a cleaner result.

1) Start Photoshop with a 200 by 200 canvas filled with black.



2) Click on the triangle on the shape tool and select the polygon shape icon (it looks like a hexagon). At the top of your screen you should now have a new bar under the menu.



3) Before we draw the polygon, we need to change the settings a bit, I've added quite a few extra sides because we want a burst with a nice number of spikes (I've picked 20 sides).



Also, you can have an icon selected so that you can either get a filled vector shape or an empty one, although, I usually pick the empty one.



4) While holding shift, click and drag on your canvas until you get a nice small circular shape.



Try to keep this circle as central as possible. You will notice that I have made it a small circle but don't worry because there is a good reason for this and you will see soon.

Before we do anything else, though, go into your paths palette (or if you can't see it, select 'window > show paths' in your menu) and click and drag the shape layer onto the new path icon. This ensures that your path is saved for future manipulation. At this stage, you might want to make a copy of this path to manipulate and have the original as spare.



5) Select the direct manipulation tool so that you can pick the individual points of your vector shape.



Now, select every second point in your polygon.



6) Press Ctrl + t to bring up the transformation tool so that you can now manipulate your chosen points with more control. Increase the size to about 200% - 300 % (don't forget to click the little chain icon in the middle so that both the height and width scale evenly).



This should give you a nice star shape.



Press enter twice to get out of transform and deselect the points.

7) Now, in the path palette, click and drag the path layer onto the new path icon so that it makes a copy of that path. Rename this to something like "path 2".

8) Select all the outer points and use the transform tool to increase the scale of these points by 200%



Then select the whole shape and, using the transform tool, rotate the whole thing by 120 degrees.

9) Now go back and select path 1 and make a new copy of it. Rename it "path 3" or something.

Again, select all the outer point but this time scale then by 150%.



Once you've done this, select the whole shape and rotate it by 240 degrees.

10) The reason I am going for 3 shapes in stead of one big one is that it is easier to work with. If you had to work with a shape with, say, 60 sides, it just become less fun. Anyway, so now that we have our three polygon shapes you need to create a new path layer (in the path palette) and copy and paste each one of the shapes onto the new layer so that you end up with 3 overlapping shapes.



At this point, you may decide that you want to vary some of the points a bit to give it a more random look. Once you have done this, select all three overlapping shapes and select "combine" in the menu bar above, which should give you one big burst shape. (I also shrunk the overall shape a bit).



11) With this new burst shape selected, click on the "convert to selection" icon to change the path to a selection (well, duh!).



12) Go back into your layers palette, create a new layer (call it "burst") and fill the selection with white. Now deselect your selection (Ctrl + d).



13) Make a copy of this layer, rename it to "burst black" and press Ctrl + i to invert the colours. This will make your picture just look black.



Have no fear, though, because Just press Ctrl + t and shrink this layer to about 50% so the whole image should now look like below.



14) Now you have the basis for making you spike burst. All you do is now to copy and play around with the two burst layers so animate from small to big. Below is an example of a five frame burst.

15) Also, if you don't want the round shape then just use the transformation tool to squash and rotate each frame for a more oval shape.



Now let's create an "Energy Column"

In this tutorial, we will be working on making an energy column, an effect commonly used in fighting games. This technique will just cover a basic energy column so it will be up to you to make it look more fancy. However, at the end, I will give you a little fun tip which can spice it up.

1) We start off by creating a 200 by 100 canvas and filling it with black.



We start off sideways because we will be using the wind filter for some rough edges. It will become clear to you later, anyway.

2) Create a new layer, fill it with black and rename it "column". From now on, you will keep this layer always at the top.

3) Select the circular selection tool and create a filled white oval shape at the right side of the layer so it looks like below.



4) Select the single pixel column selection tool and select a single line down the middle of the oval.





5) Use the transform tool and stretch this selection out so that it looks like below



6) Once you have done this, deselect (Ctrl + d) and set the layer opacity to "multiply" create a new layer underneath "column". Rename it "1".

7) Use the selection tool and select about 3/4 of the layer. Fill it with white and deselect. (For the moment I have turned off the "column" layer.)



8) Now this next step is up to you. With layer "1" selected, select filter > noise > add noise and give your column a bit of black speckling.



Then select the single pixel column selection tool and select a single column anywhere in the white zone.



Then use the transform tool and stretch this selection to the full 3/4 size of your layer, which should now give you some varied shaded lines.

9) OK, now we add a little roughness around the edges. So, select filter > stylize > wind. You can play with the settings a bit but for the moment, just select the "wind setting" and "from the right". This should give you a little distortion around the edges like below.



10) It not look like much but when we select filter > blur > motion blur (at 0 degrees and at about 35 pixels) then the rough edges should be more exaggerated and noticeable.



11) Now, make a copy of layer "1" and rename the new layer "2". Then select filter > other > offset and set it to 25 vertical, 0 horizontal and "wrap around".



12) Copy layer "2", rename it to "3" and do the same offset.



Then, finally, do the same again for a 4th layer and, therefore, a fourth frame.



13) Before we turn it the right way up, you might want a little bit of shading to the column so we begin that by creating a new layer which will be place permanently under the "column" layer (Which I have turned back on noe). Rename this layer "shader" or something.



Now, create a mirrored horizontal gradient from the centre of the column and set that layer to multiply. Play around with the opacity so that it is not too dark.



14) Finally, go to Image > Rotate Canvas > 90 degrees CW to turn your energy column the right way up.

Now from here you can play around with the layers, resizing them, etc… to get your animation. The layers 1 through 4 are meant to be used as a loop in your animation to give your column a sense of action. Below is an example of what frames I made.



Before I leave you, though, here's a little tip which can spice up your column. Basically, get a photo or some artwork of a crazy skull or something, convert it to greyscale then add it to your column. Use smear and other tools to blend it in more. You could also try adding slight distortions to the skull so that it animates with the column. Cool, huh?





Now let's see how we make "Slashes"