Blog - Latest News

Gradient Text Logo Tutorial in Adobe Fireworks

The gradient text logo tutorial is a very easy tutorial in Adobe Fireworks , and helps you create a quick text based logo for your website in just a few steps. This technique is used in most popular websites today.

Before we begin with the tutorial , let’s discuss about fonts first. There are basically two types of fonts, sans-serif and serif fonts.

Sans-serif fonts are what we call modern fonts, they dont have serif or extra details at the end of the letters or symbols. Example : Arial and Verdana Font. It’s what most designers used today for their logos.

Serif fonts have those extra details at the end of the letters or symbols , and which were mainly used in the old times. Example : Old English and Times New Roman.

Choosing between what type of font , serif or sans serif , the actual font you are going to use and trying to match your font with the overall theme of the design / website is what makes a logo good or bad so you have to choose wisely.

Font Resources :

Dafont – it’s a font resource that offers a huge variety of fonts from free, shareware to demo fonts.

Paid or commercial fonts though are the best. Why ? Font designers put extra effort on designing commercial fonts and looks better than most free fonts. Exclusive – its expensive and unique , so only those who can afford these fonts can use them in their logos. There are a lot of font foundries out there , like fontshop.com or fonts.com

If you’re a designer and truly want a font that nobody else uses , I suggest you try to create your own font for your project. Even if you will only design a few letters , you must consider font kerning, height and width of each letter and so much more. Check this font I designed for my client’s logo.

Now lets , begin the tutorial.

1.) Start a new canvas in fireworks , choose a dark background color like black , dark red , etc. *Do not use white or a light color as the background since it wont blend with the stroke color of the font.

2.) Use the Text Tool (T) and choose a font , a serif or sans-serif and any font-size. In this example I chose an Arial Rounded MT Bold Font , with a font size of 52.

2.) Select the text object, and choose white #FFFFFF as the stroke color for the text. Select the stroke color again and choose Stroke Options > and change to Stroke Inside. Follow these settings below :

Stroke Category : Pencil
Stroke Name : 1 – Pixel Soft
Tip Size : 1
Edge Softness : 1

Stick to the rounded type strokes and keep the tip size to 1 , you can use other strokes types if you wish.

3.) Select the text object a change the fill color of the text and choose gradient > linear gradient. Change the color of the right side of the gradient ( the one encircled in red ) to a black or darker color.

You will notice when you select your text object, a gradient handler appears. The one in the red circle which we will call “gradient position” and the one in the orange circle will be the “gradient extender”. The “black line” that connects the gradient position and gradient extender has to be a straight line.

4.) Lastly , its a matter of moving the gradient position further down and adjusting the gradient extender.*Notice the gradient position and extender , this decides the overall look of your gradient so play around which settings you prefer the best*.

The trick here is to make it look like the stroke color blends with the top color of your linear gradient. You may also wish to extend the gradient by playing around with the gradient extender. If you change the font size ( either increase or decrease ), you would need to change the gradient position and extender again.

And there you go, a simple gradient text logo.

Click here to download the gradient text logo source file in Fireworks > [download id="37"]