Demo Level Design

Video Game – Demo Level
To start with I have experimented with
different numbers of frames for the
background to be able to get the
correct speed for running. This helped
me to decide how long my background
needs to be for my demo level.
I have used the gradient tool to create
an ombre designs with different
colours. I thought the purple and
orange looked good as it looks like a
low sunset. I also tried the blue fading
into the white which looks like the sky
just before sunset on a darker night. I
decided to choose the blue background
as it is a more neutral colour compared
to orange and I am using orange for the
neon lights in the first street.
A problem I found with the gradient
tool was that it covered my rectangle
on a different layer, so I had to go to
effects and colour overlay to bring back
the grey I chose to create the road.
Here is the layer with the colour overlay setting.
In the orange background you can see the
rectangle is orange whereas in the blue
background, you can see the rectangle is grey.
Here is a section of my design as I
haven’t done much yet. I have started
to use guides to help create a finished
look with the floors being at the same
height and the doors and handles all
being at the same height.
Above I have shown the 3 streets I have created for my demo level. I decided to make
the streets longer so the 2nd street 200 pixels longer than the 1st street, so the
trophies are further apart meaning the player won’t get the bonus points as easily.
I have created the first street to be more of a shopping street with more buildings as
shops and with larger windows, I have created the second street to be more
residential with more taller buildings for flats and I have created the third street to be
more industry based with offices and cafes. I think this works well as it meant each
street is more individual but keeps the same style as the others, meaning you can tell
you are in the same city. I could have added more taller buildings as Tokyo has a high
population density so there are lots of skyscrapers but if I made the game, I would add
a street full of skyscrapers to show the demand for housing.
As you can see, I have used guides to help me as I waned to keep the scale through
the whole game. I used a guide to keep the ground, first and second floor at the same
level. I used a guide to keep the door and door handles at the same height to create a
more finished look. This helped me as it would have ended up looking messy and it is
hard to use the rulers at the side to get the correct pixels.

First, I decide to change the background to be darker than before to create a late-night look. Straight away I
knew this looked better than the brighter blue, however the buildings didn’t go with the background. To fix
this I used the bucket tool to change the colour of each street to be darker shades, so they didn’t standout
as much. I also decided to darken the ground to go with the theme which looked better as it isn’t the main subject. For the first street, I didn’t have to
change the colours as the were quite dark, but I did have to think about the ground, so the buildings didn’t blend in. To help with this I made the top
layer black to separate the three greys. For the second street I changed the buildings to darker shades of the first colours to keep the contrast the
same which meant the buildings didn’t pop out as much as they did. For the third street, I changed the buildings to dark reds as the black and grey
didn’t contrast enough from the ground. I decided to go for red because I had seen lots of red when looking at Tokyo for inspiration. Overall, I am
happier with this background and colour scheme as the it creates a late-night look and the colours are toned down compared to my first choice. This
design will support my film and advertisement as I wanted the late-night look.
To the left I have shown the stars I have added to
the sky. First, I tried more stars and then I tried less
stars to compare which looks best with my design. I
like the fewer stars rather than the more stars as it
creates a more minimal look which is what I went for when designing the streets. I also think that having the less stars helps the player focus on
jumping rather than being distracted by other subjects in the background. I will be using the fewer stars in the background to go with my minimal look
throughout the game design.

Above, I have shown how I have chosen the colours for each street when adding the signs. For the 1st street I wanted red and orange, as it was my original
pairing when thinking out the advertisement of the film idea. For the 2nd and 3rd street I wasn’t sure what would work the best, so I tried pink and purple on
the 2nd street with blue and green on the 3rd street. To compare my options, I then swapped them around so blue and green are on the 2nd street with pink
and purple on the 3rd street. After doing this I then decided that the blue and green looked better on the 2nd street as the marron buildings will fit in with the
pink and purple analogous colour scheme. This has worked out well as they are all analogous colour schemes, making the background more aesthetic.
Using Adobe Colour helped me to create colour schemes that fit with each section of my design, as it is an easy use website.
Here are my colour schemes for each street:
Above I have shown the process of creating the signs to add the accent colours. I started of by creating the outlines for the signs on top of many buildings, as
in Tokyo the signs stick out from the shop which I couldn’t do in 2D. I then used the bucket tool to fill the signs in with 6 colours depending on the street.
With the pairing of colours, I alternated between them to separate the buildings easier which made the background easier to look at when playing the game.
I then added Japanese writing to the signs to show that the game is set in Tokyo as the neon signs with Japanese writing is all over Tokyo’s streets. Adding
the signs made was the aspect that change the whole look as before it looked like any street which isn’t what I wanted for my design, I wanted the player to
know that they are in Tokyo, running through the streets, late at night.
I have found some examples
of what I think would be
good to use for the signs in
my video game to add more
colour and to show that this
game is based in Tokyo.

I have added a new layer to create holes in the ground for the
character to jump over. I have used a rectangle to create a 20x10
pixel box and then used the gradient overlay to add a gradient. I
have done this to create a more realistic looking hole in the
ground as I first tried a solid black rectangle which didn’t look
realistic. Using the gradient has worked better as there would be light hitting the top part of the
hole which slowly looses light the further down you go. I made the gaps similar between 2 holes
but shorten the gap for each level to make the game harder and harder every street.
Above is the process on how I created the trophies for the
end of each street. I found a pixel art trophy to give me a
guide then created my own and thought it could be too big,
so I created a smaller trophy but I didn’t have the same
effect as the larger trophy. Once I decided on the larger
trophy, I chosen between a darker or lighter grey and went
with the lighter grey as it looks more like silver. To make
each trophy individual, I added 2 stripes which are the
accent colours for the street they have just completed. I
created the trophy to be with the background but thought
that I wouldn’t be able to make the trophy disappear to
show the character has collected the trophy. To solve this
problem, I will create the trophy when animating my
character so I can create a little sequence for collecting it
When I had drawn the legs and arms for all the stages, I
needed to add the trail as it is the main aspect linking my
products together. I wasn’t sure what colour to choose so I
tried Neon Blue, Light Blue and Neon Green to compare to
the background and I chose the Neon Blue. To help me keep
the trail the same length, I used guides to draw in between.
After moving my background to a 80x120 pixel
document, I used the tween tool to add 300 frames
between the start and the end of the background.
Once I had enough frames to create a realistic
speed for the background, I began to design my
character with the walking, jumping and falling
processes to go with the game. When designing my character I thought about the scale compared
to the buildings and decided to make the character 16 pixels high, 6 pixels for the legs, 6 pixels for
the torso and 2 for the head. I also decided to go with black clothing as the characters in the
advertisements are wearing black clothing as well. I also made the left arm and leg lighter than the
black so the character can be made to look more realistic as you can tell what each limb is doing.
To create the walking, jumping and falling process, I had to create a separate layer for each
movement. To make this easier I add a body layer so the character stayed in the same place for the
whole game and I could turn on the layer for the arms and legs. Doing this took lots of thinking as I
had to think about how the character will land and carry on running, how the character will move in
the air and how the character will move when falling into the hole. Once I got this, I knew my game
looks realistic due to the scale and speed.

