Simulating The Letterpress: From Live Filters In Fireworks To CSS Code

Advertisement

One of the visual effects that is a mainstay in my Web design toolkit is the letterpress effect. Used properly, it’s a quick way to make text blend better with the layout, as if it were machine-stamped onto the background. Think of what a home appliance marquee or a professional business card looks (and feels) like, and you’ll know what I’m talking about.

I’ve developed a simple workflow for creating a letterpress text effect in Adobe Fireworks that, with the advent of CSS3, can be applied directly to HTML text — no images needed. Here’s the best part: it doesn’t use any Bevel or Emboss Live Filters.

What Is Letterpress?

Letterpress is a venerable technique of printing1 that involves “pressing” a plate of movable type2 onto a sheet of paper to produce an effect that is impressed3 (where the text is pressed down onto the paper) or embossed4 (where the text is raised above the surface of the paper).

5
An example of a letterpress business card with impressed text. (Image: Audimas Adomavicious6)

The classic charm of letterpress found its place in digital design once designers were able to emulate its effect on screen. To accomplish that, designers observed the effect of light and shadow on the dents on paper that had gone through the printing process. Imagine a light shining down at an angle on a sheet of letterpress text. Impressed text will appear to have a sliver of highlighting at the bottom edge of the letters and a thin shadow at the top edge. Embossed text is just the opposite: highlights on top, shadows on the bottom. These properties create the effect of raised or sunken areas along the surface, and this can be translated using effects made possible by both Fireworks and the CSS3 specification.

Why Not Just Use Bevel or Emboss?

Fireworks’ Bevel and Emboss Live Filters are a bit primitive for my tastes. The refinement controls are unwieldy — for example, you can’t set highlights and shadows independently — and the result is subpar. It works OK for straight edges and sharp corners, but it gets rough around curves. I suspect this is because the effect is raster-based, so that it can work with any object (shape, text or embedded image); a vector-based tool would have allowed for a smoother and more precise effect.


The letterpress effect using the Outer Bevel Live Filter. Notice the roughness of the curved edges.

Letterpress Text In Fireworks

A better way to recreate the effect would be to use the Drop Shadow Live Filter, because it produces smoother edges. This solution hinges on a basic setting: a shadow and a highlight, offset exactly 1 pixel up or down, relative to the text object. For this tutorial, we’ll start with two text objects of different colors, set against a colored background.


Start with two text objects.

Embossed Text

