The document summarizes the process of creating animated character sprites over 9 days. Some key points: - The artist created characters by drawing body parts on separate layers to allow easy movement in animations. - Backgrounds for cutscenes were created using point perspective with vanishing points to make furniture/objects proportional. - Forest backgrounds used 3 vanishing points and a star shape tool to position them. - Characters were refined with color and details like fur texture on the fox. - Fighting poses were created for antagonist character to oppose the protagonist. - Bedroom background was detailed with lighting and shadows to represent nighttime.

1. Production Reflection
Gemma Nicholls

2. Day 1- Process
Day 1- Tuesday. Today was the day production was set to start of my
schedule. However, I had a few pages of pre-production that I was unable to
complete the week prior. I decided to finish that in my first lesson because I
wanted it completely out of the way.
My second lesson was when I starred ion my production.
• I started with drawing the basic outlines of my chosen characters. To
use this I used a graphics tablet as I find it easier to draw curved edges
rather than with a mouse.
• After I then created the main character different body parts on separate
layers. I did this because I thought it would be easier to move them in to
different sprite cycles with out having to redraw I could just duplicate
the layers and move them.
• I tested this out with a run cycle. Even though it was before I planned on
my schedule.
• Before the end of the day I started drawing the side character fox. I used
the same method of creating everything on different layers and having
moving joints.
What went well
Since I created the body parts on different layers I can keep everything
consistent through out all the cycle.

3. Day 2- Process
Day 2- Wednesday .detailed character
• Since I already created the main characters walk cycle I created a
coloured character using the same method of the body parts on
different layers.
• Then I duplicated the layer and moved them to the equivalent part on
the sketchy walk cycle.
• After this I emulated my videogame jump cycle from a previous project I
completed and adjusted it for my protagonist.
• I then duplicated the colourful main character layers and moved them
into the place of the jumping sprites.
• Since that method worked for the main character I decided to use it for
the fox as well.
• I used some reference images of google to draw a fox running cycle with
a graphics tablet. I did wit time by creating the different body parts on
different layers and it made photoshop work very slow and I dint realise
until the end of the day that I could have avoided it.
What went well-
All the sprite cycles will be consistent. I was also able to draw a good fox
running cycle even if it took longer then needed.

4. Day 3- Process
Day 3 Thursday- fox focus
Today I decided to focus on getting my fox colour and movement cycle complete.
• To start with I used one of the ruff sketches to create a more solid outlines
and body parts.
• I started to draw the body parts with the mouse. However, when I went to
create curves they didn’t look quite right so I switched to the graphics tablet
• I used the same method of a different layer for everybody part so I would be
able to quickly move them and transform them into the shape I want later.
• Since I was creating an animal with fur I made sure to include the fur on the
colourful character by using a small brush size. I used a graphics tablet for
more control over where I put the detail.
• I only used on layer per body part except the head and the ears so all the
detail was done directly y onto one layer.
• Once I had finished creating the detailed colour fox I duplicated the layers and
put them into a group so it would be easier to copy them again.
• I then moved the layers into the running and jumping positions I had drawn
earlier.
What went well
The small details on the fox that separate it from being a random 4 legged animal.
For example the pointy ears and the lighter coloured feet in comparison to the
black thighs and body.

5. Day 4-6 - Process
leftover week 1
These few days I created and added the small details to the other sprites that I forgot to add on
like the eyes and heart
• I created the heart on a new Photoshop document by trail and error by drawing with the
graphics tablet until I was happy with the shape. I wanted it to look symmetrical because it
will be rotated and parts of the heart are hidden by the arms. So I wanted it to be
identifiable.
• I used the mouse to draw the eyes as I could hold shift on the keyboard t and it would create
a straight line
• When creating the item pick up sprite I used a reference of a 5 sprite stick figure moving a
box.
• When I was duplicating and moving the sprites body parts to make a coherent animation I
added in more sprites then the original because with my character I wanted him to pick up
an item from the ground and the reference didn’t reach that far.
• To make sure everything matched I tested the animation by moving the layers on top of each
other. This helped to keep everything moving smoothly with no stay limb at a completely
different angle to what it should be.
• Once I had finished creating all the pick up item sprites I flattened their groups so the
character was only one layer leaving 1 duplicated spare in case anything went wrong. This
helped with making photoshop working faster.
Next I moved on to making the antagonist of the animation which is the exact opposite of the
protagonist character design wise so I duplicated one of the running sprite and moved it onto a
new photoshop document.
Then I proceeded to I coloured over the white body part layers in black. Once all the layers
where black and looked correct I flipped the character so it was facing the left as it was going to
appose the main character from the other side.