To make the character look more
realistic every time they jumped, I
used guides to make sure that the
character stayed in the same place
on the screen and jumped the
Once the character was drawn to how I wanted it, I began to select
the layers for each frame so the character looked like it was walking
and jumping. For my first attempt, I tried eight walking layers but
when I created the sequence, it looked like the character was walking
not running so I halved the movements to speed up the process.
Doing this meant that my final product will look more realistic as it is a
endless running game. After changing the processes, I had four layers
for walking, five layers for jumping and 11 layers for falling as every
frame at the end need a new layer. With these layers I could make my
character run and jump through the first and second street and then
fall down in the third street. To make the jumping process more
realistic, I moved the character up two pixels for two frames then
down two pixels for another two frames to add the leap effect which
created the realistic jump. After the character has landed, I used the
third walking movement to begin running as it is the closest to how
the character looks when landing.
For the final process of the game is when the
character falls into the hole. After fixing the problem
with the hole and the building, I was able to create
the falling sequence. Above is the sequence where I
used one layer for each frame and changed the legs,
arms and trails. To make the game flow better when
the character dies, I had to work out how far the
background moves from one frame to another so for
the last 6 frames I moved the background to fit with
the rest of the animation as this section was done
after tweening and making the sequences.
As I got to the final stage of the game, I realised that the last hole was too far to the right of the screen for
the character to fall down so I removed the hole from the hole layer. Then using the eyedrop tool, I
recreated the gradient rectangle on the background layer so it follows with the buildings. Once The hole
was moved and the character had fallen down, I realised that the game doesn't flow because the
background stops. To fix this, I extended the building so the background moves when the character falls
making the game flow better before the game over screen appears.
same height in each jumping movement to create a realistic jump. Using the
guides helped me to make sure the character didn’t have any sudden
movements across the screen when the animation is playing which ensure my
product will be at a higher standard.

To add some extra animation to the game, I added a countdown to the beginning of the game. I did this by add four more layers and hiding them on all
the other frames so they didn’t appear when they shouldn’t. To make the countdown more visible, I changed the first four frames to 0.5 seconds so the
player has more time to react. To keep the symbol in the centre of the screen, I used guides which also helped me to keep the size of them the same. This
is a simple but effective addition to my game.
At the end of each street I have added a trophy with the accent colours across the front. First I drew a trophy inspired by the trophies I found/designed
earlier. I then duplicated the layer to have the other trophy at the end of the other street. For the first trophy, I added red and orange to the front and
for the second trophy I added blue and green to the front. Once both trophies were drawn, I placed them at the end of their street and made sure they
stayed in the same place as the background moved. I couldn’t add them to the background as I wanted them to disappear when collected. When the
character runs past the trophy, the trophy disappears and then I have created two more layers for each street so there is a flash of the colours around
where the trophy was. I have alternated the colours to create the flashing look and made sure they stay in the same place as the character carries on
running. When the trophy is collected, the player gets an extra 100 points which I created ‘+100’ to appear on screen which it stays in the same place
on the screen so the player can read that they have 100 extra points. All of these steps are shown above. Doing these animations have brought the
whole game together as everything works as one product.

The final piece of the demo level was the game over screen when the player falls into a hole. To design my screen, I need inspiration which I found as
shown above. This helped me to create a plan for my game over screen as I have used ‘GAME OVER’, the score and ‘Play Again?’ ‘Yes’ ‘No’. Once I have got
my ideas, I set up four guides to create a rectangle in the centre of the page. I decided to use pink as the main colour for the screen as the player died on
the pink/purple level but I have shown later that if the game was developed, all the colours could be used. For my first attempt, I used the neon pink as the
boarder and then filled the rectangle in but the pale pink was a solid colour and I needed it to be a tint. To fix this I researched on how to make the colour
more transparent to create a tint look. As shown above, I found the correct menu. To get to this menu you double click on the layer you want to edit, then
you change the opacity on the Blending Option tab (I went to 40%) to create the tint look. I am very happy with this design as the design is inspired by
Jumanji and I feel that it fits with the neon, retro theme in my project.
Shown above is the development and detail of the Game Over screen as I have adapted it to fit everything on. Before I started, I create sperate
layers for each word so I could move them easier as shown to the left. To start with I drew ‘GAME OVER’ with the letters 10 pixels tall, six pixels
wide and one pixel apart. I thought that Game and Over were to close so I moved them apart by six pixels. This meant I had to expand the
rectangle which was 60x40 pixels (the rectangle ended up being 70x50 pixels). The next thing I looked at was which ‘V’ to use as I didn’t think
the first ‘V’ looked right. I decided to go for the second ‘V’ which made the writing look cleaner. After this, I added the score and ‘Play Again?’ to
the screen which both fit in the rectangle, but I needed to add ‘Yes’ and ‘No’ which meant I had to make the rectangle taller and recentre it
before carrying on. For my final details, I added lines under ‘Yes’ and ‘No’ and I added the animation for the final score as there are points
rewarded for collecting trophies. I decided to use black as the internal colour as it means that if the game was developed, the Game Over screen
could be any of the accent colours.

