One of our readers suggested we write a tutorial explaining how to do this cool text effect. On the Dragonforce logo above, the basis of my typography was sketched on paper first and then vectored in Illustrator using the Pen Tool. The process for creating the base logo is not included in this tutorial. Instead, we are going to take the base logo and add that cool “line gradient” effect that you see inside the actual letters. This gives the text an old-school or vintage feel to it. This look is prevalent in wood engraving and sign lettering. You can do this effect with any typeface or font because the principle is the same.
Here are some more examples:
So in order to get this effect, we will need both Adobe Illustrator CS2 or higher and Adobe Photoshop.
You can see the kind of effect we are going to create. This is going to cover the basic technique. But I encourage you to be creative and experiment with different things. That’s how you learn! Begin the tutorial after the fold.
Step 1: Prepare your base logo or typeface.
We will use our Dragonforce Logo as our base, but you can simply use your favorite font. Just make sure it’s thick and bold to make room for the line effect.
1a: Open up Adobe Illustrator and Photoshop
1b: Create your base text (just type something out using a bold font)
Step 2: Make a new document in Photoshop
You’ll need to make a new document in Photoshop that’s 2500×2500 pixels and 300 DPI. This will be where we will create the line gradient. But first, we need to get your text into Photoshop.
Step 3: Back in Illustrator, select your inner most shape in your text and copy it.
If you’re just using a font, simply click on it to select it. Press Ctrl+C or Edit>Copy to copy the shape to your clipboard.
Step 4: Paste it into your new Photoshop document.
Switch back into your Photoshop document and press Ctrl+V or Edit>Paste to paste your text layer. It will ask if you want to paste it as a Vector Smart Object or as Pixels. Choose pixels.
Step 5: Make the text black.
If your text is already black, skip this step. You can either use brightness & contrast, levels, or whatever you want to make your text black. I did it by Ctrl+Clicking on the layer’s thumbnail image to make a selection around my shape. Then I pressed “D” to reset my colors to black and white and then Alt+Backspace to fill my selection with Black.
Step 6: Give your layer a white “inside” stroke.
Go into your layer properties and give your black text a white stroke. Align the stroke to the “inside” so that it looks like it eats away your text. You’ll see why we are doing this later.
Step 7: Isolate JUST the black layer by using Select > Color Range
From your menu up top, find “Select > Color Rage” and press OK. This should have already selected all the Black pixels by default. If not, you can choose “shadows” from the drop down menu. Once you have the selection made, make a new layer and press Alt+Backspace to fill the layer with black. You can then delete your previous layer with the white stroke. What we just did in the last few steps was make our text “thinner” so our line gradient has some spacing away from the edges of the text.
Step 8: Create your gradient and convert to Bitmap
8a: Ctrl+Click your new layer with just the black “thinned” text to make a selection around your text.
8b: Use your gradient tool to create a black and white gradient from bottom to top of your text.
8c: Select Image>mode>Grayscale - if it’s not there already
8d: Once it’s in Grayscale mode, select Image>Mode>Bitmap and then you’ll get a series of dialog boxes.
8e: Select “Halftone” screen from the dialog box. Make sure your resolution says 300 DPI.
8f: Select a frequency of about 6, angle of 0 degrees, and Shape of “line” - these settings determine how our bitmap will look. Feel free to tweak these to get whatever effect you want.
This what we have created after converting the gradient to a bitmap:
Step 9: Take your image into Illustrator to live trace it!
The easiest way to get your image in Illustrator to Live Trace it is to drag and drop it. So select your Move tool in Photoshop and physically drag your artwork onto the Illustrator button on your taskbar. With your mouse button still held down, hover over the Illustrator button on your taskbar until the Illustrator window pops up. Now you’ll notice that your icon will change when your holding it over the artboard in Illustrator. Let go of the mouse button and your image will be placed into Illustrator. It will most likely be really big and you’ll need to zoom out a bit to see it.
So with it still selected, click the Live Trace button up top, or go to Object>Live Trace. Then click the expand button after that.
9b: Once you have it Live Traced and expanded, right click and ungroup your newly live traced shape. This will separate all the black shapes from the white shapes.
9c: Click on white area around your text (you may not see it, but it’s there) to select a white shape. Then go to select>same>fill color to select all your white shapes. Press Delete to get rid of them. You only need the black shapes.
9d: So now that you’re left with just the black shapes, select all of them by dragging a large selection box around it. Once they’re all selected press Ctrl+G to group them.
Step 10: Scale down your new vectored line gradient and fit it onto your base text
I scaled it down and tweaked the size so it fit perfectly within my original base text. I changed the color to match it. I ended up with my final image below. That’s it!
Conclusion:
In this tutorial you learned how to use Photoshop and Illustrator to create cool looking “Vector Line Gradients” to give your text a vintage “old-school” feel. This can be applied in lots of different ways including background gradients or halftones. In fact, in Go Media’s Vector Halftone pack in Set 3, you can choose from a variety of premade line gradients which you can use with just a little bit of work.
I encourage you users who follow this tutorial to post your designs in our user showcase to show off what you’ve learned.
Oh one cool tip to get some rad halftones is the Andromeda Screens filter. Check it out and play with it. Some of those designs you see below with the curvy line gradients were created with it. It takes some getting used to, but it’s cool.
September 11th, 2007 at 5:18 pm
I might have missed something in this otherwise great tutorial, but I think the bulk of this could be done somewhat faster and simpler - maybe with a slightly different result, but still looking much the same.
1. Copy your logo/typeface
2. Remove the fill and add a significant stroke (10-20+ pixels, depending on the size of the artwork)
3. Go to “Object” -> “Path” -> “Outline stroke”
4. Copy the original artwork and paste it underneath the outlined stroke, and subtract the two elements in the “Pathfinder” palette
5. Use a halftone pattern (Go Media’s Arsenal, set 3, fits the job perfect!) and subtract again. Alternative invert the subtraction, depending on the result you wish.
6. Paste the final result on top of the original artwork and tweak the position - voila!
This ought to work… or?
September 12th, 2007 at 1:19 am
Easily the best tutorial you guys have published to date! Thanks for the tips.
September 12th, 2007 at 4:21 am
Thanks
Great tut!
September 12th, 2007 at 9:36 am
Don G - yes that way will also work just fine! You got it! However, I wanted to show people the LONG way to do it first. At least that’s how I created these things prior to having some premade vector halftone shapes. Man those things come in handy and I’m not just tooting my own horn!
September 12th, 2007 at 10:42 am
You did the right thing, Jeff - it’s always best to learn the tricks of the trade from the bottom
Anyway - thanks for all your tutorials work! I constantly keep an eye on your RSS feed, so I won’t miss out on any of your goodies…
September 12th, 2007 at 1:00 pm
exelent tutorial… thank´s!
September 12th, 2007 at 7:57 pm
it was amazing .keep the good work i love learning a lot.
September 13th, 2007 at 2:09 am
Great Tuts!!!!! can i ask something, what font did you use in that dragonforce logo??
September 13th, 2007 at 10:06 am
bryan, it’s not a font, it was drawn by hand on paper first and then vectored in Illustrator.
September 13th, 2007 at 11:33 am
Jeff - awesome toot, as always… and remember to be careful kids - DRAGONFORCE will melt your face off.
The drummer (Dave Mackintosh) is a freakin’ MACHINE!!
[m]
September 13th, 2007 at 12:43 pm
Nice tutorial, thanks
September 13th, 2007 at 6:03 pm
ohhh thank you……
September 14th, 2007 at 8:44 am
I know the Dragonforce isn’t a font, but what are the other fonts used in the examples?
I especially love the fonts used in the strhess.jpg, korn.jpg, asilaydying.jpg, and hollywoodave.jpg. Are those sketched logos vectorized, too?
September 14th, 2007 at 10:30 am
Bobbi, all those are hand made lettering. The Hollywood Ave was based off a font, but I can’t remember what it was. But it’s still hand drawn over top.
September 23rd, 2007 at 12:24 pm
AWESOME!!! I love this! That Dragonforce logo is insane! Thanks for teaching love the learning!
September 28th, 2007 at 7:22 am
GREAT JOB again guys !
October 5th, 2007 at 2:33 pm
weeeeeeeeeeee im a little we lad weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
October 8th, 2007 at 6:05 am
Great tutorial, I’m gonna try my hands on this
October 8th, 2007 at 1:26 pm
Hey, it’s Dragonforce - the hardest metal known the man!
October 15th, 2007 at 1:05 am
WOOOOOOOOW THAT’S GREEEEEEEEAT
October 15th, 2007 at 2:41 am
Great men!! Wow,, thx!
October 15th, 2007 at 4:22 am
its vere good
October 15th, 2007 at 6:35 pm
nice tutorial you got here very effective.
October 17th, 2007 at 1:35 pm
Awesome tutorial but when I create the halftone lines in Photoshop, the lines appear bitmapped and jagged. Am I missing something or is this caused by something in my settings?
Thanks!
October 18th, 2007 at 9:21 am
Jodi,
Make sure you’re image is 300 DPI - and you’re going to get a little bit of jaggedness anyway. But that usually sorts itself out when you vectorize or live trace it in Illustrator.
October 18th, 2007 at 12:16 pm
Great tutorial.
I’m gonna link to it from PST.
October 26th, 2007 at 9:38 am
good poster, terrible instructions!!! how about something that makes sense?? i’ve seen better instructions on how to make rice krispy squares from the back of a cereal box!!
November 2nd, 2007 at 1:11 pm
i cant get to the image>mode>bitmap. it wont allow me to choose bitmap
November 2nd, 2007 at 1:28 pm
@smiff - try converting it to Grayscale first
November 2nd, 2007 at 4:54 pm
i did. i tried “merging” i tired not “merging” …
November 6th, 2007 at 3:39 pm
Works great. Nice tutorial. This is a professional tip, If you are haveing a hard time there are easier tutorials to try first.
November 6th, 2007 at 6:16 pm
i really like the look. just cant get it.
“Step 7: Isolate JUST the black layer by using Select > Color Range” is this “black layer” without the stroke?
November 7th, 2007 at 10:54 am
@ smiff - no that layer is created after you selected the color range. You are selecting the color range when you have the white stroke applied to the text. And then creating a new layer and filling the selection with black afterwards.
November 7th, 2007 at 2:25 pm
Great! thnx for all the info! finally got it! Awesome.
November 13th, 2007 at 4:36 am
what a great tutorial..
keep it up
November 21st, 2007 at 4:48 am
Nice tute… only when i got the line gradient back onto illustrator when trying to change colours i can only get greys…???
November 23rd, 2007 at 8:02 pm
Nice tut.
Dragonforce sucks.
As I lay Dying sucks.
Mastodon isn’t bad.
November 24th, 2007 at 11:46 am
very exciting tutorial.
endless tweeks to add.
I’m with Dean on this though and can’t change
colours in illustrator! Have a feeling the format needs changing to do so? can you help and then i’m done.
December 17th, 2007 at 2:15 pm
Very cool. Thanks!
January 9th, 2008 at 4:10 am
how did you do the stroke on the DragonForce text?
January 9th, 2008 at 11:55 am
Just select all the shapes you want to stroke, then copy and paste them in front. Then combine the shapes using the pathfinder tool. Then stroke it and send it behind your original shapes.
January 26th, 2008 at 9:58 am
Good photoshop tutorial, will try it now..
January 26th, 2008 at 10:00 am
Looks good, I can use this to create logos also, thanks for this great tip!
January 28th, 2008 at 2:20 pm
Nicely done. Quite cool.
January 29th, 2008 at 7:47 pm
Hey go media I was just wondering. Did you make that dragonforce type yourself or did you find that font? If so. Would like to know were I can find type faces with such creativity? Not trying to steal your ideas just don’t know were to find these great type faces.
Peace
January 30th, 2008 at 12:49 am
The dragonforce text asn’t based off a font. It was hand drawn. But I did reference other old school typography for inspiration such as the great work of Aaron Horkey.
February 1st, 2008 at 1:04 pm
hallo…
thank you very much for sharing tutorial.
it’s really help me to learning more about Vector Design…
Thanks…
February 6th, 2008 at 6:23 am
I can get illustrator to live trace it after dropping the text in from photoshop. Am I doing something wrong?
March 11th, 2008 at 8:31 pm
I was just wondering if you could also create the line gradients in illustrator by making two different sized lines and use object>blend? Or would the results be different?
Thanks in advance. I have learned so much from your blog.
March 19th, 2008 at 10:38 am
This tutorial is amazing! - inspired me with it’s unique design!
I found a way to do it in GIMP (a free alternative to photoshop - only bad part is that we don’t have a trace function so this is a lot harder and very different. The result is same)
I’m posting a tutorial of a GIMP way for doing this - I’ll credit you in the tutorial
It will be posted on http://www.gimptalk.com/forum
(If you don’t want me to post a GIMP version email me me and I’ll remove it lightningismyname@gmail.com My assumption is that it will be OK since the technique is different)
April 11th, 2008 at 1:30 am
That’s a really nice technique. Thanks for showing how to do this.
April 20th, 2008 at 5:55 pm
This tutorial has opened up a whole new door for my type work–thank you so much and great work!!
May 3rd, 2008 at 12:43 am
unique design Thanks for the tutorial !!
May 21st, 2008 at 7:10 am
hollywoord is the best^^
June 7th, 2008 at 8:55 pm
Woww this tutorial is wanderful!!
June 10th, 2008 at 2:46 am
顶ï¼å¤ªæ£’了ï¼cool。
June 24th, 2008 at 3:06 am
the AILD one looks sick
June 27th, 2008 at 5:27 am
So nice！
July 3rd, 2008 at 6:01 pm
Looks good, I can use this to create logos also, thanks for this great tip!
August 1st, 2008 at 7:20 pm
Thanks for this great tutorial - I’m always on the lookout for new things to do in Photoshop
August 16th, 2008 at 2:22 pm
hi.. very good!