Task 1 report: Unit 59 — June 21, 2017

Task 1 report: Unit 59

  • Web page construction includes text, colour, fonts, images, table’s hyperlinks, web language terminology and metadata.

Fonts: The fonts for the both websites are really simple but it is their main website so it needs to be readable and simple. The fonts vary from bold to normally depending on the background behind the text, also it vary’s from different colours but they normally use simple colours like black and white, this is mainly because if people are colour blind they will still be able to see the text clearly and not blurry. With the text colours it makes look really professional which is what a big company like EA and Valve need. The fonts are consistent on every page for both websites.

Colour schemes: The colour schemes are very different. In the EA website the colour scheme is mainly bright colours e.g on the very first page on this website are White and a little bit of black for the header background. Also the pictures of their main games that they have created which make the colour schemes bright and interesting. On the Valve page the colour schemes are dark colours. On the first page on this website the main colours are orange, black, brown and a little bit white which is the complete opposite of the EA website. The colour schemes on both websites are consistent and nicely laid out.

Images: The image quality on both websites are really high. The structure of the image layouts are neat and tidy so they have had thought on where they will be, they weren’t just placed randomly. They also have made it clear on what they want you look at first by having the main image being the biggest size, and then putting at the top or in the middle of the page. On the Valve website the images are presented as a slide show in the top of the screen. However on the EA website the image is at the top again but as a single image with an animated button in the middle. The images on both websites are responsive and load instantly when you load the website.


Tables are a way of laying out your website to make it easier for you to place images and just neatening out the image and button layout. They are also a good way to display things like bus times, train times and restaurant menus. In Dreamweaver you can code in tables to make it a lot easier for you to layout your website and make it look a lot more professional.


Hyper linksHyper links are a really good way to create short cuts to another page. Sometimes people use hyper links instead of just using an average button. They are mainly used to navigate around sites and sometimes takes you to external sites such as social media.

Metadata: This is a bunch of data that describes and gives information about other data. They are also a part of a HTML code that also constitutes the pages of your website that has been published. In YouTube you can have tags in the description, so if someone were to type in one word that was in the description then it would be one of the few videos that show up. These are meta tags where you put them in your code so that if someone puts those key words into google then it should show up on the first page based on your domain.


HTML: This stands for Hyper Text Markup language. If you type in <html> it tells the browser that this is html. This is also a tool that also lets you create web pages by coding. While you use html you will normally see a block of text which is surrounded by tags, which indicates the browser text/images on how they should appear.

Image result for html

XHTML: This stands for Extensible Hyper Text Markup Language, this is also used to design websites and webpages. This is a lot more strict then HTML and is normally based on XML and HTML. Different web browsers can display the web pages incorrectly. There is more then one way to do a poorly written HTML.

Image result for xhtml

  • Cascading style sheets

This is a style sheet language using to describe the presentation of a document written in an a markup language e.g html. This is often used to make the visual style and layouts of your website and web page. You can also change the colour, font and image size while using this code. This is really complex and difficult to learn because there is so much you have to do and one mistake will corrupt your code and you have to do it all again until you finally get it right. If you set the codes out nicely then it souldn’t be a problem to find the issue. A few examples of these codes are <html>, <body> and <xhtml>.


Image result for Cascading style sheets

Website — June 13, 2017


Website link: https://mrbottlessite.wordpress.com/contact-us/

This slideshow requires JavaScript.


Apart from a few things my website went as well as i planned, I would’ve liked to add a lot more into it but the chooses were very limited because i was using WordPress. In WordPress my main problem was being able to choose the right theme, which allowed me to choose the right widgets, fonts or to have complete control for where everything went. Apart from all of that I think that my website went just as I planned, I didn’t add any social pages because I thought there is no point in making an email address and a Facebook and Twitter page.

On my first page there is a bottle animation for galleries, in the animation it has Antique glass bottles sliding a long with 2 bottles on the end smashing, then it has text coming up saying coming soon. I couldn’t have a drop down menu under the word galleries, this was mainly because the website theme didn’t have the option for me to add one. The bottle animation was really fun to make but a bit time consuming because I had to animate and get the perfect picture of the bottles which took me a while to find.

