Page 42
8.2 Add Xtra Image Boxes and Layered Images
This Xtra lets you add an unlimited amount of xtra images that can be layered in the
background, middle, or foreground of the page, even overlapping other objects if
desired. The layering option differentiates this xtra from the regular background
images that you can place in an element's background box. You can also choose to
have the text content on your page wrap around the xtra image(s) if needed.
When using images with transparent backgrounds, use either the PNG or GIF file
format. JPG does not support transparent backgrounds. When using images with solid
backgrounds, you can use JPG, PNG, or GIF. When you create and export an image
from your graphics program, be sure to always optimize the file size of the image for
the web. Using large [multiple] images on your website will significantly slow down the
loading speed of your web pages. The smaller the file size, the better, but do not
remove noticeable quality from the image - simply optimize it, which will reduce the file
size, while maintaining the quality.
Note: ImageWell is an excellent tool for optimizing images for the web. If you have
problems with your regular graphics program, try using ImageWell to compress the file
size and then drag and drop the image into ShutterBug.
And remember, if you want to keep the Xtra image boxes unique to your current
page only, add a template for the page you are working on. Otherwise the Xtra
image(s) will be added to all pages that use the same template.
───────────────────────────────────────
Adding Xtra Image Boxes
Click the Layout tab to open the Layout window. Then click the Xtras tab and follow
these steps to add Xtra image boxes:
1. Click the '+' symbol to add an Xtra box as shown in the picture below. The box will
appear in the xtra box list window as well as in the viewer window (default position in
the top left corner).
2. Double-click the "Xtra Box" text field to rename the box to a name you can identify
easily. Do you want the xtra image to appear in your main thumbnail view only, in the
slideshow view only, or in both views? From the Xtra Box list, check the appropriate
check boxes to have the xtra image appear in the desired views. By default, "Main
Page" will already be selected. Uncheck the check boxes to make the xtra image
invisible for one, or both of the views.
3. Select Image/Graphic from the pop up list of Xtra types, as shown in the picture
below. An image well will appear at the right side of the interface. Locate the image on
your computer and drag and drop it into the image well. You will see the image appear
inside the xtra image box in the viewer window.
4. Grab the image box from within the viewer window and drag it to better position that
will allow you to view the image box more clearly.
5. The image will automatically repeat inside of the image box. Use the Position and
Size spin box controls to size the image box to the size of your image; or use your
mouse to grab the image box grab handles from within the viewer window and adjust
the size accordingly.
───────────────────────────────────────
Layering the Image
Now that you've added your image, you must choose what to do with it. Is this image
going to be overlapping, or laying on top or below, another object on the page? Or is it
going to be on its own and not overlapping anything else on the page? Follow these
steps to layer the image to your liking:
1. Select the image box to be layered. Grab the image box from within the viewer
window, and move it to the desired position on the page.
2. Then from the Location pop up list, shown in the pictures below, choose where you
want the Xtra Image to appear relative to the other objects on the page: Background,
Middle or Foreground.
3. If you are unsure of which position you want, you can try out each location and see
the position change in the viewer window. The three different locations are illustrated in
the following pictures:
───────────────────────────────────────
Text Wrapping and Borders
If you have placed your image near, or on top of your
text content, you can choose to have the text wrap
around the xtra image. Check the Wraps Text Contents
check box if you want the text content on your page to
wrap around the Xtra Image; if you don't want the text
to wrap around the image, just leave this check box
blank.
You can also add an outside border to the xtra image
from within the Borders interface. Like the other
elements and xtra boxes, simply select the border style,
and set the color and width value for each side of the border.
Note: Inside margins have no effect on an xtra image box.
───────────────────────────────────────
Examples Using Xtra Image Boxes
You can create some interesting and practical effects for an individual page or for the
overall design of your site using xtra images. View the illustrations below to get an idea
of different ways in which xtra images can be used to achieve different results:
───────────────────────────────────────
