Working With Images in PHP - Part 1: Rotation
Topaz Simplify 3 Review
Happy Labor Day!
The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Page 1 of 2 Like print, the Web is fundamentally a visual medium, a great vehicle for delivering a combination of text and graphics. But compared with print, the Web has striking limits in its capacity to display fonts. Text as art form is still possible for Web pages, but to use it with any flair, the Web designer must fall back on graphic text. With a powerful imaging tool like Fireworks, it is possible to create graphic text—for headings and titles, and as design elements in their own right—that rival the best of the printed media. This article is the first of four exploring how to achieve some of these effects.
Bright silver and chrome effects can be difficult to produce at low resolutions. The contrast between the text and the background needs to be high. Unless your design calls for a dark blue or gray background, you might want to consider using a gold effect instead. Whether gold or silver, all metallic texts start with a gradient. Use the support files link at the bottom of this page to download a set of Fireworks metallic gradient styles, plus a flash movie about creating sparkles with a star Auto Shapes.
Load Fireworks and open a new 500 pixel by 79 pixel document. Make the canvas color charcoal #333333, dark gray #666666, or dark blue #333366. You'll add the text next.
Type the words GOODLUBE.COM in all caps, at size 48. You can use any font you like, though you will get the best looking result with a blocky, sans serif font like Serpentine Bold. Use any fill color you like. Click in the stroke color box on the Property inspector to open the stroke swatches pop up. Click on the Stroke Options button.
Figure 1: Text with white stroke on a dark background
Unzip the metallic_styles.zip to the Styles folder of your Fireworks directory. On my machine that's found at C:\Documents and Settings\Linda Rathgeber\Application Data\Macromedia\Fireworks MX 2004\Styles.
Once you have unzipped the file to the correct location, it is necessary to let Fireworks know it's there. Here's how that's done:
Figure 2: importing styles
You can add the chrome style to the text by selecting the text and clicking on the Chrome1 swatch in the Styles panel. Here's an alternative method, which I prefer because it works well for any font:
If you would like to reposition the gradient inside the text:
Figure 3: Repositioning the gradient
Power users tip: If you want to move the text instead of the gradient rectangle, use the Subselection tool to drag the Mask Move Handle.
Finish with a drop shadow. Not bad! Let's try a variation.
Keywords
Text Effects, Fireworks, chrome text, graphic text
