Blog

You've reached the blog of Jeremie Tisseau, a French Visual Interface Designer, Wordpress & Drupal developer, graphic designer, web addicted... Oh! and I am based in Bangkok, Thailand, with my family.

Next/Previous Post

Join Us!

Open source Wordpress theme by the WPSynergy communityAre you a talented WP designer or developer?

More Info

Hire Me!

I am currently available for Web/UI design projects. If you think we would work well together, contact me today to receive a free consultation.

Get in touch!

How to create a text gradient

June 16, 2007

All, Design, Tutorials

2-How to create a text gradient in fireworks

Article written by Jeeremie

In my last post, I explained you how to create a text gradient in Fireworks. We will now use a different technic to obtain the same result.
Enter your text

Here is the step by step tutorial:

  • First, select New in Files and enter 400px in width and 300px in height.
  • Select text tool or press T and type any text:
    Enter your text
  • Select the pen tool…
    Enter your text
  • … and draw a path as shown below:
    Enter your text
  • Select your path and apply a gradient:
    Enter your text
  • you should obtain something similar to this:
    Enter your text
  • Tilt the line in a vertical position:
    Enter your text
  • Click on the background color of your path. You should see two cursors with two different colors. Select one of the cursor and pick the color of the text with the eyedropper:
    Enter your text
  • Click once again on the background color of your path and select the same cursor. Now, select the Sys Color Picker.
    Enter your text
  • Move up the cursor to a slightly lighter color:
    Enter your text
  • Do the same with the second cursor but move the cursor up to a very light color.
    Enter your text

Last Step

We will now cut and paste the path inside the text:

  • Select your path and press Ctrl+X to cut it
  • Select your text and press Shift+Ctrl+V to paste your path into it
  • Enter your text
    You can now modify your path gradient to get a better result or modify the shape of your path (with the Subselection Tool (A)).

And the end result:

Enter your text

Tip:

To give more depth to the text you can add a gradient (with a darker color on top)
Enter your text

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a Visual Interface Designer focusing on Web Applications design, Wordpress/drupal development... I am also the founder of WPSynergy, an open source community focusing on building high quality Wordpress themes... for Free!

Want to become a guest author on this blog?

Leave a Reply