Andrews lesson

In preparation for us to start our own project, we had a play with paints, inks and other arty instruments, to get out creative juices flowing. We produced two a3 pieces of just prue experimentation, with colours, textures and layout etc. Below is my two.

I used ink, charcoal, chalk and crayons in the one above.

I used paint, ink, crayons and tissue paper for texture in the one above and below.

Existing brand ideas

I have done some internet research into already existing brands, that I may like to do as my chosen alcoholic drink. I first began with ones I like as I would have a connection/interest already in those brands and then thought of expensive or more unusual brands as I wanted to look at drinks with interesting, exculsive, and different bottles as well as the more common ones.

• Malibu
• Baileys
• Lucky Buddha
• Lemon Cello
• Champagne (Veuve Clicquot, DomPerignon.)
• Tequila normal and Platinum and white gold Tequila.
• Pims
• Cider (pear)
• Wines (White or Rose)
• Sminoff
• Bacardi
• Squirrel Beer

Squirrel beer, I saw a article about it in the newspaper and it intrigued me, it is so out there and unusual, really one of a kind. It is said to be the strongest beer and most expensive beer in the world, costing around £5oo per bottle and bizarrely enough served in a dead animal. Only 12 bottles have ever ben made, seven offered inside a stuffed stoat, four in a grey squirrel and one in a hare!

Platinum and white gold Tequila was another one with a unusual bottle, costing a whopping £225,000! It is created out of 100% Agave liquid and aged for six years. Also for those who can't afford the rather extravagant price tag the organisation also sells Gold and Platinum bottles for £15o,00 and the Silver and Gold for £25,000.

These two brads are very interesting to look and learn about however, for me and this project they just come with to much of a pricey price tag! I need to think of my target audience, and these two really only aim at one in particular, the rich! I would like a product with a more diverse price range to make it more affordable to a wider target group. Never the less they are both very flamboyant and lavish products that have been very weel thought out.

Below are some of the bottles of the the drink I listed.

Handmade

I am going to create a piece of design which will form a new advertising campaign of a branded alcoholic drink of my choice. In order to create this design work, I will start with traditional media and use my results from that to create the next stage in the development, bringing in handmade elements through digital manipulation, in order to create a full blown moving image advert which will be rendered as a movie for presentation to a client on a DVD and made ready for use on a smart phone or portable device. I will also need to create a bill board poster and a full page magazine advert as design as part of your advertising campaign.

Work in progress

I came up with several ideas that would allows me to incorporate shapes into my design. The idea I chose to go with was dance. I decided on three dances, Ballet, Street/breakdance and Tango. I thought that by choosingthis, the music would be fairly straight forward to pick for each one and it would be a challengetrying to portray these dances using shapes. I looked on youtube for ideas on the types of actions that I could do with my shapes, and it was handy that Strictly come dancing had started as that would give lots of inspiration. Next I needed to pick my music, I picked the Nutcracker for my Ballet animation, La Composite for the Tango and Acapella by Kelis for my street/break dancing one as it had a good beat to it. I onlyneed 15 to 20 seconds on each track so I put them into Adobe Soundbooth to cut them down to a shorter time, which I could then inport into After effects. Below is a screen shot of Nutcracker in Soundbooth. Once I had my tracks ready I was then able to do my story boards so that it would match the beat etc.

I did most of my artwork in Illustrator, just drawing circles etc, I found it easier to do it in there then import it into After Effects. I began with my Ballet animation. I wanted to create a light airy effect, as ballerinas are very floaty and light on their feet. I used Squash and stretch in this animation to try a create the effect of jumping. Below are some screen shots of squash and stretch.

Below is a couple of screen shots from my Ballet animation, I wanted to create a mirrored effect, as if a ballet dancer was in the studio dancers in the mirror, so I wanted to create a refection image. To do this I made a composition half the size of the one I was working with which was 1280 x 720 so I created a new composition which was 1280 x 360. I then made my shapes do thier movements in this composition, once I had done that I copied the half size one across onto the normal sized composition and duplicated it and reflected one so that would produce a mirror image of them selves, and all the keyframe movements etc would match.

