Creating A Gaming Clan Logo - Adobe Fireworks Tutorial

In this Adobe Fireworks tutorial , you will learn how to create your own gaming logo for your website using Adobe Fireworks.

The logo design process is not just an hour long process, it takes time to create a good logo that can attract its target audience. Take note that this is a web logo tutorial, and we are aiming for web use.

Let’s assume we are trying to create a logo for FIREZONE , a gaming clan that plays first person shooter and RPG games.We would opt to make the logo general so that it can appeal to different types of games and if the gaming clan would take another direction.

Before we actually design the logo, we must review the logo guidelines, although some of the things here can be changed during the design process. This will serve as a guideline for the logo designer in asking the client.

a. Logoname – Firezone

b. Preferred Colors for the logo text or ” type ” – orange , white, silver

- Preferred Font Style -

c. Preferred Background color – Black

d. Preferred Graphic Symbol or ” mark ” – Circle Type with a Letter L on a flame symbol

e. Slogan or tagline to go along with the logo – ” Maximum Firepower ”

Now let’s make the logo in Adobe Fireworks CS4

1.) First, lets start a new document

Canvas Size : Length = 700 Width = 700 , Resolution = 150
Choose black for the canvas color:

2.) Now lets make the logo text. When using a font, we must make sure that it is a free font and check the font documentation before we try using them for our projects , we can find a lot of free fonts at www.dafont.com . Then install the font in your pc or mac.

In this tutorial , i used a font called turnpike but you can use a different font if you wish.

3.) Use the (T) Text Tool to type the word FIRE. For the font color, choose #FF9900 or orange

4.) Next, click the font tool again to type the word ZONE. Place it to the right of FIRE , and take note of the spaces, use the keyboard arrows to make sure they are alligned well. Choose white for the font color or #FFFFFF.

We could have typed firezone as one word , and change the colors inside but since we are going to use gradients later on, we need to separate them.

5.) Creating the flame symbol.

This is a tricky part since it requires the use of the pen tool and we would be utilizing curves. It’s best to practice using the pen tool , using the ” Ctrl Keyboard Button ” for controlling the points.

Click the pen tool , change the stroke size to 1, and a soft rounded brush with a white color.

6.) Hold the CTRL button , and use the pen tool and draw a reverse S shape.

7.) Select the path again, and click the pen tool, hold the CTRL button again , click the topmost point and draw the curve below. Follow the image guidelines below.

8.) Dont worry if the curves are not perfect, luckily we can edit them by point. Each curve has handle bars that we can adjust. Use the sub selection tool to delete the bottom point.

9.) Click the point to the lower right and adjust the handle bars , try to make the curves as smooth as possible. You can also check the other points and adjust them.

10.) Remove the stroke color and replace it with a fill color, lets choose white.

11.) Now we must put the letter F inside the flame, use the same turnpike font and type in the letter F , change the font size to 96 and the font color to black.

12.) Since we will be integrating the text to the symbol later on, we must convert the text to paths. Select the text, then right click > Convert to Paths.

13.) Select the text again and right click, ungroup. We must make sure the excess parts of the letter F wont overlap on the symbol , since we might use the simple symbol on different backgrounds.

Right click on the flame symbol and click Duplicate , Select both the flame symbol and the letter and click Modify > Combine Paths > Intersect.

13.) The intersected F will look white, so change the color to black.

14.) Select both the letter F and the flame symbol , right click > Group.

15.) We must resize the grouped object, hold shift and use the Scale Tool. Scale it smaller or you can skip this part if you want =)

Now we have created a simple logo and text version that can be easily exported to ps or ai, or to be printed out. But since we want to make a fancy version , we must put some cool effects to it.

16.) We must now use the doughnut tool in the vector shapes panel to create a ring around the flame symbol. The doughnut symbol has a yellow point that can adjust the inner radius. Click on the point to adjust the ring thickness.

17.) Select the doughnut shape and right click > Ungroup. Select both the doughnut and flame symbol and click the allign horizontal center button, or you can manually center the flame symbol using the keyboard arrow buttons.

18.) Select the flame symbol and right click > Ungroup. Select the flame and change the Fill Color from white to Gradient > Radial.

19.) The secret to making an effective radial gradient is to use a lighter color on the far left side, and a darker one on the far right.

In the image, you will notice I use a #FFFFCC color or a light yellow color on the left, a #FFFF00 or yellow color on the middle, and a #FF9900 or orange color in the far right. Gradients usually require 2 or more colors but I want to add something extra in the middle to add a more dramatic effect.

20.) Select the flame symbol , adjust the direction and length of the radial gradient.

22.) Now we will make the flame glossy. Select the flame, and right click Edit > Clone. We will now have a clone radial gradient.

23.) Use the Ellipse tool to draw an oblong shape. Take note that this shape will be the glossy part of the flame , adjust it if necessary.

24.) Select both the oblong shape and clone radial gradient and click Modify > Combine Paths > Intersect.

25.) Select on the radial gradient and adjust the direction of the gradient if you wish. You will notice the letter F is hidden behind the gloss effect, simply click it and use the bring to font button or just arrange it in the layers panel.

26.) Now that the flame looks shiny, we must now focus on the doughnut ring and make it metallic. It might look like difficult but its very easy. Select the ring and change the color to Gradient > Linear.

27.) The key to creating an effective metallic look is to use the sandwich effect. Imagine a sandwich, two slices of bread, one on top , the mayonnaise in the middle, and the other slice of bread at the bottom. The same principle can be applied in using gradients.

A white color on top, dark gray on the middle, white at the bottom, and so forth repeating the process. To add colors, just simply click on the gradient on the gradient panel, take note of the red circle in the image.

28.) We must use the same technique we used on the flame symbol, select the ring and click Clone.

29.) Draw an oblong shape around the ring , you can use a circle if you like .

30.) Select the oblong shape and the clone ring and click Modify > Combine Paths > Intersect.

31.) Click on the intersected part, and try to adjust the gradient or play with the gradient handlers and see what looks best.

32.) Use the Ellipse tool to create a simple circle with a radial gradient, with a darkgray and black color, this will serves as the background for the flame symbol. Again , we use the same principle for radial gradients, light color on the left, dark color on the right.

Select the circle and click the Send to Back tool or simple put it in the bottom layer in the layer panel.

33.) Now that we are done with the logo mark or symbol. Let’s head back to the logo text again.

Click on the text fire, and change the color to a linear gradient. If you notice on the flame, the light yellow color is on top, and the orange color is on the bottom, do thesame for the fire text. Use the gradient handlers to adjust if necessary.

34.) For the word ” zone ” , we use the same process above except we use the sandwitch technique. With a white , black white combo and so on. Adjust the gradient if you wish.

35.) Select all objects in the logo graphic and group them. Again use the scale tool, hold shift and reduce the size of the logo graphic. Arrange the logo to the left of the text.

36.) At this point, the logo looks finished, we can also add a rectangle with a radial gradient to top it off. We can apply this technique if we want the logo to shine in web headers, etc.