Killing my design

One of the last things I had to complete before moving on with anything is how the character died. I discussed with the designer about what he thought was best for the situation since at this time I was running behind. So after much discussion we decided that he would explode/combust once he died. 

With this in mind I began looking up ideas of how I could create this effect in Photoshop. At first I downloaded a scattering effect brush for Photoshop, thinking that this would be the best way to create the effect. Since I had to load the brush in Photoshop, I went to the brushes and clicked the arrow, then loaded the brushes. However after I did this I realised at how this wasn’t going to work with my idea. The scattering effect wasn’t right and scattered in an unusual way leaving behind a box from the brush itself. 

Instead I decided to create my own brush so that I could have full control over it and to do this I had load the brush panel. Depending on your Photoshop the brush panel is normally loaded and on the right side with the layers. If not then you will have to load it and you can do this by selecting the brush tool and clicking on the icon to the right of the airbrush icon. To get the effect that I achieved I had to change the attributions of the brush itself. So since I wanted to create the effect that when he died that he exploded, I enabled the scattering effect. This gave me the option to scatter the brush and create a brush that had looked like it had been scattered.

Once I had the ideal brush I had to begin on creating the effect itself. I initially had done the design in black, later realising that I would have to change this to white. Creating a new layer I started off with a single frame that had an image of the scattering. I then create on different layers and long wavy line. This gave the effect that once he died, he scattered into different directions. 

Since I was creating different paths, I decided to make a group folder so that my layers were more organised. So I clicked on the folder icon in the layer panel and dragged specific layers into the corresponding folders. The next step was to actually animate it, so opening the animation panel I began to see how many frames I would need. The process in creating a smooth animation was simple and I had to make sure that the layers than need to be seen at the time would have been. 

 

Once I messed about with the animation and correcting the right time that each frame needed to be seen I now realised that since the game itself was a dark game, the colour would need to be lighter. In doing this I selected each group and clicked on the image options in the upper left. Once this was done I clicked on adjustments and hit the saturation options, this then gave me the options to change the colour to white. Upon doing so I realised at this time that I couldn’t see the animations so on a previous layer, I added a black background just so I could see the animation.

Once this was done all I needed to do was make sure that the animation was on a transparent background. Since I created the drawing on different layers, this was easy enough since I just removed the black ground and saved it for Web & Devices. 

As you can see below this was the outcome and the effect was something that I was going for. I was planning to add more effects but given the time frame and adding final details to the game, I was limited in doing so. Finally when we tested this in game I actually didn’t have to change anything about the animation since everything looked good.

Run cycle and Stand cycle

The only thing I really had to do with the run cycle now was to add colour to it. Before anything I had to come up with the basic colours I would use. I choose four colours, ranging from a mid-tone, highlight and two darker tones. Since I was creating a vector style I decided to just simply go with the cell shade method. 

Doing this was simple enough since I used the lasso tool to select parts that I would want to colour in. So selecting the colour I needed, I used the lasso tool to make selections neatly. Once I filled him with just one colour, I went over him in detail with the lasso tool. I done all this on a different layer and set the layer to multiply so that the colour could be seen under the line work. I did this process for the shadows and the highlights.

Since everything was pretty much done the process didn’t really take that long. The most part I just went over everything and cleaned everything up, taking off the existing white background I previously used.

Before this I tried another method of colouring and this just didn’t turn out how I wanted. I was blending everything in and it just ended up too dark and I lost the detail. So choosing the way I had done it, kept everything inline and very crisp.

Since I had pretty much finished everything I decided to see what it would look like as a GIF format to see if anything could be fixed. 

As you can see everything came out alright. With the odd white bits left from the background, I had to go back into Photoshop and clean it up. I don’t this method by having a black background on a different layer so I could see the white marks left behind. Once I cleaned everything up, I then deleted the black layer and saved it again. 

This would be the finished run animation and as you can see from the first post I had put a lot of effort and time into it. Even though it seemed simple, there was a lot of twist and turns that happened along the way and set me back quite a bit of time. 

 The Standing Cycle

Since I decided to focus most of my time on the running cycle and it ended up taking more time that I planned too, I was still left with the standing cycle and the death cycle to do. So the next thing I focused on was the standing cycle. 

I decided to draw him so you could see the front of his body so therefore I had to redraw his upper body and lower body. Although I didn’t have to draw everything since I used the head from the previous run cycle. So still on the same save, I used the lasso tool to select the head and duplicated it. I then erased and deleted all the layers except just the head as this gave me a fresh start. 

Using the hard edge brush tool I took reference from existing standing sprites and tried to draw my character standing still. At this point I had to keep in mind that I had to show him breathing and that his cloak would move also.