I found that creating these animations was hard, the things I had originally come up with I found that were a little out of my league to do in the time we had, I needed more detailed knowledge of the programme in order to fore fill these ideas I had. Perhaps now I know the basics I would be able to have a go at them. Here are my finished animations.

I think that my three animations are good, seeing as a I had no prior knowledge of the programme, I feel that the ballet one is perhaps a little bare and could have done with more going on. The Street one I was fairly pleased with, I like the spinning of the shapes as the music builds up. The Tango one I feel I have portrayed that it is two dancers and the moves that they are doing relate to the type of music and dance it is, but again maybe I could have had more going on with in the composition.

Animation

In this assignment I will be exploring the key principles of motion design. The motion design principles can be broken up into the following areas. Timing, speed of change, arcs, motion blur, squash and stretch, motivation/anticipation, follow through, overlapping action and staging/exaggeration. Using these principles I will aim to produce three pieces of animation which will illustrate or demonstrate a range of these animation principles.

In order to produce these animations I will be using shapes rather than complex drawings or recognizable objects. Within the animations my choice of colour pallet is very important as this could make or brake the piece, the colour is key. Each of the animations will be between 15 and 20 seconds in length and will contain a soundtrack of my choice.

The motion design principles explained in more depth:

Timing: Spacing actions to define weight and size

Speed of change: Spacing of thein - between keyframes to achieve natural movement.

Arcs: The visual path of action for natural movement.

Motion Blur: To enhance appearance of motion.

Squash and Stretch: Defining the rigidity and weight of an object by distorting its shape during an action. It is one of the most important rules of animation, this is because in order for an object to look convincing it must 'give' when external forces are applied to it. For example when a ball hits the ground it will squash, also when it falls and rises it will stretch. The only time in which the ball is perfectly round is when it is at the top of each arc, where the resistance is at its least.

Obviously a softer ball, for example and beach ball will squash and stretch a lot whereas a cannonball will hardly squash and stretch at all. The Squash and Stretch techniques are a good when trying to convey an objects density and mass.

Motivation/ Anticipation: Preparation for an action. This can be used to direct the viewers attention to part of the screen. Some anticipation occurs naturally, for example a mouse is about to hit a cat over the head with a mallet. So the pulling back of the mallet is the moment of anticipation. It lets the viewer know what is going to happen next.

Motivation is when the action clearly shows that another action is about to take place. When a car motor starts, the engine makes the car judder as it revs, ready to explode into action.

Follow Through: Termination of an action. A good example of this is in golf, the golfer once taken his swing at the ball, the golf club must follow through.

Overlapping Action: Establishing its relationship to the next action. It is when one action over laps another, for example, imagine whilst having breakfast you take a bite of your toast and then having a sip of tea, those movements might overlap, of you were'nt to overlap those movements it could result in a unnatural look.

Staging / Exaggeration: Presenting an idea so that it is unmistakably clear. In animation terms Exaggeration is used to emphasize whatever key idea or feeling you wish to portray. Depending on what part of the animation is most relevant to the scene, that is the part that you would want to emphasize the most.

Staging, we must have in mind that the viewer does not have the luxury of knowing what is about to happen in your animation, this is why we must make a conscious effort to set the scene for them. This involves attracting the viewers attention and focusing it on a particular subject of area of the screen. It can also set a mood or certain feeling that you wish the viewer to understand.

Finished Movie

Here is my finished movie, I really enjoyed this project, I did not come across to many problems. I found Final Cut good to use, and as I now know the basics I cant wait to learn further and be able to do more detailed things.

My finished movie is 15 seconds and has 21 cuts in total. I did find it tricky to cut my material down, but by having to do this it made me look at the material in more detail, and forced me to decide on the really important parts of each clip. I feel that overall I have produced a good first attempt and am happy with my result. Perhaps I could have experimented with more unreal/downloaded sound, but I felt that my material had enough of its own recored sound to carry it.

Final cut and compressor