Here is what the Game Over screen would look like for each street in the developed game.

Once I had the colours and opacity right, I needed to
decide if to have the coloured letters in a straight line or in
a diagonal line as show above. I chose the diagonal line as
it created depth to the title and exaggerated the colour
effect even more. For the letter ‘N’ I had two options for
when drawing and decided to go for the 2nd option as it
looked more realistic compared to the first. Then when I
was drawing the ‘O’ I decided that all the letters would be
two pixels wide otherwise the height to thickness ratio
would be off making the title look weird.
Video Game – Menu Screen
The name of the film is ‘Become The Player’. The main game in the film which is the game I created, is called ‘Neon Dash’.
To start the menu screen design process, I found different fonts that can be used for pixel art and what each letter looks like. I then found an example of
the style I wanted to use for my main heading as I had seen it before on social media. After I had my ideas together, I created a trail for the colour scheme I
wanted to use. First I went for the colours of the three trails in my film idea, I also tried the primary colours but straight away knew they didn’t look right as
they didn’t link to my other products. I knew I wanted a black background as I had seen one when researching Pac-Man as it is a simple background that
can have any accent colours on top which would be useful if my game got developed further. Next I started to create the ‘N’ where I made the blue ‘N’ and
then duplicated the layer two times and using the bucket took changed them to teal and green. I then moved the teal and green ‘N’ to create the effect. I
then decided I wanted the letters to be slightly transparent so I changed the opacity to 60% and 80% to compare the two. I thought that the 60% wasn’t
bright enough so I went for the 80% as you could see it was slightly transparent but bright enough at the same time.
To the left I have shown all the layers for the Title. I have had to create three
layers per letter as I have use three colours so they can be moved
individually. To make this process easier, I duplicated the blue letter instead
of drawing them out one by one. Doing this meant I could change the colour
and move them around easily. The only thing that took a while was changing
the opacity on all the layers as it is repetitive. Once all the letter would
correct, I merged the 12 layers for ‘Neon’ and then merged the 12 layers for
‘Dash’. This meant I could move the whole word and move them further
away from each other. In picture you can see the words are close together
so as shown in picture 2 I have moved them to be six pixels apart.
1 2

Video Game – Menu Screen
I wanted to add my characters to the side of the headings so I needed to change the colour of the background as the character is mainly black. To get this blue, I used
the eyedrop tool to find the darkest blue in the sky from the demo level. To get the same character from the demo level I copied the four walking layers from my
demo level animation and used them in my menu screen. Above I have shown that each walking layer has been duplicated twice so there is a layer for a blue, teal
and green trail. Once I had the 12 layers, I arranged the three on screen at once to be in a line so they all run together. I decided to make the characters in a vertical
line as it is one of my ideas for a film poster which would make my products link better. I have then shown that I copied the 12 layers so they can be used for the
other side of the menu screen. As you can see above, I decided to rotate the left characters so they are running the other way as it creates a more symmetrical look
compared to my first option. I found two ways to rotate the layers. The 1st way is to go to edit – transform – flip horizontal and the 2nd way is to select the layer – use
control/command T – right click – flip horizontal. To create the animation, I selected the six layers I wanted in each frame and made the frame 0.1 seconds to make
the character look like they are running – same as the game. I am very happy with my menu screen as it links to the demo level and will link to some of the print I
create later. I also really like the minimal style that is used in the demo level too.
The next stage of my menu screen was the subheadings to move between screens. I started with creating four new
layers for the four sub headings. I experimented with having the sub headings by making them 8x5 pixels high and
then 9x5 pixels high as I didn’t know what would look best. I chose to make them eight pixels high as it gave more
space and looked less cramp. Using eight pixels also looked better with the height to width ratio. Once I knew the
height, I needed to decide on a font as shown above. I decided to go for the right font as it complimented the title
better with the curved edges rather than the harsh edges on the other font. I also decided to use ‘Objective’ rather
than ‘Aim of Game’ as I wanted to keep the subheadings to one word. I then centralised the subheadings.

Video Game – Cut Scene
Overall, I am happy with how the sections of the cut scene have turned out. I am very pleased at how all the pieces link together and that I have create
simpler designs so the production hasn’t been too complicated for me. The next stage is to save them and the edit them together in Premiere Pro.
The only next thing in my script is saying for the paly section is “Have fun and
good luck!” so I didn’t need to create any new animation for it. I decided to
paste my demo level background and then move it six pixels a frame so that it
ends up as the starting frame of the demo level.
When designing my cut scene, I wanted to use the menu screen as the
‘base’ of the cut scene. The first step for my cut scene was deciding what
colour to use for selecting a subheading, I chose bright blue as it contrasts
from the background and stays with the colour scheme. To create the
effect of selecting a subheading, I had to make a new layer to put on top of
the white layer. When the player presses play, a page comes up to see if
they have played before. If they select no then the cut scene will be played
so for this product, the player will select no.
The first subheading is ‘Objective’ as I wanted to go
up the headings. The rest of the page will disappear
and then ‘Objective’ will move to the top of the
page as the title for that section. To move
the new layer ‘Objective’ up I added a few new frames moving it up on all of them. I
then moved to a new document so there are less layers to get mixed with and
added the background of my demo level with a dark blue rectangle on top. I wanted
to do this to have just the ground showing to make the animations simple in the cut
scene. To get the background, I merged all the layers from the demo level and
selected it to copy into this document. I then moved the background six pixels a
frame to create the same speed. In my script, I talked about jumping, collecting
trophies, falling and game over which are the section I show in this animation. To
create these I copied the layers from my demo level and the selected them for
certain frames. One thing I had to remake was the game over page as I wanted blue
so it goes with the colour scheme for the menu screen and the cut scene.
The second heading is
‘Control’ which is shown
to be selected and move
to the top of a new page.
The next step was to show how to make the character jump and to collect
trophies as they are talked about in my script. First I got inspiration for my
space bar design and then recreated my own as shown above. I then
added the jumping sequence to the new document for the control
section and selected the space bar design to appear before the character
jumps. I then showed that the character will automatically collect the
trophy as told in my script, by using the sequence from my demo level.
The third heading is ‘Play’
which is shown to be selected
and move to the top.