6. Day 7 - Process
Day7- fighting sprites
After creating the antagonists sprite I decided to keep his action simple
and only created him stationary and fighting.
• To start with I googled fighting sprites and looked through a bunch and
stationary stances .
• I decided a threating weapon for him to have would be a sword so I
crated one using 3 different colour light grey black and dark gey. This is
so it would be easy to see on a dark background.
• After I created the sword it was lot easier to create stances with
moving duplicated body parts around. Also before I forgot I added the
extra details in before I had duplicated too many.
• While I was creating the evil characters fighting sprite I tried to create
the good characters fight sprites so I would know if one would get hit
or how high/ low to hit body parts.
What went well
The evil character looks like the complete opposite from the good
character which is exactly what I wanted and the design works.

7. Process day 8
Cut scene bedroom backgrounds
• First I went onto a fresh Photoshop background with the
dimensions of w-1920 h-1080. Then I opened the view tab and
clicked on to create guides layout .
• I made the lines 0 thickness and added 30 rows and columns. I new
from the start I wanted to use point perspective to create my
background.
• I then went to the shape tool and got the line tool to create a
straight horizontal line across my page using my mouse.
• After I created the perspective line I dragged 2 lines from one edge
of the screen to the other. Did this because I wanted the vanishing
point to be in the centre of the page.
• In the middle their was a place where the two lines met. This was
the vanishing point.
• I used the vanishing point to keep everything I added to the room
consistent in dimensions and more realistic .
• I proceeded to use the vanishing point to create a box that would
act as the back wall for the room by creating a square for the back
wall making sure the corners went through the vanishing point.
• I followed this process when creating the bed, wardrobe, window,
desk and carpet.
What went well- all the furniture fits and is proportional. Even though
the image is flat you can see how it can become three dimensional.
<-Before and after

8. Process day 8
Cut scene forest background backgrounds
• Firstly I created a new Photoshop background with the image
dimensions of w-1920 h-1080. I also wanted to make this
background form point perspective but this time I used 3
vanishing points instead of one like I used for the bedroom.
• To do this I opened the view tab and clicked on create guides
layout .I made the lines 0 thickness and added 30 rows and
columns.
• Firstly I got the line tool to create a straight horizontal line above
half way of the page. this is because I want the viewer to be
looking down on the scene.
• I then got the polygon shape tool. As I wanted to use a different
method of creating the vanishing points in Photoshop. I clicked
on the settings for this tool shape and clicked on star. After I
testing the settings I changed the indent sides to 99% as well as
making the sides to 100.
• When the settings where sorted I clicked and dragged on the
page where I wanted my vanishing points(3 times as I wanted 3
different vanishing points).
• Once the vanishing points where created I used them to create
the floor of the forest where the character will be mas well as a
path.
• I then switched from my mouse to a drawing tablet and made a
ruff sketch of the tree and where the character would be as to
not block it with trees.

9. Process day 9
• Firstly I opened a new layer and used my mouse while holding shift to create
straight outlines.
• Next I again created a new layer and moved it under the outline layer. I did
this because its easier to tell where the objects are. I then plugged in the
graphics tablet to get ready to draw with the pen.
• When colouring the background I started with the darkest grey on the back
wall because that’s where the light source would hit directly.
• I then added the general colours on the other walls and objects close to the
window that colours looked about right but could change.
• Once I was happy after darkening the colours to represent night more I
started to pay more attention to where the light from the moon would hit in
the room from the window .
• I started adding more detailed items like the carpet and cover.
• The last things I added where the charger and the painting that is a little
Easter egg because that scene shows up in the cut scene.
What went well
I think the rooms proportions are amazing nothing looks out of place. The
shading also turned out really well.