I next needed to compress all my clips by using a programme called compressor, this took rather a long time, I tried to do all 60 of my clip together but I found that this was to much for the programme to handle so I did them in batches. I used a setting to compress my files with called Apple Pro Res 422 for Progressive material, I dragged this option onto my clips and it began to convert them.

My next job was to put all my Pro Res files into a separate folder and drag that folder into Final cut to start the editing process.

Once I filmed my movie, using various different shots types etc. I had to decide as I was putting them together in Final Cut, what kind of edit/cut effects I wanted to use between each clip. I knew of a film, that I studied at Alevel called "A Bout De Souffle", it is a 1960's film, that a famous French director called Jean - Luc Godard created. This film is best known for its visual style and unusual editing, in particular for it constant use of jump cuts and hand held camera work. The way in which it uses the jump cuts in particular is what interests me, I thought that with the kind of material that I have shot, the jump cut technique would work really well, as it is a short, snappy sequence. Below is a sequence from the film that uses thejump cutediting technique.

I have also picked out this film called 'City of God" it is a Brazilian crime drama directed by Fernando Meirelles and Katia Lund. It is about the growth of organised crime in the suburbs of Rio de Janeiro, between the end of the 60's and the beginning of the 80's. I have selected the opening sequence of the movie to look at. The movie begins with chickens being prepared for a meal. Al chicken escapes and an armed ganga chases after it. The chicken comes to a stop between the gang and a young man, who believes the gang want to kill him. The timeline then flashes back to ten years earlier, the young man tells the story of how he got himself into that position.

I studied this movie also at A level so I know it well, it uses a brilliant use of jump cuts and cutting between two different sets of action. I find this use of jump cuts particularly spectacular because it is at the very start of the film, as it has to introduce the main characters.

Putting all my clips in order in Final Cut was a challenge, I had over 60 clips, ranging in all sorts of lengths. I put the good clips, with clear quality and that I thought I could use into my timeline, so I had a clear understanding of what clips I was going to use. Below is how my timeline looked with the clips in order, I made sure I had spacing in between each clip so I could rearrange the order with ease.

Next I began to go though each clip in my timeline, and shorten it down. My first cut with all the roar clips that I had not touched came to nearly 5mins! I picked the best bits from each clip and kept shortening it down until I hit my target time. Below is my timeline much shortened at 16 secs with 20 edits.

Below is my nearly finished movie, it has some issues though. First being it is a second over the allocated time at 16secs instead of 15secs. I feel that the first two clips go by to fast and the last two I dont really need both clips of the horses grooming each other. I will play around with it some more and see what I can change to make it better.

Filiming

I decided that I was going to film the Farrier (Blacksmith) when he came to do my horses shoes. On the morning that I was due to film, I set up and experimented with different possible positions and heights that I would need my camera at, before he came so as I was prepared and knew how my shots were going to look. Also I needed to try and position myself so the sun was behind me, however as it was early morning the sun was on the move.

I began shooting and did lots of short clips, from various different distances, some close ups, extreme close ups and long shots. I also wanted to start with an establishing shot, to set the scene.

I found that as I was shooting, the sun became a little problem as it was moving I had to too, otherwise the light got in the way and distorted the colour of the shot. I also found that the zoom was a bit tricky, it looked fine on the camera, however once uploaded on the computer it wasn't so clear and looked a little fuzzed. I overall got some good shots and came away with lots of material that I need to sift though and decide what bits I can use. I got some great sound effects, the hammering of the nails into the horses foot, the reshaping and bashing of the shoe, the hot furnace, the rasping and the hissing sound of the shoes being burnt onto the horses foot.

Here are some screen shots of the type of shots that I have taken.

Research

My first movie trailer I looked at was for a new film called the Prince of Persia. This film trailer is the prime example of a trailer for a hollywood film. It has the slower, longer shots, with fewer cuts which builds up and up. The build up is so we can get a grip on the story then the pace picks up and the cuts get sharper and much quicker, until it reaches its crescendo and ends with a bang. Another trailer that is similar is Gladiator.

