fireworks
Greeked Text
When creating wireframes, it's often useful to suggest the presence of text without using actual words, which can distract the viewer from the overall layout. Even "lorem ipsum" dummy text requires the selection of a typeface and size, which may be too much detail for the mockup. In hand-drawn mockups (does anyone still draw by hand?) you could use a marker to draw lines of different lengths to suggest text, but this effect has always been a pain to create with software. The Greeked Text1 auto shape makes it easy.
To create a Greeked Text shape, find it in the Shapes panel and drag it to the canvas. Horizontal rectangles of varying widths are displayed within the bounds of the shape to simulate a block of left-justified text. The auto shape has 8 yellow control points around its perimeter. Dragging one of these resizes the shape from that edge or corner. As you drag, rectangles are added or removed to fill the shape, and each rectangle's width is re-randomized. If you want a different rag on the text, just click a yellow control point without dragging to randomize the lines again.
Controlling line height, lengths and spacing
There are also 3 blue control points in the upper-left and top edge of the shape (the blue diamonds, not the blue squares). The control point on the top-right adjusts how random the line lengths are. Drag it to the left to let the lengths vary widely and to the right to keep them more even. The top-left control point adjusts the line height and the one below that the line spacing. As you drag the height or spacing control point, the number of lines in the auto shape will adjust to accommodate the new values. These points move only half as fast as the speed at which you drag the mouse, making it easier to make precise adjustments.
To have the Greeked Text auto shape match a particular font size and line spacing, such as 11px Tahoma with 16px leading, set the value of its line height + line spacing equal to the text block's leading (16 in this case). Setting the shape's line height to the distance from the font's baseline to the top of the ascenders (9px for 11px Tahoma) usually gives a good approximation of that text size.
Adjusting multiple Greeked Text shapes at once
After creating several Greeked Text auto shapes, you may want to adjust, say, the line spacing on all of them. Select the shapes, then drag the line spacing control point on one of them. This will update the shape whose control point you dragged, as well as the control points on the other selected shapes. Unfortunately, due to a bug in Fireworks, the other selected shapes won't redraw to display the new line spacing. To redraw them, you can click a control point on each shape in turn. Or you can run Commands > Greeked Text > Redraw Selection, which updates all of the Greeked Text shapes in the selection. Or you can use Commands > Greeked Text > Set Line Height and Spacing to enter numeric values for the line and spacing values, which will also automatically redraw the selected shapes.
Changing default values for line sizing
If you'd like to change the default line height, spacing or randomness, you can use the Default - Set Line Height and Spacing and Default - Set Line Length Randomness commands. After using these commands, any new Greeked Text shapes that you drag from the Shapes panel will adopt the new values. (Existing shapes will not be affected.) The defaults will persist across Fireworks sessions.
Pre-defined Greeked Text shapes
There are a few pre-defined Greeked Text auto shapes that come with the extension and can be inserted by running a command, such as Insert - Grey - Height 9px - Spacing 7px. This inserts a 50% grey shape with the line height already set to 9px and the spacing to 7px. The Insert - Hatched - Height 9px - Spacing 7px command inserts a shape that has some textures and effects applied to it to make the bars look more like actual lines of text.
To create right-justified text blocks, simply draw out a Greeked Text auto shape and then use Modify > Transform > Flip Horizontal to flip it horizontally. The control points will still manipulate the right-justified lines. If you rotate the Greeked Text shape 90 degrees counter-clockwise, it can also make a quick-and-dirty mockup for a bar graph.
-
Note that by "Greeked text" I'm referring to the representation of lines of text by plain bars, rather than actual typographical characters. This has commonly been done in word processors and desktop publishing programs when there is too much text to render quickly, as well as in hand-drawn mockups using markers. The "lorem ipsum" text that is often used as a placeholder is actually derived from a passage of Latin by Cicero, and is more properly called dummy text. More can be found at: http://www.creativeglossary.com/graphic-design/greeked-text.html ↩
Package contents
- Default - Set Line Height and Spacing
- Default - Set Line Length Randomness
- Insert - Black - Height 9px - Spacing 7px
- Insert - Grey - Height 9px - Spacing 7px
- Insert - Hatched - Height 9px - Spacing 7px
- Redraw Selection
- Set Line Height and Spacing
- Set Line Length Randomness
- Greeked Text