10. Process day 9
Detailed background-
• To start with I merged the layers and moved it onto a fresh document. I did this so I
could keep the original as it was if I closed the first document with out saving.
• With the new document opened I created another layer on top of the 3 point
perspective.
• I then I started to sketch an area with a path leading to an open space in the middle
of a forest. Also a the main character facing down on the floor.
• Originally I created and coloured the path with lots of grass and gravel looking
detail( scattered turned up on soft brush) however I cam to change it later to a more
simplistic design that works with all of my other backgrounds , props and character.
• After that then copied some black trees from another background I created to keep
the art style coherent and duplicated the layers a few times.
• Then I wanted the father back trees to be a bit different so I drew a grey tree. And
duplicated that layer few times.
• I added some detail like shading to the main character thinking of ho w the sun
would hit someone on the forest floor.
• I transformed a few of the to be bigger so they could be closer to the screen.
• As I look at the screen it looked very crammed and stuffy and I wanted to lessen
that I drew back on some trees. I also made the path with less detail and wider. This
is because you could barley see the main character.
• After that I added in some light rays with some shrubbery to make it match another
background I made in the forest.
What went well- the final out come looks consistent to the other backgrounds and the
light details look a lot better than the heavy ones before.

11. Process day 10
Cut scene forest background backgrounds
• On a new photoshop document with 1080-1920 opened.
• To start with I created a red sketch with the graphics tablet of the
layout and used the transform tool to stretch it s it appears
longer.
• Next I used black pen on a new layer to over line the path, tree
stump bushes and a few trees.
• I made a few more trees on new layers, duplicated and
transformed them so some where larger then others.
• After that I focused on where the light would be hitting down on
so I created a circle out of the stretched background and added
light rays so I new what needed lighter tones.
• After that I coloured in the path , bushes and tree stumps in detail
using the graphics pen.
• I then moved the background over I completed the same process.
However I added in a space for a chest.
• On a new layer I created a chest sketch with an open and a close .
• I then added colour using the mouse because I wanted straight
edges.
What went well-the art style was consisted though out and the light
rays through the trees give th environment more depth.

12. process
• I firstly opened up a new photoshop document with the dimensions of
1080h-1920w and then I opened the timeline from the windows tab.
• Next I pressed open video animation and I when into the layer tab and
clicked create new video layer.
• Then I started to draw some starter sketches with the graphics tablet
• After I completed that I created a new layer and outlined my starting
sketch
• I started to add colour to the walls and floor being aware of how I
created a angle where the colour would be darker.
• I then added the doors and number plates. Adding a small 3d detail to
the number plate so it stood out from the wall.
• Finally I added the door handle with the same little detail of a shade
darker where the light struggles to it.
What went well-
Everything looks proportional and it doesn’t look like a flat mage anymore.

13. Process
• I started with drawing around two ovals
to create two eyes. I played around with
having them slightly closed but it didn't
work well.
• I then transformed the eyes to become
smaller.
• Once they were small I got my graphics
tablet and started to draw the
antagonist a creepy smiling mouth.
• I did this by using the mouse to create
straight lines horizontally and vertically
not along the eyes. This was to help me
map out how much space I should use.
• Once I was happy with a mouth shape I
when around it in black but left an small
white outline so you can see where the
mouth is.
What went well –
You can tell that this character is not good
from how ominous the image looks.

14. Process
• To create this on a document I had
previously opened with animation timeline
on. I added another video layer.
• I started to draw the main character being
eaten up by shadows and used the setting
onion skins to see what I had drawn
previously.
• One I had my outlines I coloured the in
leaving a lots of my background bare
because I wanted to move the layer to be
over the background of the bedroom this is
because it shows that he is lonely and o one
is noticing he is being consume not even
them self.
• What went well
You can clearly see his sad emotion and how its
effecting the surroundings.

15. Process
• To create the phone I used my mouse
because most of the lines are slanted
straight parallel line. I kept the colours
consistent throughout the entire cut
scene.
• I used the graphics tablet to make the
details like the picture and the text
writing
• Both frames where created on frame
animation so I could use onion sins to
see the frames that I created before
and after so subtle movements like
crying or hand movements where
easier to create using this method
because you can see and make subtle
changes.

16. Animating: Process
Before I started animating I had to move all of the sprite sheet and props on to
the moving background. Once that was done I resized some of the sprite sheets
that increased in size once moving documents. I used a already sized sprite sheet
next to it as reference so all the sprites where almost the same size (very close).
• To start with I opened the windows tab at the top of photoshop and clicked
timeline. This opened up the timeline at the bottom of the screen.
• I then clicked on create an animation timeline and set up my first frame.
• I carried on creating a new frame and moving all the various things. Such as
the background, character sprites and props.
because Photoshop got increasingly slow the document got close to crashing
several time so I had to split up the animation as well as save a lot. I made sure
that everyplace I split my animation to have the top of the background (path)
background move by a lot. This made it a lot easier to handle and animate
• While animating I also added small features to make the animation look more
like an videogame. For example heats in the corner and pop up
accomplishments/ unlock items along with a task bar.
• Once everything was animated I exported all the documents into mp4’s and
then I needed to add sound and music so I opened it in premiere pro.
What went well
I added more features to make it feel more like a videogame. All the sprite where
close to exact heights so the animation looked coherent.

