Creating Rollover Effects in Xara Designer

Rollover effects are often seen on websites: when you roll your cursor over an item, it turns into another item or the same one, but with its properties modified. Follow these steps and create a rollover effect with Xara Designer.

Step 1: Getting Started

Create a rectangle in a blank document and adjust its shape, background and outline colors and other properties.

Step 2: Importing Your Images

Drag and drop the images from your file explorer. Adjust their size, position, angle of rotation and outline color. Arrange them so that they slightly overlap. Choose the Shadow tool and select all the photos, then click on the selection, drag your mouse a bit, and release it to create a shadow. Adjust the shadow's transparency and blur. Click the Photo tool and adjust the photos' properties, like saturation, lightness and blur.

Step 3: Creating New Layers

Copy the first picture to the Clipboard, then go to the Layer Gallery and click New. Name your new layer, then open the Edit menu and choose Paste in Place. Select the Photo tool again and click the Compare button. Repeat the same for all photos.

Step 4: Creating the Rollover Effect

From the Layer gallery, select the MouseOff layer, then select the first photo. In the Mouse-over tab of the Web properties dialog, select Show popup layer, choose the name of the layer you want to appear when rolling over the first photo, and click Apply. Then, selecting the other images, repeat.

Step 5: Enhancing the Effect

From the Layer gallery, select the layer you want to modify; make it visible and editable. To add text, select a layer, click the Text tool and add some text above or below the image. You can also resize it to enhance the effect.

Step 6: Converting to JPEG

To convert your images to JPEG, enable all layers to be visible and editable. From the Image tab of the Web properties dialog, select JPEG as a Web image type.