Digital Story Telling Final

Animation evaluation

What were you asked to do? (Project brief tasks)

 Create a 20 second animation using a theme based on ourselves. We needed to follow the animation design cycle including story board, animation and final. We then had to edit the animation in Final Cut Pro. My animation is based around the theme of locking you emotions up in side rather then dealing with them - the jack in a box representing this. It was also loosely based around an animation I found in my research by Jamie Dean. I really liked the Gothic Surrealism style that he used and wanted to recreate something similar. I also feel that this style helps to communicate my theme as it is dark and strange and feels quite lonely. 

What materials and processes did you experiment with?

 I created a bouncing ball using drawn animation. I decided not to do a drawn animation as my drawing skills are not very strong and I feel that this would have resulted in a poor animation. 

I also learnt many new techniques in final cut pro - using key frames to pan, zoom and scale the video. I also learnt how to skew and play video's within other visuals. I am not going to use the latter technique, it doesn't fit in with the style that I am looking for in my animation. However I have used the scale tool to zoom in on my animation. 

I made the jack in the box with the help of Gary the 3D workshop technician. I then painted this to fit my style. 

I used gardening wire to create an armature in my doll so that it could be animated more easily. 

What did you do to ensure you worked with tools and materials safely?

  I followed all health and safety advice in the 3D workshop, also the technician used the machines as I am not a 3D student and have not been trained in the correct procedures to use to be able to use them safely. 

How well did you manage your time?

 Although my time management could improve I feel that I have done better on this project then previous ones. I had gotten more work done earlier on then before. My main issue at the minute is balancing all the areas of my life as with college, work and church commitments I am finding it hard to find time to relax and have fun - running the risk of burn out. I am trying to address this. I have started to use a timetable that I have created for myself to plan my college work and other activities for the week around work, college and church. 

What were your strengths in completing this project?

 My strengths in this project was my willingness to try 3D animation and make my box and set, trying new things. I enjoyed this process and it gave me a sense of achievement. 

What will you do to ensure you improve for the next project?

I will create a better quality animatic first time, using photographs if I am creating a 3D stop motion again. I will also put more time into editing around class times as there is not enough time to get tests and final animations done just in the lesson times. 

Evaluation for web design.

What were you asked to do? (Project brief tasks)

 I needed to create a website that would represent me as a designer and my work. It needed to include the pages: Home, About me, Work and Portfolio. The website should communicate aspects of my work and/or personality. 

What did you make/present?

 I have made a 4 page website, using the techniques shown within lessons and others that I have learnt myself. I made a home page as an introduction to my website, an about me page to tell people about myself as a designer, a work page to show my capabilities as a designer and a contact me page. 

What did you want to communicate?

 I wanted to show a juxtaposition between dark, grungy imagery and bright colours. I feel that this represents my personality. Also my work is often darker/grungy but I also produce more colourful pieces. 

I also want to communicate professionalism and ma capability at design. This means that my website must be well designed and that the work I choose to showcase needs to be the best quality work that I have produced. 

I also wanted to show how I work - digitally whilst using traditional techniques to enhance and texture my work, therefore my website needs to represent this.

Who was your intended audience?

 My intended audience is university admissions tutors and prospective clients. I am applying to uni and having a website will be another way of me advertising myself to universities I am applying to. I also want to show people looking for a designer that I am capable of producing the work they are looking at having done so that I can add extra pieces to my personality.  

What materials and processes did you experiment with?

 I learnt slicing so that I can create the layout for my website in Photoshop and then export it as a HTML document. I learnt how to use behaviours to change links to roll-overs - changing the image. I have learnt how to change font styles and positioning of items using CSS in Dreamweaver. 

What materials and processes did you reject?

 I haven't used roll overs for my links as I feel that this didn't fit in with the look of my website. 

What materials and processes did you use in your final designs?

 I used Photoshop to create my layout. A tea stained piece of paper was scanned in to help create the background. This creates a dark, grungy texture that represents this part of my personality. I then used the techniques detailed in my previous post. 

How do the materials you chose to use help you to communicate your message to your audience?

