The Particle Effects component

To use the Particle Effects component:

1. Open the Componentspanel, then the Graphics & Effectsfolder.

2. Double-click the Particle Effectscomponent, or drag it to the stage.

3. Double-click the component on the stage, or click the Settings...button in the Propertiespanel. The Particle Effects dialog opens.

4. Drag the images you want to include as layers from the Librarypanel into the Layerspanel. To add other images, click the Add imagesbutton at the bottom of the panel.

5. Select the effect you want from the Presetpanel at the bottom, then either drag it to the stage or click the addbutton that appears over it. A snapshot of the effect appears on the stage with the particle origin area (where the particles are generated) outlined. You can add multiple effects as different layers.

6. Customize the effect by adjusting its properties . You can save the new set of properties as a custom preset .

Reordering layers

The ordering of layers determines how they stack if they overlap. To change the stacking order of layers:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings...button in the Propertiespanel.
2. In the Layerspanel, drag a layer to its new position.

Repositioning layers

You can move an image or the particle origin area for an effect, as long as it stays within the component's boundaries. To move a layer:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings...button in the Propertiespanel.
2. Select the layer that you want to move. A bounding box appears around the image or the effect's particle origin area. You can also select multiple layers to move them together.
3. Use one of the following methods:
   • On the stage:
     • Drag the layer to a new location.
     • Use the arrow keys to move the layer by one pixel at a time. Hold the Shiftkey while pressing an arrow key to move the layer by 10 pixels in that direction.
   • In the Properties panel:
     • For images, edit the top and left position properties.
     • For effects, expand the Advancedproperties and edit the Emit Xand Emit Yvalues. Set the Keep in lockstepoption to move the particle origin area without resizing it.

Resizing layers

You can resize an image or the particle origin area for an effect, as long as it isn't wider or taller than the component. For effects, you can resize the particle origin area. To resize a layer:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings...button in the Propertiespanel.
2. Select the layer you want to resize. A bounding box appears around the image or the effect's particle origin area. You can also select multiple layers.
3. Use one of the following methods:
   • On the stage:Drag the control handles at the sides and corners of the bounding box.
   • In the Properties panel:
     • For images, edit the width and height properties.
     • For effects, expand the Advancedproperties and edit the Emit Xand Emit Yvalues. Make sure the Keep in lockstepoption is disabled.

Removing layers

To delete a layer from the component:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings...button in the Propertiespanel.
2. In the Layerspanel, select the layer or layers you want to delete.
3. Press the Deletekey, or click the Delete layersbutton at the bottom of the panel.

Hiding and showing layers

You can hide a layer to make it easier to work with other layers. Hidden layers won't show up in the preview or published files. To hide or show a layer:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings...button in the Propertiespanel.
2. Click the box under the Hide all layersicon for the layer that you want to hide or show.

Properties

Along with properties for the entire component, you can configure properties for each effect included within the component.

Particle Effects component properties

Properties for each effect

You can access properties specific to each effect in the Particle Effects dialog. Open the dialog by double-clicking the Particle Effects component on the stage or by clicking Settings...in the Properties panel, then select the effect to see its properties.

Presets

Each preset has a default set of properties, which you can restore by right-clicking the Presetdropdown and selecting Reset. If you select a different preset, the below properties will reset to the defaults for the new preset.

Google Web Designer comes with several built-in presets. You can also save your own presets, then export and import them for use on other computers (see Custom presets ).

Custom presets

You can re-use a set of properties by saving it as a custom preset.

Save a new custom preset

1. Adjust the properties of an existing preset.
2. In the  Preset panel at the bottom, click the  Save as presetbutton. You can also right-click the effect on the stage or right-click the  Preset dropdown in the  Properties panel.
3. Enter a unique name for the new preset, then press Enter or click OK.

The preset is now available in the dropdown list on the  Properties panel and in the  Preset panel, indicated with a custom preset icon.

Rename a custom preset

1. Right-click the preset in the  Preset panel and select Rename....
2. Enter the new name, then press Enter or click  OK.

Delete a custom preset

1. Right-click the preset in the  Preset panel and select  Delete.
2. Confirm the deletion by clicking  OK.

Export a custom preset

Export custom presets in order to share them with other Google Web Designer users.

1. Right-click the preset in the  Preset panel and select  Export....
2. Select the destination folder for the export file.

The exported .zip file has the same name as the preset.

Import a custom preset

If you have the export file for a custom preset, you can import it into your instance of Google Web Designer.

1. Copy the exported .zip file to the computer where you want to import the preset.
2. On that computer, open the Particle Effects dialog in Google Web Designer.
3. In the  Preset panel at the bottom, click the  Import presetbutton.
4. Select the .zip file for the exported custom preset.

The imported preset appears in the dropdown list in the  Properties panel and in the  Preset panel.

Events and actions

Learn how to configure events .

Preview

While you're working in the Particle Effects dialog, the Designtab shows a static snapshot of how the component may appear.

Switch to the Previewtab to watch the animation with your current settings. You can modify properties while the preview is playing to see the changes take effect immediately.

You can also preview your document in your preferred browser by clicking Saveat the bottom of the dialog, then clicking the Previewbutton.