Video Game – Cut Scene
To export the animations for editing in Premiere Pro you need to change the image size. To do this go to image – image size – change the demotions to
1080x720 pixels, change the resolution to 25 pixels per inch and select nearest neighbour. Next go to file – export – render video – make sure the format is
H.264 and the frame rate is 25. Once all these settings are correct, press render and it will be saved into the selected folder. Doing this process means that
all my videos will be the same speed ratio compared to the Photoshop file, same quality and same format
The next step for my video game sequence was to edit the video together. First I created the Premiere Pro file and added the exported videos. I then
edited the menu screen video down to the first section and added that to the tracks. I had realised that the exported videos are quicker then the actual
animations so I timed each section on Photoshop and then changed the speed/duration in Premiere Pro to match. I did this for every section I added to
the tracks, you can see in the 5th picture that the videos have become longer than the ones in the 4th video as it makes the running sequence more
realistic. I changed each section as it meant I could adapt to how long the script will be so I can link the video to the script. Using Premiere Pro made this
process very easy as the steps need were simple and I could change the speed on all of them. It also meant I could make lots is smaller animations in
Photoshop, helping me not get mixed up on all the layers.
Before I move on to adding sound, I wanted to
export my video game sequence to make sure it
runs smoothly so I went to file – export – media
and changed the settings to format – H.264 and
preset – YouTube 1080p Full HD. Doing this means
I can see how the animation looks on a full screen
rather than having it surrounded by all the menus.
reached my final sequence as I have added the
new sections and made sure all the sections were
long enough. Tis sequence is 15 seconds quicker
than my first attempt. Next I need to add the
narrator, soundtrack and sound effects.
I have edited the
video game sequence
some more and

Video Game – Sound Track
I have added the narrator by
using Google Translate. I have
copied my script into Google
Translate and then recorded
on Snapchat when I pressed
the speech button. Doing this
meant I could record
individual section of my script
to move it around to fit with
the correct section. I was also
able to add a voice effect on
Snapchat, I chose a robot
effect as it goes with the retro
pixel art game. I then
transferred the files from my
phone to Premiere Pro and
cut them to the correct
section. I then thought the
audio was too quiet so I right
clicked on the files and went
to Audio Gain – Set gain to
and changed that to 15 dB as
the files were very quiet.
Here I have used the same
instruments and settings but
changed the notes and patterns.
Above I have shown that I have used Beepbox for creating the theme tune, sound track and the sound effects. I would have
struggled to create this work using another software as Beepbox is a simple piece of software that can be used by beginners or
experts. To start my soundtrack, I experimented with lots of different tempos and instruments. I decided to go for 180 beats-per-
minute as it wasn’t too slow for the game and wasn’t too quick so it didn’t change the sound of the instruments. I also changed
the Key to C# as it sounded better for my game rather than C. Once I had decided these settings, I started to experiment with the
notes and instruments. For the first instrument I chose ‘Square Lead’ and as shown above in the blue page, I used shorter notes to
create the quicker pace. The second instrument is the ‘FM Organ’ in the yellow page. The third instrument is the ‘Steel Pan’ in the
orange page. I had tried a trumpet but it stood out too much so I changed to the steel pan which created a flatter sound fitting
with the group better. The final instrument is the ‘Standard Drumset’ in the grey page. For the square lead I had the volume near
to full but I changed the other three instruments to have the volume down to a quarter so you could still hear them and the
accompanied the square lead. I repeated this group for 3 pages and then added another page for the 4th page.
I decided to go use lots of scales for this page to separate the soundtrack. I wanted to create a repetitive, simple soundtrack but
when experimenting, it became to repetitive for playing the game over and over again. I decided to repeat the first group three
times and then add this page as it had a lager range of notes so it felt slower. I am very happy that I have done this as it means if
the game was developed, the player could play for long periods of time.
When I was experimenting with the different instruments and notes, I could also experiment with changing the volume for specific
instruments, I could change the tempo of the song and also experiment with different patterns of the pages. Being able to do all of
this enabled me to experiment without damaging what I already have and to be able to change the settings very easily in Beepbox.

Video Game – Sound Track
meant I could have each section to any volume but I decided to keep the sound
effects the same, the narrator the same and the music the same. Being able to
change the volume helped as the narrator was very quiet at the start which was being
over powered by the theme tune.
For the first instrument I chose ‘Square Lead’ and as shown above in the blue page, I
used shorter notes to create the quicker pace. The second instrument is the ‘FM
Organ’ in the yellow page. The third instrument is the ‘Steel Pan’ in the orange page.
The final instrument is the ‘Standard Drumset’ in the grey page. I used this page for
the whole theme song as I knew it needed to be a bit quieter so the narrator could be
heard. It is also slower than the soundtrack so having it repetitive would make it as
annoying if heard over and over again.
Here I have added both Beepbox tracks to my video
game sequence. I have changed the audio gain for the
theme tune to -5 to make it quieter for the narrator and
I have changed the audio gain for the soundtrack to -2
so the sound effects can be heard easier. Doing this
The next step was to over lap the Beepbox music on different tracks and then fade them together. To do this you need
to select the audio – go to effects control – move the blue guide to the start of the fade – press ‘Add Keyframe’ – move
the guide to the end of the fade – press ‘ Add Keyframe’ – the move the dB setting to 200+. Repeat this for the other
audio but have it fading in and then one will fade put whilst the other fades in. I cut the first few notes off the
soundtrack as it ruined the fade so it flowed better. Creating the fades helped create a smoother transition rather than
the solid change from one to the other. I also decided to fade the end out when it is game over. This works as if the
game was developed, the theme tune could be used and then the restart page could appear after the score is shown.
Here I have shown all the audio used. You can see that I have
added all the sound effects in the places needed. I used
Beepbox for the sound effects with a range of instruments. For
the falling sound, I used the ‘Honky-tonk piano’. For the jump
sound, I used ‘Harmonics’. For the power up sound, I used ‘FM
expert’ and for the trophy sound, I used ‘Soundtrack’. I decided
to use different instruments that worked together rather than
changing the notes so each sound is more recognisable. Once
the files where in Premiere Pro, I used the ‘Pitch Shift’ to make
the jump a higher pitch. To use this you drag the effect onto the
audio – go to effects controls – press edit – change the semi
tone setting. This helped as when I changed the speed of the
sound, the pitch became deeper ruining the effect.

