Creating a Standard Web Banner with a Spotlight Effect

In this example, you will learn how to use:

Step 1
Create a new web banner (468x60) document with a transparent background.

Detailed Instructions
Start e-Picture or choose File > New to bring up the New Document creation window. In this window, select Web Banner (468x60) from the Template popup menu and Transparent ()from the Background choices. Then press the New button. This will create a blank web banner sized canvas for you using the standard web banner characteristics.

Your blank canvas is indicated by a gray and white checkboard pattern (the checkerboard pattern indicates transparency). Increase the width of your new banner window so that there is at least an inch (2.5cm) on each side if the canvas area. This "overscan" area will be used to create the effect of an object sweeping onto the canvas from outside the canvas area.

 

Step 2
Add a black background to your banner.

Detailed Instructions
Select the Rectangle tool () from the toolbox and, if necessary, change the stroke and the fill to black. To change the stroke or fill color, select the appropriate tab in the tool inspector and make sure the RGB sliders are all set to zero with an Alpha value of 255 (complete opacity). Use the Rectangle tool to draw a solid black rectangle that covers the entire canvas.

 

Step 3
Create a gradient filled circle for the spotlight.

Detailed Instructions
Select the Circle tool () and change the stroke to transparent and the fill to a colorful gradient. To change the stroke to transparent, select the Stroke tab and click on the transparent background button (). To create a gradient fill, select the Fill tab and click on the gradient button (). The Circle tool inspector will change to provide you with the various gradient options. First, expand the Gradient Catalog and double-click on Gradient 2. Next, select the circle pattern from the list of options located just below the Preview box.

Now, hold down the shift key and draw a circle in the overscan area to the left of your banner with a diameter approximately equal to the canvas height. This circle will be animated later to create a spotlight effect against the black background.

 

Step 4
Create a new layer.

Detailed Instructions
In order to create the effect of your spotlight illuminating the banner text, you will need one additional layer. To create a new layer, press the Options button in the Layers panel and choose New. Your new layer, Layer 2, by default sits on top of the existing layer, Layer 1. For now, hide Layer 1 by clicking on the eye icon () for Layer 1 in the Layers panel. Since you will be working in Layer 2 for the next couple of steps, make sure that Layer 2 is selected (highlighted) in the Layers panel.

Step 5
Cover this layer with a black background.

Detailed Instructions
Just as you did in Step 2, cover the entire canvas with a black rectangle. Briefly, this is done by selecting the Rectangle tool, verifying that the stroke and fill colors are set to black with an Alpha value of 255, and drawing a filled rectangle to cover the canvas. See Step 2 for more details if necessary.

Step 6
Use text as a mask.

Detailed Instructions
Select the Text tool () and click just left of the center of your canvas to insert text. Type "e-Picture" into the banner and press Enter. Because the text is black by default, some or all of the text may be obscured by the black background. As with layers, you can hide objects at any time to allow you to focus in on a particular part of your image. Do this now by clicking on the eye icon () for the rectangle object in the Objects panel.

Now that your text is revealed, use the Pointer tool () to click on the text and drag a resize handle to enlarge the text so that it occupies a greater portion of the banner space. You can center the text by dragging anywhere within the bounding box.

Next, make the rectangle visible again by clicking in the first column of the Object panel next to the Rectangle object. Both the rectangle and text are now visible again. In order to create a cut-out effect that will allow the text to be illuminated from behind by the animated spotlight, you need to use the text as a mask. To do this, select the text object in the Objects panel and choose Options > Composite Method > Erase. The Erase mask allows you to use any object to erase all underlying objects in a particular layer.

 

Step 7
Animate your spotlight.

Detailed Instructions
For a functional overview of the Animation panel, see the Animation Panel entry in the Glossary.

Before animating your spotlight, you need to make it visible and active again. To do this, click on the eye icon in the Layers panel for Layer 1 to make the spotlight visible, then click on Layer 1 to make it the active layer. Now, you can animate your spotlight by using the Animation panel.

By default, you start with only one frame (a static image), so first you need to change the Total frame count. Ten (10) is a reasonable starting point. When you press Enter, an additional 9 frames are created for you. Next, select the 10th frame in the Animation panel. The blue frame indicator will highlight frame 10 to indicate that is now the current frame. Now, using the Pointer tool, select your spotlight and drag it horizontally until it is just past the right hand edge of the canvas.

The Animation panel controls the time attribute for objects and layers. In effect, you have just programmed your spotlight to move from an initial position to the left of your canvas in frame one to a final position to the right of your canvas in frame 10. e-Picture will produce as smooth a movement possible in the interveneing frames. Press Play () in the Animation panel to view your animation up to this point.

 

Step 8
Save and Export your animation and generate the accompanying HTML file.

Detailed Instructions
e-Picture uses a special encoding format to preserve all of the object, layer and animation information. In order to save your animation for later editing, choose File > Save and choose a file name and destination directory when prompted.

In order to use your animation on the web, you need to export it as an animated GIF. To do this, choose File > Export > GIF Animated. The resultant Animated GIF export dialog provides you with numerous options which allow you to export a file that meets your particular needs. Check the options for "Generate HTML" and "Loop" and press the Save As... button. You are prompted to enter a name and a directory for your GIF. By checking the Generate HTML check box, a .html file with the same name as your GIF file is also created in this location.

Bonus Exercise

The banner you created is nice, but you could make it even better by applying many of the same steps as above to give it a more finished look. One idea for a more finished look is to have the text fade in after the spotlight has passed. Here are the steps to make this happen...the implementation is left to you!

  1. Add a third layer between the existing two.
  2. Add 10 frames to the animation, bringing the total to 20.
  3. Add a rectangle in frame 0 with a gradient fill that covers the entire canvas to the new layer. See Step 3 above for a refresher on how to work with gradients.
  4. Set the opacity of the new layer to 0 in the first frame to make the layer transparent
  5. Set the opacity of the new layer to 0 in the 10th frame to insert a key (change point) here.
  6. Set the opacity of the new layer to 100 in the 20th frame to make the layer visible.
  7. Run your animation!

The e-Picture version of spotlight is included in the spotlight example folder for your convenience.