Hey everybody, I’m Alex Tkachev, a Digital Designer from Kazakhstan. I began my profession in 2015 as an online developer, then totally transitioned into the design subject after one yr in improvement. I’m a giant fan of 404 pages and a nature lover.
On this article, we’ll take you behind the scenes to discover the creation means of an interesting animation. Ensure to activate the sound once you watch it for the complete expertise.
The Concept
Initially, the thought was to create a clean transition from one composition to a different with out utilizing “easy tips” to hide it, resembling fade results or clean colour overlays. Due to this fact, 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 considerations typography. I preferred how “Querida” used the mixture of Sans Serif and Mono fonts of their undertaking “Solange”. On this undertaking, 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 clean colour 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 Mission
I’m a melomaniac, so I hearken to all genres of music. Initially, I got here throughout a music video by an artist named Lobster, and I actually preferred the lyrics, vibe, and visuals, in addition to his remix of a Céline Dion tune.
I downloaded the unique MP3 information of each songs, however since I wanted to separate the instrumental and vocals from the Lobster music video, I used the AI instrument “audeo.ai”. This instrument information any sounds out of your browser, whether or not it’s a video, music, voice message, and so forth. Moreover, this AI permits you to separate the instrumental and vocals into two separate information.
Modifying Music in Audacity
Since I’ve expertise in sound enhancing (after I was a youngster, I used to be into music and recorded my initiatives utilizing Audacity), I all the time inform newbies in our subject: “Any ability you may have could be helpful each for you and for the shopper/staff you’re employed with.”
So, I imported all of the MP3 information into Audacity: the 2 separate MP3 information from the Lobster music video and the complete model of the Céline Dion tune.
Then I began enhancing 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 number of customary results: a slight pitch adjustment and fade in/fade out results, as I all the time try to create looped animations. It was essential for me that the sound steadily pale out after which steadily 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 till I got here throughout the “Bus Love Story” assortment by Seffy (Joseph) Hirsch. As quickly as I noticed the vibe, environment, and colour 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 permits you to switch information from Figma to After Results. An important recommendation to keep away from any issues with file switch from Figma utilizing this plugin: use Auto-Structure, 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, however it has many various properties).
- TextExploder (a plugin that permits you to cut up a complete textual content block into separate strains, phrases, and letters).
General, the animation took about 2-3 hours. The principle issue on this undertaking was to make the transition from one composition to a different as clean as attainable (this considerations solely the video). I used the identical placeholders from the wireframes to make use of them in After Results as masks, underneath 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 strategy suggested by Matt Corridor (thanks, Matt ✌😉), which entails constructing the graph primarily based on straightforward ease after which working with it to create one thing like a “Peak Pace Graph”.
Remaining Outcome & Conclusion
Simply as initially 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. Due to this fact, all the time attempt to discover inspiration in every single place; 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 preferred. I’m comfortable that I discovered a brand new method and found clean transitions from one composition to a different.
We’re always studying and bettering ourselves, so in the long run, I wish to inform you all to consider in your self and your skills, always enhance them, experiment extra, and don’t be afraid to be who you’re. Be your self, be type to your self and to others as nicely.
With all respect, your pleasant neighbor on planet Earth,
Alex ✌😉