17. Editing: Process
Editing :
• To start I opened up a new premiere pro document and then I collected all of the
animations mp4 and music clips from my document and placed them into
premiere pro.
• Next I started by placing the cut scene animation into the editing section.
• I increased the time duration because it played much faster then I wanted it to
• After I increased the time I added the next animation sequence and realised that
all of them would need and increase of the time duration because they played
very quick
• Once all the videos were in premiere pro with increased duration I started to cut
pieces of the animation that overlapped with each other.
• After everything fit correctly I started to add in the sound effects and music I had
to cut down/shorten some audio clips as well as turn down the volume on some
so the would be under the 12 bar so speakers don’t break.
• Once I finished fitting everything together I exported the animation and
uploaded it to YouTube and embedded it to my blogger.
What went well
I managed to get the sound effects and music to be in time with the animation. I also
managed to slow down the animation so I didn’t go supper fast and at a nice slow to
quick pace.

18. Process: music
I created my background music with the website beepbox.
• I used a loop of of low toned melody's to make the
forest mysterious. Each note builds up to the next
witch adds to the mysterious feeling.
• I also gathered sound effects on my phone to use in my
music video.
• I gathered forest noises from the woods that’s near my
house. I also created the swords hitting sword using my
brothers deeper voice breathing out sharply while
holding his breath. The wooden sword sound effect is a
tube being dropped in a quite room.
• Other sound effects like the static noise and additional
bird sounds where gathered from YouTube and
converting them into mp4 because they gave my sound
effects a boost but were not possible for me to go and
collect while working on my music.
• When I put all the audio together I decreased the
volume on a lot of them because they were extremely
loud. I also overlapped the sounds to make it flow
better.

19. ProcessWeek 4 day19- Tuesday
• Today I started work on my secondary project my poster
• To start with I opened a new Photoshop document with the made the
size of a A4 document.
• I then made ruff outlines of my character in a few different stances with
a graphics tablet. I did this because I wanted to make sure I got the
positioning of the character to something I was happy with and the
parts and features look correct and visually appealing. At this point I
also added a big rock on a new layer for the character to stand on
taking it from my layout idea because I wanted something to size the
character against
• After I was happy with how the sketch was looking I used the graphics
tablet and a thin lined pen to outline everything and even the rock with
black on a new layer using the first layer as reference.
• Once the outline was complete I added some lines where the sun
would be coming from on a new layer so I could add in a few highlights
and shadows. Witch is what I did next.
• I started to add a few more features of the background such as trees
and clouds to play with distance and perspective with sketches.
• At the end f the day I started playing with a few text design ideas and
where it would be placed on the page.
What went well:
I was able to get a strong character stance. I was also able to add a lot of
detail to the character although some parts may change later.

20. Process
Week 4 day20 -Wednesday colouring
• To start today I looked at some reference images of forests and rocks so I
could tell what sort of colour and tone I wanted the trees, rocks and
clouds to be on my poster. I did this to make sure that a person could
clearly tell the difference between each object.
• To create the bombardment of the trees in the background, on a new
layer I drew a few trees like the ones that appear in the game play with
the graphics tablet. This was intentional to keep the themes and art style
similar.
• I duplicated the layers a few times and changing the size and height to
keep diversity. I made sure to place the tree layer below the rock making
the rock and character look like its closer to the viewer.
• I started to colour the rock keeping in mind where the sun was coming
from when I shaded the character. I ended up lightening and changing
the rock a bit through this process to make it look better and correct light
and dark areas where the sun did and didn’t hit.
What went well
The background was able to to become better in detail and depth and less
flat and 2d. There is a clear distance between the layers that helps the
characters stance stand out more making it more powering.

