• Graphic design
  • TurkStream
  • Identity   Website   Printed Materials   3D Alphabet   Application   Brochure  

    The making of the TurkStream 3D alphabet

    Overview
    Process


    Searching for the concept. Drawing sketches.

    ts graphic process 46
    ts graphic process 48

    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.

    ts graphic process 49

    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.

    ts graphic process 50

    Drawing the letters.

    ts graphic process 51
    ts graphic process 52

    The client approves the idea. Preparing a test illustration to approve the style.

    ts graphic process 01

    Asking the technical designer to draw a couple of sample letters. Making sketches to see how letters would look on various media.

    ts graphic process 55
    ts graphic process 56
    ts graphic process 57
    ts graphic process 58
    ts graphic process 59
    ts graphic process 60

    The approach is approved. Preparing a couple more letters.

    ts graphic process 02

    Drawing all illustrations in high resolution.

    ts graphic process 03

    Since we need to draw several dozen letters, we need to invite other designers to join the effort. Writing guidelines to simplify collaboration.

    ts graphic process 04

    Each letter goes through several iterations.

    ts graphic process 05
    ts graphic process 06
    ts graphic process 07
    ts graphic process 08
    ts graphic process 09
    ts graphic process 10

    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.

    ts presentation process anim 01

    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.

    ts presentation process anim 02

    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.

    ts presentation process anim 03

    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.

    ts presentation process anim 04

    The letter D has to have a helicopter landing pad.

    ts presentation process anim 05

    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.

    ts presentation process anim 06

    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.

    ts presentation process anim 08

    Fixing the dropped capitals.

    turkish stream graphic process 03
    turkish stream graphic process 04
    turkish stream graphic process 05
    turkish stream graphic process 06
    turkish stream graphic process 07
    turkish stream graphic process 08
    turkish stream graphic process 09


    © 1995–2019 Art. Lebedev Studio



    Order a design...