Video Game – What I Have Changed
For the cut scene, I have tripled the amount of frames in
the animation for the sections where a subheading is
selected. I did this as before the player couldn’t read them
in time. I had to add more frames instead of changing the
speed/duration as the running animation is effected.
I have added two power ups to the game, a power up that makes you faster and a power up that teleports you three holes ahead. I have started by designing the power
ups with a simple symbol that I wanted to keep simple. I then added that to my demo level and moved it six pixels each frame to stick with the background. When the
character gets to the symbol, I made another layer to create the activated symbol to show the player has gained a power up. I have then created another layer for the
body when the character gets the power up. To create the effect of the character speeding up, I have edited the speed/duration in Premiere Pro making it three times
faster. When the character gets to the second street, I have added the teleport power up. I have done the same for this power up by adding the symbol to move with the
background, added another layer for the activated symbol and then used the activated body layer again. Doing all of this helps to break the repetitive running and
jumping. It also reduces the game by 15 seconds. I didn’t have any new problems with this process as I know what happens when you add layers and export the files etc.

Synopsis
I have used these websites for learning how to write a synopsis.
My finished synopsis is on my blog in a sperate document.
https://www.scriptreaderpro.com/how-to-write-a-synopsis/
https://jerichowriters.com/synopsis/
https://nofilmschool.com/how-to-write-a-movie-synopsis
https://www.theazrianportal.com/blog/examples-of-synopsis
https://nofilmschool.com/How-to-outline-a-screenplay

Advertisement – All
around them with the magnetic lasso tool. Before this, I wanted to edit the pictures on Lightroom to make them lighter so they are more clear. After I had
moved them to Photoshop, I used the magnetic lasso tool to cut around all the six characters and the neon trail. After lots of trial and error, I figured out
that the best way was to cut out section of the background as you could easily loose you progress. The first thing I worked out was you wanted a new layer
for this so the background you delete will be transparent rather than coloured. I then figured out some keyboard short cuts such as: space is to move
around the page without the tool, control – delete is to go back a checkpoint, double click to end loop, alt to zoom in and out but hold space, when loop is
closed press delete to remove background, if needed control, shift, I, can inverse the area selected and control, D is to deselect after the background is
deleted. After the first character, I knew all of these shortcuts which made the process quicker and less repetitive. I still accidently clicked to quickly which
meant the loop ended too early and cut across the object. This is why cutting section out means you are less likely to loose work. As shown above, the
characters are cut out from the background. Overall, this tool is very useful but needs some time to get it right.
To start the process for
creating my prints, I had
to take the pictures for
each section. Once I had
my photos I could edit
them in Photoshop to cut
the magnetic lasso tool to cut around the trail as neatly as possible. I then duplicated this twice for the three colours. To get the colours, I added the
hue/saturation adjustment layer and changed the teal to green and then to blue. To keep the colours, I merged the trails with the adjustments so only that
layer has the effect rather than all of them. Once the three trails were set, I needed to add a glow and fade the ends. To create the glow, I duplicated the
trails three times and going down the layers I changed the gaussian blur. To get to this settings you go filter – blur – gaussian blur and then change the
pixels depending on which layer. I then merged the layers for each trail so I could use the Elliptical Marquee Tool to fade the ends. I experimenting with
changing the feather setting and worked out that 200 pixels worked the best. I then pressed the backspace button until the end had faded so it started to
fade into the background. Using these two effects meant that the trails looked more realistic and brought a sense of speed to my products.
I used a longer exposure
setting to create this trail
with my photography
lights. I have then used

Advertisement – Magazine Cover
I have created a mock up for my magazine cover using
Canva.com as it is a simple graphic design website that
has its own pictures. I struggled a bit with the magazine
cover as it is a simple design but I am wanting to have
half of my face on the cover with a trail behind me.
I have then researched and created a Photoshop page
with the dimensions of 216mm by 280 mm.
Here is my magazine cover with the character cut out and the
trail cut with all the effects on. I had to use the trail to create
a sense of depth as the background is plain so I made the trail
flatter rather than it being across the whole page which
would look unrealistic. I now need to research about
magazine covers for films to get some ideas to help me. I also
need to think how to keep the theme across all products.
I have started off by swapping the face to the other side as I have seen that the left half of the magazine needs the text on because when the magazines are
displayed, the left side is visible. For the masthead I wanted alliteration and wanted to link it to my film so I thought of RECENT RELEASES as my film would be a new
film. For the design of the masthead, I used Impact font and added overlay gradient (I selected inverse to swap the gradient) and inner shadow. I also separated the
letters in ‘RECENT’ which went behind my head so it filled the whole page. I then added a cover line at the bottom and tried a blue or green box or no box and
thought it works better with no box as it flows better down the page. This decision helped me to create a simpler design as I had realised that less shapes makes the
text flow if presented correctly. I then added a rectangle with the same blue from the masthead to keep the colour scheme the same. I then added the text in the
same colour as the background to make it look like the box has the text cut out of it. My next step was my cover line which I used the blue and bold to make the first
section stand out, I then changed the text to smaller and to white to create a contrast from above. My next idea was to link my magazine cover to my videogame so I
recreated the title from the game. To do this, I added three layers of ‘NEON DASH’ and changed the colour and arranged them in the same way to create the retro
effect. Below this I wanted to add a buzz word (BONUS) to make the reader more involved and to make it feel like a special offer. I made ‘BONUS’ in bold to make the
buzz word stand out over the text following to tell the reader about the game. To carry on with the theme, I added the screenshot of the menu screen of my video
game to show the reader what my game looks like. To make it stand out I added a white outer glow to contrast it from the background. (My second font is Ariel)
First attempt – this design was too squashed with too uh on. There was also the box at the bottom which made the reader look there too early.
Second attempt – I made this design simpler by removing the bottom box, removing the bar code and making the middle text smaller to space it out more.
Third attempt – for my final design, I changed the name of the film to NEON DASH (same as game) and then explain that you ‘become the player’ in the film.