For the header I had to make it in after affects. This was because of the spinning wheel on the S in the logo, after that i put it in Photoshop so I can make the GIF a loop. I had to add this onto my website because on the original Mr.Bottles website it had the bottles animation and the spinning logo, these 2 reasons stood out and made the website look unique. The logo didn’t take me long at all to make because all I had to do was the rotation of the wheel on the S to twice continuously.

On the bottle cleaning page I just wanted to make it look simple but professional that’s why before the top 3 sentences I put a few ==, this was to make it stand out, so as soon as people clicked on that page it will be the first thing to look at. The main reason why I did this was because they are the most important words which explain on what that web page is about. There aren’t really any pictures on it because i didn’t really know what to add and there is a PDF file which takes you to a page and shows you how to clean your glass bottles.

On the contact us page there isn’t really much added onto it. It is just a form where you can send the company an email for help or feedback. On the About Us page there is’n also much added onto it, it just says what the website is all about and what they do. On the Need An Appraisal page it just has a picture of a antique bottle, and just text on how you can get an Appraisal for your Antique bottle. Also I added the == to space the paragraphs and make it stand out a bit more, it also gives it more of a unique feel to it.

Production planning for website — May 15, 2017

Production planning for website


Website Title


Who is the website for? 

Mr Bottles company

What is the website going to be about?

This website is about cleaning bottles. They have facts about people stories of being bottle collectors from when they first started or how they have given up bottle collecting.

Give a short description of all the pages of the website, what they will contain, and their relevance or benefit to the client

Galleries: This will contain: a header with a menu in the top middle, logo in the top left, the background will have a desk, when the page loads there will an animation, after the animation has happened the bottles that have to pages will smash and say coming soon. At the bottom of the page it will have a copy right disclaimer. Also the mobile will be similar with the logo in the middle.

Switzer: In the header this will contain a menu which is consistent throughout the pages, the logo will be in the top left, and there will a title saying “Switzer”, below that there will be a list of all the different Switzer bottles with a picture of it.

Medicine: In the header this will contain a menu which is consistent throughout the pages, the logo will be in the top left, and there will a title saying “Medicine”, below that there will be a list of all the different Medicine bottles with a picture of it. there will also be a copyright disclaimer. on both of these pages.

Bottle cleaner: There will be the menu at the top as always, in the middle there is going to be facts about bottle cleaning,  the logo will be in the top left, there will be social media links in the bottom left, and there will be a copyright disclaimer below the facts at the bottom of the page.

News: This will redirect you to the twitter news page where it will be updated.     

Need an appraisal: In the top left there will be a logo, in the top middle there will be a menu with buttons, in the middle page there will be text about the appraisal, PDF file for the appraisal, in the bottom left there will be social media links.

About us: The header will be consistent with the logo and menu, in the middle there will be a few lines of text telling you facts about the company and what they do, in the bottom left there will be social links, and in the bottom middle there will be a copyright disclaimer.

Contact us: The header will be consistent with the logo and menu, in the middle there will be your options that you will have to do to send them an email if you have any issues, in the bottom left there will be social links, and in the bottom middle there will be a copyright disclaimer.

Give an indication of the time schedule and when you hope to deliver the website by

The work will be handed in by the 21st of June 2017

 Mind map of ideas for the website

Mind map.png

The group who helped with the mind map:

Jake Bidemead

Sam Swift

Michael Sutherland

Steven Lake


Equipment needed to make the website 

Equipment needed website unit

equipment_needed <——– Editable link

Wire frame 

This is just a basic mock up of where thing are in my website going to be.

Desktop version pages

This slideshow requires JavaScript.

I forgot to change some of the menu buttons. The original ones are: Galleries, Bottle Cleaner, Need an appraisal, About us and Contact us.

Mobile version page

Screen Shot 2017-05-22 at 14.50.14.png

Ipad version page

Screen Shot 2017-05-22 at 15.01.33.png

Client feedback 


Production schedule

Production schedule.PNG

Meeting Minutes

meeting minutes.PNG

Web Production Diary

Title of production: Website design

Name: Sam Swift

Day/Date: 26/05/17