I picked one particular scene to have a look at the amount of edits, cuts were used. I decided to pick one very memorable scene where Maximus says his all famous quote. " My name is Maximus Decimus Meidius, Commander of the Armies of the North, General of the Felix Legions, loyal servent to the true emperor, Marcus Aurelius. Father to a murdered son, husband to a murdered wife. And I will have vengeance, in this life or the next". In the time it took for him to say this, I counted 12 cuts in just 8 seconds. I imagine there are places in the film were the cuts are alot faster, however I thought that the way that this scene in particular was put together was good, I like the way it flashes back to him then away again to action scenes.

Crash, Bang, Wallop!

Our Brief is to use video editing to convey a fast and stimulating experience. I will make a short film piece that lasts no more than 15 secs with no less that 20 edits. My piece can either describe an everyday situation in a dramatic or dynamic way or subvert the expected response to a situation.

The aim is to make a film which represents the main action as key moments and which creates as much dramatic impact as possible. You will edit the piece with the goal of making a film which as economical and succinct as possible. The theme that we must follow is Crash, Bang, Wallop!

I am going to begin by doing some research, I want to see the average speed that videos are edited and how they are compiled. You Tube will be a good source, I can look at movie trailers and music videos on here.

Interface

The interface I found to be very difficult, I managed to get all my buttons onto my index html page, but they were all in one long line down the left hand side, one good thing is that they animated, but when clicked on did not link.

Also I managed to get all of the stories in the html pages, but only the first swf worked, as soon as clicked on they did not link to the rest of the swf in that story. I had run out of idea to make them link to the rest of the story. I will have to seek help in this area to proceed. I did come to a conclusion to why my buttons did not link though, I dont think I have linked them properly in flash actions, I will try and sort this out.

I next tried to put all my buttons into flash again, this time copying and pasting them, this did work to an extent, did loose a few flourishes, however when it came to time to do the action script I think there was somewhere where I was going wrong as they did not link. I did a header a footer in html, which successfully linked to each story, which needs separating, but the story does not play past the first slide.

I figured out my problem, I had named quite a few of buttons with the same instance name, so they did not work, I renamed then and changed the action script as well. This worked and all my buttons linked to the correct story. Also I neatened up my footer, I centered it and changes the colour this looked much better, it was a case of changing my css and relinking it. Below is my new html page.

Buttons

Once I had created all my scenes and they all linked together, next was to do a interface for everyones stories to go on. I created buttons for each story, using art work from other members in the class art work, I was able to do this as we all swapped stories, so we could do this. I animated the buttons as well as making parts of them into buttons, so when pushed in theory it would then link to that story. Below are a few of my buttons.

They have certain hot spots, which link to that story. I have also put sound on a few of them over the over state so the children can interact with the buttons.

Creating my scene in Flash

Once I had decided what was going into each scene, it was time to start to create the scenes in Illustrator. I began creating the background first, then added the different significant objects and lastly I added in the characters in. I needed to make sure that the parts of the scene that I was wanting to animate were in different layers, for example the eyes. This would help me when I came to put the scene in Flash, as the part I wanted to animate would be separate from the main object, therefore would act independently from the the main object.

Next I copied and pasted the whole scene into Flash, which also copied all the layers across too. I began to animate my characters.

My first scene I decided to animate Percy the Pirate. In the story it said that he is jumping on the trampoline, somersaulting, I just had him bouncing up and down. Also it described Pecky the Parrot as hovering above him so I had him flapping his wings. I also wanted to try and have him circling in the air. Below is my first finished scene.

The trees and most of the background I used through out because this was my main and only location that my story was situated around. A few changes though out like, the change in the sky colour as the sun is setting, and different objects and characters introduced were made. But overall this is what my scenes will be based around.

To create this I used different types of animation, scene by scene for example, I found most appropriate for this scene as it allowed me to move my character up and down in a bouncing motion with ease.

Voiceover

For my story I had the performing arts teacher read out my story. I asked him if it would be possible to put on appropriate voices for different characters. We had to make sure we were in a quiet room, the more soft furnishings the better, so the sound has less to bounce off and make it a better recording. We used a microphone that self recorded, and was able via usb to directly download the music onto the macs reading for manipulation.