Advertisement – Film Poster
I have created a mock up for my film poster using
Canva.com as it is a simple graphic design website that has
its own pictures. I have found a background picture similar
to my idea. I have shown the layout of the characters and
title. I have then researched and created a Photoshop
page with the dimensions of 686 by 1016 mm.
Here is my film poster with the characters cut out and the trails cut
with all the effects on. I have arranged the characters to keep the
same scale between each other as I didn’t want one character to be
unrealistic compared to the others. I have also arranged the trails to
follow the character to make them look like thy are running in the
game. I really like how the trails look as it fades making them look fast.
opacity so you can see the layers behind better and the videogame title has the same settings so I wanted to create the link. For all of my text, I wanted all capitals as it is a key part
of my theme for the package and then I can change the colour for key information. I then added the actors names, I used the character names, and I when researching I found out
that the name furthest left or highest up is the most famous actor as it is the first the reader will see. This doesn’t matter now as my names are made up. After the names and title
were added, I rearranged them in two designs as I wasn’t sure what looked best. I decided that the title below the characters worked the best for my design as the title above lost
the effect needed. My next chose was what colour to choose for the last name, multi coloured, green, blue or teal. I thought all of them except the green looked to dull with the
background as the green contrasts the most. I also chose the green as it is the main colour in the title as it is the top layer so it stands out more. Below the film title, I wanted a tag
line so I came up with some options such as, ‘Do you want to become the player?’ and ‘challenge yourself, become the player’. My main aspect of the tag line was ‘become the
player’ as it is the technology in the film. I decided to use ‘challenge yourself, become the player’ as it was simple, easy to read and doesn’t make the games sound dangerous.
https://youtu.be/yQhC1Kfrs3o
First I resized and moved the characters so I can
add text above and below. Next I needed to add
the film title which I did by adding three layers
to replicate the videogame and magazine title
design. I then changed the three layers to 80%
My next step was to replicate the credits for a film poster and come up with fake names.
Once I had typed it all out, I made the names bigger than the jobs but still thought the layout
of the credits could be better so I organised it better with the job roles on two lines and the
names the same height as the job roles. This design works better as it creates more ‘white
space’ so the text has more ‘breathing’ space, helping to create a simpler design.
Below the credits, I added the release date and found a few ways to present that, June 1, in theatres June 1, 01.06.2021 or coming soon. I thought 01.06.2021 and June 1 looked too
lost, coming soon would be for a earlier poster with less information on such as credits as it is starting the promotion. This meant that In Theatres June 1 looked the best as I spread
the letters out more so it filled more of the line. Once I had added this, I changed it to the same green as the names and title as it frames the poster and fits with the rule of three. I
also put ‘become the player’ in bold as I wanted it to stand out but not effect the green text. I also used the clone stamp to cover up the white logos on the black clothing to create
a more clean look which looks lots better than before. My final aspect was adding the 3D notice as the film can be watched in all the 3D settings available in theatres.

Advertisement – Bus Poster and Billboard
I have created a mock up for
my bus poster (Superside)
and billboard using
Canva.com as it is a simple
graphic design website that
has its own pictures. I have
shown the layout of the
design with the character
running the same direction
and the text being on the
right side. I am going to take
my own picture for the
background, have a plain
background or have a simple
outline drawing of a street
in Tokyo. I have then
researched and created a
Photoshop page with the
dimensions of 6108 by 658
mm and 14630 by 4267 mm.
Here is my bus poster with the characters cut out and
the trails cut with all the effects on. I have made the
characters the same distance from each other so the
trails can be the same length. I wanted to do this to
create a uniformed look so it looks like the characters
are getting ready to start the game. I really like how
the trail glows and gently flows which contrast to the
danger of the game. I have then copied the layers from
my film poster on to my bus poster. I started with the
title as I wanted that to be the biggest subject so I
resized this to see how much space I have for the
other text. I then changed the font size of the three
layers and arranged them to be spaced out. I copied
the layers from the film poster to keep the theme the
same throughout the package.
Here is my billboard design which is similar to
my bus poster as they are both landscape. I have
started with sizing the characters to be close to
the height of the page and I have equally spaced
them out. I have then started with the film title
and sized it to fit on the right side without
overlapping the green trail. I wanted to have
the film title to stand out the most as it is on a 48 by 14 foot poster. I then resized the
three layers of text and spaced them out equally to fill under the green trail without
overlapping the trail. Overall I am happy how these products link together and work
by themselves or with each other.

Advertisement – What I Have Changed
The only change to my
magazine cover was adding
a gradient overlay to the
background. I used the
same blue as my film
poster so they link
together better.
My first change was making the teal character larger and the
other two smaller to create more of a contrast. I then wanted
the teal character to slightly over lap the title with the hand
over and the foot below. To create this effect I changed the
layer to 50% opacity so I could see title through the foot and
then used the eraser to get rid of the section that would be
under the title. I then changed the opacity to 100% so the
character is back to normal. I then thought that the plain
background could be to simple so I looked at gradient
overlays. My options were the green from the title, the blue
from the title and the blue from the magazine cover. I thought
the green created a weird fade and the light blue looked out
of place as it wasn’t on the poster. My final decision was to go
for the title blue as it links to the other aspects and is a
smoother fade down the page. I also thought five names was
too many so I chose the main three characters. This gave
more space at the top making it look simpler. My final change
for my film poster was adding drop shadows to the characters
so make them look more realistic and to create some depth.
The settings were, black shadows, 24 degrees and position 21.
I have changed the same things for my bus
poster and my billboard. I have added the
gradient overlay using the same blue as my
film poster. I have then added drop shadows
to each character. For my bus poster, I used
the same settings as my film poster. However,
my billboard file is so big that I had to
increase the position so the shadows are
visible.
For creating the mock ups, I have had to add
a larger background so I could fit the adverts
onto the product such as the billboard is too
long for the options given.