To create an embossed effect, apply two Drop Shadow Live Filters to our first text object:

  • Apply a “Shadow” (distance: 1; color: #000000; opacity: 60%; blur: 0; angle: 270;) to the bottom of the text, and
  • Apply a “Highlight” (distance: 1; color: #FFFFFF; opacity: 90%; blur: 0; angle: 90;) to the top of the text.


Embossed effect applied to the “Smashing” text object.

The opacity of the Drop Shadow filters will depend on how light or dark the background is in relation to the text’s color. Tweak these values according to how pronounced you want the letterpress effect to be.


Adjust the opacity value in the Drop Shadow Live Filter.

Impressed Text

To create an impressed effect for the second text object, just switch the angle values of the “Shadow” and “Highlight” Drop Shadow filters shown in the previous step, so that the shadow is on top of the text and the highlight is on the bottom. Adjust the opacity values to maintain contrast against the darker text object’s color.


Impressed effect applied to the “Magazine” text object.

Note: These effects work best with text and background color combinations that aren’t black and white, as in our example. If you’re working with black text or black backgrounds, you’ll want to skip the “Shadow” effect, because it will do little for the text. Similarly, for white text or white backgrounds, forego the “Highlight” effect.

Save as Style for Reuse

Now that our letterpress effects are in place, we can save them as Fireworks Styles so that we can use them again later without having to apply each filter manually.

To create a Fireworks Style:

  1. Select the “Smashing” text object with the Pointer tool (V);
  2. Bring up the Styles panel (Control/Command + F11, or in the menu Window → Styles);
  3. Click on the context-menu icon in the top-right corner of the panel, and click on “New Style”;
  4. In the “New Style” dialog box, let’s give our style a descriptive name, like “Letterpress Emboss.” Uncheck all properties except for “Effect,” and click OK.
  5. Repeat steps 1 to 4 for the “Magazine” text object.


Styles panel and context menu


“New Style” dialog box

You should now see two new items in your Styles panel. The next time you want to apply the emboss or impress effect to a text object, just select that object, and click on the new style that you created.


Styles panel with two new styles

Additionally, you can save these new styles as a Style Library file (*.stl), to share with other designers or to back up your styles before reinstalling Fireworks.

To save a set of styles as a Style Library file:

  1. Bring up the Styles panel (Control/Command + F11, or Window → Styles);
  2. Click on the context-menu icon in the top-right corner of the panel, and click “Save Style Library”;
  3. In the “Save As” dialog box, enter a descriptive file name for the STL file, and then click “Save.”


The Styles panel, again.


“Save As” dialog box

To import a previously saved Style Library:

  1. Bring up the Styles panel (Control/Command + F11, or Window → Styles);
  2. Click on the context-menu icon in the top-right corner of the panel, and click “Import Style Library”;
  3. In the “Open” dialog box, browse to and select the STL file, and then click “Open.”

Hint: Need a good library of Letterpress Styles for Adobe Fireworks? Why not check this 16 Letterpress Styles set7 by Mikko Vartio8?

Translating Into CSS

Option 1: Translate the Values of the Live Filters Manually

Aside from the downsides of the Bevel and Emboss filters that I mentioned earlier, the other reason I use Drop Shadow filters is that they readily translate into CSS3’s text-shadow property. Consider this basic syntax:

text-shadow: [x-offset] [y-offset] [blur] [color-alpha];

Let’s break this down:

  • [x-offset] is set to 0, and [y-offset] is either 1px or -1px, depending on whether the shadow or highlight is at the top (90°) or bottom (270°);
  • [blur] is set to 0, to keep the shadow and highlight effects crisp;
  • [color-alpha] is set using an RGBa value: rgba(r, g, b, a).
    • The first three values (rg and b) correspond to the decimal red-green-blue values of the color itself (for example, #FFFFFF in hexadecimal is equal to 255, 255, 255 in decimal);
    • The last value (a) determines the transparency of the color (where 0 is completely transparent, 0.5 is half-transparent, and 1 is completely opaque).

Let’s apply our effects to the following HTML markup:

<div class="embossed">Smashing</div>
<div class="impressed">Magazine</div>

Our CSS for the embossed effect would be:

div.embossed {
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.8), /* shadow */
      0 -1px 0 rgba(255, 255, 255, 1.0); /* highlight */ }

And for the impressed effect:

div.impressed {
   text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.8), /* shadow */
      0 1px 0 rgba(255, 255, 255, 0.5); /* highlight */ }

Here, I have slightly adjusted the opacity values in the text-shadow property (relative to the original values in the Drop Shadow Live Filter in Fireworks) to better suit the way fonts are rendered in the browser.

9
Screenshot of the HTML and CSS output in Mozilla Firefox. See an HTML sample291210.

11
Screenshot of the HTML and CSS output in Apple Safari. See an HTML sample291210.

Option 2: Use the CSS Properties Panel in Fireworks CS6

Writing CSS code by hand is what we Web professionals usually do. But in some cases, tools can help us, too.

Fireworks CS6 (which was recently released) has a new feature that could help you when you want to quickly (yet reliably) translate the properties of a visual element in the design to CSS3 code. The CSS Properties panel13 can extract CSS3 code for virtually any object selected on the canvas, including text objects and live filters.

Let’s see how this could help us in practice when working with the letterpress effect!

If you have a copy of Fireworks CS6 (a trial version14 would do, too), open the letterpress-effect.fw.png file provided with this tutorial (see the Downloads15 section further below), and then with the Selection tool, select the first text object.


Open the letterpress-effect.fw.png file, and select the first text object.

Next, open the CSS Properties panel (in the menu, Window → CSS Properties, or Control/Command + F7), and while the first text object is selected, notice how the CSS panel instantly shows the object’s properties.


The CSS Properties panel shows the properties of the selected text object as CSS code. Highlighted here is the code that translates the two Live Filters into CSS.

In this case, we’re interested only in the Live Filters applied to the text object, so let’s copy this bit of code from the CSS panel and see how it looks:

text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.9);

As you see, we’ve got results similar to what we achieved earlier with the manual method. Fireworks CS6 has automatically translated the Live Filters that were applied to the “embossed” text object into clean and valid CSS!

Similarly, you can extract and copy the CSS for the Live Filters applied to the “impressed” text effect.

And if you strive for perfection (as many of us do), along with the CSS Properties panel, you can use CSS Professionalzr16, an excellent free extension by Matt Stow17 that can further optimize the code produced by the CSS Properties panel.

Of course, even if you’ve already switched to Fireworks CS6, you can always opt to translate the properties of Live Filters to CSS code manually. But when you’re dealing with a lot of objects, the CSS Properties panel comes in really handy and can save you precious time.

Tips on Using the Letterpress Effect

  • Use the effects sparingly.
    Text effects are the last thing you want to abuse, because they could impair readability, especially for people with vision problems. Restrict them to headings and interactive items (such as buttons and menu links).
  • Enable them to degrade gracefully.
    While most modern browsers already support CSS3 to some extent (see the note below), Internet Explorer 9 still doesn’t recognize the text-shadow property. In an effort to make things look consistent, you might want to look for a workaround18, but I highly recommend that you gracefully degrade19 the effect in browsers that don’t support the property. Effects should be enhancements, not vital features.

Please note: Browsers that fully support the text-shadow property (with multiple shadows) include Firefox 3.5+, Chrome 4+, Safari 4+ and Opera 9.5. As of version 9, Internet Explorer still does not support the official text-shadow definition; instead, it has a proprietary filter20 that achieves a similar effect.

Examples

Here are a few real-world examples of the letterpress effect in action.

Veerle’s Blog21
The letterpress effect — applied to the (image-rendered) logotype and headings — creates a bit of contrast against the background here, while still keeping everything subtle. Notice the use of both embossed and impressed effects in the column headings.

22

Stunning CSS323 (teaser page)
Coupled with @font-face24 declarations for custom HTML fonts, the letterpress effect on the different heading levels makes for a sophisticated look, previously feasible only with image-based text. (Note that the teaser page we’ve linked to here is an archived version.)

25

Janko at Warp Speed26
The use of only one text-shadow effect, and only on the headings, exemplifies Janko’s restraint in order to maintain contrast and readability. Also notice the 45° offset in the highlight effect, which you can achieve in CSS by adding a 1-pixel x-offset to the text-shadow.

27

Downloads

The samples (i.e. the Fireworks PNG and Style Library) should work fine in any recent version of Fireworks (CS4, CS5, CS5.1, CS6).

Further Reading

(al) (mb)

Footnotes

  1. 1 http://vimeo.com/17156405
  2. 2 http://en.wikipedia.org/wiki/Movable_type
  3. 3 http://en.wiktionary.org/wiki/impress
  4. 4 http://en.wikipedia.org/wiki/Embossing_(paper)
  5. 5 http://www.flickr.com/photos/needoptic/5356504970/
  6. 6 http://www.flickr.com/photos/needoptic/5356504970/
  7. 7 http://www.vart.io/2011/letterpress-styles-adobe-fireworks/
  8. 8 http://twitter.com/mkkov
  9. 9 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/07/letterpress-effect.html
  10. 10 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/07/letterpress-effect.html
  11. 11 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/07/letterpress-effect.html
  12. 12 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/07/letterpress-effect.html
  13. 13 http://www.adobe.com/devnet/fireworks/articles/css3-extracting.html
  14. 14 http://www.adobe.com/cfusion/tdrc/index.cfm?product=fireworks
  15. 15 #downloads
  16. 16 http://www.mattstow.com/css-professionalzr.html
  17. 17 http://twitter.com/stowball
  18. 18 http://www.google.com/search?q=ie9+text-shadow+workaround
  19. 19 http://www.digital-web.com/articles/fluid_thinking/
  20. 20 http://msdn.microsoft.com/en-us/library/ms532985(v=vs.85).aspx
  21. 21 http://veerle.duoh.com/
  22. 22 http://veerle.duoh.com/
  23. 23 http://readableweb.com/fontface/zoe/StunningCSS3-1badttf.htm
  24. 24 https://developer.mozilla.org/en/css/@font-face
  25. 25 http://readableweb.com/fontface/zoe/StunningCSS3-1badttf.htm
  26. 26 http://www.jankoatwarpspeed.com/work/
  27. 27 http://www.jankoatwarpspeed.com/work/
  28. 28 http://provide.smashingmagazine.com/letterpress-effect.zip
  29. 29 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/07/letterpress-effect.html
  30. 30 http://www.fontsquirrel.com/fonts/ultra
  31. 31 http://provide.smashingmagazine.com/letterpress-effect.stl.zip
  32. 32 http://fireworks.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  33. 33 http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
  34. 34 http://www.smashingmagazine.com/2011/02/15/useful-typography-tips-for-adobe-illustrator/

↑ Back to topShare on Twitter

Jose is a graphic designer and photographer from Baguio City, Philippines. He is an advocate of using Adobe Fireworks for designing application interfaces for Web, desktop, and mobile platforms. He has written several other tutorials for Adobe Fireworks on his blog. Follow him on Twitter to see what he's been up to lately.

Advertising
  1. 1

    I posted something similar about this technique in Photoshop and translated it to the web as well. I know from my site’s poor analytics that my post couldn’t possibly be the inspiration for this post, but it thought it might be helpful for the fellow Photoshop peeps out there.
    http://wesleyeterry.com/2011/08/adding-some-depth/

    -8
  2. 2

    Excellent article! I like the fact that you went from Fireworks out to CSS (and even made use of the CSS Properties panel in CS6).

    6
  3. 3

    Good job, Jose – well thought out process.

    0
    • 4

      I approximating the puiecors communication you bestow in your articles. I will bookmark your weblog and ensure once more here frequently. I am fairly selected I’ll hear loads of new pack right here! Clear fluke for the next!

      0
    • 5

      click hereJune 25, 2011You ought to really think about eggnaed on creating this weblog into a serious authority in this market. You evidently have a grasp deal with of the subjects everyone is searching for on this website in any case and you may certainly even earn a buck or two off of some advertisements. I might explore following recent matters and raising the amount of write ups you place up and I guarantee you’d start seeing some superb focused site visitors within the close to future. Only a thought, good luck in whatever you do!

      0
  4. 6

    Guys, I’m loving the attention you’re giving to Fireworks! Please keep it up :)

    17
  5. 7

    “Hint: Need a good library of Letterpress Styles for Adobe Fireworks? Why not check this 16 Letterpress Styles set by Mikko Vartio?”

    Thanks! My current twitter is nowadays http://twitter.com/mikkovartio and Letterpress Styles-library is not exactly css3-friendly (eg. filter-hacks w/curves, convert to alpha) as it was created for ma(i)nly bitmap layouts.

    Direct link to Styles-library:
    http://vart.io/download/letterpress-styles-for-adobefireworks.zip
    – Unzip, import .stl via Styles-panel

    6
  6. 8

    thank you! didn’t know that fireworks can generate css code :)

    2
  7. 9

    Great post! Very informative! Cool process showing how you can go to CSS from Fireworks.

    0
  8. 10

    CSS3 has implemented some very good, indeed. With it you can simplify a lot, and do things much faster than before it took over. As the gradient, shadows, reflections, etc.. Before all this had to do with images using fireworks, photoshop, etc, now everything can be achieved from CSS3. The bladed HTML5, CSS3 and jQuery is wonderful with them you can achieve excellent jobs with less work. The jquery is supplanting FLASH, you can make very good movement with a very simple programming, and is better for SEO because the search engine robots do not detect the Flash content.
    Regards,

    1
  9. 11

    One important element of this technique that’s not really touched upon is the colors used for the embossed or impressed effect. You’ll notice on Veerle’s example image that the colors are a variant of the text color. Instead of just using black and white for the text-shadow, use an offshoot of the text color, or perhaps the background color, to give the effect a little more elegance.

    5
    • 12

      Michel Bozgounov

      July 23, 2012 12:48 pm

      Good catch! :-)

      1
    • 13

      This does add a nice effect, but it has to be done right. Our eyes are used to seeing light behave a certain way because the laws of physics don’t change. Pure light will always be white, pure dark will always be black. However in some situations the light has a certain color to it. You’ve seen this if you ever set your camera’s white balance to a setting other than auto and then taken photos in sunlight, shade, indoor fluorescent light, and indoor incandescent light. Our eyes do eventually adjust to balance white back to white so we don’t really notice it.

      All that to say this. When using colors other than white or black in your shadows and highlights it is good to keep in mind what your lighting ‘temperature’ is on your website. For most it could just be standard ‘daylight’ (6500 degrees Kelvin). In that case your highlights should be pure white and your shadows pure black. You would adjust the effect and get a natural color blend using opacity. Just like in the real world. If you wanted to apply a cooler or warmer effect you can do that, but should stick with that for the entire page. If you change it around too much it might lose the realistic effect as your eyes and brain see different white points in your ‘light’.

      Thats just how I approach these faux lighting effects. I draw on my photography experience and think about where my lights are, what color they are, and consistently apply these to the design. that could mean my shadow angle changes subtly as you scroll down the page (and the object moves in relation to my imaginary light). Yup, probably over thinking it, but I’m also the type who spends hours setting up lights for a photo shoot. Guess I can’t shake the obsession with perfect lighting.

      1
  10. 14

    At long last Fireworks getting the credit it deserves, Photoshop is not the answer to everything and for webdesign is total overkill.

    1
  11. 15

    Really usefull!

    1
    • 16

      mdnetit290Thank you man , I always waentd to know how can I make Such a things without using 3D Max . Thank you and My best regard Actually I am photographer and designer but not like you my friend .

      0
  12. 17

    After reading this, I’m thinking of opening my Fireworks now to give this information a try! Great post, thanks.

    1
  13. 18

    J Cole Morrison

    July 23, 2012 12:08 pm

    So useful! Thanks much! I’d been trying to simulate this with the CS6 Live Photoshop Filters, but the bevel and emboss just looked too grainy and choppy. I never thought to try it out with the shadows, and better yet, the fact that it translates to CSS3 is AWESOME!!

    2
  14. 19

    Nice work!

    0
    • 20

      I love what this topic is doing for me and people I know. Through kngodelwe of the tips you have shared will really make you a more perfect person and more helpful for yourself, family along with your community. I admit I cannot know much like yourself on this issue and I believe over time, with more visit to your blog, I can likely an expert like you. I have a lot to learn. It’s really a lot of work and I believe the time spent on your site would be worth the amount of of effort.

      0
  15. 21

    I’m not typically a fan of Fireworks, but I might just have to try this one.

    Thanks for sharing.

    0
    • 22

      I used to not like Fireworks either. I did everything in Photoshop. Now I do most everything in Fireworks. For a few really complex elements or graphics I’ll create them in Photoshop, but for 95% of my mockup I use Fireworks. Best change I ever made. Faster, better looking (FW does corners and gradients better than PS), and much more flexible. Right tool for the job no question.

      2
  16. 23

    For anyone else who had trouble getting the two drop shadows, it is two Drop Shadows from the filter menu in the Properties panel and NOT two Photoshop Live Effects with Drop shadow.

    1
    • 24

      Michel Bozgounov

      July 24, 2012 1:01 pm

      Absolutely correct. Two “Drop Shadow” filters applied from the Live Filters section in the Properties panel! :-)

      1
  17. 25

    Awesome writing and great examples (I really love the business card example).

    0
  18. 26

    please send me advance CS5 fireworks tutorial

    :)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top