Page 37
7.6 Photos Tab
The Photos and Slideshow tabs contain a variety of editing options to help you present
your pictures the way you want. Everything from custom thumbnail sizes, collages,
freestyle slideshows to drop shadows, multiple line captions, inset captions and much,
much more. The Photos tab contains the editing options for your thumbnails and the
Slideshow tab (covered on next page) contains the options for the full size version of
your photos. The photo editing tools let you take full control of your thumbnail album
presentation, maximizing flexibility and optimizing quality.
Although there are a multitude of tools and options to choose from, they are all very
easy to use and produce stylish results. It's worthwhile to go through each option so
that you are aware of the leverage you have in achieving your intended goal. This
page covers each photo feature step by step, in the same order that each feature
appears on the interface. Click the Photos tab to reveal the editing options; then follow
the instructions outlined below to set up your albums and add some interesting effects.
───────────────────────────────────────
Photo Thumbnail Properties
Select the Properties button to begin editing the thumbnail properties of your albums.
To stay organized, use these tools from left to right as they appear on the interface.
The first option is a pop up list containing 3 main positioning options that "set the
stage" for the other available options on the properties interface. Therefore, choose
the positioning type first, before worrying about any of the other options. To begin, click
on the pop up button to view the three positioning options: Absolute position to place
the thumbnail album anywhere on the page; After Text position to have the album
always position itself automatically after the text content box; or FreeStyle position to
break the album apart and move the individual photos around at free will and resize
them independently.
Get Acquainted by Starting with Absolute Positioning
The Absolute position lets you place your album wherever you would like, including
overlapping other elements. This means your album will stay where you place it
regardless of the placement of other elements. The text will wrap around or adjust to
the placement of your album, but everything else will remain in its current position on
the page. As more photos are added to the album, any content that falls after the
album, including the footer, will automatically adjust to accommodate the increased
height of the album.
Select Absolute from the pop up list to reveal the available editing options. Now you
can begin editing the attributes for both your thumbnails and the album box that
surrounds them.
Position and Number of Photos to Display in Thumbnail Album
1. Position: Go to the Position and Size options just below the pop up menu. Either
use the spinbox controls to place your album in the desired position on the page or use
your mouse to grab it in the viewer window and drag it to the desired position. You can
place the album above, below, or to the side of your text content. Don't spend too
much time with the perfect placement right now, as you may have to come back to this
for final tweaking after setting some of the other thumbnail options.
2. Columns and Rows: Select the number of Columns and Rows you would like to
display in your album. To display all of the photos in your album, set the Rows value to
'0' - this will make the number of rows unlimited and saves you the trouble of
determining how many rows you will need to display all of the photos (especially helpful
for very large albums). To display a limited number of photos in the thumbnail view,
use the spin box control to increase or decrease the desired value for Rows. For
example, if your Columns value is set to '3' and Rows set to '4', the thumbnail album
will only display the first 12 photos in your album. If your columns value is set to '3' and
Rows set to '0' the thumbnail album will automatically display as many rows that are
needed to display all of your photos. Regardless of the number of thumbnails you
choose to display, all photos will be displayed in the slideshow view.
Thumbnail Size and Spacing
Go to the next section on the Properties interface, labeled Thumbnail Size & Spacing.
This section lets you set the size for your thumbnails and adjust the amount of space
between the columns and rows in the album.
Thumbnail Size: Click the Change button to reveal the sizing options for your
thumbnails. A panel will slide out from the top of the Layout window. This panel allows
you to set the exact size for your thumbnails and select from 3 aspect ratio options. To
change the size of your thumbnails, follow these steps:
1. In the Width and Height text fields, enter the desired size for your thumbnails (you
can specify any size you would like). For added convenience, a list of common sizes is
shown at the right side of the panel. Keep the panel open for the next step.
2. Choose from the three Sizing Options to set the aspect ratio for your thumbnails:
• Thumbnails are the same size: this option will size all of your thumbnails to the size
specified in the width and height boxes, but will disregard the aspect ratio of each
picture. If using a frame around the thumbnails, the frames will also size to the
specified width and height values.
• Same aspect as picture, this is the maximum size: this option will display your
thumbnails at their different aspect ratios while remaining within the constraint or
size that you have specified for the width and height. If using frames around the
thumbnails, the frames will take on the same size and aspect of the picture that it
surrounds.
• Same aspect as picture, thumbnail is centered: this option will render the same
results as the second option, but offers a different display for how the picture is
centered inside of a picture frame. If you aren't using a picture frame, you won't be
able to see the difference between this option and the second one above. This
option will display the pictures at their different aspect ratios, while centering them
inside of picture frames that are all the same size. The frames will be the size
specified for the width and height. The result is a stylish and elegant visual
presentation for your thumbnails.
3. When you have made your selection, click the OK button to close the sizing panel
and return to the Properties interface.
Space Between Columns and Rows: Below the Change button, you will see the
options to set the spacing between your columns and rows of thumbnails. Simply click
on the spin box controls to increase or decrease this space. You can see the changes
reflected in the viewer window as you adjust these values.
Thumbnail Captions
The next section on the Properties interface contains the editing options for the
Caption text that you input while in the Content window. You can edit the font, select
the position and spacing, including inset captions if desired, show only the first line of
the caption text, shut the captions off completely, or use floating tool tips for the
captions. These options will be batch applied to all captions on the page.
Caption Text Position: Select from the pop up menu whether to place the captions
above (Captions Above) or below (Captions Below) the thumbnail, or to shut them off
completely and make them invisible (No Captions). Or choose Floating Tool Tips
instead. The floating tool tips option will make the caption show up during a mouse
hover over the thumbnail. The slideshow has separate caption settings, giving you the
option to make them invisible for your thumbnail view, but make them appear for the
slideshow view (or vise versa).
Show First Line Only: The check box beneath the caption placement list - Show First
Line Only - pertains to albums where multi-line captions have been used. Check this
box to display only the first line of the caption in thumbnail view (the entire caption will
still show in slideshow view). To show all of the caption lines in thumbnail view, leave
this check box blank.
Edit the Font: Select the font type, size and color for your caption text. Again, there
are separate settings for the slideshow caption display, giving you the flexibility to use
different font settings for the two different views, if you choose to do so. You can also
set the alignment and underline, bold, and italicize the caption text independent of the
slideshow caption settings. Note: When in the Content window, you were able to apply
the later settings to specific caption text, without affecting the other caption text.
Whereas the Layout window lets you batch apply settings that you would like to have
the same for all of the photo captions. The settings you choose in the Layout window
will be batch applied to all caption text that does not have any specific edits already
applied to them from the content window. For example, if you choose to center align
the caption text for a specific photo while in the content window, batch applying a left or
right alignment in the Layout window, will get applied to all photos except the one with
the previously defined center alignment.
Caption Spacing: You can adjust the amount of space between the caption text and
the thumbnails. Use the spin box control to increase or decrease the value to the
desired spacing. You can also set the value to a negative number in order to inset the
captions on the thumbnails, allowing the caption text to sit inside of a photo frame or
on top of the thumbnail.
Thumbnail Click Options
The last section on the Properties interface, offers a list of alternative actions that can
occur when someone clicks on your thumbnails. Click one of the radio buttons to
activate the corresponding desired action from the list:
• Slideshow (different page): clicking the thumbnail will activate the slideshow on a
different page that is separate from the thumbnail album page.
• Slideshow (same page): the slideshow is displayed on the same page as the album
(and the rest of your elements); clicking the thumbnail will activate the slideshow
on the same page.
• Opens big picture: clicking the thumbnail will not activate a slideshow, but will rather
open the larger image of the thumbnail in a separate browser window.
• Opens embedded link: clicking the thumbnail will open the link which you specified
earlier in the Content window. Choosing to have the link open in the same browser
window or a new browser window must be specified from within the Content window.
• Does nothing: clicking the thumbnail will do absolutely nothing.
• Activates LightBox: clicking a thumbnail will activate a LightBox slideshow on a
different page.
───────────────────────────────────────
After Text Positioning
After Text positioning will always automatically position the photo album after the text
content on your page. This option will lock the position of the album in place preventing
it from being moved manually. Whenever the text content becomes larger or smaller in
height, or the text box is repositioned, the photo album will automatically adjust
downwards or upwards on the page. The album will be positioned immediately at the
end of your text. To create some space between the text and the album, do one of two
options: increase the bottom inside margin of your text content box, or increase the top
inside margin of your photo album (under the Borders interface).
The editing options available for After Text positioning are exactly the same as the
Absolute positioning options, outlined in the previous section above. Therefore, when
using After Text, just follow the same steps outlined above to edit the attributes of your
photo album.
Note: the Top value for the position of the top of the photo album is locked into place
and doesn't bear any meaning when using the After Text option. The top of the album
determines its position based on the bottom value of the text contents box. Even if you
try to adjust the top of the photo album or try to move it up, it will not go above or on
top of the text contents box. In contrast, the Top value for Absolute positioning refers
to the number of pixels the photo album is from the top of the page.
───────────────────────────────────────
FreeStyle Positioning
FreeStyle positioning offers some added flexibility and additional creative tools for
presenting your images. Freestyle will break the photo album apart, letting you select
individual thumbnails, moving and resizing each one independently and at free will.
You can place each thumbnail anywhere you want, allowing the text to wrap around
each one; use different sizes for individual thumbnails, overlap thumbnails, include
multiple freeform collages on the same page or select from one of the automatic
collage layouts. FreeStyle gives you total control over each thumbnail as independent
items so that you can size and place them as separate items simply by using your
mouse. This opens the door to easily and quickly create different types of collages as
well as other interesting layouts for your photos.
In the case where you want to quickly get a large photo album together, you may want
to just stick with a canned theme and/or an absolute positioned photo album. However,
the time may come where having total freedom over the individual pictures will be just
what you're looking for...and it doesn't take that much extra time to put it together. The
thumbnail editing options that differ between FreeStyle and Absolute are the Sizing,
Position, and Collage options. View the pictures below and note the differences in
thumbnail options:
The caption features and thumbnail click options remain the same for all three
positioning options. Therefore, this section will cover how to use the options that are
unique to FreeStyle thumbnails (Position and Size and FreeStyle Options) and will not
repeat the other options already outlined in the above sections.
Position and Size of FreeStyle Thumbnails
Select FreeStyle from the pop up list to reveal the freestyle editing options available for
your thumbnails. After selecting FreeStyle, ShutterBug will default to show '0' photos in
the viewer window. This in turn, will give the appearance that your photo album has
disappeared. Don't panic - as they say, "Things are not always as they appear to be."
Your photos are actually still there. Go to the section on the interface labeled Maximum
Floating Photos to display as shown in the picture below. Click the spin box control to
set the number of thumbnails to show on the page. For example, if you have 12 photos
in your album and you want to show all of them, set the value to 12; if you only want to
show 2 of the photos, set the value to 2, and so on. ShutterBug will display the photos
in the same order as they are in the Content window.
To resize and move freestyle pictures:
1. Go to the viewer window and select the first thumbnail with your mouse. Drag the
selected thumbnail to a new position on the page. Use your mouse to select the grab
handles and resize the thumbnail to any size you like. Do the same for each thumbnail
on your page, placing each one in a new position, overlapping them if desired, and
resizing each one to the desired size.
2. For finer control, use the spin box controls under the Position and Size section of
the Properties interface. Select the thumbnail with your mouse in the viewer window
and then adjust the controls to change the position and size of the thumbnail.
3. Autocrop: You can make the thumbnails fill the thumbnail box area by checking
the Auto crop to fit picture option. This option will crop either the top or sides
(depending on the photo's orientation) and scale the photo to a new size, filling the
thumbnail box area that surrounds it. The auto crop feature is just another way to
change the orientation of your floating thumbnails and is applied to all thumbnails on
the page. For example, if you have a portrait picture and have resized the box
surrounding it during freestyle mode, you can check off this button to make the picture
fill the entire area of the bounding box. The same is true for a landscape picture - if
you made the surrounding box tall and thin, you can check off this option to make the
picture fill the area of the box, making it appear as a portrait-oriented picture, but
losing some of the edges from the thumbnail. Note the changes in the pictures below.
To remove the auto crop, simply uncheck the option.
Create a Thumbnail Collage
There are 2 ways to create a thumbnail collage under the FreeStyle settings: use your
mouse to manually create a floating collage or use the automatic collage settings to
have ShutterBug automatically create the collage of choice.
Creating a Floating Collage:
1. Go to the option called Maximum Floating Photos to display. Use the spin box
control to increase the value and you will see your pictures appear one by one until
you have reached the desired number of thumbnails to display on your page (this
setting does not affect the slideshow, all photos in your album will be shown in the
slideshow).
2. Go to the viewer window and use your mouse to select a thumbnail. Drag it to
another position on your canvas. Use your mouse to grab the grab handles and resize
it to whatever size you would like. The position and size values will change accordingly
in the Position and Size fields on the Properties interface. Alternatively, you can use
the Position and Size spin box controls to adjust each photo instead of using your
mouse in the viewer window.
3. Use your mouse to select the next picture in the viewer window. Drag the thumbnail
over top of the first thumbnail in the viewer window so that it overlaps a certain portion.
Grab the grab handles and resize the selected thumbnail. Check the Auto crop to fit
picture option if you would like the photos to be cropped to the size of the grab handle
box.
4. Select the next picture in the viewer window and perform the same actions as you
did in Step 3, but with a different overlapping position and perhaps a different size.
Continue with the same steps for each thumbnail you would like to include in the
collage. When you are finished, you should have an interesting overlapping collage
that might be symmetrical or asymmetrical in nature, or uses staggered positioning or
any other layout you want - it's that flexible. You can change the collage at free will or
switch the thumbnail display back to an Absolute or After Text album at any time.
Creating an Automatic Collage:
The automatic collage settings also let you do some interesting things with your
thumbnail display. You can choose from various settings for the collage, and also
display additional photos floating separately on the page, as well as show or not show
the collage photos in your slideshow. Before you begin, set the Maximum Floating
Photos to display value to '0' (the Auto crop feature does not apply to automatic
collages). Then follow these seven easy steps:
1. Click the Collage Settings button under the FreeStyle Options section. A panel will
slide out from the top of the Layout window.
2. You can select from 3 main collage styles - A, B, or C. Click each one to get an idea
of the style's appearance. Input the number of photos you would like to include in the
collage. Then input the amount of space (in pixels) you would like to have between
each photo. Click the A, B, and C style options again to see what the layout will look
like. These settings warrant some experimentation to see the different results that you
can achieve from using different combinations. Try using different values for each
setting to see what it looks like. Including many photos can bear a completely different
result than using only a few. Keep the Collage Settings panel open for the next step.
3. Input the width and height for the collage box. These are the dimensions which the
entire collage will take on as a whole. These dimensions will also determine how wide
and high each photo will be inside of the collage box, automatically adjusting each one
proportionally to the size of the box and style of collage used.
4. To include these photos in your slideshow display, check off the box at the bottom
of the panel - Allow photos in collage to show up in Slideshow. If you leave this box
unchecked, the thumbnails contained in the automatic collage will not be clickable or
show up in your slideshow. Click the Done button to return to the Properties interface
in the main window.
5. To activate and view the collage in the layout viewer window, click the box labeled
Enable Collage. You will see your collage appear in the viewer window. This setting
allows you to turn the auto collage on and off at the drop of a hat. You may want to
change the photos to a floating collage at some point, in which case you can simply
shut the auto collage off and create the new floating collage. This gives you the option
to quickly change the collage back to your auto collage settings whenever you want to
without having to redo it all over again.
6. To reposition the collage, grab the collage with your mouse in the viewer window
and drag the collage to the desired position. You can only change the size of an
automatic collage from within the Collage Settings panel.
7. To edit or change the auto collage, click the Collage Settings button again to open
the settings panel. Select the new collage style and input the new values. When you
are finished, click the Done button to return to the Properties interface.
Adding Floating Thumbnails to Your Automatic Collage:
1. Below the Collage Settings button, you can add some additional thumbnails to float
them around the automatic collage display or float them anywhere on the page. Use
the Maximum Floating Photos to Display spin box control to increase or decrease the
number of floating photos on the page. Then use your mouse to select each one and
arrange them in the desired positions on the page. To not show any floating photos,
just leave the value set to '0'.
2. Check the Auto crop to fit picture option if you would like the floating photos to be
cropped to the size of the grab handle box (this option will not affect the photos in your
auto-collage; it applies to floating photos only).
───────────────────────────────────────
The Borders Interface: Add Picture Frames, Drop Shadows, and More
The Borders interface contains the same editing features as the other elements in the
Layout window, and behaves in much the same way. Click the Borders button to reveal
the options for adding borders, margins, and backgrounds to your thumbnails and
albums. You can add picture frames, drop shadows, album backgrounds and much
more. The interface is divided into two subsections: 1.Picture Frame and 2.Photo
Album. The Picture Frame section contains the options for your thumbnails, while the
Photo Album section contains the options for the surrounding album box that contains
the thumbnails. These settings will not affect your slideshow attributes as slideshow
options are independent from your album attributes.
1. Picture Frame Editing Options
The Picture Frame options get applied to all thumbnails on the page. Note: the options
under the Picture Frame section do not apply to automatic collages. However, the
Photo Album section will let you add a background color for the space between photos
in an automatic collage.
Adding a picture frame and/or drop shadow to your thumbnails:
• Select a border style, set the width for each side, and select a color for the borders,
to give your thumbnails a picture frame. You will see the changes appear in the
viewer window.
• Click the Drop Shadow check box to add a drop shadow to your thumbnails (the
drop shadow is not editable). The drop shadow is applied to the outside of the
picture frame/thumbnail border. Uncheck the box to remove the drop shadow.
• To add a drop shadow without any borders around the thumbnails, check the Drop
Shadow check box. Then reduce the border width settings to '0' to remove the
border.
Adding an inside margin for a matte appearance:
• Increase the inside margin settings to create a matte appearance for your
thumbnails. Then select the background color - this is the color that will appear for
your matte (inside margins).
Using background images:
• You can also use a background image or tiled pattern to create an interesting
picture frame or matte for the pictures. Select Image from the Background pop up
list. Drag and drop the desired image into the image well. Adjust the inside margins
to fit the dimensions of the image. You may need to go back to the Properties
section of the interface and change the size of the thumbnails to accommodate the
image properly.
• Next, try out an image using the repeating option. Drag and drop a graphic into
the image well and select whether to Repeat Image X (repeats horizontally),
Repeat Image Y (repeats vertically), or Repeat Image (repeats both horizontally
and vertically) from the pop up list. The example below shows a simple gradient
image that repeats both horizontally and vertically, filling the area of the inside
margins. We've also added a single black border at 1 pixel wide to top off the look.
2. Photo Album Editing Options:
The photo album is the surrounding box that encompasses all of your pictures. Unlike
the Photo Frame section, these settings apply to your photo albums only, including
auto-collage albums, but do not apply to floating thumbnails (floating thumbnails do not
have an album box). Click the Photo Album radio button to reveal the editing options.
You can edit the following album attributes:
• To give your photo album a border, select a border style, set the width for each
side, and select a color for the borders. You will see the changes appear in the
viewer window.
• Increase the inside margin settings to give the photo album a color inset inside
of the border. Then select the background color - this is the color that will fill the
entire album background including any spaces between the thumbnails.
• You can also use an image or tiled pattern for the background of the photo album
to create an interesting effect, as shown in the following pictures:
Now that you have tried out the photo album editing tools, move on to the Slideshow
tab and set the options for the larger slideshow view of your thumbnails.
───────────────────────────────────────