Advertisement – Logo Design
I have used colours and animals to create some names for my studio company as it is a simple combination for this project. I am going to create
some logos on Wix Logo Maker for each idea and then choose my favourite name and design which I will add onto to some merchandise.

I have chosen Red Dinosaur Studios as my company name. I have then tried out a few colour combinations and thought the red text and
symbol looked the best as there is no boarder and you can put it on a black background too.
I have now changed the dinosaur symbol to see which looks the best. My favourite is the middle
design as it is a simple 2D, one line drawing which goes with my simple design for my package.
I have tried the text in all caps but thought it
looked too harsh with the simple dinosaur symbol.
My final options where red and white, black and white, black and red or white and red. I still really like the red text and outline as it looks
really simple compared to the others. I would have it without the oval as that distracts from the simple design.

My first font was Source
Sans Variable in bold
My second font was
Candara with -50 for
character space
My third font was
Bahnschrift – semi light
with -50 character space
Here I have resized the outline to fit
on top of the text to create a box as
the head and tail are lined up with
the ends of the text
As my design on Wix is not free, I have had to create my own on Photoshop. My first step was to find a
dinosaur that would create a good outline as shown to the left. I then had to use the magnetic lasso tool to
cut around it to get rid of the background. After the background was deleted, I was able to go to settings
and add a colour overlay of white at 100% opacity. This mean that the cut out was white so I could add an
outline. To add the outline, I went to stroke and changed the pixels to 6 and the colour to red.
Doing this on Photoshop was a quick way to create a free logo. I didn’t have any problems as I have used he
lasso tool for my prints so I know the keyboard shortcuts.
Once I had the outline, I wanted the dinosaur to face the other way so I went to image – horizonal flip so it
flipped the layer and the dinosaur was facing the correct way. This meant my design looked more like the
Wix design.
Here is my final design for my Red Dinosaur Studio symbol. Next I need to find a font for my text.
I have decided that Bahnschrift was the best font as it was not to thin but not too thick as I
waned the font to be the same thickness as the outline.

Advertisement – Merchandise
Here I have shown what I have made for my mock up products. I have copied and arranged layers and then exported them as PNG files so I could add them
on to the products. Doing this was easy as I had everything already made and the background was white so I didn’t have to keep resizing them to fit on
certain products.

Video Game 2 – Demo Level Backgrounds
To start my second video game, I needed to create backgrounds for the levels and to decide on
the colour schemes. My first level is the blue and greens from my title to link this game to my
other game. I went for 120 by 800 pixels as the game is a falling game so I needed a vertical
background. I then added the title at the bottom as the landing platform but decided to change
Neon Dash to Neon Fall to show it is a different game. To do this I added a rectangle over Dash as
it is a layer with Neon, I then repeated the steps for creating the title with the three layers,
colours and opacity. I then drew the platforms which were 30 pixels apart but I thought the gap
was too small as I wanted a larger character to fill more of the screen. I changed the gaps to be 60
pixels which gave more room for the character to move about when animating. I wanted to add
the level number at the top but then realised that when I moved the background into the
animation document, the level number was not visible so I moved it down to the first platform.
For my second level I wanted to use the same colour combination from my accent colours in my first game. I used the pink as the
background and used a gradient to show the player how long is left for the level. I copied the finishing platform for the ending to
create a theme throughout the game and to link the levels together better. I then copied the platforms from level one to use as
guides for the positions for level two to keep them the same and to have equal gaps between them. I then erased the platforms
to create gaps for the character to move through and leaving the platforms for the character to dodge or hit. I then copied the
level one layer and changed the one to a two. I then used the bucket tool to change the blue to the pink which is at the bottom
of the level to link the top to the bottom. As I had added the level sign before animating, I needed to move it down to the first
platform so it is visible on the first screen of the level.
For my third level, I changed the background to red with orange platforms s it was the other colour combination for my accents
colours in my first game. I have copied the Neon Fall layer to use at the bottom for when the player competes the level. I have
then created the guides for the platforms and erased them to create the routes to the bottom. Again I have added the level sign
but changed the number and colour and I also had to move this sign down too for the animation.
For the first level, the character is a male as it is the character in my first game and there are only male characters in my film.
For the second level, the character is a female as it is the other default character and I would use female characters in my film if
it was actually produced. For the third level I have created an alien character as it different but goes with the neon colours.

Video Game 2 – Demo Level Game Play
Above I have started to make my character. First I have created a body layer for every frame so I could swap the arms and legs for falling, walking
and standing. I have then created the arms and legs for falling so I could add this layer to the body layer when falling which is most of the animation. I have
also created a standing layer for the beginning and end of the level and a walking layer for when the character starts the level. I have also redrawn these
but flipped for when the character lands facing left, walks of the platform left and when the move left when falling as I wanted to make the 2D design look
as realistic as possible. As you can see I have used grey for the right limbs and black for the left limbs to make it easier to see when moving.
Once I had the motions drawn, I moved the background onto the first frame of the animation. I then added the right body and standing layer as the
character was not moving yet. For the next frame I moved the character to the right five pixels and then changed to the walking layer. For the next frame I
moved the character to the right and down and changed to the falling layer to create the falling look. I then moved the character down 10 pixels to the
point where I wanted the character to be on the screen so the player has time to react. For the rest if the frames, I moved the background up 10 pixels a
frame (I didn’t want to use the tween tool as the character resets to the start so I would have to experiment with how many frames needed for a constant
speed) and the character no pixels or five pixels left to right to keep a constant speed going. I animated the character to hit the platforms two times so I
added the game over sign which was under the character to create some depth. I also changed this frame to one second to give the player time. To restart
the animation, I duplicated the last attempt of the level and then carried on the animation from before the character hits the platform to the end where
the character lands. I will then add a level completed page with a score and a character unlocked page.

