Create a Stunning Retro Futuristic Typography

Create a Stunning Retro Futuristic Typography

Retrofuturistic design is a return to, and an enthusiasm for, the depictions of the future produced in the past, both in science fiction and in nonfiction futurism of the time, which often seem dated by modern standards. We always strive towards creating a better future. Whats more compelling than envisioning one.

The future as seen by many of us have been expressed in forms of art, design, movies, comics, and even cartoons. Ever since man landed on the moon, he has been fascinated by the very concept of space. Space is nothing short of an artistic masterpice carefully crafted to hold mysteries together. Whenever we imagine about the future, we visualize space, stars and the planets instantly.

Long before the advent of technology, our ancestors tried to picturise the concept of space with mundane tools such as pencil, paper, brush to name a few. Ever since the advent of Graphic tools like 3D Max, Photoshop and Illustrator, we have constantly evolved and have adopted the imagination to delve into the futuristic world. It is quite hard to disagree that space has been an undaunted influence over us.

In this tutorial, we will learn some really cool techniques to help us achieve a few aspects of Retro Futurism. We will be learning a lot of concepts, tips and tricks in Illustrator. We all also learn how to add the futuristic look using Photoshop. This is a very detailed tutorial so, i request you to maintain your composure throughout 🙂

Here is a glimpse of what we will be achieving in this awesome tutorial now :

SETTING UP

This tutorial is written with the assumption that the user has only very limited knowledge of Illustrator and Photoshop . So things are going to be spelled out rather slow and painfully to ensure everyone knows what they are doing.

Prior experience with Illustrator’s “Pen Tool” and “Gradient Tool” is highly recommended though.

Step 1:

To start with you’re going to want to open up Adobe Illustrator and create a new document. You can do this by clicking “File” in the toolbar at the top of the screen and then “New…” from the drop down menu that appears as shown in the image below.

Pretty basic stuff and probably unnecessary to explain if you’re feeling confident enough with a computer to try something like this; but invaluable information all the same.

Step 2:

So once this is done, the “New Document” window should appear. You should select the settings shown in order to follow this tutorial exactly.

As for the “Color Mode”, it’s a matter of whether you want to print it out (in which case, select “CMYK”) or display it on the web (where “RGB” colours are a must).

Illustrator uses vectors rather than dots, so the size you make this document is irrelevant, as anything made in Illustrator can be scaled without any loss of quality.

Step 3:

So hit “OK” when you’re ready to open the document up obviously and you should be greeted by a blank white box on a grey background. This is your document. To be honest I almost always end up working outside the white space, as my work in Illustrator is usually exported into another program for completion. Don’t be afraid to do the same if so inclined.

Step 4:

Now this might be a tad confusing as I am working on a Mac and if memory serves, the Windows version of the Adobe suite has things in slightly different places. This next step especially is one where your angle of attack differs depending on your operating system.

For Mac you’re going to want to go to “Illustrator” > “Preferences” > “Guides & Grid…” as shown below.

For Windows you’ll need to look to the Toolbar at the top of the screen for “Edit” > “Preferences” > “Guides & Grid…”

Step 5:

The “Preferences” window should open now, and you’re going to want the same settings shown here. Ensure you have 8 or more subdivisions as it will make the creation of letters much easier.

Hit “OK” when this is done.

Step 6:

Now we need to actually see the Grid, which can be shown a number of ways. Either through the Toolbar at the top of the screen in this order: “View” > “Show Grid” or by hitting Command + “(Mac OS X) or Ctrl + ” (Windows) . This keyboard shortcut is far quicker and one of the most useful ones I have learnt whilst using Photoshop and Illustrator.

Step 7:

You’ll also need to have everything snapping to the grid for this to turn out best. This basically means that every line drawn will automatically position itself to the nearest grid point, which keeps everything neat and even.

You can do this by selecting “View” > “Snap to Grid” or pushing Shift + Command + ” (Mac OS X) or Shift + Ctrl + ” (Windows).

CREATING THE LETTERS

Step 8 :

Your set up is basically complete, and the actual creation of your letter forms can begin. This is the most frustrating part of the tutorial so if you can get through this most of the work is done for you.

It’s most frustrating simply because making custom typography is a real pain-in-the-ass without many hours of practice, especially when arranging them in this manner, where all the letters interconnect in their construction.