21. Process
Week 4 day20 – Thursday sky/background
• Today I started to work on the sky aspect of the background for the poster. I
wanted for the sky to have a clear line of where the sun was coming down
with a few different tones of light to dark grey because a sky isn't just one
tone.
• I started with hiding most of the layers except the character and text layer.
This is because I needed to know the angle of the sun ray.
• Then opened a new layer and dragged it bellow so it became one of the
bottom layers.
• Once done I opened up the brush tool settings and messed with the scatter,
opacity and softness. I used the new brush on a new document with a darker
tone of grey making sure where the lighter and darker areas that appeared
where random. I used a graphics tablet and mouse to complete this.
• With a new layer I changed the colour that I was using on the brush to white
and proceeded to do the same as the previous layer with more direction
making it appear lighter where the sun was shining down upon.
• After I finish creating those layers adding and deleting I used another new
layer to create a gradient with an angle where the sun would be shining down.
• On a new layer I added a noise effect making sure not to go to crazy as I
wanted slight noise.
• I then unhid all the layers and tried adding some background effects such as a
slight blur to the trees that were placed further back.
What went well
The character really stands out as the main view point as the poster centres nicely
around their stance. Another think that s going well so far is that each layer has
the look of different distances form the viewer creating a nice poster effect.

22. Process
Week 4 day 20- Thursday title/font
Before I started changing the fonts and effects I decided to add
another gradient layer on to the sky background to deepen the
colours. I prefer this darker version as it has a sharper colour
contrasts between the white and black.
• To start with the changes to the test I got rid of the white outer
drop shadow as it didn’t match the sharpness of the text and
changed it to a small angled drop shadow.
• I then changed the curved text to straight as it matched better
with the new sharper text and made the page feel open and
spacious then the coverage of the style beforehand.
• After I had changed the style and checked how others around
me thought about it (my target audience).
• I then started adding effects. I added bevel and emboss and a
stroke playing around with the thickness , opacity and angles
until I got something was happy with.
What went well
The final outcome of how the title now looks now in comparison
to how out of place it started.

23. Process
Week 4 day 20- Thursday extras and details
After finishing the posters background and title I started to work on small
details to make my poster more authentic.
• To star with I googled some reference images of game ratings and chose to
recreate one that would fit my game, so I chose the teen rating.
• To recreate this I started with typing the letter T with the text tool and that
created its own new layer for that text.
• I then started to look at fonts that resembled the fonts in the real rating.
• Next I used the text tool again to add the other words and letters Teen and
ESBR transforming them into the correct sizes at this time I also rotated the
T.
• After all the text was created I used a mouse and the brush tool on a new
layer created under the text layers to create a box with straight lines.
• I then filled in the box with white adding the black detail in afterwards so it
looked like the reference images.
• To add extra authenticity I then added a small R in a circle like seen in
ratings and blurred it so I wouldn’t stand out as prominently as the other
text.
• After I merged all the layers I used to create the rating logo and moved it
into the right corner of the page.

24. Process
Week 4 day 20- Thursday extras and details
As I was zoomed out looking the rating logo looked unnatural alone so I then
decided to create a fake company logo o go along side it.
• To create this I used the text tool on a new layer and used my course as the
name and called it creative media production I used the same font as the title
making the details fit the poster better. I didn’t know how to draw any fancy
fake logo to also match the posters atheistic so I just used the graphics tablet to
write my initials G,N. in cursive
• I then positioned it with the move tool above the CMP (Creative Media
Production) text
• I then merged the two layers together with a black box below it to finalise the
logo.
Looking back at the page something still felt missing so I decided to add a small few
words tag line.
• When creating the tag line I took into consideration what type of game I was
creating. I also wanted to create a sense of mystery and peek audiences
interest.
• I went with “Can you escape”; I used the same font and effects (drop shadow,
bevel and emboss and stroke) I used on the title. However compared to the title
I used a smaller size.
• I used the move tool to place it below the title and it the centre of the page.
What went well
The poster is now looking more professional with all the small details and
everything has consistency.

25. Process
Week 4 day 21- Friday
For the final day of production of my poster I focused on effects that
would make my poster look and feel more professional like adding a lens
flare and angling the direction so it matched the sun ray. Also making
sure everything black and white by adjusting the image colour. The final
thing I did was add a page boarder as sometimes when printing a small
part can be cut off.
What went well
Overall thing that went well are things like the soft effects to make the
background have more dimension. For example the blur on the further
back trees. Another thing that went well it the title. This is because in
comparison to the original attempt this version looks sharp, in focus and
ties the poster together and is a nice contrast to the further back blurry
background.
Before:
After: