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.
May 30th, 2010
at 12:38 am
Thanks for sharing this. I´m a fireworks lover in I was looking for this tip for a while.
June 20th, 2010
at 2:25 am
Absolutely Amazing! Thank-you very much.
June 25th, 2010
at 5:52 am
very good work, i enjoy it!!
September 11th, 2010
at 12:55 am
Great post and a great, easy to follow simple technique.
I’ve expanded on this a bit here: http://apparentlyrich.com/2010/09/how-to-create-a-letterpress-effect-with-editable-text-in-fireworks/
September 26th, 2010
at 6:20 pm
Hey Gerald,
Nice work there. Settings may really vary for different situations and tastes. :)
I’m glad you learned a thing or two. Keep on sharin’.
November 14th, 2010
at 10:10 pm
i agree great post : )
September 14th, 2010
at 12:45 pm
Thanks for sharing, I can’t see enough effects on it. Would you create another one?
October 10th, 2010
at 1:55 pm
What’s the font used on this tutorial? :)
April 3rd, 2011
at 5:55 pm
Thank you for the info., and now I able to send my boss a letterpress style document. He can be quite picky. Now, I will not have to hear him complain as much. You helped me a lot.
April 5th, 2011
at 1:45 am
This is a very nice and easy guide in making styled texts. The guides are clear and easy to follow. I’m expecting for more posts from you.
April 5th, 2011
at 7:09 pm
Adobe Fireworks is really a very nice tool for designing. I am a web designer and Adobe Fireworks has helped me a lot for impressing my customers. I am able to create very stylish text effects after learning these 5 steps. Thanks for sharing this step by step tutorial. I hope you will also share some other techniques and tips here for better designs.
April 6th, 2011
at 4:22 am
Adobe Fireworks and GIMP 2 are the two programs I would recommend too. Once you have mastered the tutorials the programs are pretty sweet. By the way, awesome design technique!
Jeff Harrison
Website: Voice Over
April 7th, 2011
at 11:25 am
It actually did work for me. The “letterpress styled text” fireworks just entertained my eyes. Great tutorial for sure!
Gerald Hartnett
Grand Island, NE
http://thescooterexperts.com/
April 12th, 2011
at 3:33 pm
Very helpful tutorial. Those could look very good on my site. Thanks.
April 14th, 2011
at 1:55 pm
What version of Fireworks is this? Mine looks totally different.
April 27th, 2011
at 12:45 am
Thanks for the auspicious writeup. It in fact used to be a amusement account it. Glance complicated to far brought agreeable from you! By the way, how could we keep in touch?
May 9th, 2011
at 10:37 am
Thank you, you couldn’t have spelled it out any clearer! Five simple steps, with visuals, I was able to follow along just fine, thanks!
Ben Tyler
Louisville Home Remodeler
June 3rd, 2011
at 3:16 am
Brilliant – thanx man – just what I looked for!
August 8th, 2011
at 9:08 pm
As a website resource for companies and technologies enthusiasts to observe the latest and biggest developments in Unified Communications, IP Telephony, Hosted Communications and VoIP.
August 28th, 2011
at 5:29 am
Hello, great tutorial here. I am just now opting to try Fireworks for my logo after poor attempts with PS and AI. I’m currently in school for graphic design and in the process of designing inclouddesign.com where my logo looks lousy. It is supposed to be inset or letterpress and just looks blurry. Do you have any suggestions using Fireworks to get the effect in this tutorial on my dark header background? Thanks in advance and keep up the great work.
September 26th, 2012
at 10:25 am
Good God I’ve always wanted to do create this letterpress type of image.
I do thank you a lot, you have no idea of how grateful I am Dino.
And I also use Fireworks alone to create all my material and it is just fine and more then enough for my design needs.
April 14th, 2013
at 2:04 am
I precisely needed to thank you very much once more. I do not know the things I would have implemented in the absence of those secrets discussed by you directly on that industry. Completely was the scary dilemma in my circumstances, but witnessing a professional form you handled it took me to jump with joy. I’m grateful for your work and as well , sincerely hope you find out what a great job you were doing training the mediocre ones using your webblog. Most probably you haven’t got to know all of us.