In this tutorial, I will explain how to create original wire typography. There will be no need of stock images or fonts, since we will be making everything from scratch (and literally from scratch, because we will be tracing out our wires first on paper), then developing our typography in Adobe Illustrator CS4.
Step 1
We should start out by sketching out our typography. I opted for the word "typefunk" which happens to be my portfolio name.
Don't hesitate to experiment! With an actual wire, you can make all sorts of forms, try doing that on paper! After a few experiments with connections between letters and all sorts of curves, this is my result.
Step 2
We should now place this into an Illustrator file...
After doing that, set the image Opacity of this layer to 40% and lock it, so we wont be able to select it.
Step 3
We should now start tracing our sketch. Try softening out your curves and correcting any errors you might have committed when sketching.
Step 4
Zoom in when you have any issues on fixing up the curves, just to ensure for a better result.
Step 5
So after tracing my sketch, carefully paying attention to perfection in curves, this is our result.
I'm using Creative Suite 4, so I will go ahead and click on the Artboard Tool. Next, select the artboard with the paths, Alt-click on the artboard and drag it to wherever you want it. By doing this, you should copy everything that is inside that artboard, in your selected layer.
We may now work fully on Artboard #2. We can actually group what we have in it. Make a new layer and reorder our group into that new layer ,so we work separately from our original paths. Up next we'll choose our color scheme.
Step 6
This step may be one of the most important ones to our process because now its time to choose our colors! As I always do on my work, I'm going for a gradient composed of vibrant colors, as shown below.
As I will be filling up our letters, it's best that we make our paths into a Live Paint Group, which makes it easier for us to manage our colors. To do so, select our group of paths, click on the Live Paint Bucket Tool, then click on our selected paths.
Step 7
Now, we should start managing our group so it makes it easier for us to treat our typography. Go ahead and make three copies of our Live Paint Group. You can select our group, hold the Alt Key and drag it around, or simply copy and paste.
Why the three copies? It may seem a bit confusing, but if you look closely, the top Layer is for our Line work, the middle Layer is for our fills, and the bottom layer is for our thicker and stronger strokes, they add more visibility to our type.
And when you have them lined up, it should look like shown below.
On the next two Steps, we will start adding depth to our letters, by adding shadows. Try imagining it is actually a solid object and decide where shadows will lay on and where they will not.
Step 8
To start shadowing our letters, create a new layer, under the thin stroke layer, and on top of the fill layer, and name it "SHADOWS." Arranging your layers right saves time, especially in a project that has a short deadline - all the time you save can help you later. So when we add our shadows we are able to blend them in with the help of the thin strokes.
To get started with our shadows, make a shades palette, which goes from lighter to darker using our primary colors.
Once you have that done, you can simply apply it to the places you think shadows apply, always in order of shade, having the darker shades coming from under the overlapping parts of the letters, as shown below.
And also on those parts where the letters actually fold or bend, as shown below.
Step 9
As you keep repeating that process, you'll start to see the details stand out, varying the size of the shades is also something to soften out our shadows, as we could have used a simple gradient from Fill to Empty fill. This will take a bit of time, but the result will be way better than using just gradients.
Step 10
After shadowing the whole composition of letters, we can now see that it has a lot of depth to it, and its not just a flat swirly type. You can see the before and after images below.
Step 11
Nows it time to use our highlights palette, which we created before. The logic I used in this process was that shadows apply under our shapes, and that highlights apply over, on top of our shapes. Then, I start the same process as before, but now using the Highlights Palette, I created another layer and named it "HIGHLIGHTS."
Step 12
Imagine if light was actually being applied over our shapes, you'll understand that it's the exact opposite way as we approached our shading! The brighter highlight shapes have to be positioned on the outer part of the letter, and the darker highlights on the inner part of that brighter shape.
Step 13
After doing that to all places we think highlights apply, our result should be what is shown below.
Now if we look closely, there are still some tweaks to be made where there are folds and bends on our letters. We have to soften up those strokes, which will make our typography look more refined and will also add a finishing touch to it.
Step 14
I started by making a new layer named "tweaks," over our "thin strokes" layer.
Then get started with the tweaks, remember we are softening up those line ends I circled in yellow in Step 13.
Step 15
Repeat that process throughout the typography, softening the line ends and also any other places you feel a need for a softer look, below you can see the result of our walkthrough. Lets take another look at the transformation.
Conclusion
You can always add a background, make color variations and add textures to our letters. Also, you could edit it in Photoshop for better visualization. Experiment, play around! It's a versatile way to put your name out there!
