It was found that while Photoshop can be used for small animation projects, it is not suitable for larger projects, as it is severely lacking in some tools that are crucial for creating smooth, attractive animations. Although Photoshop is not intended to be used for animation, it has a lot of potential as it allows full control over the visual appearance of the animation and gives the artist freedom of expression while limiting their skills and imagination.
Brief history of stickers in social media
In October 2019, Facebook released a set of stickers designed to raise awareness of mental health issues and to mark World Mental Health Day. In addition to this, Facebook said it would donate money to organizations working on the cause: "Every time a sticker is sent, Facebook will donate $1 to a group of mental health organizations, up to $1 million." (Facebook, 2019).
Impact on popular culture
This newfound virality led to Trash Doves being spammed across Facebook, which in turn led to some users becoming annoyed with Weiler for making the stickers. All negativity aside, Trash Doves inspired a community of internet citizens to create a work.
Big business
Global brands have recognized the success of LINE and its set of characters called LINE FRIENDS, which were first introduced in a sticker pack back in 2011. Before diving into how the animations are made, this chapter provides a quick overview of the 12 animation principles that first was introduced in The Illusion of Life by Ollie Johnston & Frank Thomas.
Squash and stretch
It's almost impossible to talk about animation without mentioning one of the principles of animation. This principle can be applied in Photoshop by drawing each frame by hand or using transformation tools to modify the shape.
Anticipation
Since all the images are stored in bitmap form, there is a limit to how much and artist can change the frames until they lose image quality.
Staging
Appropriate clothing, including setting, lighting, and weather elements, is used to emphasize the emotions of the characters (Hoks, Acting for Animators, 2018). At best, staging adds to the action of the animation, and at worst, it can distract and draw attention away from the action (Becker, 12 Principles of Animation, 2017).
Straight ahead and pose-to-pose
Follow through and overlapping action
Slow in and slow out
The same principle applies to both 2D and 3D animation, with the difference in graphics used in 3D to adjust the spacing. In 3D, each graph is adjusted according to how the character or object moves on the X, Y and Z axis. When creating hand-drawn 2D animations in Photoshop, this principle can be applied by adjusting the spacing of the drawing.
However, when using video layer keyframe animation, which can be used to animate image size, location, and transparency, only linear interpolation and hold is available (Photoshop User's Guide, 2019).
Arcs
Secondary action
Timing
Exaggeration
Solid drawing
Appeal
The brief
Concept work
Now that we were familiar with character design, it was time to move on to the next step, thumbnails. Gesture drawings play an important role in animation as they express the actions and emotions of the characters. A good gesture conveys with a single glance what the character is doing, how he is doing it, and what his motive is.
While a bad gesture leaves the viewer confused, wondering what exactly the character is trying to do or what their attitude is. The images can remain rough and loose, but they must be clear enough to understand the gesture and the idea of the action.
Layout and style
After the feedback session, one of these concepts was discarded because the overall idea was not clear enough to the viewer. The rest were due to some small changes later in the animation pipeline, such as color changes, background changes, or having some confusing elements adjusted or removed. Screenshot from Procreate showing the overview of the appearance of all the animations before the final round of feedback.
Produce screenshot of a ceiling tax concept that was scrapped because the idea wasn't clear enough to the viewer. Produce screenshot of a new concept with a meditating cat, this was chosen because it brought variety to the set and was much more readable than the previous iterations.
Animation style
Sometimes it's not possible to tell from character design files how a certain element would look from a different angle or how different body parts look when posed. As with the limbs, the cat's paws and how they would work were discussed with the character designer before being animated. The hands and feet of the characters are the second most expressive elements in animation right after the face of the characters (Taille, Gobelins, 2017).
Concepts of paws and feet to elaborate on how they might look with different poses and angles.
Planning for animation
Planning can be the longest part of the project, but it saves a lot of time in the long run. Drawing and cleaning up an animated frame takes a lot of time considering how long a single frame will be on the screen, and if there is a frame error, it takes double. The better the planning stage, the easier and less time consuming the animation process will be.
Rough animation
When the video timeline is set up, each layer (except the video layer) has its own bar on the timeline with a duration of 5 seconds. You can arrange animation frames into video groups by dragging them to the same line on the timeline. This makes it easier to move and duplicate keyframes and makes managing the timeline easier.
When drawing keyframes and breakdowns, animators are usually advised to transition between frames rather than using onion skins, as it's easier to see the movement in action. Rotation also makes it easier to see characters or objects that turn in three-dimensional space, since parts drawn with onion skins can result in distortion. It's helpful to draw the arcs separately as a guide, rather than trying to imagine them when you draw each frame, which can result in jittery movement instead of a smooth curve.
Example of key poses and breakdown for a paw movement that slows down at the end.
Clean up and color in Photoshop
Breaks define the arc of the movement and whether the spacing movement is linear, or if there is ease in or ease out. The same action was also used in inverse, to make the same steps recorded, but the selection was shrunk by 3 pixels instead of expanding. Using contract or expand on the selection fills in the holes that would be easily missed by the paint bucket tool.
A less time-consuming method of cleanup was to duplicate the previously colored frame and adjust it with the warp tool to fit the rough animation frame. Compared to coloring each image by hand, this method is much less time consuming, but can make the animated objects look flat. When used sparingly, this method worked best to bring the character to life by adding small movements to support the main action, such as slight twitches of the tail or slight rotation of the body parts.
Animating smart objects
This method was used to animate repetitive elements and small special effects such as the punch lines in the paw high five animation seen in the screenshot below. In this example, the animated lines follow the same timing, but they can be offset for more organic special effects like rain or sparks, as seen in the image after the paw high five screenshot.
Working with video layers
In Photoshop's video timeline it is possible to animate the location, scale and transparency of an image. By jumping to another spot on the timeline, moving the character, and then creating another keyframe, Photoshop ended up linearly interpolating between those frames. Linear interpolation means that the spacing between the keyframes is equal and there is no ease in or convenience.
According to Photoshop documentation, there is not yet a possibility to create ease in the timeline (2019).
Rendering
Even when using shortcuts and actions to accommodate the features that normally make the animation workflow more fluid, animating in Photoshop turned out to be a much slower process than expected. In addition to the missing features, Photoshop lacks the community and documentation that those animating in Photoshop may need to lean on when questions arise. This, along with the monthly fee, which is very close to the monthly fee for Photoshop, makes ToonBoom Harmony a more viable solution for an animation.
Although RoughAnimator is a lesser-known tool for animation, it has all the features needed to create an animation, and a very user-friendly interface, making it the most suitable tool out of the four for beginner animators. In summary, Photoshop has not turned out to be a viable tool for character animation, as it lacks many of the important features commonly found in animation software. While there are some features that can be compensated by using recorded Photoshop actions, the lack of these features and using these workarounds can be very intimidating for someone trying to get into animation.
They previously worked on the cutscenes for Trials of the Blood Dragon by Redlynx Studio. Shade is not afraid of much as Shade has explored much of the darkness that we never get to see. Scram spends most of her day dreaming of other adventures, and when the lights go out, she can be found sleeping in one of the many books in the cafe absorbing her knowledge.
Software used in this thesis
Visible Realms
Character briefs given by the client (Visible Realms)
