Website — June 13, 2017


Website link:

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 —
Sound effects/Sound tracks — March 29, 2017
Sound Production — March 24, 2017

Sound Production

How I made my soundtrack 

Screen Shot 2017-03-06 at 14.24.34Screen Shot 2017-03-06 at 14.24.44Screen Shot 2017-03-06 at 14.24.57Screen Shot 2017-03-06 at 14.27.18Screen Shot 2017-03-06 at 14.35.04

I made this sound track by downloading the original song for Resident evil, then i used the EQ to make it sound more powerful and loud when the raw file was really quite. I also added in fade at the end of the song so it turned into the second part really smoothly with out pauses. After that I asked someone to record a laugh into it so i can make the music a bit more creepier with a demonic laugh. After that I downloaded a lightning sound effect because there was now way i could get something to sound like lightning, then i also used an EQ to make it again sound more powerful and loud.

How I made my sound effects

The sound effects that i have made by using the software Logic pro X and they are: Sniper shot, Sniper cocking, Zombie growling, Clock ticking, Multiple zombies. I mainly used reverbs and EQ’s to get the sounds creepy and powerful. I also made sure you would be able to hear these sounds.

Presentation for animation — March 12, 2017
Recording schedule — February 8, 2017
Equipment needed —