This week I managed to get all the planning done for the website design including all the graphics made, also I’ve done all the text for the website. Next week I am planning to get most of the website finished e.g. header, footer, and animations added onto the website.

Graphics design



This is the bottle animation I made like on the main website.



all I did for this is add rotation to the spinning Circle. Just refresh the page for it to start spinning.


For the main title font

Capture 2.PNG

Text font but in white.

Capture 3.PNG


Old background.jpgBackround.pngDesk view.jpg

Folders screenshots 

This slideshow requires JavaScript.

all of the text in the website I am keeping the same including some of the photos.

How I made my animation — May 14, 2017

How I made my animation


Screenshot 1.PNG

This is the main intro composition where I put all of the comps/ images in the Project.

Screenshot 3.PNG

This is how I made the zombie shatter effect, to make this all I did was I went to the effects and presets section and dragged the shatter effect onto the zombie image and adjusted the settings.

Screenshot 4.PNG

These are the main settings for how I made the head shatter.

Screenshot 5.PNG

This is the zombie falling scene where the zombie gets shot, then the head blows off and blood comes out.

Inventory scene

Screenshot 6.PNG

This is my inventory scene, the main key frames I used were Opacity, and position, then I just messed with the spacing of them so that they are on time with the animation movement.

Binocular scene

Screenshot 7.PNG

This is the main composition on how I made my binocular scene. All i did was do the position of the binoculars and move it right to left and then got all the zombies and made them parent to the live action so they would stay in one place.

Clock scene

Screenshot 8.PNG

For this scene I made the hands of the clock rotate 12 times in 2 seconds and had the sound of the clock ticking in time with the hands rotation, I also move the anchor point to the bottom of the hand.

Dead scene

Screenshot 9.PNG

All I did for this scene was that I got the black boxes just below the “D” to slowly move down to make it look like the blood was dripping down.

Blink scene

Screenshot 10.PNG

All I did with this scene was that i added feather to the edge of the boxes to make it look like eye lashes. Then I positioned the boxes to slowly close in a few times.

Sniper scene

Screenshot 11.PNG

For this scene I made the zombie that got shot and added a shatter effect to make it look like the head was blown off then I added a particle affect to make it look like there was blood coming out.


Evaluation — May 8, 2017


How did you come about with the idea for your animation?

For my ideas I just looked around my house and looked for what I could do for my live action. So I knew what type of genre my animation was which is Horror/survival, so I looked for creepy parts around my house, after that I thought what time of the day to record, since the most creepy and eary time of the day was night time I decided to do it at night but not too late so you can actually see what’s going on in the animation.

For my intro i had the Resident Evil logo and rated 18 logo appear, but then I thought it would be cool to have a zombie walking across the screen, getting shot, then black screen twice with a heart beat sound to make it a bit more dramatic, then the logo’s appearing after the last heart beat.


Did you think about the target audience whilst planning and creating your animation?

When I was creating my animation I knew that the age rating was 18+, so I instantly thought that since it is an 18+ horror game trailer then maybe I can add a bit of blood and gore because that is what I would want. I also knew that Resident Evil was a 3rd person game but i decided to make the trailer a First Person side stroller which is what most of the games these days have. The target audience mostly likes good graphical games, so I decided to make the graphics style photo realistic, so the detailed character designs and live action backgrounds will easily make it more realistic and every time a zombie got shot blood will come out just like it would in real life.

For the sound track I wanted it to be really eary and intense which fits in with the horror genre, in most of the horror games/films to make it scary the music normally starts off quiet then gets louder and louder which build up suspense then something happens which normally scares people unless they are already expecting it, after considering this I decided to apply this to my animation.


I found the feedback really helpful, most of the feedback was really positive. Overall the score I got was 145/200 which I am happy about there was also a verity of feedback that was positive or helpful that could possibly help me for the next time I do an animation. One of my favorite comment was “Dramatic intro/ eary music to accompany it”. This was my favorite because it was what I was going for the dramatic suspense in the intro so that the audience are instantly going to know what the trailer genre is going for, you cant say that the genre is horror if there is just going to be comedy in it.

Aesthetic Qualities: Here my feedback was mainly positive. The feedback that most people gave me was “The visuals was very good” I found this helpful because it helps me know what I need to improve for next time. Someone also mentioned the zombie in my intro and said “The zombie was really creepy” I liked this comment because it shows that I managed to do what I wanted to do.