Video Game 2 – Demo Level Game Play
All I changed from the male character was adding some more pixels for the hair to make this character more distinguishable from the male character. If
this game was developed I could change the outfit slightly to look more ‘feminine’ rather than ‘masculine’. I then used the same layers and process to
create this level. As you can see the character walk of the platforms and hits a platform once but completes the level on the second try.
I have started off by creating a new character, I decided to go for an alien as it works well with the neon colour scheme and green works with red. To
change the character, I used the bucket tool to change the black pixels on all the layers to green and all the grey pixels to a paler green to show which
limbs are where. I removed the hair and added a blue ear type feature to help show it is an alien as it is a feature that fits with the idea of aliens. Once I
had changed the character, I used the same process as before for the other two levels which is the most effective way I found to do this.
easier target for the player. To add the coin to the animation, I used a guide to keep the coin moving in a straight line from frame to frame to create a
smooth animation. I also added a flicker which alternates between frames when the coin is collected to make it clear a coin has been collected. I decided to
have four coins for these levels but as the levels get longer, more coins can be added. I also added some coins which are harder to collect which could
persuade the player to risk the game. At the end of the level, the coins are added onto the points collected from completing the level (the amount of
platforms pasted). To create the animation of the coins, I moved the coins to stick to the background but kept them a separate layer to disappear if collected.
My last aspect that I wanted to add to this game were coins
which are worth 200 points to your final score. First I
researched for coin designs and found one that would work. I
then drew it small and large to see what would for my design
and for the scale. I decided to use the larger coin as it is an

Video Game – Demo Level 2 Pages
Once I had finished my demo levels, I exported them with the image size 1080 by 720 pixels for a higher quality image. I then imported them to a Premiere
Pro document and put them in level order. Doing this gave me the base for my videogame sequence so I could add and edit where needed. I then needed
to create a way to lead one level to the next so I first made a level completed page with the score of the level. I used the colour from the bottom of the
gradient background as the solid colour as it is a brighter colour so the content is more visible. I then added the coloured platform to show how many
platforms were in the level and I then added the coin to show how many coins were collected in the game. Finally, I added the score up and put that last.
To make this useable for all levels, I copied the layers into the other documents and changed the background and platform colour and the score if needed.
I also wanted to add new characters so I needed a way to explain that so to keep the link between the level completed page and the character unlocked
page, I uses the same size text and kept it white. I then copied the character layers for the right body and standing to show what the character looks like.
Doing these pages meant I could add more to the theme of the game and link the smaller aspects together so they work as a bigger design. I then exported
these pieces of animation into the Premiere Pro document and added them at then end of each level to make the sequence flow. The way I created these
worked well and I didn’t find any problems as I wanted to keep the design simple like the rest of my adventure film package.
again, I would redraw Neon too so they are both the same to create the finished look. I have explained before, I drew ‘FALL’ and then duplicated it twice
for the teal and green then changed the opacity of each layer to 80%. I did work out that merging the layers then changing the opacity didn’t give the
effect I wanted as the layers weren’t visible through the ones on top. I then removed the six characters from Neon Dash there are new characters in Neon
Fall, I didn’t add these characters to the menu screen and I wanted a simpler design with less distractions. I also really like the gradient background from
the game background and my prints so I added it to the menu screen and part of the cutscene to add that small link again as it is the first thing you see
when you open the game. Finally I exported this document and imported it to Premiere Pro and added it to the start of the sequence. I then cut the file so
there was the menu screen, have you played before? page and then the individual sub heading when they are selected. I used the same format for my cut
scene as I wanted the same style as Neon Dash to make them more recognisable as games that are linked.
I decided to use the same menu screen as
Neon Dash but change the name as it is a
different game. However, when I drew ‘FALL’ it
didn’t come out as bright as ‘NEON’ which
makes the title seem a bit off but if I did this

Video Game – Demo Level 2 Cut Scene and Sound
Here I have shown what I have created for my cut scene too fit the script I created earlier
in this project. I made this in Photoshop by saving Level 1 as a new document so I could
edit that. I removed the coins so it was blank but kept the falling animation. I then added
a layer for +100 points and a layer for +200 points which were added to show you that
you gain points when you pass a platform and when you collect a coin. I used white pixels as the text later in the sequence is white and it is the easier
colour to see on the background as there are many colours. I then added the arrows I drew to show you control the character and added the falling
through a coin to collect it. I spaced these sections out to fit the narrator and script so the part being talked about is on the screen.
One I had all the sections created
and exported, I could add them to
Premiere Pro and edit the speed
and order. I was able to cut
sections out which as the frames I forgot to edit for the cutscene so it ruined the last 0.2 of a second. I mainly used the speed/duration tab to slow down
the cutscene to fit the narrator better. I then added the theme tune at the start and then the soundtrack for each attempt at the level, I used the theme
song and soundtrack from Neon Dash I wanted them to link and work together but it also saved me time as I didn’t have long to create a new game from
scratch. When the audio files were starting and finishing at the correct points., I used the skill I learnt and explained earlier in my production log. I faded
the audio files by adding keyframes to create the fades as the audio has harsh transfers rather than softer ones which work better for the game. I also
used this skill on the sound effects I put in next. For the sound effects I used ‘Chip Wave’ for the running off the platform, ‘Harmonics’ for collecting a coin,
‘Pulse Width’ for hitting a platform, ‘Spectrum’ for landing at the end and ‘Soundtrack’ for the character unlocked page. All of these sounds work together
as they sound quite similar but also different as they are for different things. I used a couple of these instruments for the sound effects in Neon Dash so
there is another link between the two which helps carry the theme to make sure the two games are know to be for the film Neon Dash.
Here I have shown the first way drew my characters but thought it looked wrong after I
have edited the sequence. My first attempt was having the lighter colour swap from
one side to the other for the limbs which looked like it was realistic and really effective
but I realised that the light would be on one side and wouldn’t switch between the
sides. The body would swap and the legs and arms would change but the colours would have to stay the same. I then went back into the documents and
changed the colours on certain layers to make this change. I did this for the cutscene and for level one, two and three. I then exported the files and used
the new files to change the sequence. I wanted to change this small detail as it makes it slightly more realistic and I didn’t want half of it to be changed so I
changed it all for the sequence. Overall the production of my second game went smoothly as I used my strengths learnt from my first game.

Demo Level Design

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Demo Level Design

Similar to Demo Level Design (20)

More from jackhurst8

More from jackhurst8 (20)

Recently uploaded

Recently uploaded (20)

Demo Level Design