Second Animatic

I made this second animatic to get a better idea of what the animation is going to look like, without going to the effort and expense of producing the fully formed and edited animation.
After producing this I realised that I didn't like the last shot in the animation =, looking head onto the box again. I don't feel that it work or fits in with the animation at this point. I decided to remove this before producing the final edited animation. I also decided that I needed to make sure that I was using a close up on the doll as the box opens, to really focus  attention on this.

First Animatic

I created this animatic by adding some extra frames into my storyboard. This allowed me to start planning the timings of the animation and also a better look at the shots I would use.

Digital Storyteling Design Process.

I have already posted how I edited the photographs.

I imported my photographs and sound material into Final Cut Pro. And then dragged my story mp3 into the time line. I listened to this through and cut it in the parts where I needed pauses.

I then started to drag the photographs into the time, I opened them up in the viewer first so that I could set the time for each of them. I then dragged them to the time line. I could then drag the photograph out from here if I wanted to make it last longer or shorter.

For the part of the video showing the journey to the shop I set the duration of each photograph to 2 seconds. This set a nice pace to the changing of the photographs to represent a journey through the photos as I take the viewer to the shop. I then used the cross dissolve transition as I feel that this creates the effect of travelling through the photographs

 When the story is talking about being in the shop I have used photographs of the sweets on the shelves. I use a quicker pace of 1 second for each photographs to show the excitement of a child looking at the these sweets. This leads to the child being given a packet of buttons.

Again I use one second per photograph for this section about the busy road. This crates the feeling of it being busy as more photographs are being show and also shows the fast rate of the traffic driving past.

After the buttons had been run over I decided I wanted a sequence where I fade in between photographs zooming in to the packet. I dragged the transition effect out to make is fade slower. This is a similar effect to that used when there are deaths on TV, where the camera slowly zooms into the character and their stillness. I wanted to show the drama of the event to a child using this. The slow cross fading is an effect used by Chris Maker when the destruction of Paris is talked about - this shows stillness and creates the drama of the event for the audience.

After adding all of the photographs I then added the other sound material I had got to the time line. This was background traffic noise and the sound of splashing in puddles. I then placed this in the appropriate position on the time line. I then cut some of the background noise from the recording of the story and copied this through the time line to the places where the story have been paused. This creates a feel of continuation with the story rather then making it seem that it stops and starts.

Digital Sotry telling - evaltuation

What were you asked to do? (Project brief tasks)
I was required to create a digital story in a similar style to that of Chris Marker's La Jetee. The film was to last between 5 and 10 minutes. The theme was family mythology and I needed to look into different stories that could be told from my family.
What did you make/present?
I made a photo montage film based on a story about me dropping a packet of chocolate buttons in the road as a child. The buttons were ran over and we had to get another pack. I took photos and recorded sound to use for this.
What did you want to communicate?
The main thing to communicate was the plot line for the story. I needed to represent the different sections of the story that gives it's structure and sense. I wanted to show the story through the child's eye by taking photographs from a low angle. This will allow the viewer to view the events through a more child like perspective.
Who was your intended audience?
My intended audience is my family. I found in research how story telling is used to help create a sense of identity, however these stories are fluid and change fro telling to telling. I have created a digital story that will tell the same thing every time. This means that there is a set basis for identity to be based around rather then a changing story. The video can be shown for many years to come, within the current nuclear family and to children and grandchildren to communicate that sense of the family identity. The story is fairly simple and told in a way that is suitable for all ages. This means that it can be shown to children to help create this sense of identity at the crucial stage for this.
What materials and processes did you experiment with?
I made a digital collage by scanning in photograph, textures and other images that I found. These were then compile in Photoshop.
I also used Photoshop to change the saturation of photographs and use pin light blending mode to allow colour to come through from a duplicate layer. This helped to give a sense of a rainy day to the photographs.
I used traditional collage, cutting up text and sticking it back down to create my title. This gives a child like, hand made feeling to the title - communicating that the story is about a child and the photographs are mostly take from a child's point of view.
What materials and processes did you reject?
I didn't use digital collage in my final. I wanted to communicate my story through a series of photographs, making the event seem more real to an audience. Using collage would have disrupted this, and therefore I decided not to use the process.
What materials and processes did you use in your final designs?
I used Photoshop to edit my photographs to make them seem more like a rainy day as they had been taken on a bright, sunny day.
I also used traditional collage to create my title. To communicate it being child like and hand made.
How do the materials you chose to use help you to communicate your message to your audience?
By editing the photographs I more successfully communicated the rainy day. If I hadn't done this my photographs would not have fitted in with the story. My use of photography helps to make the story seem like a real even, rather then using other techniques such as illustration etc that may have taken this away from the story.
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. I made sure that the camera was protected when taking photographs splashing in the puddles. I used the long zoom to help achieve this. When taking photos by roads I made sure I was a safe distance from traffic on the pavement. I made sure that I attained model release forms for my models to prove that I had the right to use the photographs.
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 early on 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 have used Final Cur Pro before and find that I Take to the program fairly easily. This meant that I didn't have to worry about controlling the program and could work on the creative side of the design.
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.

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.