How to Create Editable Letterpress Styled Text in Fireworks

Sep12

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.

letterpress-cover

Final Image

letterpress-final

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).

letterpress-step-01

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.

letterpress-step-02

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*:

  1. Distance: 2
  2. Softness: 4
  3. Opacity: 45%
  4. Angle: 315 degrees
  5. Color: Black

letterpress-step-03-a

letterpress-step-03-b

Step 4

Select the text again and apply add another live filter. This time we’ll use Drop Shadow with these settings*:

  1. Distance: 2
  2. Softness: 1
  3. Opacity: 85%
  4. Angle: 315 degrees
  5. Color: White

letterpress-step-04

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.

letterpress-step-05-a

letterpress-step-05-b

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: , , , , , , ,

Comments

Wanna share your thoughts? Leave a message
28
  1. never tried doing it using fireworks. lol. by the way what social plugin are you using for this site?

  2. 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.

  3. 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.

  4. 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!

  5. 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.

  6. Thanks for sharing this. I´m a fireworks lover in I was looking for this tip for a while.

  7. Euan Mead
    June 20th, 2010
    at 2:25 am

    Absolutely Amazing! Thank-you very much.

  8. very good work, i enjoy it!!

  9. 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/

    • 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’.

    • glom
      November 14th, 2010
      at 10:10 pm

      i agree great post : )

  10. Thanks for sharing, I can’t see enough effects on it. Would you create another one?

  11. What’s the font used on this tutorial? :)

  12. 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.

  13. 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.

  14. 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.

  15. Jeff Harrison
    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

  16. Gerald Hartnett
    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/

  17. Very helpful tutorial. Those could look very good on my site. Thanks.

  18. What version of Fireworks is this? Mine looks totally different.

  19. 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?

  20. 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

  21. Sune
    June 3rd, 2011
    at 3:16 am

    Brilliant – thanx man – just what I looked for!

  22. 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.

  23. 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.

  24. 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.

Find me on the Web

Other places you can find me

Daily Digest

Resource Sites for Inspiration

Extra Stuff

Represent!

Search this Website

Looking for something specific?