Get Our Free Ebook
Beginners Guide to HTML

  Raster Graphics Fireworks Text Cut Effect

Text Cut Effect

To create a Text Cut Effect, follow these steps:

First, install the 3 fonts provided (Acens.ttf ; OptimusPrincepsSemiBold.ttf and SYMPHO.TTF) then select the Text Tool to write our text, for example, " SARCAGUS". It is important that the text should all be in capital letters in order for this effect to work nicely.

Text Cut Effect

Figure 1: 3 different fonts

You may also use use the justified alignment to make the text appear wider

The next step is to draw rectangles using the Rectangle Tool to erase or simply hide some parts of the letter. Take note that this technique cannot be applied to all letters, for example, cutting out the letter R would make it look like a P. Make sure there is no stroke color for the shapes (let's call them " shape blocks"), and that the rectangle fill color matches the background, in this case white (or #FFFFFF).

Text Cut Effect

Figure 2: The letters are hidden by white rectangles or punched

You can settle on Step 2 if you want, but in dealing with a colorful background or if you want to apply effects/filters on them it is best to convert the text/letters to paths. To do this, right-click on the text and choose Convert To Paths and Ungroup. Select all the objects, including the rectangles and select Modify > Combine Punch > Paths. It will punch (cut out) a single letter , repeat the same process on the other letters by hitting the Redo button.

There you go, a very simple text trick that can be done in seconds. it is a unique way of using text in Fireworks, you may also try to modify it more by changing the colors of the letters.

Text Cut Effect

Figure 3: Letters with colors

Do not limit yourself to using rectangles alone, you can also use the pen tool to draw a custom shape to cut text in a different way. For example, the letter "A", we can also draw a triangle to remove the bridge. Do not limit cutting the bottom part of the letter alone, the trick here is to cut just the portion, and make the letter still readable.

Text Cut Effect

Figure 4: The A bridge

Finally just keep yourself open to creative ideas, use different shapes and try to experiment, the most important thing is that the text is still readable, and that the letters are not misrepresented.

Text Cut Effect

Figure 5: The completed tutorial


Fireworks Zone is the main resource for Adobe Fireworks enthusiasts with tutorials, articles, linkbase, commands, styles, textures, patterns, auto shapes. It is by far the largest and regularly updated Fireworks sites on the web.

subscribe to newsletter