Screen Shot 2017-06-26 at 10.23.53

Technical quality: Here my feedback was really helpful one of the comments was “The animation and effects were good but try and make it a lot more smother” This was helpful mainly because it lets me know that I should work on how smooth it looks. I found it really time consuming, also I found that I kept on rushing this animation because I had so many problems. One guy also gave me an example off when the zombies head explodes.

Screen Shot 2017-06-26 at 11.10.35

Motion Graphics: This was also really helpful feedback one of the comments were “The motion graphics were very good but you should’ve added a bit more” This is also what I was struggling to do because of how time consuming the animating was. Also it was my first year using this to create a project so most of my time was spent learning the program after affects, this is mainly because of how little time I had the animation. Another person said that “The Zombie smashing was a good effect”.

Screen Shot 2017-06-26 at 11.28.11

Sound: The feedback on this one were also very helpful, one person said “The sound effects and soundtrack was very creepy and on point to the animation”, I like this comment mainly because this is what I was aiming for. Next time I make another animation, I will try and add more sound effects and upload them with high quality.

Narrative/Story: The feedback on this was also mainly positive but most of the comments said “The animation could’ve been longer” and also one of the comments mentioned that “The last scene when you shoot the zombie, this could’ve been longer”, I also agree with the second comment because I found it difficult since this is my first year on After Affects so I couldn’t find the time to learn how to do more effects and animation.

Screen Shot 2017-06-26 at 11.52.46

What I thought about the animation 

I felt that my animation went really well, It didn’t go as well as I wanted it to in my head but since It was my first year properly using After Affects to make an animation, I was really proud of it. I do wish that I had more time to make it more smooth and longer then 1 minute, so I can improve the narrative. For the sound I did end up having to take some sounds of the internet, but I did go into Logic Pro X and heavily edit them just so I had my own input on them because they were impossible to make, everything I tried sounded nothing like the original thing.

Animation —
Presentation for animation — March 12, 2017
Task 2: Originate and Plan a Motion Graphics Sequence — February 24, 2017

Task 2: Originate and Plan a Motion Graphics Sequence


20e (1)

The game that I am doing my animation on is Resident Evil. The graphic style that I am going for is photo realistic. The reason for why I am going for this type of graphic style is because it looks so much better then the original game. The original game came out in  1996 and back then they didn’t really have good software’s to make the game and the animation smooth and realistic.

In the original game when they opened the doors it was a completely different scene so it was not that good, but now everything is made in one scene and the animations are smooth, now the camera angles are able to move with the player because we are able to make amazing graphics in 3D.



Panel 1


In this panel in 00:00 seconds there is just white screen and everything has 0% opacity, Then in 02:00 seconds the main resident evil logo changes from 0-100 opacity, then the reflection changes from 0-15% opacity in 02:00 seconds. After that at 02:00 seconds the zombie character appears and walks across the screen until 08:000 seconds. At 07:05 the 18+ logo appears from 0-100% opacity.

Panel 2


In this panel there is a black background at 08:01 seconds then at 10:00 seconds the text “Not real gameplay” shows up in the font Resident Evil in white, from 0-100% opacity.

Panel 3


In this panel there is a black background with a old clock, from 10:01 seconds to 13:50 seconds the hands of the clock go from 1 pm to 12 midnight rotating clockwise.

Panel 4  


In this panel at 13:51 it fades in to this scene where you are holding a sniper, you are also on a balcony where a bunch of zombies are slowly walking towards you.

Panel 5 


In this panel you are looking through the binoculars to get a better look at the zombies, because its dark the night vision in them will give you a better look at your target. From 13:53-14:50 seconds you move from left to right.

Panel 6


In this panel you are looking through the sniper scope so you can kill your target, from 14:50-15:00 you zoom in onto the zombies head and shoot him. After that  from 15:01-15:50 seconds you move from middle zombie to right zombie and do the same process.

Panel 7


In this panel you zoom out of the sniper scope from 15:50-16:20 seconds and the screen starts to change from 0-100% opacity from 16:20 to 18:00 seconds

