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

Skype Me!

Do you have any query? I am usually available so if the button is green, go ahead and ask me.

My status

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 French User Interface Designer & Front-End Developer based in Bangkok, Thailand, since January 2009. I design beautiful and functional designs for Web Based Applications and mobile devices.

Want to become a guest author on this blog?

Leave a Reply