Activity 6


Export as SVGScalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.

SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handheld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

SVG allows users to export multiple pages, support for patterns, masks, and links via slices and hotspots.

Review this video tutorial on using the Pen tool before moving on!

Vector Unit, activity 5 part 1 from Digital Voices on Vimeo.


  • Logoname – Sisler Game Design
  • Preferred Colours for the logo text or ” type ” – red, white, silver
  • Preferred Font Style
  • Preferred Background colour – black
  • Preferred Graphic Symbol or “mark ” – Circle Type with a Letter S on a flame symbol
  • Slogan or tagline to go along with the logo –  “get your game on”


Part One: Practice using the Pen Tool

  • Open Fireworks and duplicate the Pen Tool cheats.  Create each of the designs below on one canvas.
  • Create a flame with a circular bottom and two flames


HINT:  “CMD” is a Mac key, the PC key is “CTRL”


  • Save as: firstlastname_activity6_pentool.png in your Unit 1/Activity 6 folder

Vector Unit, Game Design Vector logo part 1 from Digital Voices on Vimeo.

Part Two:  

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 bold logo that can attract its target audience.

Part 2:  Creating the Document

  • Create a new document:
    • Canvas Size: 700 X 700 ,
    • Resolution: 150,
    • Choose black for the canvas colour


  • 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 . Then install the font in your pc or mac.  Or use pre-installed fonts.
  • Use the (T) Text Tool to type the word “Sisler”. For the font colour should vary from word to word.
  • Next, click the font tool again to type the words Web Design. Place it to the right of Sisler, and take note of the spaces, use the keyboard arrows to make sure they are aligned well.

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

Vector Unit, Game Design Vector logo part 2 from Digital Voices on Vimeo.

Part 2:  Creating the flame symbol

  • 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 colour (unless our canvas is a different colour).  Hold the CTRL button, and use the pen tool and draw a reverse S shape.

  • Position the S to the left of the flame.

  •  Select the path again, and click the pen tool, hold the CTRL button again , click the topmost point and draw the curve below.
  • 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. The following tutorial should help.

Vector Unit, Game Design Vector logo part 3 from Digital Voices on Vimeo.

  • 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.
  • Remove the stroke colour and replace it with a fill colour, lets choose white.

  • Now we must put the letter S inside the flame, use the same turnpike font and type in the letter S, change the font size to 96 and the font colour to black (or your background colour).
  • 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.
  • Select the text again  and right click, ungroup. We must make sure the excess parts of the letter S will not 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.

  • The intersected S will look white, so change the colour to black (or your background colour).
  • Select both the letter  and the flame symbol , right click > Group.

  • Resize the grouped object, hold shift and use the Scale Tool.   Shrink the scale size.
  • 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.

Vector Unit, Game Design Vector logo part 4 from Digital Voices on Vimeo.


  • 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.
  • Select the flame symbol and right click > Ungroup. Select the flame and change the Fill colour from white to Gradient > Radial.
  • The secret to making an effective radial gradient is to use a lighter colour on the far left side, and a darker one on the far right.

  • In my logo I used #FFFFCC colour or a light yellow colour on the left, a #FFFF00 or yellow colour on the middle, and a #FF9900 or orange colour in the far right. Gradients usually require 2 or more colours but I want to add something extra in the middle to add a more dramatic effect.
  • Select the flame symbol , adjust the direction and length of the radial gradient.
  • To make the flame glossy, select the flame layer, and right click Edit > Clone. We will now have a clone radial gradient.
  • 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.
  • Select both the oblong shape and clone radial gradient and click Modify > Combine Paths > Intersect.  You will notice the letter S is hidden behind the gloss effect, simply click it and use the bring to font button or just arrange it in the layers panel.  Move the S  layer above the two flame layers.

Vector Unit, Game Design Vector logo part 5 from Digital Voices on Vimeo.

  • Time to add a metallic doughnut ring to your logo. It might look like difficult but its very easy. Select the ring and change the colour to Gradient > Linear.
  • The key to creating an effective metallic look is to use the sandwich effect. A white colour on top, dark gray on the middle, white at the bottom, and so forth repeating the process. To add colours, just simply click on the gradient on the gradient panel, take note of the red circle in the image.
  • We must use the same technique we used on the flame symbol, select the ring and click Clone.
  • Draw an oblong shape around the ring, you can use a circle if you like .  Select the oblong shape and the clone ring and click Modify > Combine Paths > Intersect.

  • Click on the intersected part, and try to adjust the gradient or play with the gradient handlers and see what looks best.
  • Use the Ellipse tool to create a simple circle with a radial gradient, with a darkgray and black colour, this will serves as the background for the flame symbol. Again , we use the same principle for radial gradients, light colour on the left, dark colour 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.  Now that we are done with the logo mark or symbol. Let’s head back to the logo text again.
  • Click on the text Sisler,  and change the colour to a linear gradient. If you notice on the flame, the light yellow colour is on top, and the orange colour is on the bottom, do thesame for the fire text. Use the gradient handlers to adjust if necessary.

Vector Unit, Game Design Vector logo part 6 from Digital Voices on Vimeo.

  • For the words “GameDesign” , 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.


  • Save as:  Fisrtlastname_activity6_squared.png in your activity 6 folder
  • 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.
  • Use the crop tool and make a banner.
  • At this point, the logo looks finished, we can also add a rectangle with a radial gradient to top it off.
  • Save as:  Fisrtlastname_activity6_banner.png in your activity 6 folder,
  • Create an Activity 6 sub-page under this unit Parent Page on your blogsite.  Upload and insert both files.

Part Three:

  • Now repeat the above steps to create a new metallic logo for your :
    • Your self-directed project name
  • This time pick a new colour scheme and shapes,
  • Be sure to meet  the following criteria:
    • at least 2 metallic gradients used,
    • Pen tool used to create center shape,
    • Outside logo shape
    • Text uses two gradients,
    • Background has a gradient,
  • Save as:  Fisrtlastname_activity6B_squared.png in your activity 6 folder
  • 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.
  • Use the crop tool and make a banner.
  • Save as:  Fisrtlastname_activity6B_banner.png in your activity 6 folder,
  • Upload and insert both files to your Activity 6 sub-page.