PICTURE 28. Screenshot of Instagram Stories’ GIF menu, featuring some of the project’s stickers
In the end Adobe After Effects was chosen to be to the software for the project’s animations. Combining vector graphics with the motion graphics friendly nature of After Effects, it made able an overall smoother and more easily modifiable animating experience. The software in question was also the most familiar one for me at the time, which also had an influence in the decision on which software was to be picked for the animating process. The look of the practice animations created in After Effects was also the most pleasing for the art director. All the project’s animations ended up being executed using After Effects, and were converted into GIFs using Photoshop, since After Effects does not have the said ability. Photoshop was also used to remove unnecessary burdening still frames from the animation, which reason is being discussed more later in the thesis.
PICTURE 29. Still frame from one of the first test GIFs using Pikku Kakkonen’s vector graphics
When starting the project, certain quidelines were given for the content of the animated GIFs from Pikku Kakkonen’s art director. Two umbrella terms were Valentine’s Day and Easter, and a couple of GIFs were also requested with a specific idea and action for them. Those ideas were different bouncing arrows, and moving text. In Instagram Stories many stickers of moving arrows and texts can already be found, but the art director had a previous idea for Pikku Kakkonen’s own arrows and text, which could be executed by using the brand’s own font and graphical elements. In the second part of the project, a few more specific animated GIFs were requested; the “Scateboarding chick” and the “Egg painter”. In addition to these specific Easter themed animated GIFs, I was granted freedom to come up with additional ideas for the rest of the GIFs during the second part of the project.
I started about half of animations by creating an animation breakdown for them, which means visualising the animation through an image sequence showing its frames. Some quickly executed breakdowns only showed the keyframes. The animation breakdowns were executed using Pikku Kakkonen’s vector graphics, which were imported to Photoshop. The graphics were easy and quick to move and switch between the layers, without the process requiring much actual sketching by drawing. However, creating the animation breakdowns was not something considered self-evident from the beginning, but something that both myself and the art director agreed on being wise to do as the project continued.
The reason for the late realisation of sketching the animations with still images rather than animations, and the detected usefulness of the animation breakdowns is being discussed later in the thesis.
PICTURE 30. Animation breakdown of the “Hatching Chick” sticker
After the animation breakdown got approved, the animating process was started in Adobe Illustrator. The reason for using Illustrator for managing the layers for the vector graphics was because the program was ideal for the files, and easily at hand. In the software in question all the idividual parts of the animated graphics were arranged in their own layers. This needed to be done, since in After Effects the individual parts needed their own layers in order to be easily animated regardless from one another. Managing the individual parts from a graphic as a gestalt turned out to be not too complicated, since the vector graphics were simple in design to begin with. If the graphics would have been complex by having many moving components, the overall controlling and animating of a singular character would have been more time consuming.
Reaching the desired animation style turned out to be an ongoing quest throughout the project. In the middle of the project I got exposed to some of Pikku Kakkonen’s previous short animations, which were executed by using the graphics. This was a major help for comprehending the desired animation style.
In addition to working as visual aid when negotiating with the art director about the animations, creating the animation breakdowns was also practical for myself when checking which of the animation principles were used, and how they could be utilized in the animations before starting the actual animating process. Even though the principles of animation were a familiar concept for me beforehand, it turned out to be beneficial to study them for the project to make them easier to explain when detected in the animated GIFs.
For example, when examining the frames from the project’s GIF where a chick hatches from an Easter egg, four animation principles can be detected. First, an anticipatory frame can be seen as the egg swings slightly to the right before the main movement to the left. This helps setting up the anticipation for the next action in the animation.
PICTURE 31. Frames depicting the Anticipatory frame from the “Hatching Chick” animation.
In the same GIF, the next detectable principle used is the stretch and squash.
The egg gets squished down, and afterwards stretched up right before it breaks open. This, along with the timing of the hatch enhances the idea of the egg being slightly flexible, and giving it the illusion of a material that needs actual force to be broken.
PICTURE 32. The squash frame, followed by the stretch frames from the
“Hatching Chick” animation.
The secondary action principle can also be detected in the same GIF, precicely in the frames where the egg shell balanced on top of the chick’s head has its individual motion, when the main movement of the hatched chick is slowing down.
This is used in order to enhance the main movement, and to make it easier to focus on it.
PICTURE 33. Frames depicting the secondary action principle in the “Hatching Chick” animation.
In the end of the GIF, a follow through and overlapping action animation principle can be detected, as the egg closes itself up and continues the movement slightly to the left before the motions stops completely. This adds liveliness to the animation.
PICTURE 34. Frames depicting the follow through and overlapping action animation principle in the “Hatching Chick” animation.
In addition to Disney’s principles of animation, the additional foundations of animation can be similarly detected in the project’s animations. For example, the overlapping and following through foundation can be seen in the sticker named
“Valentine’s Day bullfinch”. In the animation, the overlapping action is used to highlight the illusion of two different masses, which the two elements are set to have. In the animation in question, the bullfinch seems heavier and bound to gravity, since after the jump it quickly falls back on the ground. The bird’s jump can also be seen to be enlivened by the stretch and squash animation principle, which adds vitality in the character. However, after fast exaggeration of the heart graphic in a single frame, the overlapping and follow through action of the floating heart gives it a slight soap bubble feel as it pops in the air, and after some anticipation gets caught in the “wind” and floats out of the scene. The heart also follows an arc, which was animated using a custom path.
Some other additional foundations of animation can also be detected in the project’s stickers. For example, all of the provided vector graphics and characters have strong design. The characters especially are heavily stylized from their real- life counterparts. Simple, round shapes generally communicate calmness and cuteness, which can be seen for example in the bird characters. On the other hand, heavy stylizing can make their silhouttes alone difficult to understand to some extent. However it was clear in the beginning of the project that the animations would be executed using Pikku Kakkonen’s vector graphics from the visual brand imagery, so this was something which I was not personally able to have an influence on.
Another additional foundation can also be detected in one of the animated GIFs named the “Skateboarding chick”. When the chick puts its foot on the imaginary ground, the leg stretches to an extend where it almost breaks off. This is where the breaking joints foundation is being used. The breaking joint does not disturb the movement when observing the animation, but rather makes it look more fluent. However, it deserves to be mentioned, that the animation guideline in question can also be related to the exaggeration animation principle.
PICTURE 35. Frame depicting the breaking joints foundation. A link to the produced animations can be found on the page 63 of the thesis.
Especially in the animated GIFs created by using the bird and chick characters, the movement can be seen led by the beak, depicting the usage of the leading action foundation. The character designs of the bird and chick characters gave me a feel of an active, determined creature, which inspired the animations of them to resemble those mental images.
Similarly the follow through animation principle, an overshoot and settle foundation can be detected in a frame from the previously examined GIF, where a chick hatches from an Easter egg. In practice the animation principle and the foundation of animation look the same in the animation, and are meant to give the viewer more time to comprehend the movement.
The thumbnails and planning foundation was also applied to some extinct when creating the animation breakdowns for the animated GIFs, however not every frame of the movement was included.
As mentioned, in additionally to the short, looping animations, two animated shorts were created and published as updates on Pikku Kakkonen’s Instagram and Facebook feeds. Similarly to the animated stickers, the narration of the animated shorts were roughly first presented via a short script-like image sequence. Due to short time period for the animated shorts to be idealized, executed and published, the script only showed the very basic idea for the animations, and certainly not every frame.
PICTURE 36. Rough animation breakdown and script for an Easter themed animated card
After the art director approved the basis of the narration, the animation was also executed using After Effects. This helped keeping the style of the animation similar between the animated shorts and the GIFs, since they were executed using the same software. In After Effects, the animated elements were composed into one scene, since editing multiple compositions at a time was possible in the software in question. In practise this means that every animated character and background had its own composition, which where animated independently, while simultaneously being able to monitor how they worked as a whole.
The execution period for the animated shorts was vigorous, thus in the Easter themed animated short one of the GIFs’ animation loops was recycled in order to save time. In addition to the two animated shorts that were created, in practice both of them were composed into two different sizes. This meant, that the animated shorts needed to fit Facebook’s aspect ratio of 1200x700, as well as Instagram’s ratio of 1080x1080. This means that in total four different renders of the animated shorts were created, and the animations needed to be altered in each one them to fit the composition. When observing for example the Valentine’s
Day animated shorts, differences can be spotted in their animation, for example when focusing on the text’s behaviour.
After the short looping animations were finished, they were rendered into video format, which was then opened in Adobe Photoshop. From Photoshop it was possible to save the video as GIF, after which it was suitable to be used as a sticker.
The last step in the production was to upload the GIFs to a website called GIPHY, which works as a GIF-server. GIFs cannot be uploaded to Instagram Stories from personal files, so first they needed to be submitted to a GIF server, which then ideally approves them for public use. While submitting the created GIFs to the server, it was also important to add keywords describing it, so the odds for the GIFs to be founded would be better. After the format is set to go, it can be found in the ‘GIF’ option inside of the sticker menu of all apps and sites that are connected to GIPHY, such as Instagram.
The art director set up a GIPHY account for Pikku Kakkonen, and first handled the uploading of the produced GIFs independently, which was later also made possible for myself. This decision was made since GIPHY took about 24 hours time to approve a GIF after uploading it to Pikku Kakkonen’s GIPHY account.
When I was able to do it independently, the process became faster. This contradicts what what said earlier about the easy publishing of GIFs, but the difference is that a GIF-server was mandatory to use in order for the project’s GIFs to be public. For example, a GIF can be easily published to a personal blog from personal files, but when publishing it to a public platform, the moderators’ examination of its content is inevitable. It was also ideal to use GIPHY for this project, since it has a view-count feature for the creators’ own GIFs. Because of this it was possible to estimate how much interest the project arose.
PICTURE 37. Post info of one of the thesis project’s GIFs depicting the post’s view-count and keywords.
The viewing of Pikku Kakkonen’s GIFs gradually increased during the publishing months of the GIFs. After the flow of incoming GIFs stopped, a drop in the views occured. If more GIFs were to be made and published, it could be a possibility for the views to keep going up, since the excisting GIFs already got a fair amout of views. The peak of the GIFs produced for the thesis project view counts were on the holiday dates when they were published, those being the Valentine’s Day and Palm Sunday of 2019.
CHART 1. Most viewed GIFs on Pikku Kakkonen Giphy account on 19.5.2019
The chart can be compared to Yle’s other GIPHY account, Yle Areena. The GIFs of the Yle Areena account consist of animated texts, which were a part of Yle’s experimental Instagram series called Goals. The GIFs were published on Areena’s GIPHY account in October 2018 and one of Pikku Kakkonen’s arrow stickers were published on their account as well in February 2019. When looking at Areena’s channel activity from the chart on its profile, a similar pattern can be seen in the rise and drop of the views. There were most views in the publishing month of the GIFs, which after they decreased. In spring 2019, on average Yle Areena’s GIFs had more views than the GIFs on Pikku Kakkonen’s account. One reason for this can be the fact that GIFs on the Areena account contain English language, which is more globally more understood than Finnish. From the point of view of social media, stickers that include phrases like “goals” and “stay strong” are globally understood and probably used among users searching for these keywords, even if they would not know the GIF’s origin. The view-count results from Areena’s GIPHY account was used for the thesis in order to compare the thesis project to something similar that was created using the same platform.
However, the described chart could not be visualised in the thesis due to Yle Areena’s privacy policy.
Considering the graphics used in the project, some difficulties occurred after publishing the stickers. Even though the vector graphics had unified color surfaces and were ideal for executing the stickers and simple animations, technical difficulties occurred after it was possible to see the GIFs in Instagram Stories. In various cases when the sticker was scaled, the edge of it got pixelized.
This is a common phenomenon in many stickers which are used on Instagram Stories. The problem took place because of the non anti-aliasing occuring in the GIF, which is tied to the technical nature of the format. This means, that because of the resolution which the GIF provides, it is not possible for the format to take samples around it to fill the happening ‘staircase effect’ on the pixels along the edge of the graphic. (Techquickie 2013) This phenomenon puzzled myself and the art director since the sizing of the stickers were ideal, and the jagging of the edges did not happen anywhere else than on Instagram Stories.
PICTURE 38. Demonstration of pixelized edges in a scaled sticker in Instagram Stories, screenshots.
In a couple of cases when the sticker was scaled, it got pixelized to a point of being completely unrecocnizable. The art director emailed GIPHY about the scaling problem. GIPHY aknowledged the problem, and stated that it is a problem only occurring in Instagram due to its lower quality rendition asset (Giphy Team 2019). Snapchat – for example – shows the stickers as clean and sharp as the vector graphics are. GIPHY recommended that by cropping the alpha channel to touch the very edge of the graphic and removing unneccessary frames – such as still frames – from the animation in Photoshop, it was possible to improve the quality of the sticker (Giphy Team 2019). As previosuly mentioned, in the end it was preferred to always repeat this treatment for every sticker.