Hey everybody, I’m Alex Tkachev, a Digital Designer from Kazakhstan. I began my profession in 2015 as an internet developer, then absolutely transitioned into the design area after one 12 months in growth. I’m a giant fan of 404 pages and a nature lover.
On this article, we are going to take you behind the scenes to discover the creation means of an enchanting animation. Be certain to activate the sound whenever you watch it for the complete expertise.
The Concept
Initially, the thought was to create a easy transition from one composition to a different with out utilizing “easy tips” to hide it, reminiscent of fade results or easy coloration overlays. Subsequently, the preliminary construction (wireframe) was already in my thoughts as quickly as I envisioned what I wished to create.
Inspiration & References
1. When it comes to references, there have been solely two. The primary reference issues typography. I appreciated how “Querida” used the mix of Sans Serif and Mono fonts of their mission “Solange”. On this mission, I used these fonts: PP Neue Montreal by PangramPangram and JetBrains Mono by JetBrains.
2. The second reference by the “Balkan Brothers” was helpful by way of easy coloration transitions (proper card). It impressed the underside a part of my animation the place the compositions change: Composition 1/Composition 2.
Music & AI Used for the Challenge
I’m a melomaniac, so I take heed to all genres of music. Initially, I got here throughout a music video by an artist named Lobster, and I actually appreciated the lyrics, vibe, and visuals, in addition to his remix of a Céline Dion tune.
I downloaded the unique MP3 recordsdata of each songs, however since I wanted to separate the instrumental and vocals from the Lobster music video, I used the AI software “audeo.ai”. This software data any sounds out of your browser, whether or not it’s a video, music, voice message, and so forth. Moreover, this AI lets you separate the instrumental and vocals into two separate recordsdata.
Enhancing Music in Audacity
Since I’ve expertise in sound modifying (once I was an adolescent, I used to be into music and recorded my initiatives utilizing Audacity), I at all times inform newcomers in our area: “Any ability you’ve gotten could be helpful each for you and for the consumer/group you’re employed with.”
So, I imported all of the MP3 recordsdata into Audacity: the 2 separate MP3 recordsdata from the Lobster music video and the complete model of the Céline Dion tune.
Then I began modifying all of the tracks to realize a sound steadiness between them. From the unique Céline Dion tune, I solely wanted the preliminary instrumental (only a few seconds) to use a pitch impact to it and combine it into the remix from Lobster.
Subsequent, I utilized a couple of commonplace results: a slight pitch adjustment and fade in/fade out results, as I at all times try to create looped animations. It was essential for me that the sound step by step pale out after which step by step began once more. And that is what got here out of all of it 🔊
Design Course of
Because the wireframe was already ready, and the thought was prepared together with the textual content for the content material, I began creating the composition to see how it might work with the textual content. So, I made two drafts with placeholders for movies.
Subsequent, I started looking for visuals. I wished to convey the temper of each songs concurrently. The seek for these visuals was considerably influenced by the Lobster music video. I used the platform Artlist, which has a HUGE assortment of footage on numerous themes.
I spent a number of hours looking out till I got here throughout the “Bus Love Story” assortment by Seffy (Joseph) Hirsch. As quickly as I noticed the vibe, environment, and coloration correction, I noticed that this was what I wanted.
Animation Course of
I wish to briefly describe the animation course of. For every of my animations, I take advantage of a number of plugins that assist and on the similar time facilitate work in After Results:
- AEUX (a plugin that lets you switch recordsdata from Figma to After Results. Crucial recommendation to keep away from any issues with file switch from Figma utilizing this plugin: use Auto-Format, as layers utilizing auto-layout are perceived by After Results as separate compositions that you’ll work with).
- Movement 4 (personally, I take advantage of this plugin for rapidly setting anchor factors and for smoothing animations, but it surely has many alternative properties).
- TextExploder (a plugin that lets you cut up a complete textual content block into separate traces, phrases, and letters).
General, the animation took about 2-3 hours. The primary issue on this mission was to make the transition from one composition to a different as easy as doable (this issues solely the video). I used the identical placeholders from the wireframes to make use of them in After Results as masks, below which I adjusted the video.
I additionally utilized a barely noticeable smoke layer to the ultimate video so as to add element and deal with the environment. Relating to the smoothness of the animation, I used the method suggested by Matt Corridor (thanks, Matt ✌😉), which includes constructing the graph primarily based on straightforward ease after which working with it to create one thing like a “Peak Velocity Graph”.
Last Consequence & Conclusion
Simply as at the start of this text, on the finish, you possibly can see the ultimate consequence that spontaneously got here to my thoughts as a result of I merely noticed a music video. Subsequently, at all times attempt to discover inspiration in all places; don’t restrict your self on this.
Creativity is a big construction that may be expressed in numerous methods and paths. I’m glad that I achieved such a conceptual design that many individuals appreciated. I’m completely satisfied that I realized a brand new method and found easy transitions from one composition to a different.
We’re continually studying and enhancing ourselves, so in the long run, I wish to let you know all to consider in your self and your talents, continually enhance them, experiment extra, and don’t be afraid to be who you might be. Be your self, be sort to your self and to others as properly.
With all respect, your pleasant neighbor on planet Earth,
Alex ✌😉