The grungy texture communicates this part of my personality and my work. This is then balanced off with the colourful links which communicates the other side of my work and personality. The work showcased on the web site then backs this up as you can see both the darker, grungy pieces and those that are more colourful. 

What did you do to ensure you worked with tools and materials safely?

I made sure that I had no food or drinks around the computers and that I took regular breaks from the computer screen. When tea staining the paper I did this in an area away from computers and electronic equipment. 

How well did you manage your time?

Although my time management could improve I feel that I have done better on this project then previous ones. I had gotten more work done earlier on then before. My main issue at the minute is balancing all the areas of my life as with college, work and church commitments I am finding it hard to find time to relax and have fun - running the risk of burn out. I am trying to address this. I have started to use a timetable that I have created for myself to plan my college work and other activities for the week around work, college and church. 

What were your strengths in completing this project?

 I had done web design in the past and so I had a good understanding of the basic principles. including the way that coding works. This was a major benefit as it meant I could concentrate on learning the new skills without having to worry about having to get to grips with the basics. It also meant that I got on will the new skills I learnt well as I understood how they worked, even though I hadn't known how to do it in the past. It also meant that I managed to bring in some techniques that I had learnt in the past to enhance my work as well as those that we were shown in the tutorials. 

What would you like to have done differently?

 I would firstly like to try and balance my commitments more effectively. I would also have liked to put some more work into the development stage of the design process.

What will you do to ensure you improve for the next project?

Next time I will make sure that I balance these areas of my life more effectively and put more effort into the design development side of the project to ensure I can achieve the best grade possible. 

Website Step-by-step.

I created my page layouts in Photoshop and then sliced them. I saved them for web including all the slices and the HTML. This allowed me to open my design up in Dreamweaver already set up and ready to go, without having to do the HTML myself. It also meant that the jpeg images were saved at an appropriate quality for websites. I then removed the slice for the place holder for the text. I then used CSS to set this slice as the background for that cell so I would be able to type on top of the image.

After creating the CSS styles I clicked on the cell and set the style in the properties panel. I also used CSS to set my font and font colour. I chose Arial as it is simple and professional it is also easy to read for users of the website. It has also been used in my work and so represents this.

I then set up the navigation. I clicked on the slice that I wanted to link and used the property panel to set the link.

I wanted the link to my blog to open in a new window, so that users won't have to leave the website to view it, meaning they are more likely to continue using the website after going to look at the blog.

I created a new table in the cell containing my background so that I was able to type my text above the place holder. I aligned this central to get my text to sit nicely in the place holder.

To centre the whole page I set up a new CSS rule as follows. I had to try several different combinations of percentages before I was happy with the result. I used the properties panel to set the page's table to use the CSS rule. I also set the main page background to black so that there is a solid background that fills all sizes of browser windows, this is more professional. I used CSS to do this as I was able to set the rule in a separate CSS document that I could set to be used in all my pages to save me having to set the centre coding for each individual page.

To create my "work" - portfolio page I inserted a table with one column and 7 rows. I then merged cells where necessary and typed the category titles. I then inserted the thumbnails I had created in Photoshop for the pieces of work that I want on my website. I then linked the image based pieces of works to the file containing the larger - full version of the piece of work.

I want the full versions of my work to open within my webpage rather then on a new webpage. This is more professional and integrated. It is easier for the user as they don't have to either leave the page or end up with extra windows to close back down again.  To achieve this I downloaded the files for the lightbox javascript application. I had used this in the past and knew it was capable of what I wanted to achieve. I put the relevant files and directories in the directory for my website.

The following script is added in the tag of the HTML document to link the javascript and CSS files to it.

I then edited the code for each of my linked images as follows:

I have used the category [illustration] so that I can add other catagories to my work in the future but retain separate lightbox operations for them.  I have also titled each of the images to give the user more information about it in lightbox.

I made the page for my VJ piece video. I used the same background as the other pages for this, but exported it as a single image and used it as the page background file. I had uploaded my video to Youtube and used the embedding code from there to input it into a table on the document. I again used CSS to position this. This allowed me to get the content to sit centered on the page, which looks more professional and generally makes the composition more pleasing to the eye.

