kamranhaquemotiongraphics
kamranhaquemotiongraphics
Kamran Motion Graphics
7 posts
Don't wanna be here? Send us removal request.
kamranhaquemotiongraphics · 6 years ago
Text
The Life Cycle of Plastic Bottles - Production
Tumblr media Tumblr media Tumblr media
These are my initial ideas and development before creating my motion graphic. I started by creating a mind map to generate some ideas and I picked the ideas that i think would be best and most interesting to make a motion graphic about. From here I started making some sketches on how I could make the logo and text look in it. I also drew a rough storyboard out to visualise how I want my animation to look. I drew each slide I wanted and how I thought it would look best. 
Tumblr media
This is the digital storyboard that I created using Illustrator. In this, I visualise my ideas better to properly show how I imagine it to look, using basic assets and some text. It shows how I want the lay each slide out as I give a brief description under each panel. Some colours I’ve used aren’t my final ideas. I plan to change it depending on the transitions I use. For example, I think the way it goes from a green background to a blue and then back to green seems a bit all over the place. So I may change the background to a dark blue for the Effect slides. 
Tumblr media
After this, I started to develop my animation in After Effects. I started by creating my assets. I used Illustrator for any assets that will already have a background and Photoshop for any assets I want to have a transparent background so I can import it directly into the animation. For example, the title card I did in Illustrator by creating a plastic bottle vector and using it within my letters to make it look unique. I created the letters myself too using the pen tool or shapes. I chose to use a dark blue background as I thought this would be suitable for the theme of plastic bottles as my illustration is plastic water bottles. I used a light blue for the bottle vector and used the same blue for the letters so it blends in and looks like a natural typeface. 
Tumblr media
The next thing I did was create my Earth vector that I had planned to use based on my storyboard. I used the eliptical marquee tool and created a blue circle as the base and water of the Earth. I then used the pen tool to create the shapes of the continents based on images I used as a reference from Google. I chose a light pastel green to go with the blue as I thought these two colours go well together and would look good on the dark blue background I plan to have in the sequence of my animation. 
Tumblr media
Next, I wanted to create a vector for when I talk about global warming. So I thought an obvious vector to represent that would be the Earth vector I used but with fire around it. To create this, I duplicated my Earth vector and drew out fire around it using the pen tool and a bright orange fill colour. I also added a circle the size of the Earth and painted it the same orange but reduced the opacity so I can cover the whole vector and make it look like it’s all on fire.
Tumblr media
Next I created a vector for when I talk about effects and landfills. I decided to create a silhouette of a bin truck and landfill next to it. I used the pen tool to create the shape of the landfill and the shape tools for the truck. I added windows the same colour as the background I will be using in the animation so it looks clear in it. 
Tumblr media
Next, I created the vector for the ocean and fish which I will also be talking about in my animation. I used the pen tool to create the waves and created three versions of it, each in different shades, so that it shows the depth of the ocean and makes it look less simple. I duplicated the bottle vector and used it in my vector and resized it to an appropriate size. I created the fish using the elliptical marquee tool and the polygonal tool for the fins and used the pen tool to create the face. After this I created the six-pack holder using the elliptical marquee tool and kept duplicated it till there are six of them aligned together and used the pen tool to fill in the gap between them. For the fish, bottles and six-pack holders, I reduced the opacity for them all to they look darker. This makes it look like they’re actually underwater and that there is water in front of them that makes them less visible.
Tumblr media
Next I opened up a new composition in After Effects. I created a solid fill layer for the background and chose the colour of the background in my title card so it blends while I animate it.
Tumblr media
After this, I imported my title asset into the composition. I animated the positioning of the asset by making it like a slideshow. It slides up into the screen as if it is being pulled up from above.
Tumblr media
After this I used the type tool and created the sub title for what aspects of water bottles my animation will be about, which is about the best and worst recycling rates in the world and the effects of not recycling. I coloured the text the same colour as the original title card so it stays consistent. I animated this the same way I did for the title card by positioning it so that it moves up along with the title. This makes it look like it’s all one page and makes the animation itself flow better.
Tumblr media
From here, I added the transition for the next slide by using a ripple effect I’ve learned previously. I made four circles, each a different shade, darkest being the biggest and lightest being the smallest, and made them all expand by animating the scale. They all expand at the same time from 0-100% except the final and lightest circle which expands all the way so it covers the screen and is used as a background for the next part of my animation.
Tumblr media
Next, I started the next bit of my animation. I imported the Earth vector and animated the position so it comes in from the corner of the screen. It also moves along with the text I used for the title of what I’ll be talking about next. The 4 rows of the text come from 4 different directions and also disappear from the opposite direction it came from, while the Earth vector shrinks to 0%, leaving the background plain for the next part.
Tumblr media Tumblr media Tumblr media
The next sequence in my animation focuses on the best and worst rates of recycling. For this I used a bar chart to show the stats. I only focused on the best and worst as I thought everything in between wouldn’t matter as much, therefore the bar chart doesn’t involve all the countries and is only used to present the best and worst rates. The bars all rise up from the bottom of the graph to the size I thought would be best. I did this by animating the scale and changing it from 0% to whatever I wanted. After this I added an arrow and animated it using trim paths so it extends out and points at the flag. After this, the opacity of everything on the slide, except the background, reduces to 0%.
Tumblr media Tumblr media
Next, I started talking about what the countries do to get such a good or bad rate of recycling. The flags appear by animating the opacity from 0-100%. After the flag appears, text starts showing up next to it in an effect where it looks it is being typed up. I did this by adding an effect to my text known as “typewriter”. I added the same effect for the next flag and text.
Tumblr media
From there, everything on my page disappears with the opacity so it’s a blank green background. This green background then shrinks the same way it expanded with the ripple effect but in reverse. I did this by arranging the keyframes the same way, but making it go from a high to a low percentage, instead of low to high.
Tumblr media
Behind the ripple effect, there is a new slide with the original dark blue background. On this slide, it begins the next part of my animation, which will be discussing the effects of not recycling. For this, I used the vector I created of the Earth on fire to represent global warming. I also asked the question of what the effects are so the view knows what the next sequence will be about.
Tumblr media
The next transition I added was making the Earth vector expand where the fire is so it creates a new orange background for the next part of the animation. I did this by moving my anchor point to the fire and animating the scale from the original size till it’s big enough the fill up the whole screen. 
Tumblr media Tumblr media Tumblr media
After that I began the next part of the animation where I talk about the actual effects with the orange background. I made the vector of the truck and landfill appear by changing the opacity from 0-100%. As soon as the vector appears, the text shows up talking about landfill. I added the typewriter effect to the text on this slide too. Then, everything on the page except the background disappears by changing the opacity back down to 0%. 
Tumblr media Tumblr media
The vector of the ocean and fish the appears from the bottom by changing the position the same way I did with the logo at the start. This vector comes up about halfway through the screen leaving enough space above it for some text explaining the effects on the ocean. This text also shows up with the typewriter effect as I thought it would keep it consistent with the rest of my animation. 
Tumblr media
The last part of my animation is how it started. The Life Cycle Of Plastic Bottles logo drops down and finishes off my animation. I thought this would be a good idea as it would be sort of abrupt for it to finish on the ocean slide. So I thought finishing it the same way it started would be a suitable way to signify that it is the end of my animation. 
Tumblr media
These are all the sounds I’ve used in my animation. I got all my sounds from freesound.org and used multiple sounds that I thought would be appropriate for each slide in my animation. It starts with simple intro music I found up until the slide with the bar chart. After that, I used a typewriter sound effect for when the text starts to appear. I used an explosion sound for when the global warming vector expands to make it seem like it’s blowing up. I used a reversing truck beeping noise when I talk about landfill and ocean sounds when I talk about how not recycling affects ocean life. 
youtube
This is my final animation. Throughout it, I made sure all my keyframes were set to Easy Ease as this allows the movement of my assets and text to be smooth and more natural. I also ensured whenever text appears on the screen, there is a few seconds pause to allow the viewer to read all the text, before transitioning to the next slide.
1 note · View note
kamranhaquemotiongraphics · 6 years ago
Text
The Life Cycle of Plastic Bottles - Project Proposal
My motion graphic will be informing people about the rates of recycling across different countries and about who has the highest and who has the lowest rate of recycling and why as I think it will be an interesting topic to talk about so I can show what countries do to have good rates of recycling and how others have bad rates. I will also talk about the effects of not recycling and what damage it can do to the environment around us because this will show how these countries are tackling these issues and preventing them from happening. I think a good way to show this will be to use illustrations for the effects of not recycling and I could use graphs or charts and animate them to show the best and worst rates of recycling in different countries. I could also use more illustrations to show what exactly countries do that makes their rate of recycling so high. For example, I will display how Germany colour code their products so that people know if it should be recycled or not.
I will start my animation with the rates of recycling so I can talk about what countries are/aren’t doing that makes them so good/bad at recycling. This will then make it look better for when I show the effects of not recycling as it will show how they are solving these problems or how they could improve. This will make it flow better and connect to each other more. I will use assets of bottles and the necessary things to show when I’m talking about the effects of not recycling, like landfills and how it affects wildlife. I intend to use a lot of green in my animation since it fits within the theme of recycling. I will use white for most of the text as it is a colour that will go well with green and can be seen on it clearly, if I use a good shade of green. The sounds I will include will depend on what I’m showing. I will use more calmer music and some sound effects for some animations I will show. For example, when i’m talking about the effects on the environment, more specifically with ocean life, I could use oceans sounds for those bits of the animation. 
0 notes
kamranhaquemotiongraphics · 6 years ago
Text
The Life Cycle of Plastic Bottles - Research
What are disposable plastics?
Disposable plastics, or single-use plastics, are plastics that are only used once before they are thrown away or recycled. These items include things like plastic bags, straws, bottles, food packaging, etc. Half of the 300 million tons of plastic we produce is disposable. However, only 10-13% of plastic items are recycled around the world.
What countries have the lowest/highest rate of recycling?
The countries with the lowest rate of recycling are Turkey and Chile. Waste management is not a priority issue in Turkey, so most of the trash ends up in landfills. Unregulated dumping is common in Chile as the waste management is spotty. The country with the best rate of recycling is Germany, with a 65% recycling rate. They are good at recycling as the country has gone to considerable lengths to standardise recycling containers in the country. Containers are colour coded throughout the country and Germans enjoy recycling as a culture of environmental sustainability reigns within the country. The country that has improved the most in recycling is Poland, recycling 886% more of its waste than it was at the start of the millennium.
Tumblr media
(http://www.plasticfreechallenge.org/what-is-single-use-plastic)
(https://www.globalcitizen.org/en/content/best-and-worst-recyclers-in-the-world)
How are plastic bottles made?
Plastic bottles start off as a semi liquid. It is a mixture of oil, ethylene, propylene and more. The mixture of the materials used depends on the type of plastic being made, and the company that is making it. Some plastics can be harder and some softer, so each company has its own mixture. Recycled bottles are often made from older bottles that have been melted down, and a few fresh materials. Next, the plastic is molded. There are may different ways this is done. Most of the time, the plastic is cooled down and worked into granules. Plastic granules are put into a heating hopper, which then melts them down and pushes the melted plastic a press or a device used to create a bottle. Injection molding forces that melted plastic into a mold shaped like a bottle. Blow molding is similar, but uses an air jet to blow a film of plastic into the mold. This is used to make hollow shapes. After this, the bottle is filled with the product it’s made to contain, and a paper label is glued to the front. All of this is done by machines, which usually grip the bottles from the the top and then bring them towards a filling machine which loads the bottles with the ordered amount of liquid. The bottles are then grouped, boxed and shipped to be sold. The bottles are then consumed. After being emptied, they can be recycled. Many cities collect recyclables along with the trash. 
(https://sciencing.com/life-cycle-plastic-bottle-6690934.html)
What are the effects of not recycling?
Almost all plastic bottles can be recycled, however most most of them end up in the garbage instead of being recycled. Only one of every 5 plastic drink bottles are recycled, stated by The Container Recycling Institute. It’s important to recycle as many plastic bottles as possible, as there will be consequences for our land, water and wildlife if they aren’t. 
If plastic bottles aren’t recycled, they’ll end up in landfills. A lot of these landfills are already too overcrowded when they can be used for other purposes to make something better for the environment, instead of making it worse. Normally, plastic bottles do not biodegrade, so bottles stay in landfills almost forever. Waste in landfill takes part in producing methane, and too much methane can lead to global warming. 
As tempting as it would be to reuse a water bottle before throwing it away, this does more bad than good. Scratches and cracks in the plastic that are invisible could cause harmful chemicals from the plastic to mix into your drink. This could fill your drink with lots of bacteria that will then end up making you sick. So it is better to recycle bottles after the first use. If you were to reuse a bottle, it would have to be thoroughly washed and sanitised. 
A lot of trash ends up in oceans. This then leads to ocean life being hurt or killed from eating small bits of residual plastic. Smaller animals can end up getting stuck in cap rings of plastic water bottles or in plastic six-pack holders. Any animal could mistake this for their prey and try to eat it, with disastrous consequences. 
When water bottles aren’t recycled, new ones must be made in order to keep up with consumer demand. 1.5 million barrels of oil are required to make enough bottles only for the US’ demand for water bottles. Increasing the rate of recycling, or having more tap water, decreases the need for raw materials and fossil fuels to make new products. 
(https://www.livestrong.com/article/230076-the-effects-of-not-recycling-water-bottles/)
How does the UK dispose of plastics?
Dry recyclables are either organised at the kerbside by putting different materials into different compartments on a truck, or where people have a mixed recycling bin, collected mixed together and taken to one of the Materials Recycling Facilities in London where they are sorted into different materials such as paper, glass, plastic and metal. After sorting by either of the methods, the materials are then taken to reprocessors, where they are recycled and made into new products. 
(http://www.wiseuptowaste.org.uk/recycle/what-happens-to-my-recycling/)
What is being done to increase the rate of recycling?
Some councils are using creative ideas in order to boost household recycling. From making food waste be collected more often, to mechanically sifting black bags to recycle their contents, to knocking on doors of those who throw their rubbish away instead of recycling. Some councils are managing to really reduce what goes to landfill. 
0 notes
kamranhaquemotiongraphics · 7 years ago
Text
Roald Dahl Quote Animation
The task was to make an animation based on one of Roald Dahl’s book quotes. The quote I chose is “I’m right and you’re wrong, I’m big and you’re small, and there’s nothing you can do about it” from Matilda. 
Tumblr media
I started by opening a new composition and putting the words in. I decided to keep mine simple as most of the words can’t really have a creative animation to go along with it. I edited the size of the bars at the bottom so I can make that specific bit as short as I want. 
Tumblr media
Next I added a new layer for the next word, “right”. For this I created a thumbs up illustration on Illustrator and made it green as that is a positive colour that will go well with the word. I created three versions of it: a dark version, light version and one in between. I did this so I can create a ripple effect with the thumbs up. I imported all the assets into After Effects and arranged the layers to the order I wanted it to be in. After this I transformed it so the scale of the assets change. I made them all start from different sizes and then expand into the same size so the last and brightest coloured thumb would appear only. I did this by adding the keyframes and changing the percentage of the scale to whatever I wanted and made them all match in  the end. 
Tumblr media
From there, I added “and you’re” as new layers and then did the same thing I did for “right” for “wrong”. I rotated the thumb illustrations I made and recoloured them to red as that can be scene as a negative colour that would go well with the word “wrong”. After this, I added a new layer with the word “I’m” again.
Tumblr media
Next, I added the word “big”. I knew what I wanted to do with this and how I wanted to animate it because I knew it would be an easy answer as to how I can animate this particular word. 
Tumblr media
I did what I did with the thumb for this word and transformed the scale. I added keyframes and made the word go from its original size to the point where it gets to the edge of the composition to exaggerate it and make it pop. 
Tumblr media
I did the opposite thing for the word “small”. Instead of making the word go bigger, I made it go smaller. I edited the percentage so it goes from the regular size to a point where it is small, but still visible to read the word.
Tumblr media
Next I did the last slide to finish it off and used the entire sentence, “and there’s nothing you can do about it.” Not only did I animate the sentence is self by rotating it, I also added a ripple effect I’ve learnt before in the background which then expands and changes the colour of the entire background. I added the text and made the word “nothing” a different colour so it stands out as I wanted that word to have more emphasis on it. I transformed it by using rotation and making it rotate a full 360 degrees. While this text is rotating, I wanted to add the ripple effect in the background. I did this similar to the way I did the effect with the thumbs, by starting the circles at 0% and they all expand to 100% but after every 5 keyframes. I made the last inner circle take the longest to expand as that is the one that goes bigger than 100% so that it fills the entire background by the time the text has finished rotating. I made sure it all finishes at the same time so that it stays consistent and it ends with the text and new brighter background. I chose yellow for the word “nothing” as I thought that’s what would go well with the white and bright blue. 
youtube
0 notes
kamranhaquemotiongraphics · 7 years ago
Text
Animation Videos
Text Animation
youtube
I did this by using the text tool and typing join. Then I put the anchor point to the corner of the word and animated the rotation so that it turns and goes back and forth as if it is hanging. I did the rotation in different ways to see how else I can animate it. I also changed the positioning of another word, drop, by animating the position so that it drops to the bottom and bounces before it stays still, like a ball.
Text Squash
youtube
For this animation, I typed the word squash and animated the scale so that it looks like it is being compressed and expanding again. At the same time, I animated the position by a bit to make the movement more realistic.
Circle Animation
youtube
For this animation, I created different effects. I started with animated opacity with a few circles, the created a ripple effect and also a blink/flash effect.
Tumblr media
I started by using the shape tool to create 5 circles, all in a different shade of pink. From here I animated the opacity so that each circle shows up one after the other, from biggest to smallest, by changing the opacity from 0-100% then moving the keyframes so one starts after the other finishes.
Tumblr media Tumblr media
Next, I created a ripple effect by using the same technique as the opacity one, only this time I animated the scale instead. I did it so that each circle expands from 0% to whatever size it originally was at different times so it creates a ripple. I also reversed it by changing the scale back to 0%.
Tumblr media
To create the blink/flash effect, I did it by animating the opacity to different percentages at the same time so it flashes from dark to light. 
0 notes
kamranhaquemotiongraphics · 7 years ago
Text
12 Principles of Animation
The 12 Principles of animation were introduced by Ollie Johnston and Frank Thomas, animators from Disney, in their book - The Illusion of Life: Disney Animation. In the book, Johnston and Thomas explain the work of leading Disney animators since the 1930s, and narrow their approach down to 12 principles:
Squash & Stretch - This is when the animation gives the illusion of weight and volume to whatever is being animated. It is done by expanding and compressing the shape of what’s being animated. 
Tumblr media
Anticipation - This is used to prepare the audience for an action. It creates the effect of making an object’s action more realistic. For example, like bending your knees before you jump, or pulling your arm back before you throw something. It is the same case for animation, it needs anticipation for it to seem realistic.
Tumblr media
Staging - This is when motion is used to guide the viewer’s eye and draw attention to what’s important in the scene. It keeps the focus on the main thing in the scene and keeps the motion of everything else of less importance to a minimum. 
Tumblr media
Straight ahead action and pose to pose - These are two ways to handle drawing animation, each has their own benefits and are often combined. Straight ahead action is drawing frame by frame from start to finish. This is mostly used for more fluid, realistic movements. Pose to pose is when you draw the beginning frame, the end frame, and few key frames in between, then go back and complete the rest. This technique adds more control within the scene and allows the animation to be more dramatic. 
Tumblr media
Follow through and overlapping action - This is when an object stands still after being in motion, different parts of the object will stop at different rates. Similarly, not everything on an object will move at the same rate. For example, a character running across the scene, their arms and legs will be moving at a different rate from their head. This is called overlapping action. When they stop running, their hair will most likely carry on moving for a few frames before stopping with everything else, this is called follow through.
Tumblr media
Slow in and slow out - An example of this principle is a car. It starts slow, speeds up and then go slow again when it breaks. This is the same case for animation, more frames are added at the beginning and end to give the movement of an object more life. 
Tumblr media
Arc -  Animation works best when it follows the laws of physics. Most objects follow an arc or a path when they’re moving, and the animation should reflect an arc. For example, when you throw a ball into the air, it follows a natural arc as the effects of the Earth’s gravity act upon it. 
Tumblr media
Secondary Action - These are used to support the main action going on within a scene. Adding secondary actions help add more dimension to your characters and objects. 
Tumblr media
Timing -  Timing helps create the illusion that an action is following the laws of physics. By changing the timing of a scene, animators can make the scene look either slower and smoother or faster and crispier.
Tumblr media
Exaggeration -  Exaggeration is all about emphasising certain movements in a way that helps evoke a point, yet doesn’t ruin the realism of the scene.
Tumblr media
Solid Drawings -  This principle encourages animators to be mindful of the fact that while forms may be presented in 2D, they should aim to look 3D.
Tumblr media
Appeal -  This principle focuses on the fact that animators should aim to create images that will be interesting and compelling to audiences.
Tumblr media
0 notes
kamranhaquemotiongraphics · 7 years ago
Text
Motion Graphics
Motion graphics are pieces of digital footage or animation which create the illusion of movement. They are usually combined with audio for use in multimedia projects. An example of what motion graphics can be used in is Film & TV. Motion graphics can be used to make title cards and credits for films and TV shows. These are the credits for 300. 
Tumblr media
Another use of motion graphics is marketing or raising awareness about something. They are used a lot in advertisements to display and inform customers about a product. It is a very good way to catch the attention of viewers with a short attention span. This is an example of stop motion used for motion graphics in an advertisement.
Tumblr media
Motion graphics can also be used to explain a concept or idea as it allows a person to visualise their ideas and display it to someone else. It helps to support a point or to help the viewer see the information you share in a different way. Here’s an example of a video explaining a concept.
https://youtu.be/r43LhSUUGTQ
Another thing motion graphics can be used for is telling a story or for music videos or both. The visuals catch the attention of the audience and can be used as an infographic and explain things to people and make it look like a film. This will make the story be remembered more than a book as people can remember visuals more than words. Motion graphics can also be used for lyrics in music videos as they can be used in creative ways where they flow and move with the music. 
https://www.youtube.com/watch?v=aDB4sbayssc
0 notes