Quick Tip: Beveled Text without Filters or Effects
Every once in a while we might find ourselves needing to get that “inset” or “beveled” look for text, probably more often for buttons and web design, than anything else. But whatever reason you might need or want inset text, here’s a quick tip to get that effect without using a filter, effect, layer style or appearance. Why? By not using filters, your file is more solid and reliable, you can open it in previous versions of the same software with less headache, and if you send vector files to print it will give you less errors by only using paths instead of filters/effects. I will be using Illustrator in the example, but this technique can be applied to just about any software you use to set your typography.
Example
An example of this effect can be found at the Apple website.
1. Make Your Shape and Text
I’m using a gradient here, and this effect works best when the text is somewhat dark. In essence this is a simple lighting technique where the light is coming from the top. So, naturally the gradient on my button is lighter at the top and darker at the bottom, where the shadow would be. Here is what my background shape and text look like before we get started.
2. Set your “Nudge” increment
Go to your Illustrator (or other app) preferences, and choose “General.”
Set the “nudge” increment to 0.5 pixels, (or a distance of your liking).
3. Duplicate, Nudge, and Color
Now, with your text selected, hit Command/Control + C to copy, then Command/Control + B to paste the copy directly behind your original text. Then, hit the Down arrow once to nudge your new text down half a pixel. Keep it selected, and change the text color to a light gray, and Done! If you zoom out and view your button at 100% scale, it should look something like this:
So there you have it, a clean beveled text look, without any fancy filters or effects. You may want to group your two text paths together so they always stay aligned the way you like them.
Download Example File (Ill 10 eps)
Includes: - EPS (1)
Related Posts:
- Illustrator Tutorial: How to make a Vector Glass Button
- Illustrator Tutorial: How To Make 3D Vector Vintage Stars
- Glossy Vector Web 2.0 Logo Text in 5 Easy Steps
- 17 Tips that will save you time in Illustrator
- Illustrator 3D: Bust Down the 2D Barrier
- Illustrator 101: One Gradient Across Multiple Paths
This is pretty cool, BB. While I was looking at the intro bit on your home page I thought to myself, “I wonder if he’ll just duplicate the layer and drop it down a bit.” And sure enough! But all credit to you; I’d have never thought of it unless I was in the exact situation I just found myself. :)
Thanks for all your insightful and creative work!
-K
I’m glad to see someone else uses this technique. Excellent job on all of the great posts!
hey thanks
It’s easy to make things more complicated than they need to be simple approaches really do work great.
Sweet and simple.
Thanks Bittbox.
LOL i think I’ve said thanks so many times on your posts that you are in danger of getting banned by Google for duplicate content!
thanks Bitt for sharing
Buen trabajo como siempre !!! Gracias ^^
This is how I used to do it, but I found having to edit all text twice was an annoyance.
I agree with the above poster doing bevel text this way is too annoying if you need to edit the text. I actually use a drop shadow set to normal instead of multiple and set the color to what ever color the highlight nee3ds to be. set the angle to 90 degrees and 1-2 pixelsdistant from the text. I set the size to 0 and spreaqd to 100%.
Filters don’t have to be used in the way they were intended. If you’re doing illustrator before you go to press or want to not have effects expand the apperience on the object and you’ll have the same thing as if you duplicated it and positioned it behind and slightly below the object.
Nifty hint. Thanks man. This website is incredibly helpful.
Bitt, Great job. This is a great technique. I will be using it in the future. I am making an interactive cd-rom and I may very well use this technique for the cd-rom.
@ David & angie- AI has a find & replace for text which is very useful instead of having to edit twice.
I used to do it this way, but then I can’t say I’ve had any call for inset text in years! It is very crisp looking though.
Great tip for beginners and pro’s alike! Sometimes pros tend to make things a little more complicated than they could be:)
So simple and so cool. Thanks bittbox!
tanks a lot!
i use this tip for write my last post about howto design the menu bar of apple.com in photoshop/css, you can see at:
http://www.programmando.net/2007/08/28/mac-style-menu-con-photoshop/
i’ve been trying to make this kind of effect… Thanks a lot !!
Have you ever tried it with rainbows?
This advice is good, but leaves one major problem you now have 2 layers of text to deal with. Not very good if you have to do a lot of editing or plan to edit ever in the future.
This way technically uses an effect but it is only a transform affect. The trype is then dynamic, meaning that you only have to edit the type once rather than editing 2 different layers of type or paths of type.
1. Select the type you want to edit.
2. click “control /” in windows or “cmd /” on mac
3. Now look in your appearence pallet. What you should now see is that you now have a stroke and a fill above your characters.
4. Drag the stroke below the fill. and make sure the stroke is transparent.
5. Grab the fill and copy it by dragging it don to the new fill icon. You will have 2 fills for your text.
6. Select the bottom fill and change the color to to whatever color you would like to use for your highlight.
7. With the bottom fill still selected go up to the menu and click “effect>>distort and transform>> transform”
8. Click the preview button so you can see what you are doing
9. Change the “Move Vertical” to a negative value”
Now you can edit your text dynamically
Wonderful!
[...] Tutorial Link [...]
cool and quick apply, thanks
[...] végül egy tutorial, a mostanában elég népszer? beveled text látrehozására: Beveled Text without Filters or Effects var [...]
[...] Beveled Text without Filters or Effects [...]
[...] Beveled Text without Filters or Effects [...]
[...] Beveled Text without Filters or Effects [...]
[...] Beveled Text without Filters or Effects [...]
[...] Beveled Text without Filters or Effects [...]