Panel 8


In this panel the screen is black from 18:00-18.03 seconds.

Panel 9


In this panel it is the same process up to 20:00 seconds.

Panel 10


In this panel from 20:00-22:00 seconds the word dead appears from 0-100% opacity, after from 22:00 to 24:00 seconds blood starts to drip down.

Concept art 

These are a few concept ideas for the sniper model that I am going to use for the characters main weapon. The picture to the right is the cross hair that I am going to use for the sniper scope.

Zombie 1

Zombie 2

Zombie 3

Resident Evil logo

Residentevil-logo.svg20e (1)Untitled-1Resident_evil_series_logo 


Final assets for Resident evil animation

These are my final asset designs for my animation.

Zombie 1 final graphics 


Zombie 2 final graphics


Zombie 3 final graphics


Binocular final graphics



Screen Shot 2017-02-24 at 22.57.04.png   sniperscopeX2.jpg



How I made Zombie 1


How I made zombie 2 

Screen Shot 2017-02-24 at 15.52.59.pngScreen Shot 2017-02-24 at 15.58.19.pngScreen Shot 2017-02-24 at 15.59.58.pngScreen Shot 2017-02-24 at 16.02.40.pngScreen Shot 2017-02-24 at 16.04.18.pngScreen Shot 2017-02-24 at 16.13.39.pngScreen Shot 2017-02-24 at 16.07.36.pngScreen Shot 2017-02-24 at 16.33.03.pngScreen Shot 2017-02-24 at 16.35.46.pngScreen Shot 2017-02-24 at 17.39.14.png

Mood Board

Moad board 1.JPG

Screen Shot 2017-02-24 at 23.15.26.pngmood boars.jpg

Mind Maps 




Task 1: Production Techniques Report — January 25, 2017

Task 1: Production Techniques Report

Early forms of animations

Animation is a technique of capturing different drawings and putting them in separate frames over time to create illusions so that it makes the object look like its moving. There are many different types of animation that creates different types of movement for a unique style such as 2D animation makes the animation look really smooth depending on the frame rate, Pixilation animation is a lot more jittery then 2D animation because you just take out some random frames to give it really creepy movement.

Stop Motion: This is animation is captured in one frame at a time, they also have physical object moving between different frames. When yo play through the frames it creates an illusion that the physical objects are moving in a sequence.The main industries that use this type of animation are Film industry, Game industry and the website industry. The founder of stop motion was J. Stuart Blackton in 1897.

Image result for stop motion gif

2D Animation: 2D animation is done only using the X and Y axis to animate objects to move without depth and rotation.This also can create a really smooth movement depending on how many frames you do just for one movement and also you have to draw out every frame to make the movement look more realistic and not just a bunch of random movements. The first person to make 2D Animation is Emile Cohl in 1908.

Image result for 2d animation gif

Mutoscope: This form of animation is an early motion picture device that creates illusions to see moving objects that are photos and it just flicks through them depending on how many photos there are that will depend on how smooth the animation will be e.g if there were about 1000 photos for a scene the animation would be really smooth but if you had like 5 it would be jittery and you wouldn’t be able to add barely any detail to the animation. The founder of the Mutoscope is W.K.L. Dickson in 1894

Flip Book Animation: This form of animation is just a more modern version Microscope where people hand draw there images that they want to make an illusion with. They also once they have finished with drawing the animation all you have to do is go to the first picture that you have drawn then you just flick through all the pages and then you will get the illusion that the images are moving. The founder of flip book animation is John Barnes Linnett in 1868

Image result for flip book gif

Clay animation: This form of animation is done by people making the character models or assets that are in the animation in clay and changing the position of the models to make it look like they are moving and have a physical features of a human or whatever object they want. This was first made in the 1900’s, the first and most famous animation was Wallace and Gromit made by Aardman Animations.

Image result for clay animation gif

3D animation: 3D animation is animation using only Z axis which enables you to animate in depth and rotation. 3D is a really good way to make games, films and short films look realistic and awesome, because of all of the affects that you can do to make a character move smoothly and anything you want. It also is really good for entertainment because whatever you use it for you can do so much since you can use the Z axis which gives you a wider range to animate. The first person to make 3D animation is  Ed Catmul in 1972.