For thinly veiled promotional purposes, I’m going to make the word “RICHWORKS”. You’re welcome to try follow the tutorial with a word of your choice, but if you’ve never tried this before, it’s probably best to also use the word “ RICHWORKS ” so you can follow each step.

Ok so lets start with the letter “R”. R is one of the most difficult letters to get right in my opinion so if you can find a good reference for inspiration and help it makes your life a hell of a lot easier.

Step 9:

On top of a grid it’s pretty easy to see how the letter is constructed. What you’ll need to do is draw it exactly to these proportions for it to look most accurate.

So first thing’s first. Grab your Pen Tool and start on any grid point you like. Using the slightly bolder gridlines , rather than the subdivisions within them, may be easier. Each grid box should be made up of 8 subdivisions , which are the slightly lighter lines between each major grid point.

Once again, experience with the Pen Tool is recommended for this, but it’s all pretty basic stuff we’re doing here to start with. What is important to know is that each shape drawn should re-connect with its starting point to be completed, otherwise you may have issues down the line with Fills and Gradients that we apply.

Stylistically I’ve set up some basic rules that mean each letter will match the others. Each part of the letter is usually half of one grid box (or 4 subdivisions) wide . However any lines traveling at a 45 degree angle look optically thinner than the rest of the letter if they are 4 subdivisions wide, so they need to be extended to 5 subdivisions wide. This letter R is a perfect example of these rules in play.

Step 10:

So in constructing the R you’ll notice that the left “leg” of the R is separated from the rest of the shape. You’ll have to complete the main body of the R first, then draw this part afterwards. Once this is complete you can group them if it makes it easier for you to re-position them, but note that we’ll have to ungroup them again later, so there’s little point.

Step 11:

Ok so once you’ve completed the letter “R” to the exact dimensions shown, you’re ready to move onto the next shape. The letter “I” should form around the letter R. You want a gap of 1 subdivision between each shape in your word. That said, don’t compromise the readability of the letter in order to create airtight juxtaposition.

Step 12:

An example of where it’s ok for there to be an area bigger than 1 subdivision makes itself apparent when you position the “R” and “I” next to each other.

Step 13:

Next up is the “C”. Fairly straight forward. One could argue that some of the diagonal lines in this one are unnecessary, but without them the shape ends up looking simplistic, and doesn’t suit the rest of the letters.

Step 14:

The “H” is essentially pretty straightforward. We’ll just cut away the left corners so it slots in nicely next to the “C”.

Step 15:

The “W” is essentially diagonal lines. Make sure you look at this one very carefully when you’re drawing it up, as if it is slightly wrong, it’ll look completely wrong. As you can see i’ve already run out of space on my A4 document, so now we’re drawing the rest of the word off the page. This really isn’t a big deal at all, as we’re going to export all this into photoshop later anyway.

Step 16:

Now the “O” breaks a few rules we’ve set up like size and width, and admittedly now it looks a little weird next to the rest of the letters, but once the whole word is complete it’ll make far more sense, so just go with it for now. It’s also important to draw the outer shape first, and then the inner shape afterwards.

Step 17:

Still working with the “O” here, what we need to do is make the inner shape, also known as the “Counter” in Typography terms , as a part of the overall shape of the “O”. This can be achieved with the “ Pathfinder Tool “, and is one of the most useful things you can learn on Illustrator. You can find it in on the toolbar by going to “Window” > “Pathfinder”.

Step 18:

Now the Pathfinder window should have opened up, and what you’re looking for is the “ Minus Front ” option. It should be the second icon along, and looks like a white square in front of a grey one . You’ll need to select both the outer and inner shape that make up the “O” and then click the Minus Front button .

They should now be one shape. This will help later on when we are applying fills and gradients to it.

Step 19:

We’ve gotta draw another “R” up now, same basic shape except without the wedge cut out of the top right of the shape. Once again the left leg is a separate shape.

Step 20:

The “K” is two shapes placed adjacent. Draw each one separately and then position them next to each other.

Step 21:

The “S” is essentially an “R”, reversed.

Step 22:

If you like, you can copy and paste the main shape of the “R” (without the left “leg”) and Reflect it.

Step 23:

You can do this by selecting the shape, and then from the Toolbar at the top of the screen go to: “Object” > “Transform” > “Reflect…”.

Step 24:

This should open up the Reflect options box, and make sure you have the settings shown here. Then hit OK.

