Make indented text with this super easy method
James Gill / September 12, 2007
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]
Michael Castilla said,
September 13, 2007 at 01:33 ()
That's pretty cool! Thanks for sharing it with us.
Magnus said,
September 13, 2007 at 16:32 ()
Isn't that quite easy to do with a solid shadow above or below?
Brian said,
September 14, 2007 at 14:08 ()
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 17:00 ()
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 00:21 ()
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 02:06 ()
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 ()
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 16:02 ()
supperrrr! Thank You
Evan said,
September 17, 2008 at 04:50 ()
Pure Awesome!
Film seyret said,
March 17, 2009 at 14:18 ()
thank you very muchh
Fleshgrinder said,
April 9, 2009 at 19:54 ()
The drop shadow technique can also be used on websites without images, you only need a CSS3 compatible browser. Just apply the following CSS text-shadow:-1px -1px 0 #000;
Kindest regards
Michael said,
July 8, 2011 at 21:47 ()
Note... this looks way better and works significantly better on larger font sizes, at least 16px, and bold if possible.