Image result for 3d animation gif

Thaumatrope: This is a device in the 19th century that has a disk with drawings on each side. This creates an illusion that it is moving if you rapidly spin one side to the other. The discs are also attached to a string that will make it a lot easier to rotate rapidly enough to make it look like it is moving. The person who invented the Thaumatrope was John Ayrton Paris in 1825.

Image result for Thaumatrope gif

Zoetrope: This is a cylinder with holes around the outside so that people can look through, then people draw what they wanted to be animated but they will have to do it in stages like frames but on paper, then all you have to do is spin the cylinder around and look through the hole and you will be able to see animation, this will probably not be as smooth as 2D or 3D because you cant fit as many frames and edit as well.  Because it is cylinder you will not be able to do a full scene because there is a limit of how many frames you can do. The person who invented the Zoetrope was William George Horner in 1834.


The Magic Lantern: This consists of oil painting, a simple lens and a candle or a oil lamp. In a dark room the image will appear projected onto a adjacent flat surface. It was mainly used to project demonic, frightening images that convinced people that they were witnessing the supernatural. Some slides for the lanterns contained moving images which would scare people even more because in the time of 1650 it was really rare for animation to exist so if they saw a moving image they would easily believe that it is real. The person who invented the Magic Lantern was Christiaan Huygens in 1650. 

Image result for the magic lantern.gif

There are many different uses of animation e.g you can use animation for tv shows like cartoons and anime. Animation can also be used for games to make them more realistic and interesting for example in the background of games like Mario and Sonic. Another use for animation is advertisement, adverts like Bupa and direct line use animation because it catches the audiences attention instead of a boring still images people will remember a certain advert if it had its unique animation and style to it.

Education is also a use of animation because it will help people remember different facts and statistics about a certain subject. Also if someone just used still images students will be bored of it and wont pay attention where as if it was animated it will draw their attention and they will learn it without even realising it. This is also mostly done in like power point presentations or films, another example is halifax, they use top cat to interest kids and make them listen because of how important the message is that they are trying to give, and also it makes it interesting and fun for them. Also Halifax gain interest from adults as well.

Animation is also used in creative arts are to show and produce the skills needed to achieve for their grade for example in an IT class they will use animation in a presentation so they can show the students the type of skills that they will need and what it will need to look like in there project.

Animations are also made in online sites like YouTube, Twitter etc. its mainly used for entertainment purposes but they also use it so they can teach and make it easier to navigate through the website. They also use it in game trailers to make the game more unique, also sometimes games like clash of clans make a 3D animation when the actual game is 2d top down but they do mention that it is not real game play footage. Some trailers use 360 view so that people can look and turn there phones to 360 degrees and have different camera angles.

Cinema 4D: Cinema 4D is a 3D modelling software that allows people to get primitive shapes and extrude and create what they want but that’s not the only feature, it also allows you to animate your 3D objects into moving any way you want it to, it also lets you move your camera freely to record things like a cinematic for your animation scene. You can also add in texts and make them move in a way that fits your camera movement which is called motion tracking. An example of a show that was made by cinema 4d are models made in games and 3d animations.


After Affects: This is also a good way to do 2D animation, this allows you to make awesome special effects for your animation scene. This software doesn’t allow you to add sound on it because it is purely based on animation. Its not just based on special  affects you can also create character and use tools like the puppet tool to make realistic movements, but the only problem with it is that you can mess up the points where you want to move them so it stretches instead of having smooth animation. You can also change the frame rate up and down which is really helpful to make different affects. After affects was used to make a film called Iron man 3.


Maya: This is also a 3D modelling and animation software that allows you to model character and assets in your seen. This is a really good program because the camera movement is a lot better then cinema 4D and it is also really good for animation too, you can make your scenes look realistic and if you render something it is still the same as cinema 4D because you need a low poly count to render faster depending on how good your PC is.


Cel Animation: This is a transparent sheet on which objects are drawn or painted for the original hand drawn animation. The person who invented this was Earl Hurd in 1914. An example of cel animation is Snow White and the seven dwarfs directed by William Cottrell in 1937.



Characters with shadows — January 11, 2017