Create a Flash-Based Web Gallery for Your Photoshop Graphics

Adobe Bridge is a powerful program that lets you organize your visual assets, such as photographs, illustrations, PDFs, and Flash movies. The Output Module in Bridge also produces an elegant Flash-based web gallery. You don't need Flash installed—Bridge does everything for you. This is what you will use to create a Photo Gallery of your Photoshop work. Before you get started you need to organize all you Photoshop graphics in folders depicting the menu items you created in the previous activity (Basics, Text Effects, Photo Touch Ups, Photo Effects, Photo Extreme, and Creative Projects).

Set Up Bridge Gallery:

Open Bridge from Dreamweaver by selecting File > Browse in Bridge:

Browse

Select the files or the collection or folder that contains the images you want to include in the web gallery.

Locate Folder

Choose Window > Workspace > Output. If the Output workspace is not listed, select Adobe Output Module in Startup Scripts preferences.

Output

Adobe Bridge displays the Output panel at the right side of the window and the Folders panel at the left. The Content panel with your selected photos appears at the bottom of the window, and the Preview panel appears in the middle. Select the photos you want to use in your photo gallery. Notice my graphics below. I have two different files for each graphic. I choose the .jpg graphics for my gallery. To select photos not in consecutive order, hold down the Ctrl key and click on the graphic to select it.

Content Area

At the top of the Output panel, select Web Gallery.

Web Gallery

Choose a gallery from the Template menu, and select a size for the thumbnails from the Style menu.

Web Gallery Template

With your photos selected in the Content panel, click Refresh Preview to view the gallery in the Output Preview panel.

Refresh Preview

Customize the gallery by specifying options in the Site Info:

Site Info

Customize the gallery by specifying options in Color Palette:

Color Palette

Customize the gallery by specifying options in Appearance areas of the Output panel.

Appearance

The last step is to create the gallery. Give the Gallery a name and browse to where you want to save the slide show.

Create Gallery

Adobe generates a folder for you that saves the slide show files in called "Adobe Web Gallery."

Web Gallery

Rename this folder with a name that is more adaptive for the Internet, a word with no spaces and with an underline, example "Text_Effect_Slideshow."

Double click this folder and rename the index file to another name, example "text_effects."

CSS Layout