G / September 12, 2007
Make indented text with this super easy method
A popular graphical style at the moment is to make your text look indented. I spent months and months trying to work out how to do this after seeing it perhaps for the first time in iTunes. I always looked for a filter or a tool to "emboss" or "bevel" the text, but these never looked quite as nice, and often made the text hard to read.
One day, it hit me: it's SO SIMPLE! And the method I came up with didn't involve filters, plug-ins, or any other jazz like that.
All you need to do to create the effect of indented text is to duplicate the line of text, with the duplicate behind, and slightly below the original.
Then, make the duplicated text slightly lighter than the original text. This will work perfectly when you have dark text, just like in the title of this post.
Also, not many people realise you can use this method with light coloured text aswell. However, instead of moving the duplicated line of text below the original, you move it above, and make it darker than the original text. This will look just as good and give the same effect.
This method can be used in almost any application, but I made these with Adobe Illustrator. It's great to know that something that looks so good can be done so easily.
Hope this helps 
Get the Adobe Illustrator CS2 File [1.1MB]Add to StumbleUpon | Add to del.icio.us | Digg this Page
Michael Castilla said,
September 13, 2007 at 1:33 am ()
That's pretty cool! Thanks for sharing it with us.
Magnus said,
September 13, 2007 at 4:32 pm ()
Isn't that quite easy to do with a solid shadow above or below?
Brian said,
September 14, 2007 at 2:08 pm ()
I've used the solid shadow technique the commenter above was alluding to, but it never looked quite right. I tried this out and it is a little better, especially on larger text.
I am more of a code monkey than a designer, but I the tutorial will factor in on my next project... thanks!
G said,
September 14, 2007 at 5:00 pm (Administrator)
Magnus, as Brian says, you can do this effect with a shadow, but I have always found it cleaner and faster to duplicate it in this way.
Also, this method can be used in almost any text editing app as well as all the photo editors etc so in the long run this is probably the best method.
Claudius Coenen said,
September 27, 2007 at 12:21 am ()
The Cleaner Way is definately the Layer Style's Drop shadow. Set it to a hard edge (i.e. no blur), distance 1 px (depending on purpose) opacity and/or color as you see fit and you're done. Blend mode will be normal instead of multiply.
Benefit 1: If you edit the text, you won't need to copy it again.
Benefit 2: Save this style and apply it with one mouseclick whereever you want.
Gautch said,
September 27, 2007 at 2:06 am ()
When in Illustrator, I like to keep it even more simple.
Use your Appearance pallet.
1. Type your text out.
2. Open your Appearance Pallet.
3. Add a black fill, (or dark gray).
4. Move the fill below your text.
5. Add a transform affect to that bottom fill.
What this does is makes it so you only have one line of text that you can edit.
Not much of a big deal if you only have one line, but if you have any more lines you can just make the appearance into a Graphic Style. Then apply it to as many lines of text as you want. Pluuuusss.. with the Graphic Style applied when you update it, they aaaalllll update!
-Gautch
see more here -> gautch.com/blog
FrodeB said,
October 10, 2007 at 10:48 am ()
This is actually an old old old old technique from back in the photoshop early days., remember doing this on old web graphics in 95 or so. Very cool that retro tips sometimes works even today.
John Brown / Free Online Games said,
June 19, 2008 at 4:02 pm ()
supperrrr! Thank You
Evan said,
September 17, 2008 at 4:50 am ()
Pure Awesome!