Snagit Learning Center

Home / Learning Center /

Snagit 9 Tutorial:

Create an Image Gallery Webpage

Use the Create a Web Page feature to create an HTML thumbnail sheet that links to full sized images. This is a quick way to display digital photographs, screen captures, artwork, and other graphics.

There are many options for publishing an Image Gallery Web page to the Internet. A good place to look for help is the www.HTMLGoodies.com main site. Additionally, here is a link to an informative article entitled Where do I put my Website?

Overall, there are seven different types or themes of Web pages to choose from. Each theme is fully customizable and allows you to change the background, font colors, size of the thumbnails, transition effects, and much more.

The Gallery Web Page creation process uses the Create Web Page Wizard.

Open the Create Web Page Wizard

To open the Gallery Web Page Wizard:
In Editor > Library view > Right-click thumbnail > Create Web Page.
The Create Web Page Wizard screen appears. Follow the instructions on each dialog box.

Web Page Themes and Options Overview

The following is an overview of the different themes, a thumbnail preview of the finished page, and a description of what features each theme contains. Each of these examples uses the same images, only the theme has changed.

Theme	Preview of Web Page	Design and Customization
Cool Shades		Design: Vertical scroll. Thumbnail of each image with file name and size. Click a link to view the full size image within a separate browser window. Linked page numbering system for accessing the next page of images: Example: Go to Page 1, 2, 3. Customize: Shaded, color background color for each image. Color or texture background for the main page. Thumbnail size and number per page. Font colors. Link colors.
Double Vision		Design: View of two thumbnail images side-by-side in a horizontal frame at the top of the page. Click a thumbnail to view the full size image within a separate browser window. Use the browser’s Back button to return to the gallery page. Previous and Next link system for accessing the next or previous page of images: Example: Prev\|Next. Customize: Add a transition that plays when the gallery is opened or when moving back to the gallery after an image is viewed in a separate browser window. Internet Explorer required for transitions. Background color behind the image display. Color or texture background for the main page. Thumbnail size. Font colors.
List		Design: Vertical scroll. A thumbnail of each image with file name and size. Click a thumbnail to view the full size image within a separate browser window. Use the browser’s Back button to return to the gallery page. Previous and Next link system for accessing the next or previous page of images: Example: Prev\|Next. Customize: Add a transition that plays when the gallery is opened or when moving back to the gallery after an image is viewed in a separate browser window. Internet Explorer required for transitions. Thumbnail size and number per page. Color or texture of background for the thumbnail table. Color or texture background for the main page Font colors. Link colors.
Navigator		Design: View of thumbnail images side-by-side in a horizontal viewer at the top of the page. Click a thumbnail to view the full size image below the viewer. Arrow link system for accessing the next or previous page of images: Example: >> or <<. Customize: Thumbnail size and number per page. Color or texture of background for the thumbnail viewer. Color or texture background for the main page. Font colors. Link colors.
Slide Show		Design: Automated slide show of all images in the gallery. Customize: Add a transition that plays when the gallery is opened or when moving back to the gallery after an image is viewed in a separate browser window. Internet Explorer required for transitions. Frame width and height. Duration of pause between each image. Color or texture background for the main page.
Stripes		Design: View of thumbnail images side-by-side in a horizontal frame with or without colored rows. Click a thumbnail to view the full size image within a separate browser window. Use the browser’s Back button to return to the gallery page. Previous and Next link system for accessing the next or previous page of images: Example: Prev\|Next. Customize: Thumbnail size. Number of thumbnails per row. Number of rows. Background color for every other row. Border color around each thumbnail. Add a transition that plays when the gallery is opened or when moving back to the gallery after an image is viewed in a separate browser window. Internet Explorer required for transitions.
Thumbnails		Design: View of thumbnail images side-by-side in a horizontal frame. Click a thumbnail to view the full size image within a separate browser window. Use the browser’s Back button to return to the gallery page. Previous and Next link system for accessing the next or previous page of images: Example: Prev\|Next. Customize: Thumbnail size. Number of thumbnails per row. Number of rows and columns. Border color around each thumbnail. Color of background for the thumbnail frame. Color or texture background for the main page. Font colors. Link colors.