I wanted to get the video to open i a new window on my website as this is more professional then sending people to Youtube to watch it. It also means that people are staying within my site and are more likely to continue using it then if I sent them to an external website.
  I then used the code:

 javascript:window.close()

In the link for Close Window, this will close the window when the user clicks it, allowing the user to return to the work page of my website.

I created a hotspot over the thumbnail for the video.

I then used the behaviours pane in Dreamweaver to make the link open in a new window.

I then repeated the last two steps to open up my flash campaign for knife crime. I had embedded this in a HTML file before for an older version of my website.

I wanted to create a scrollbar for the content holder on the about page as I wanted to input more information without affecting the overall layout of the page. I wanted to retain the free space and subtle composition. To do this I included the following code into the cell. I had to change the amount of pixels a few times to get the scroll bar to fill the content holder properly. I then typed all the information I wanted into this.

Again I used lightbox to open up larger versions of images I wanted on my webpage.

I then used an on-line service to create a favicon for my website. I used an small selection of the source material I had used. I chose an interesting looking selection, with detail. This was then placed in the file directory to be displayed in browsers when my website loads. I wanted to have a favicon as it is more profesional and gives the website an identity if people save it to their favourites - they will see the icon and imediatly know it is for my website. It communicates that I have considered the design of my website and that I understand web design to universities and potential clients or employers.

 My website can be found at www.james-lock.co.uk 

As I was unable to get sound recording of a child splashing in puddles. There was too much background noise when I was taking photos of my model. I have downloaded an mp3 of this youtube video. I will use this in a short section of my film to enhance the section that shows teh character splashing.

Photo editing 2

When editing the photos I used a new document at A5 size so that they would all be the same size for the Final Cut Pro canvas. I used a DPI of 72 as the files were to be used for on screen display. I used rulers to indicate the thirds, to help with the composition of the images and used the Transform tool in photoshop to resize and place the photos on the Photoshop canvas creating a composition that I was happy with for my photo montage.

Photo editing

Some of the photo's for my digital story are too bright as they were taken on a sunny day and my story is set on a day where it had been raining. I have edited these photo's to look more like a dull day.

Original photo:

I duplicated the background layer and turned off the visibility on the new layer.

I opened up the hue saturation tool and lowered both the saturation and the brightness.

I then turned on the visibility on the duplicate layer and changed the blending mode to pin light to allow the layers to blend together and crate a dull looking photo as if it was overcast.

As I had to do this to a few photos I recorded it as an action and used batch processing to repeat the action on several pictures quickly.

This makes the photo's look more realistic for a day where it has been raining and will communicate this in my film better.

I have also decided to edit all of my photographs in this way to stylise the film and give a feeling of continuation throughout it.

File conversion - audio

My sound recording was originally in the .amr mobile phone file format. This was not compatible with any of the programs available to me including Final Cut Pro, Garagband and iTunes. to convert this into the compatible .mp3 file formate I used the http://media-convert.com/ website. The file is uploaded to the website which then converts it and offers the converted file as a download. I was then able to work with the audio file in the programs I needed to use.

Light

This is the animatic and final animation for the Light animation. This shows how the animatic represents what is happening in the final but is not a finished and polished piece and has less movement in it. This is done as it is cost effective. These examples also show how an animation changes, more animatics would be produced to show these changes as they are requested by whoever is commissioning the animation, until a final animatic is agreed on to take to animation for final. Again this cuts the cost of producing final animation when changes may be made, it saves time as well as money.

Gorillaz Animatic

http://www.youtube.com/watch?v=xJmCWeyRlpo
Unfortunately the embed utility is disabled for the above video. However it is an animatic for the Gorillaz song Dare. This shows how an animatic is used to pitch an animation, without going to the cost of producing the animation before it possibly being turned down - which would be a loss. The animatic is simple but shows more movement then a story board, it is also set to the sound track used for the animation. This gives the viewer an idea of what the animation will look and move like. This animatic also introduces some colour, showing the night club like lights again giving the feel of the animation to the viewer. Animatics are supposed to be fairly cheap to produce as the animation is not necessarily going to be commissioned at this stage and fully animating would cost too much for the risk of a loss.