Step 25:

This should leave you with something that looks like this.

Step 26:

Ok, so now we should have finished the basic shapes for all the letters. It should all look something like this (at this point i’ve moved the whole thing completely off the white canvas and into the grey area. It just makes it easier to see everything clearly in terms of grid positioning.)

MAKING IT LOOK THREE DIMENSIONAL

Step 27:

So now you’re probably thinking “Wow that looks really slick, this guy clearly has skills”. Well, you’d be right, it does look cool, but we can do so much more, and it’s obviously nowhere near looking like what we want it to.

First thing’s first, we need to start working with different layers. So to do this we need to open up the Layers Tab. You can find it here.

Step 28:

You can also find it by going to the toolbar and selecting “Window” > “Layers”.

Step 29:

You’ll need to make a new layer by clicking Create New Layer in the layers tab. You can find it at the bottom of the tab, it’s the third icon form the left.

Step 30:

So now you have a new layer, you’ll want to lock the first layer you had, the one with all the original letter forms so you don’t inadvertently edit or change them as you’re working with the other layers. It’s always a good idea to lock any layers you aren’t working on for this reason.

To do this, click on the box next to the eye symbol on the far left of the layer name. A lock symbol should appear in this box, which means that it cannot be selected or edited. To unlock it, simply click the lock again and it should disappear, leaving you able to edit the layer once again.

Step 31:

But this layer actually needs to be behind the first layer we made, so click and hold on the name and then drag it to be underneath Layer 1. This will mean that Layer 1 will always appear above Layer 2.

Step 32:

So this layer is going to contain the shapes that turn this flat typographical representation into something with the appearance of depth . To do this, we need to draw diagonal lines from each of the shapes exactly 2 subdivisions in length and then join them up with vertical and horizontal lines. What they should eventually look like are extensions of the original letters going backwards. If not much of this makes sense, don’t worry because i’m about to show you exactly what I mean.

What i’m going to do is copy and paste our original letters directly below the first ones. DO NOT DO THIS . As it’s simply to show a step by step progression of what’s happening. Make all your adjustments to the first shapes, rather than make copies of them, to save yourself from unneeded confusion.

So when drawing these extensions of the shape, make sure they are all complete shapes that link back up to their starting points. This means that the top line of these new shapes will at times overlap the bottom line of the original shapes.

Step 33:

So here is the completed version of the “R”. Basically there’s no need to draw the extended parts of the shapes that won’t be seen. So not all of the extensions will end up being exactly 2 subdivisions long, but they should still be along a 45 degree angle so they look correct.

Step 34:

It’s probably a good idea to put a bit of space between each shape as there will definitely be some overlapping in this stage. If you keep each shape separate then it’s make things far less confusing.

Step 35:

So here is an example of all the letters completed. If you follow the rules outlined above it’s quite easily to construct each shape. Basically what we’re looking for here is some uniform perspective. every shape should look the same way.

Step 36:

Now at this point you should arrange all your letters together with 1 subdivision between each again. But before we do this we should colour each one with a basic colour so we don’t end up seeing the lines that shouldn’t be seen when they are overlapping.

This is an example of all of the letters without fill.

Step 37:

As you can see, it gets a bit difficult to discern where one shape ends and another begins. With fill added, it becomes far more obvious and user friendly. You can do this by unlocking any locked layers and then clicking and dragging a selection box over all of the letters (including their “3D” extensions) and choosing Fill Colour and a Stroke Colour . You can see where they are in the image below.

Step 38:

It’s simply a matter of personal preference what you choose for the fill and stroke at this point because we’re going to end up removing or changing these choices soon anyway. So it should look something like this once you’ve chosen some new colours. Once again this is really just to see that everything has worked out correctly, and to see one particular thing that needs to be adjusted. We’ll cover this in the next step.

Step 39:

So those with keen eyesight will notice a problem with the “O” and the “R” in terms of overlapping.

Step 40:

In order to fix this, select the extension coming from the “R” that shouldn’t be overlapping and push Command + [ (Mac OS X) or Ctrl + [ (Windows) repeatedly until it appears behind the “O” extension that is being covered.

It should now look like this.

CHROME EFFECTS

Step 41:

Now we’re going to start creating the chrome effects. These are pretty basic in appearance and there’s certainly more you can do in programs like Photoshop to give a more realistic look, but alternate methods take far longer to achieve than this.

So first thing’s first, we’ll remove the fill we added on the main letters and change the stroke back to black (if it was changed at all). Next we’ll hide the extensions we created before (Layer 2), as we don’t need them for this step. You can hide a layer by clicking on the Eye icon on the far left of the layer name in the Layers Window.

Next we need to create a copy of these letters and paste them into a new layer . This new layer should be Layer 3 You can do this by creating a new layer, copying the original letters, then selecting the new layer and pasting the copied letters. In all likelihood these copied letters haven’t pasted directly on top of the original letters, so move them into position so they are in the same spot as Layer 1. Then lock Layer 1 and Layer 3 once this is complete.

So at this point we should have 3 layers. Layer 1 and Layer 3 should be Locked. Layer 2 should be Hidden.

Finally create another Layer, which should be Layer 4. This is the layer we’ll be using in the next step, in conjunction with Layer 3, which we will be periodically locking and unlocking to edit the shapes created.

Ok so hopefully that made enough sense that your layers tab now looks like this.

Step 42:

So now we need to create shapes that will eventually be one half of the gradients that give us our chrome effect . These need to be drawn within each letter, and curved at points to once again add the three dimensional quality we’re after.

If you’re unfamiliar with creating curves with the Pen tool, it’s easy enough. Click the point where you want the curve to end but keep the mouse button held down and then drag it up/down/left/right to create a curve . You’ll want the curve to look like this for our particular creation.

Once again, to create each shape, make sure it follows the shape set out by the letter itself, and that it meets up with its starting point so it is a complete form, rather than only part of one.

Step 43:

So obviously we are only going to draw these curves where they make sense, but sometimes these curves will extend past the shape they need to be contained within, and we need to fix things like what is shown below.

Step 44:

So this is where we’ll need that Layer 3 we created earlier, as well as the Pathfinder tool , which was also covered earlier in this tutorial. Unlock the layer, then select the both the new shape we made in the previous step, and the letter “R” from Layer 3 (not including the separate left “leg”).

Step 45:

So now once they are both selected we need to click the Intersect button in the Pathfinder window, it’s the third one across and is shown in the image below.

Step 46:

So once you have done that you should be left with the shape that we need, with a curve that should extend to the correct position but still doesn’t stray outside the letter it needs to be contained within.

Step 47:

So using the technique above, it should be fairly easy to create what we now have in the image below. The letters that will require the method in the steps above are “R”, “O”, “R”, “K” and “S”. Click on the image for a larger view :

Step 48:

Ok so Layer 3 is no longer needed and can be deleted. You can delete it by selecting it in the Layers tab and clicking on the trash can in the bottom right of the window.

Step 49:

Now we’re going to start adding gradients to these shapes created in Layer 4. Select the first shape and change the fill to Gradient . You can see where this is in the image below

Step 50:

So once you have changed the fill to gradient you’ll notice it’s going the wrong way and not really looking right at all. We can change all that with the Gradient Tool. Select the shape with the gradient you want to change and then click on the gradient tool in the toolbar on the left of the screen. Alternatively you can just hit “G” on the keyboard, which is the shortcut for the Gradient Tool.

Step 51:

The Gradient tool is pretty tricky if you don’t know what you’re doing, I recommend looking it up in the help section of Illustrator.

Basically you need to rotate it so the gradient is vertical , then extend the gradient so it covers the whole height of the shape , and then adjust the balance of the gradient so that we have most of the black at the top of the shape, with the majority of it being a light grey/white. This is what you want your gradient tool to be showing to create the effect we need.

Step 52:

Now we need to remove the Stroke (the outline, in other words), of this shape. I’ve covered how to change the stroke earlier in the tutorial, you just need to pick the option with the red line through the box.

Step 53:

Now we don’t need to go through the hassle of creating new gradients for each shape, we can use the Eyedropper tool to copy all that information (including the lack of Stroke) into each shape. Simply select each shape , click no the eyedropper tool in the toolbar on the left, and it should copy the exact look of the shape you click on , so obviously we’ll click on the first gradient that was made.

Step 54:

Unfortunately you’ll have to readjust each gradient with the gradient tool to match the first. But doing each one separately will make each one look slightly different, and therefore, more authentic. Hopefully you’ll end up with something like this with minimal trouble.

Step 55:

We’ll need to use gradients to create a similar look in the rest of each letter. To do this, unlock Layer 1 and make a gradient that uses a Blue colour of your choice the the primary colour and White as the secondary colour . This like the other gradient, will need the stroke removed. Once again reading the help section for the gradient tool will help you achieve this.

Similarly, use the eyedropper tool to copy the gradient into each subsequent letter.

Step 56:

So how your image looks now is dependent on what colours you chose, but it should essentially look like the image above. Next, we need to add a highlight stroke around the whole thing. We can do this by copying the contents of Layer 1 and then pasting them into a new layer. This should be Layer 5 if you’ve followed everything exactly so far.

Move what was copied into the layer (which should be the word RICHWORKS with a blue and white gradient applied to it) so it is in exactly same position as the contents of Layer 1.

Change the fill to none and the stroke to White . You’ll now need to open the Stroke panel (which can be done by clicking on the word Stroke that is blue next to the Stroke colour box in the top left of the screen). And in the Align Stroke section, pick the second icon, which is Align Stroke to Inside.

Step 57:

Now we need to unhide Layer 2. Lock every layer except Layer 2 at this point because we’re done with them for now. Once again we need to use the Gradient Tool to give Layer 2 some more realistic shading. You’ll want a dark blue and a lighter blue for this gradient . Remove the stroke once again so you’re just left with the gradient and no outline. Try have all of the gradients going one way, for example the lightest colour at the bottom and the darker one at the top, to give some semblance of realistic lighting.

Once again use the eyedropper to copy the gradient and stroke options into each shape.

Step 58:

So hopefully once you’ve created a gradient in every shape on Layer 2 you’ll end up with something like this.

Step 59:

So it looks pretty damn complete at the moment. What I’m going to add is a magenta line around the outside of the word which I’ll add glow effects to in Photoshop later. This line is going basically going to follow the overall shape the word creates.

I’ll make this line in a new layer. I also set the stroke to 2 pts wide , so it’s bolder and more obvious.

OK Fellas, That was pretty much how we create the back end of the typography. I hope it was very clear enough. I’m sure you have learnt a lot from this. Now, Let us head over to Photoshop to give finishing touches and the Futuristic Look.

Step 60:

Open a new document with huge dimensions. Now Copy and Paste the two parts (the Typography and the Outline separately) into the Photoshop Document as SMART OBJECTS . This makes sure the vector aspects is carried onto Photoshop as well.

Apply a Black Background as shown :

Step 61:

Now, we have 3 layers : Background layer, Typography layer and the Pink Outline layer. Put the Typography and the outline layer in separate groups . This is the best way to organize stuff. Now, Create multiple duplicates of the Pink outline layer and Apply Filter > Blur > Motion Blur to each one of them in different Directions closely matching the shape of the letters. Here is an example :

Step 62:

Do this several times to other duplicates of the Pink Outlines. Here is the end result :

Step 63:

Now Apply the Gaussian Blur filter to the original ‘PINK OUTLINE’ layer with the following settings. You can duplicate the blurred layers several times to get a better effect.

Step 64 :

I duplicated the original Typography layer and added a Grayscale mask ( Image > Adjustment > Desaturate ) over it. Also, I added a plain Space background. You can pretty much add any space background of your choice:

Step 65:

Now, Let us make some Shiny glowing points to give an effect of some light sources . Create a New layer and using the Rectangular Marquee Tool , create a rectangular selection and fill it with Black as shown below:

Step 66:

Now, go to Filter > Render > Lens Flare and Apply a Lens Flare filter with the settings as shown below :

Step 67:

Now, Just Change the blending mode of the layer to ‘COLOR DODGE’ and adjust the position to the corner :

Do the same for more of such corners in the other letters. Create new layer and apply the lens flare. Organize these layers accordingly by placing them in groups. The result should look something like this :

Finally, we are almost done with this gigantic tutorial 🙂 We can add a Grunge Texture and overlay it onto the text. I found this on my PC Hard Drive. You can use almost any good grunge texture :

Now, Copy and Paste this and repeat it on the text several times so that it completely covers it and set the blending mode to Overlay and reduce the opacity to around 30% .

That’s all folks. We have created a Stunning Retro Futuristic Typography. You can still move forward and add some brilliant glowing lights and experiment with it. I thought of stopping it here.

Here is the Final result :