Of popular demand, I’m bringing back one of the old tutorials that wasn’t available anymore: the Typographic Tornado.
It is actually one of my favorite tutorials and really one of the most information packed one I’ve seen around.
It would seem this one was more succesful than my Google Analytics showed me. Anyway, click, read, comment, you know the drill.

We’ve all seen typographic designs popping up more and more all over the web lately and that really is nothing but good news. I’m sure you’ve ran across some sort of design where text replaced real life objects so I though I’d do a tutorial based on that style. The techniques aren’t hard to master, in fact, it’s quite easy to do. You just need a little patience and a good idea.

This tutorial is actually going to cover more than just the typography of object replacement, we’re also going to go into making a brush territory so let’s just dive right in…pun intented.
I created mine on a 1280×800 px canvas just because that’s the resolution of my laptop.

01

Usually when I’m doing any abstract work I like to have reference pictures of real life objects or events in order to get a feel for what I’m about to do. This time, on the other hand, I decided to replace any reference picture with a guide drawing. It’s good to sometimes exercise one’s drawing skills or lack of in my case. This is what I’ve drawn. Granted, it may not be the next Picasso but at least it gave me a clear idea as to what I’m about to do.

02

First we need to lower the Opacity of the guide Layer.Drawing text is easy but actually writing it with a text tool on a Shape isn’t so we’re going to have to first make all of our Shapes and as you can see it doesn’t have to be perfectly aligned with the guide layer. I did try to match the angles though. Also, seeing as this is a Tornado and not an ice cream cone, the spacing of the Shapes needs to increase more and more from down to up as we’re making them.

03

Ok, no more guide Layer anymore. Now we need to start wrapping text around out Shapes. You can do that by clicking the edge of any Shape with the text tool and then writing without putting any spaces in between the letters. I used Arial Black set to a very small Tracking (-100). And yes, this is one of the most daunting and nerve-wrecking jobs in the world because it can become very crouded very fast and the only thing that can help you align your text properly adding spaces in front of the line. With the Space Bar. Old school baby!

04

Carrying on through. Warm green tea helps to relax, take it from me. You can also play with various sizes for the text. This helps to give our tornado some sort of weird depth. Or perhaps it just looks cool.

05

As you can see, the higher we go on the tornado, the bigger the text, again the depth thingy. Also, for the last line (Webdesigners) I decreased the size of each letter to create sort of the tail of it, or perhaps a wagon being tossed into a barn. You decide.

06

And goodbye to all the Shapes. Well, their visibility at least. Now, we could stop here, because this IS a typographic tornado. But we’re not.

07

Any respectable tornado deserves to be on the Alley. So let’s make our very own Tornado Alley using just a black Shape with a few curved anchor points so it looks like a small hill side. Try not to make it too archy because we’re going to stick some text there later on. I also made it big enough to allow any desktop icons to be clearly visible against an all black background. Remember, it’s actually a wallpaper!

08

Tornadoes are not fun things. So we need a dramatic background, something with color. I chose a blue Radial Gradient having imagined a night time setting for our little tornado encounter. This is one of those steps where you can pick any color that suits you. You could have a yellow background and pretend it’s a sulfuric atmosphere or a fuschia one and pretend you’re on drugs. Your choice.

09

Just to make things pop and stand out I decided to further separate the foreground, which is out tornado, from the background which is supposed to be our atmosphere. So, for all intents and purposes, Render Clouds on a layer above the background.

10

Now, I really liked the Radial Gradient feel so I decided I wanted it back. So I made a new Layer Mask on the Render Clouds layer, made a white semi-circle on a black background and blurred the heck out of it in order to achive the vignette look.

11

It’s coming around now but the colors were to washed out, so I added a nice Blue to Navy Gradient Overlay set to Soft Light on the Render Clouds layer.

12

Sometimes, no matter how hard you work or try there’s really nothing like a good stock photo. http://storage.sxc.hu/j/je/jesuino/1092992_26909764.jpg was exactly what I needed to create the very stormy clouds I needed.

13

Set the new clouds stock photo to Overlay.

14

Remember when I said I was going to be adding a little text on our Tornado Alley? Yeah, like now. It’s a simple Typographic (Georgia Italic) Tornadoes (Gill Sans) text set behind the Alley layer. The trick is to position the text just so that it looks like it’s rising behind the hill.

15

Though it’s kind of hard to read, isn’t it? Just a white doodling layer and a hefty portion of vertical Motion Blur, set behind the text layer of course and voila, problem solved.

16

This diagram shows how to create a brush from a text. It’s quite easy actually. First you have to make the text, obviously, then when you’re satisfied with the way it looks, just Rasterize it and choose to Define Brush Preset. Save it to a Pallete, save the Pallete and then you’re ready to rumble.

17

I wanted to give the impression of a violent tornado, none of those hippie, picket fence tornadoes for me. So after turning the letters R A F (nothing to do with the Royal Air Force) into brushes I modified the brushes so that you would get a lot of scattering and variable opacity and also an angle variation. That was really all it took. Just needed to make a new layer, start drawing a wee bit and voila, wallpaper finished.
Hopefully this was a helpful tutorial. I’ll be seeing you soon enough with another crazy unintelligible tutorial from everyone’s least favorite sick web designer. Anyways, Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.