Make money with Oziconnect referral program

Hello everyone, I’m Alex Tkachev, a digital designer from Kazakhstan. I started my career as a web developer in 2015 and after a year of development I moved completely to the design field. I’m a big fan of 404 pages and a nature lover.

This article offers a behind-the-scenes look at the creation of these fascinating animations – be sure to watch with sound on for the full experience.

idea

The initial idea was Smooth transition from one configuration to another I already had the initial structure (wireframe) in my head when I envisioned what I wanted to create, without hiding it using “easy tricks” like fade effects or smooth color overlays.

Inspiration and References

1. There were only two references. The first reference was typographyI love how Querida used a combination of sans serif and mono fonts in their project Solange. For this project, I used the following fonts: PP Neue Montreal by PangramPangram and JetBrains Mono by JetBrains.

2. The second reference by “Bulkan Brothers” was helpful in terms of smooth color transitions (card on the right). It inspired the bottom part of my animation Where the configuration switches: Config 1/Config 2.

Music and AI used in the project

I’m a music fanatic so I listen to all genres of music. First, I came across a music video by an artist called Lobster and I loved the lyrics, the atmosphere, the visuals and the remix of a Celine Dion song.

I downloaded the original MP3 files of both songs, but I needed to separate the instruments and vocals from Lobster’s music video, so I used the AI ​​tool “audeo.ai”. This tool records any sound from your browser, including videos, music, and voice messages. Moreover, this AI allows you to separate the instruments and vocals into two separate files.

Editing music with Audacity

Since I have some experience in sound editing (I was obsessed with music as a teenager and used Audacity to record my projects), I always say to people new to this field: “Any skill you have can be useful to you and to the clients and teams you work with.”

So I imported all of the MP3 files into Audacity: the two individual MP3 files of the Lobster music video, as well as the full version of the Celine Dion song.

Then I started editing all the tracks Achieving a healthy balance Between them: in the original Celine Dion song, only the first instrumental part (just a few seconds) was needed to apply the pitch effect and integrate it into the Lobster remix.

Then I applied some standard effects: pitch tweaks and fade in/fade out effects. I always strive to create looping animations. It was important for the sound to gradually fade out and then gradually start again. And this is what came out of it all 🔊

Design Process

Since the wireframe was already prepared and the idea was prepared along with the text of the content, I started creating a composition to see how it would work with the text, so I created two drafts with a placeholder for the video.

Next, I started looking for visuals. I wanted to convey the vibe of both songs at the same time. My search for these visuals was heavily inspired by Lobster’s music videos. I used Artlist, a platform that collects a ton of footage on different themes.

After hours of searching, I came across the “Bus Love Story” collection by Seffy (Joseph) Hirsch and as soon as I saw the vibe, atmosphere and color correction, I knew it was exactly what I was looking for.

Animation Process

I’d like to briefly explain the animation process: for each animation I used several plugins that complemented and at the same time made my work in After Effects easier.

  • AEUX (A plugin that allows you to transfer files from Figma to After Effects. The most important advice to avoid issues when transferring files from Figma using this plugin: Use Auto Layout because layers that use Auto Layout are treated as separate compositions in After Effects that you can work with.
  • Motion 4 (Personally I use this plugin for quickly setting anchor points and smooth animations, but it has a wide range of properties).
  • Text Exploder (A plugin that lets you split entire blocks of text into individual lines, words, or characters).

Overall the animation took about 2-3 hours. The main difficulty of this project was to make the transition from one composition to another as smooth as possible (this only concerns the video). I used the same placeholder from the wireframe as a mask in After Effects and adjusted the video underneath it.

I also applied a barely noticeable layer of smoke to the final video to emphasize the details and atmosphere. As for the smoothness of the animation, Matt Hall (Thanks Matt ✌😉), this involves constructing a graph based on a quick yeezy and using that to create something like a “peak speed graph”.

Final Results and Conclusions

Just like at the beginning of this article, at the end you will see the final result that naturally came to mind just by watching the music video. Therefore, always try to find inspiration everywhere and do not limit yourself to this.

Creativity is a huge structure It can be expressed in many different ways and pathways. I’m happy to have been able to realize a concept design that so many people like. I’m happy to have learned new techniques and discovered smooth transitions from one composition to another.

We are always learning and improving ourselves, so my final message to you is to believe in yourself and your capabilities, always improve, experiment more, and don’t be afraid to be yourself. Be yourself and be kind to yourself and others.

As a friendly neighbour on Earth,
Alex ✌😉

How to create distortion and grain effects while scrolling using Three.js shaders

Make money with Oziconnect referral program
Make money with Oziconnect referral program
Make money with Oziconnect referral program
Make money with Oziconnect referral program
84512

About Us

We are a leading IT agency in Lagos, Nigeria, providing IT consulting and custom software development services. We offer a wide range of IT solutions across software development, web and mobile application development, blockchain development services, digital marketing, and branding.

Contact Us

25B Lagos-Abekouta Expressway Lagos

info@ozitechgroup.com

Phone: (234) 907 155 5545

@2023 OzitechGroup – All Right Reserved.