I would later, cut this up into the correct chunks so that these would then work with each illustration. Perhaps slight sound editing would be needed, to sharpen it. The programmes that I will use to edit and enhance the recording are Audacity and the Levelator.

My Story and Characters

My chosen story is called Bertie and the Beast. In this story I have three characters, two of which have already been created, they are Bertie the Pirate and Pecky the Parrot, these are the two main characters. There is however the Beast, he is a very mysterious creature, in the beginning of the story and actually through out his identity never really revealed. All that is described to us is his yellow, glowing eyes peeping through the bushes and the white tip of his tail. He does reveal himself to the characters in the story but he is not decibed to us. This has given me scope to develop my own character, with the only stipulations being he is beast like, has yellow eyes and a white tip to his tail.

Once I had read my story through several times, I split it up into sections, scenes, overall I have about 18 different scenes, as my story is quite long. I had to split it up into this many chunks as I did not want to much text on each illustration, otherwise to much would be going on.

M next task was to start creating my new character. I had so many thoughts of what I wanted it to be, from a monkey to a lizard. Some sketches of various ideas are in my sketch book. In the end I decided upon a dinosaur, as they are very much beast like, but can be quite cute in a wired way. In the story it ends with them being friends so he cant be to fierce looking! In the end I tried to create a cute dinosaur that is all scary looks but a big softy deep down. Below I introduce you to Dino! (not completely taken by the name yet, so lets call him the Beast).

I did many versions of him, to begin with I just had him all with the two tones of green, but I later thought that this was a bit bland so I added purple to jazz him up. I did many eyes for him also which are all in my sketch book, but I settled with these ones, thought they gave him expression, he did not look too cute but neither did he too scary, just right.

With the other characters there was not a great deal for me to develop. I needed to create some more expressions for Bertie and Pecky, I needed Pecky flying, so there for needing to create some wings. Back views of the Beast, Bertie already had one. So it was just arranging them all into different positions depending on what they are doing in the scene at the time.

Treasure Island Toys

For this assignment we will be working on a live brief, producing content for an online toy store called Treasure Island Toys. Our target audience for this assignment is for the ages between 5 and 7 year olds.

Already a series of characters have been created by the owners, and nine short stories have been written. There is however 12 in our class so three more stories needed to be created so each one of us has a story. From this we are then going to produce illustrations with animated flourishes, weather that be a blink of the eye of a flutter of a feather.

The illustrations will be drawn up in either Illustrator or flash or both, flash will be used to produce the animated flourishes. A voice over is necessary as our age group will not be fully competent in reading the content. Also the sie of the stage that we will create our illustrations in will have to be 845 x 475 pixels. Buttons are essential, as navigation forward backward and back to start, so these will have to also be created in Flash.

To bigin with I did some research on the internet, I firstly looked at the clients website, as this has the style that we need to aim towards, so our work ties in with already existing illustrations. Also CBBC website was another very useful site in which to get inspiration from, they had lots of animated buttons and similar story structures as well.

My final thoughts on my design

I think that if it had all gone smoothly I most certainly would have not learnt nor understood the workings of HTML and CSS as much as now do, the process that you go through when trying to figure out how to correct an element is an essential skill to have when working in this area, I feel that I have learnt a great deal and hopefully when I come to make another website I will have the basics under my belt and will be able to further my skills, and start to explore more advanced techniques.

If I could change my website I would certainly try to include some illustrations, and make more pages so I could explain composition in more detail. I do like what I have created, I would perhaps change the positioning of the text, but I was limited to what I knew. Overall I am pleased that I managed to create a working website, at one point I really didn't think it was going to happen.

Composing my website

I began by doing some mock ups of my pages first in Illustrator, so I could configure various different looks. My first mock up that I did right back when we were doing our presentations, was way to simplistic and did not really have any significance, however it did help me to create a vision in my head to where I would like to place different elements. I did create a new mock up which was much closer to how I would like my web page to look.

