Identity Website Printed Materials 3D Alphabet Application Brochure Interface Landing page
Searching for the concept. Drawing sketches.
The art director floats an idea: what if we create letters out of various objects that illustrate the project? The designer makes a quick sketch.
Discussing the idea with the client. Coming up with the concept of illustrating materials with tag words made of 3D letters that would visually represent the advantages of the pipeline.
Drawing the letters.
The client approves the idea. Preparing a test illustration to approve the style.
Asking the technical designer to draw a couple of sample letters. Making sketches to see how letters would look on various media.
The approach is approved. Preparing a couple more letters.
Drawing all illustrations in high resolution.
Since we need to draw several dozen letters, we need to invite other designers to join the effort. Writing guidelines to simplify collaboration.
Each letter goes through several iterations.
The client asks to animate the letters. They will be placed against varied backgrounds and thus have to feature transparency. Trying to find the best approach, since animation of certain characters will be very detailed.
For instance, animated version of the letter C with ripples on the water and a floating buoy contains 1787 frames. Deciding to use transparent video to avoid matching the background of each letter with that of the page.
The designer sends source video files to the technologist. The technologist renders a set of PNG files with transparency and assembles each letter into a video file.
As a result, a 9,5 MB set of pictures is transferred into a 159 KB video maintaining the original quality.
There are a lot of sea-themed letters among the characters.
Originally, we were planning to animate only the large objects (the ship, the big fish, the buoy). But a ship floating in frozen water would look odd, which means we need to find a way to bring the sea to life. Finding an in-browser JavaScript water surface generator. Choosing the right angle, capturing the video and using it to replace the static water layer in the letter.
Good, but not good enough. Making the edges ripple, adding sun beams.
In order to add character to Jacques Cousteau’s world, animating the underwater creatures: slow viscous jellyfish, seahorses and seaweed. Taking into account the shift in perspective due to refraction.
Using these ideas in all “water” letters. The letter N features a school of fish.
To add dynamics and make the fish more lively, aiming them beyond the edges of the letter. Since all videos have to be looped, using the standard idea: duplicating the school and deleting it outside of the frame, timing it so that at the end of the loop new fish take place of the old ones. Cutting the picture and breaking it down into individual fishes, giving each fish its own trajectory. 134 fishes overall. Done.
The letter D has to have a helicopter landing pad.
Making the helicopter movement slightly chaotic, moving the shadow closer.
The art director asks to stop the rotors after landing. Assembling the simplest rotor and rotating it.
Adding radial blurring which fades away when the rotor stops. Moving the rotor to the background after stopping to give it even more life.
Attaching this composition to the helicopter in place of the static rotor, squeezing it vertically and tilting. Repeating the same for the tail rotor (but with two blades only). Done.
In the letter O we need to create the heat haze blurring effect, as if there’s hot gas coming up from the letter counter.
First trying to use Turbulence Displace effect. But it doesn’t have direction, so we add a dynamic particle flow made using Snowfall snow generator.
Fixing the dropped capitals.