How to Create a Shield

In this tutorial we will investigate 2 options of creating a shield. First, in one piece as a whole object, with the risk of being not symmetrical. Second option, we draw only half the shield and get the second half with a mirror command. A triangle will serve as the basic shape to design the shield.

As a design principle, it is preferable to opt for a larger than needed size because we can add more details to it and later the reduction will of better quality.

The completed tutorial preview:

Figure 1: Completed Tutorial

Part 1

First option is to build a shield as a whole object.

Smart Polygon

Select the Smart Polygon Auto shape and drag it onto your work space with stroke width: 2px and color:#AEAEAE.

Figure 2: Basic shape

Auto Shape Properties

After selecting Window > Auto Shape Properties follow the setting below:

Figure 3: Auto Shape Properties Setting

Adding vector points

After we get the triangle we insert new points to the path and add control handles with the Pen Tool: a top middle point, left and right midpoints, see figure 4. To master the Pen Tool and bezier curves read: Pen Tool and Curves.

We can tweak the control handles either by hands or by using the arrow keys for more precision. Select Subselection tool , then click on the top middle point to select it. Now hold down Shift and press the Up Arrow Key a couple of times, and you'll see the point moving up. Next do the same with the left and right midpoints to make them move about. You can try the same without holding down Shift while hitting the Arrow Key.

Figure 4: Adding vector points

Final Result

After more tweaking you can get types 1 and 2.

Cutting Half-shields

The risk to build the whole object in one piece is that it doesn't look like symmetrical. To overcome this problem we, first, get a half-shield, duplicate it and then make the two half-shields into one.

This is certainly the most difficult part of the tutorial but I recommend to use the shields we have already created in Steps 3 and 4 and to 'cut' a half-shield with either the Knife tool (1) or by punching (2).

For the Knife Tool, select first the Shield on your worspace, go to the Tools panel and select the Knife tool . As for the punching, you draw a rectangle on top of the shield, select Modify > Combine Paths > Punch.

Figure 6: Half-Shields

Duplicate a half-shield

In order to duplicate a mirror-image clone of the half-shield you have 2 options. You may use the Mirror Point command from the Path panel Window > Others > Path but you will get the 2 halves on top of each other.

The second option is more what we are looking for. Use the Mirror command from Kleanthis Economou you may download at Mirror .

Clone the half-shield

Run the commmand Commands > Mirror > select R

Now we've got two points on top of each other selected, so we need to join them.

Figure 7: Duplicating Half-Shield with Mirror command

Join the half-shields

2 options Join or Union:

The Join command Modify > Combine Paths > Join

The Merge command Modify > Combine Paths > Union .

Next, fill the shield with a radial gradient from #BFBFBF to #F1F1F1.

Figure 8: Radial Gradient

Offset 1

We will use the Offset Points tool 3 times in this tutorial although it is not perfect yet. While your path is selected, go to Window > Others > Path. The Offset Point tool will enable us to get smaller shields while keeping roughly the same shape.

The Offset Points tool is available in Fireworks CS4 only

Select the shield and clone it right-click > Edit > Clone. Select the Offset Points tool and enter an offset value of 12.

Figure 9: Offset shield

Radial Gradient

This radial gradient is going in opposite direction to create a 3D effect which looks like light is coming from the top left and creating a highlight and shadow. It has also created the appearance of shiny metal.

Figure 10: Radial Gradient

Offset 2

Select the last path and clone it right-click > Edit > Clone. Select the Offset Points tool and enter an offset value of 12. This time, fill it with a new Radial Gradient using a nice orange with the lighter part in the top left as shown from #EFA76B to #E06739.

Figure 11: Orange Radial Gradient

Drop Shadows

Apply 2 drop shadows: right and left of the orange shield.

Figure 12: Drop Shadows

Inner Glow

We apply an Inner Glow, lighten the background to #272524 and apply a drop shadow to the shield after grouping it.

Now draw an ellipse with the Ellipse Tool (U). Then fill it with a radial gradient from #F6E48F to #E06739, as shown below.

Figure 14:

Rotate

To rotate the ellipse go to: Modify > Transform > Numeric Transform > Rotate > -30.

Figure 15:

Masking

Duplicate the shield's orange shape and deselect everything. The shield shape has lost all of its fills, effects and whatnot, and is now strictly a mask for the ellipse. The shield will be our mask and should be place on top of the ellipse.

Figure 16:

Select the 2 objects and Modify > Mask > Group As Mask

Figure 19: Masking end result

Offset 3

Starbust

Final Image

Finally, I set the starbust opacity to 45, added a giant S in a darkish red color and set it to Multiply at 20%. Then I wrote the word Fireworks over the top and we're finished!