Above is how I would like my home page to look like, it is very simple and plain, however I wanted to start with what I understood how to do, I did not want to include lots and lots of advanced elements as I wanted to create a fully functioning site, that was easy to navigate your way round, therefore catering for the all abilities.

However as simple as it is to look at, I found it very confusing at some points in its development. For example I got it all in place how I wanted it, but the navigation at the top of my page would not link or change colour when I hovered over it. This I found very confusing indeed. It was as if something was over the top of it, even when I used firebug it could not find/select it. After much restructuring my pages both in CCS and HTML, and through trial and error of removing elements and rearranging I did manage to sort it out.

I created all my images, for example, the navigation bar and the various different titles, I then saved them to web and devices so I was then able to insert them as divs onto my site. It was important to have a strong and well structured file structure.

My navigation bar, to create that almost painted look effect on the edge of the circle, I applied a brush style, and just changed the size and colour to each circle, I feel that this is very effective.

Once I had sorted out my problem with the nav bar, that I explained above, I then used the working page and duplicated it several times and just changed links, text etc, I did this so I knew that they in theory should all work, this worked!

Flow diagram

Wire Frames

These are my wire frames, both the home and internal pages :

Proposed content

My proposed content that I would like to include has changed a little, I have decided that I would like to have three main subject heading that will be

• Photography
• Art
• Web design

These will be my main areas of conversation, I will however have subheadings within each main heading, I am thinking of something like this

• Photography - will have the subheadings of, Pattern, Symmetry, Texture, Depth of field and lines.
• Art - Picture, Depth, Line and value.
• Web design - What users are looking for, Dimensions, Size, Space and Colours and text.

colours

These are a few colours that I would like to use in my design, perhaps different colour variations I might use, but this colour pallet.

Composition

Composition derives from the Latin compositus, which means well - arranged. In terms of Digital Media, is all about the placement or arrangement of visual elements, the putting together of objects that have been arranged using conscious thought. You want your web pages to command attention. In Digital Media the term composition usually refers to to page layout.

There are many elements that go in to the composition of a web page, some elements apply more than others, but for example, Line is a very important element as it contributes to the organisation of the page dividing it into compartments. There are also many elements within the organisation sides of things as well, for example the shape and proportion of elements, orientation of elements, colour and perspective etc. All these merge together to create the feel of unity.

There is a massive emphasis on the importance of web site layout, because they are judged by their layout, if your layout is slovenly and not very appealing, visitors may not be in to much of a rush to return. They must be pleasing to the eye in other words ascetically pleasing, one way in which to achieve this is to keep it simple. Do not create complex navigational links using complex scripts or images as they may not be viewable in all the different browsers. Try to minimize the use of big images that are going to take ages to load, stick to using smaller icons that will instantly attract the users eye.

Another must when thinking about composition is the text, in particular the size, use a standard size, 11 or 12, so users can read your content with ease. Select a professional looking font, for example Verdana, Arial, Helvetica or San Serif, these are all very popular. Avoid using fancy fonts like Comic Sans.

A very important area to consider is colour, use web friendly colours, a good way in which to decipher whether the colours you have picked are suitable, ask friends and other web users for their opinions, this way you will get a clear idea of if you are heading in the correct direction.

Your web page dimensions you should always think about, keep track of them. The most successful web sites out there seem to limit their width and height, this is so that the important webpage content lies within the top 600x600 viewable area without scrolling. Make sure you provide a navigational link to the next page and link back from the second page.

Design For the Web

Our new assignment title, Digital Media Design Theory Website, we will research, design and build a website on an aspect of digital media design theory that will be useful in our course. Our target audience for our website is other design students. We were each given a topic to choose from that we would like to do our website on, I chose Composition. I decided to choose this as I feel that it is essential to know all there is to know about this area of design in order to create a professional looking site, as many elements are needed and used. I first did some research in this area so I could start with strong foundations.

My thoughts

Overall I thought that this project was a success, I enjoyed using the different programmes, I especially liked working in InDesign, I thought that this provided me with lots of useful skills. I feel that all aspects of my project went well and I am happy with my end result.