My business Card

To begin with I was stuck in what I wanted to do for my website design, which meant I couldn't create my business card design until I had something to work with. That was until when I was looking through some of my old work and I had noticed that I had previously created something that I would be using as my logo, and the basis of all of my designs for both the website and business cards.

I began with sticking the logo in the top left hand corner, and using the colours I had previously placed within the logo I decided to extend the ones that are the lighter versions. I chose to use this logo for my website because as a designer I use the colour wheel to decide which colours I want to use and which colours I will use together, therefore I thought it would make sense that I use a colour wheel as part of my logo.

As shown here I extend the colours, but then I made the extended colours fade to white. I chose to do this because I thought having the colours fade out the viewers eye would follow and then see the content.

Here you can't see the fade as well as what you would see on the website, however, I wanted to make the card represent myself, and I feel that I am very colourful, and therefore my business card and website will be colourful. There was only one change that I made and that was the 'M' in the middle of the logo I changed it to a white 'mt' with a black outline.

Comments and Changes I have made

During my 'Crit' session with Mark, I had different comments about my work that I would have to change to meet what he wanted, for example the stylising of my animation, people said that it was too simple to work with the original artowrk that I had been given originally, therefore to make my animation more effective I would have to stylise my animation better, to have it better suited with the original artwork.

Here are the changes I made:

I changed the hedges from really simple 2-dimentional 'blobs' of green to semi-3-dimentional hedges that I had created using a photo of Glynde place where the festival was taking place. I felt that stylising my animation using a familiar place to the festival would give my animation a bit of depth.

The next change I made was to the hills and the grounds of the festival. Using an artist style I was able to make my hills look more stylised. I also cut out some of the flowers out from the original artwork logo, this is so I can place them all over the grounds and the hills. The flowers are to be used to stylise to animation as well as I will be using them for subliminal messaging.

I then changed the style of the tents, as I had been told that they were to simple for the animation. The way I changed them was to put shadows of them to make them more 3-dimentional.

The last change I had made was to the trees. To begin with I deleted the old tress to start fom scratch I then, using the same artist as before as a basis, I used different tools such as the pen tool, the eliptical tool and the paint brush tool.

After making all of these changes I found that my animation was stylised to how the client wanted it and therefore ended up being a more successful animation then what I had previously had made.

Mock-ups for mobile website

Here are the mock-ups that I had created for the mobile website.

I first had to decide what part of the site I wanted to create, and as one part of the site would be more popular, I decided on a section that no one else would think of, which was the Information Section. Which conequently is a very important part of the whole site.

I began by looking at the original colours and the sun beams, which gave me the ideas for the background, I used the sun strokes that had been created and extended them, as shown here.

I also had to make the logo as it is here, and to begin with there was a white background to it. To make the white background disappear I used photoshop to select the parts I wanted to delete, I used the magic wand tool to do this.

I also got the colours from the original artwork, this is so I can keep in tune with what the client would want.

Moreover, I wanted to make the mobile website as simple as possible mainly because this is supposed to be used on a mobile, and therefore if the site was complicated then it will load slower than if the site was simple. To make the site load faster I made it as simple as possibe.

How I made the Butterfly Animation

I had to begin with cutting out the butterfly from the original artwork that we had been given, this is so I can animate the butterfly away from the background.

The program I used was Photoshop, and the way I did it was to cut each of them out seperately, therefore I begin with one wing. I started with using the magic wand tool to select the right parts, I then transfered over so I was using the brush tool whilst the selected area was masked, this then allowed me to be very precise with what I was selecting.
The next step was to get out of the masked selection and have the normal selection, and when in the normal selection I then delete the background to just have the wing. The last thing I did was to make the artboard the same size as the wing.
I then repeated the same process with the other wing and the body as well, until I had each section saved seperately.

After cutting out the parts of the butterfly, I then imported them into Adobe After Effects where I would be able to manipulate them.
I first had to think about how I wanted to make the butterfly fly, and I couldn't really think of a good way, until I remembered I could use the puppet tool. The puppet tool, in After Effects, is where you can place tacs over parts of the wings or anything, and then you can manipulate the tacs that you want to, so I placed tacs all around both wing, and I made the outside ones move, as what a butterfly does.
However, doing that I found that my butterfly looked really weird and didn't look like a real butterfly at all, I therefore had to find another way to make my butterfly animate like a real butterfly.
I went onto the internet to see if there was any tutorials on how to animate a butterfly, and I found this link, which explained exactly how to animate a butterfly in the way that I originally wanted.
http://layersmagazine.com/animated-butterfly-in-after-effects.html

This technique showed me that I should used the 3D layer tool, which is situated in the layers section, I selected that for each of the layers of the butterfly, I then had the 2 wings be parented with the body. Parenting means that the objects that are being parented will do the same and the parent object, therefore if I move the body in any way the wings will move the same way as if they were each all together and not on 3 seperate layers.

After finding out how to make the wings flap like a normal butterfly I then had to make the butterfly move in the same way as a real butterfly, very twitchy and not in the same place for long. So using the position keyframes I made the butterfly move and twitch like a real butterfly would.

I then had to add the background and all of the different components that I would be having within my background. The way I created all of my different components was by using Illustrator. I had a look back into my sketchbook to see what designs I have come up with I then re-created them using illustrator, and due to the simplicity factor that I have always wanted to create it did not take me long to come up with the Illustrator designs.

The different components that I have to create are:

• Hedges


• Hills (front and back)


• Tents


• Signs (sandwich boards or billboards)


• Trees


• Sky (background)


• People (to populate the festival to make it look like it is buzzing)


• Stages (with lights, speakers etc)


• Performers

I then imported each of these components to After Effects, and I had to move each of them in different ways, to make it look like the butterfly was traveling through the hills towards the festival, and then traveling through the festival to see all of the different parts of the festival.

The way I achieved that was by using the keyframes for both the scale and the position sections of the layers. I had to move each part seperately, which made it quite difficult and time consuming, however when I finished I found that it looked really affective with the butterfly in place, and it made it look like the viewer was travelling around this 3 dimentional animated world with the butterfly and finding all of the different parts fo the festival and all of the wonders within it.
After creating this animation I felt very proud in what I had done, it was also a big learning curve into how long some things take to make, and how short some things take to make. For example I thought the animating the butterfly would take ages, and at first it did, until I found the easier way, which then became a very short period of time to make it.
The next learning curve I had found I made was that I should not stay with my first option and if something does not work then I should find an alternative. The part of this process I was talking about was making the butterfly animate and making it look like a real butterfly.