Procedure 13.1. Drop Shadow

We will construct a compound filter that creates a drop shadow when applied to a text object.

1. Add Text

   Create a text object. In the example, I've used the text “Drop Shadow”. Give the text a color. I've used dark red.

2. Add Gaussian Blur

   Select the text. Use the Fill and Stroke dialog to add a Gaussian Blur by dragging the Blur slider to a non-zero value. Doing so automatically creates a Gaussian Blur filter and attaches it to the text.

   The blurred text has the attributes of the original text, in this case, the dark red color. As the blurred text will become the shadow, we'll change the color to black in a moment.

   We used the Fill and Stroke dialog to rapidly create a filter object for the text. Further work will need to be done with the Filter Effects dialog. Open the dialog. Select the new filter (with a name like “filter3362”) by clicking on it. You should see something like:

   

   Filter Effects dialog after adding Gaussian Blur filter.

   Let's first give our filter a new name: “MyDropShadow”. Clicking on the filter name when selected allows editing the name.

   Our filter consists at the moment of a single Gaussian Blur, as shown under the Effect column. The line connecting a triangle to the right of “Gaussian Blur” label to a square dot in the Source Graphics column shows that the input for the Gaussian Blur filter is the original source object (in this case the text). The default height of the dialog is too short to show the complete column labels. The dialog can be stretched so that the labels are completely visible.

   To get a black shadow, we'll use Source Alpha for the input to the Gaussian Blur primitive. To make the link, left-drag the mouse from the triangle next to the Gaussian Blur label to the Source Alpha column. The Filter Effects dialog should look like:

   

   Filter Effects dialog after changing the input of the Gaussian Blur filter to Source Alpha.

   The amount of blurring can be changed by using the Standard Deviation sliders at the bottom of Filter Effects dialog (when the Gaussian Blur primitive is selected). There are two sliders: the top for x and the bottom for y. By default, the sliders are linked together so the blur is the same in both directions. Note that the blur amount (Standard Deviations) is defined in terms of pixels in this dialog while it is defined in terms of a percentage of 1/8 of the perimeter of the bounding box in the Fill and Stroke dialog.

3. Add Offset

   The shadow should be shifted relative to the text. This can be achieved through the use of the Offset primitive. To add such the primitive, select it from the drop-down menu next to the Add Effect: button and then click on the button to make the addition. Note the bent line connecting the triangle to the right of the “Offset” entry under the Effect column to the “Gaussian Blur” entry above. This (the default) indicates that the Offset primitive is using the output of the Gaussian Blur primitive as its input. The amount of the offset can be changed by the Delta X and Delta Y sliders at the bottom of the Filter Effects dialog when the Offset label is highlighted. Set the offsets both to 3 (pixels). You should see the shadow text shift as the sliders are dragged.

   

   Filter Effects dialog after adding the Offset primitive.

4. Add Merge

   Now that we have the shadow, we need to add back in the original text. This can be done with the Merge primitive which merges graphics from multiple inputs. Select the Merge primitive in the drop-down menu list of Filter primitives. Click on the Add Effect: button to add the primitive.

   When first created, there are no inputs defined. Left-dragging the mouse from the triangle at the right of the “Merge” label to the “Offset” label above, to create a link from the output of the Offset primitive to the input of the Merge primitive.

   When an input link to a Merge primitive is made, a new, empty input node (triangle) is created. To add back in the original text, unmodified, left-drag the mouse from the empty triangle to the “Source Graphic” column.

   

   The completed drop-shadow filter.

   The drop shadow is now complete. You can modify the amount of blur or the amount of offset by selecting the appropriate Filter primitive under the Effects: column and using the sliders at the bottom of the Filter Effects dialog.