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.
If the images are loading slowly, you can download the .RAR Package containing all the images here : DOWNLOAD IMAGES
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.
I am enthralled to announce that we have our first guest writer here. His name is
Alex Di Giovanni.
He is an amazing graphic designer from Perth, Australia. He is known to
the design community as Alternate Rail. His works are based on retro
futurism and are quite amazing to look and admire at. You can find him
on Deviant Art here :
alternaterail
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 : Click on the image to see a REALLY HUGE version.
Visit
PsPrint Online Printing to get the best deals in commercial printing!
Source :
http://richworks.in/2010/03/create-a-stunning-retro-futuristic-typography/