As you can see above I created four drawings that consisted of his cloak moving and giving the effect that he was moving up and down from breathing. I didn’t move the legs much but since I moved him and made him slightly taller, I feel like that gives it enough movement. Also on the 4^th drawing I removed the eyes so when played in GIF format, he would look like he was blinking. 

Once I created the drawings, I reused them so that the cloak was moving smoothly. Creating 12 frames, this gave it enough to move without it looking jumpy. I also added fireflies that moved around him. As I stated in the previous post I found out the hard way about creating a layer after I already created the frames. So when creating the fireflies, they appeared on all the layers and I had to move them from the original spot, losing where they was on the previous frame.

At the same time of creating this, the other artist gave the designer his work. But upon doing so lead to some problems with how he exported the file. Since the designer needed the files to be on a transparent background, I said I would help out. The other artist gave me his files and I just quickly fixed the files that needed to be fixed. This was either exporting the file itself or just darkening the image if needed so. I also had to adjust the background for the world since we wanted to use it as a repeat process but they didn’t match. So I took them into Photoshop and aligned them to match so we could reuse them over and over.

After this I was then able to begin on doing the colouring process for my standing animation. Since I had the colours from the running cycle I was able to do the colour in very quick time. Also since each frame hardly moved, I was able to duplicate the colouring to save a lot of time. I had to either use the erase tool and erase some colouring or used the brush tool to fill in the blanks. 

The next part was to simple put it all together to create the GIF format. Since it was pretty much the same process as the running cycle, I had to go into detail and erase all the white background. I gave this to the designer also so that I could see how it would look in the game. Once we was all happy, I was able to create the colour GIF for a final image. 

So taking the same process as before, I created the GIF but there was a problem and I realised that I must have missed click something and the save went funny, so I had to re save it.

This is the coloured standing animation. 

Change of plan

Since I realised that there was a lot wrong with the run cycle and knowing I had to fix a lot of things with it, I began to make notes on what needed to be changed. The lack of motion on the upper body was restricting the run cycle and wasn’t giving it its full potential. So opening the previous Photoshop save I began to work on the arms and since the legs were already done, I hoped that it would be a quick process. 

Above is the full running cycle with the arms drawn and the cloak moving freely. I knew before I drew it that I would only have to really draw half the cycle since they move back and form in the same movement. 

Starting with the erase tool, I erased the upper body and drew the cloak and arms on the first stage. At this part I was worried since I lack the knowledge of how clothes move on the body. How different angles effect certain clothing and so forth. Once the first one was done I used the lasso tool to simple go around the upper body and duplicate it so I could use it for next step. I used the move tool and placed it over the existing upper body and erased the unused one. Of course I couldn’t keep the same shape as the previous one since the arm would be moving and this would affect the cloak. So I erased the arm and lower part of the cloak and re drew it again.

I did this for all the next movements and finally finished the running cycle. I had a feeling that this would run more smoothly since it wouldn’t look so stiff. I again decided to create a GIF so that I could see if there was any things that I needed to touch up. 

As you can see for yourself this came out a lot smoother and looks more realistic. I adjusted a few little things here and there but there were things like how I deleted two frames out of the run cycle so it didn’t look blocky. After deleting the two frames it ran a lot more smoothly and I was happy with it. 

Also at this point I was able to give the designer this much of the design to work with so he could adjust the layout of the game. It was a good thing I did since once imported in we realised that certain objects were too close for him to fit in and so forth. Also the designer requested that since I done all my drawings on different layers, I had to leave him on a white background so he could be seen. So I had to go back into Photoshop and erase all the white background on every layer up until the line work. This was a long process itself and I hadn’t even begun on colouring it in.

Creating a GIF

As I didn’t explain how I created the GIF previously I will now explain how I created this one. 

Since Photoshop doesn’t open the animation window for you I had to make sure it was showing. So following the procedures let me see the animation window for myself. Going to windows at the top of the page and then clicking on animation showed me a box at the bottom of my window, this is the animation window. As default there is already a frame there and if not then you can simply create your own by clicking on the paper icon next to the bin. It is the also the same icon as creating a new layer in the layer box

The use of animation in Photoshop can get quite complicating and it took me a few tries to figure it all out. When creating a new frame you have to keep in mind that whatever layers are showing will appear on the frame and the same goes for if the layers are hidden. If you create a frame with a layer then decide to create another one, you can move that layer on the second and it will move to where you move it. This is simply how you create a GIF. However if you create everything and you decide to add something later on with a new layer. The new layer will appear on every frame and you will have to go through all the layers and change it, so make sure you are prepared before creating the animation.

As for saving the animation you have to save it in a different way than you would normally save an image file such as JPG or PNG. Starting off going to file in the upper left corner then clicking on save for Web & Devices will bring up another box, this is the main screen upon saving a GIF. With settings on the right side you can adjust different settings on your save but it should automatically have settings that you can use straight away. Then all you are left to do is simply click the save button and save it to whatever location you desire.