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 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 technique of an enchanting animation. Be sure that to activate the sound while you watch it for the complete expertise.
The Concept
Initially, the concept was to create a easy transition from one composition to a different with out utilizing “easy methods” to hide it, comparable to fade results or easy shade 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. By way of 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 venture “Solange”. On this venture, 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 shade 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 Venture
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 track.
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 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 means that you can separate the instrumental and vocals into two separate information.
Modifying 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 all the time inform novices in our area: “Any talent you could 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 track.
Then I began modifying all of the tracks to realize a sound stability between them. From the unique Céline Dion track, 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 commonplace results: a slight pitch adjustment and fade in/fade out results, as I all the time try to create looped animations. It was vital for me that the sound step by step light 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 concept was prepared together with the textual content for the content material, I began creating the composition to see how it will work with the textual content. So, I made two drafts with placeholders for movies.
Subsequent, I started trying to find 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 varied 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 shade correction, I spotted that this was what I wanted.
Animation Course of
I wish to briefly describe the animation course of. For every of my animations, I exploit a number of plugins that assist and on the identical time facilitate work in After Results:
- AEUX (a plugin that means that you can switch information from Figma to After Results. A very powerful 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 exploit this plugin for rapidly setting anchor factors and for smoothing animations, however it has many various properties).
- TextExploder (a plugin that means that you can 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 venture was to make the transition from one composition to a different as easy as potential (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. Concerning the smoothness of the animation, I used the strategy 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 Pace Graph”.
Ultimate End result & Conclusion
Simply as at the start of this text, on the finish, you’ll be able to see the ultimate outcome 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 all over the place; don’t restrict your self on this.
Creativity is a big construction that may be expressed in varied methods and paths. I’m glad that I achieved such a conceptual design that many individuals preferred. I’m blissful that I discovered a brand new approach and found easy transitions from one composition to a different.
We’re always studying and enhancing ourselves, so ultimately, I wish to let you know all to consider in your self and your skills, always 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 ✌😉