Benchmarks Online

Skip Navigation Links


Page One

Campus Computing News

Summer Hours

The CITC Helpdesk and You

Student Computing Survey Shows High Level of Satisfaction

Computer-Based Training Update: New Login Screens and the Addition of KnowledgeNet

Student Position Available

Today's Cartoon

RSS Matters

The Network Connection

Link of the Month

WWW@UNT.EDU

Short Courses

IRC News

Staff Activities

Subscribe to Benchmarks Online
    

WWW@UNT.EDU

 

The Glass effectA graphics odyssey.

By Charity Beck, UNT Central Web Support

I created this effect in Fireworks MX 2004. Ive always wondered how this effect was achieved, but kept putting off learning how its done. I just figured it was just typing the text and adding a gradient fill.   I found that when I actually tried to create this effect I discovered new functions such as Converting Text to Paths, and the Punch feature.   I use these new [at least new to me] features all the time.  Hopefully you will find them as exciting as I did.  To follow along the tutorial you will need Macromedia Fireworks.


  1. Choose the Text tool by clicking on it in the Tool panel (keyboard shortcut t).
  2. Choose a wide font.  The font I used is Arial Black -> Size: 62 -> Color: Red.
  3. On the canvas type the text Glass.
  4. Clone the text by selecting it with the Pointer tool and selecting Clone from the Edit menu.

The word Glass (red block letters)

 


  1. With the cloned text still selected, select Convert to Paths from the Text menu.
  2. From the Modify menu select Ungroup.  The text has been converted to paths, and now contains several anchor points instead of the text box.  (A handy thing to know if you ever wanted to customize a font)

Glass (red letters with blue dots all over them)

  1. From the Modify menu select Combine Paths -> Union.  This step enables you to treat the text as one unit instead of each individual letter as a unit.
  2. Its now time to add the gradient.  The gradient is the soul of our glass effect.  From the Property Inspector choose Gradient -> Linear from the Fill category.

Glass with blue dots and a line across it

  1. With the Pointer tool (keyboard shortcut v) select the gradient and change the anchor point so the gradient has a vertical direction and is positioned at the center of the text.

Glass with blue dots and a line

  1. Select the Pen tool (keyboard shortcut p) and choose a solid color from the Fill category that stands apart from the red gradient that we used. I used a bright blue.
  2. Draw a wavy line through the center of the text and close the path.  See example below.

Glass with pink letters and a blue filled in area covering 3/4 of the word from bottom up.

  1. With the Pointer tool (keyboard shortcut v) and holding down your Shift key select the gradient Glass text and the blue box.

  1. From the Modify menu select Combine Paths -> Punch. 
  2. To finish the effect off, select the gradient glass text and with the up arrow key on your keyboard nudge the text up on pixel.

Glass (pink at the top, 3/4 from bottom red)

Questions, comments, complaints or words of wisdom?:  Charity Beck (cbeck@unt.edu)