Web Galleries: Free Adobe Bridge Tutorial

This exercise is excerpted from past Adobe Bridge training materials and is compatible with InCopy updates through 2016. To learn current skills in Adobe Creative Cloud and graphic design, check out our graphic design classes in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this Adobe Bridge tutorial:

More using the Output workspace, Creating HTML galleries, Creating Flash galleries

Exercise Preview

bridge web gallery

Exercise Overview

Making a web gallery with Bridge is a snap and a nice way to share your work with others. The Output panel lets you assemble an online photo gallery with just a few mouse clicks.

Installing the Output Module

The Output module was included in earlier versions of Bridge but no longer comes pre-installed with Bridge CC. Luckily Adobe still offers it as a separate download. If you did the previous exercise you’ll already have it installed and can jump to the next section. Otherwise, here’s how to get it.

  1. Quit Bridge if it’s currently running.

  2. Go to tinyurl.com/bridge-omcc

  3. Download and install it using the instructions on that webpage.

  4. Once installation is complete, launch Bridge. If it asks about enabling the extension, click Yes.

Creating an HTML Photo Gallery

  1. Navigate into the Bridge Files folder, then into the Australia Photo Shoot folder.

  2. Choose Edit > Select All.

  3. Go to Window > Workspace > Output.

  4. Go to Window > Workspace > Reset Workspace.

  5. At the top of the Output panel, click the Web Gallery button.

  6. From the Template menu, choose HTML Gallery.

  7. At the top of the Output panel, click on Preview in Browser to see a real preview of the gallery in a web browser.

  8. In the web browser, click the thumbnails to cycle through the images. Not bad for a couple minutes of work, but how about something a little… flashier?

Creating a Flash Photo Gallery

  1. At the top of the Output panel, from the Template menu choose Lightroom Flash Gallery.

  2. For Style, choose Flash gallery (default).

  3. In the Site Info section, enter the following settings:

    Site Title: Australia Photo Shoot
    Collection Title: Koalas and Sydney
    Collection Description: (Delete any text and leave this blank)
    Contact Info: (Your Name)
    E-mail or Web Address: (Your Email)
    Copyright Info: All Rights Reserved

    NOTE: The copyright info won’t be visible on the page, but it’s written into the metadata of each image.

  4. Scroll down the Output panel to the Appearance section and set:

    Slideshow Size: 800px
    Gallery Image Size: 750px
    Thumbnail Size: 100px
    Quality: 70
    Layout: Left
  5. At the top of the Output panel, click the Preview in Browser button.

  6. The gallery will open in your default web browser. Use the navigation at the bottom or click the thumbnails to look over all the photos. You can even use the Arrow keys to navigate the thumbnails in this webpage! You may have to click a thumbnail first before you can use the keystrokes though.

Saving the Gallery

  1. Back in Bridge, at the bottom of the Output panel under Create Gallery change the Gallery Name to Australia Photo Shoot.

    NOTE: How is this different from the Site Title we set earlier? The Gallery Name appears in the titlebar of the web browser. The Site Title appears on the page.

  2. Under the Gallery Name, click Browse to choose a destination.

  3. Navigate to the Bridge Files folder.

  4. Create a new folder and name it Australia Gallery.

  5. Click Open (Mac) or OK (Windows).

  6. At the bottom of the Output panel, click Save and let the Bridge do its work. When it says the gallery has been created, just click OK. Who would have ever thought such a fancy gallery could be so easy to create?

How to Learn Graphic Design

Master graphic design with hands-on training. Graphic design is the production of digital and print media that follows certain conventions of style, color, and typography in order to evoke a positive reaction from its viewers.

Yelp Facebook LinkedIn YouTube Twitter Instagram