Letterpress styled text or inset text effect is one of the popular trends in modern web design. I’ve seen some tutorials on how to create this effect on Photoshop and Illustrator but I haven’t seen one in Fireworks. Today I will teach you how to achieve this awesome effect in just 5 very easy steps using Fireworks.
Final Image
This is how the final image looks like. I’ve used gray color for the example but you can always choose your own settings once you mastered this very easy effect.
Step 1
Open up Adobe Fireworks and create a new document. Let’s start with a small canvas, 490px by 200px and a gray background (#AAAAAA).
Step 2
Use the Text tool (T) to type out some text in the center of the canvas. Choose a nice font and fill it with a darker gray color (#888888). I used Bello Pro for this tutorial.
Step 3
With the text still selected, apply an Inner Shadow filter from the live filters menu inside the Properties panel and adjust the settings*:
- Distance: 2
- Softness: 4
- Opacity: 45%
- Angle: 315 degrees
- Color: Black
Step 4
Select the text again and apply add another live filter. This time we’ll use Drop Shadow with these settings*:
- Distance: 2
- Softness: 1
- Opacity: 85%
- Angle: 315 degrees
- Color: White
It is important that the angles from both live filters are the same to provide consistency on the source of lighting applied.
Step 5
Actually that’s it. It seems real easy, huh? One more important thing, the text is still editable so if you want to change the text, you can do so without repeating the entire process again. To make it easier, you can save this as style and use it on your future designs.
Fireworks FTW!
While Photoshop is the tool for most web designers out there, I prefer Fireworks for my web design projects. It not only does the job but it does the job easy, simple and fast. Fact is, this website was designed using only Fireworks. Did you see how the inset text effect was achieved using only 5 super simple steps? I bet even your grandma can do it.
* – You may adjust your settings to your liking. Those settings I have should serve as a guide for you.
If you find this tutorial helpful, please show some love by clicking some of your favorite social bookmarking icons below.
Tags: awesome, Fireworks, HowTo, inset text, letterpress, text effect, tutorial, typography
September 12th, 2009
at 2:08 pm
never tried doing it using fireworks. lol. by the way what social plugin are you using for this site?
September 12th, 2009
at 4:05 pm
I’m not using a plugin dude. I hardcoded it into the theme. Here’s the script, in case you’re interested:
<ul id="share-buttons">
<li id="share-twitter"><a href="<?php the_permalink() ?>" class="retweet"><?php the_title(); ?></a></li>
<li id="share-feed"><a href="http://feeds2.feedburner.com/DinoLatoga">Subscribe to RSS</a></li>
<li id="share-facebook"><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>">Share on Facebook</a></li>
<li id="share-digg"><a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink();?>">Digg It</a></li>
<li id="share-stumble"><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">Stumble upon it</a></li>
<li id="share-delicious"><a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>">Add to delicious</a></li>
</ul>
That and add your own CSS styling.
September 13th, 2009
at 3:53 am
God job dude! Simple yet effective and your right about Photoshop. I’d rather use Fireworks and get out to enjoy the day rather than fumbling around with options that are not what I wanted to use.
September 28th, 2009
at 12:37 pm
Just randomly stumbled onto this site lookin’ for an easy way to make an inset text effect in FW.
It look’s great.
Love this little tut. There’s not enough practical fireworks stuff out there.
Could you do one on how to create the sort of lens flare / glare / shine effect that you have at the top center of each section?
I always thought it had something to do with a radial gradient but have not been quite able to figure it out.
January 12th, 2010
at 5:21 am
Thanks for this. I am constantly telling people about Fireworks. Such a great tool to design a website quickly. I’ve been using it since version 1. I was struggling to get the faint white line in the letterpress effect going. So now I know. Thanks again!
January 26th, 2010
at 6:05 pm
Excellent effect. I’m a fan of using Fireworks for web layout mockups…I tend to find Photoshop is over complex for the task. I’ve saved it in my styles and I’m about to use it in my first website build of the year. Fingers crossed.