Tag Archives: web gallery

Make a Lightroom Web Photo Gallery

Did you notice that Adobe Bridge can no longer create a web photo gallery? No problem. You can make a Lightroom web photo gallery instead. A web photo gallery is a website made from HTML files that displays a series of images using hyperlinks. The home page shows thumbnail images of all scrapbook pages in a grid. When a thumbnail is clicked, a full-size image appears in a frame. A web photo gallery is a creative way to view Photoshop documents. In the past, a web photo gallery option could be made using Adobe Bridge. However, since the recent Adobe update this is no longer available. However, you can use Adobe Lightroom Classic to create a web photo gallery instead. Lightroom Classic is a photo organizer with editing features.

 Lightroom Web Photo Gallery

Lightroom Classic Web Photo Gallery

Prepare to Import Files into Lightroom Classic

Before importing your Photoshop documents into the Lightroom Classic Library, export each file as a PNG with a unique filename. This will keep the original pages intact, and will help to avoid issues that can occur during import. Place the files into a Student Name Gallery folder to stay organized.

  1. Use your skills to create a new folder in your student folder. Label it Student Name Gallery.
  2. Export each Photoshop document as a PNG into the Student Name Gallery folder.
  3. When finished, close Photoshop CC.

Import Files into Lightroom Classic Library

You need to add the folder to the Lightroom Classic Library. This will import the photos into the program. You can then use Lightroom Classic to create the web photo gallery.

  1. Open Lightroom Classic CC.
  2. In the left pane, in the Folders area, select the Add button. Select Add Folder.
  3. Select the Student Name Gallery folder. Click Select Folder.
  4. The files in the folder should be selected. From the top bar, select Add.
  5. Import Files into Lightroom Classic Library

    Import Files into Lightroom Classic Library

  6. Click Import.

Create a Lightroom Web Photo Gallery

The web photo gallery in Lightroom Classic is similar to the version that used to be available in Adobe Bridge. The output will look and function the same.

  1. Select Web from the bar along the top.
  2. Select the Classic Gallery layout style.
  3. Click Preview in Browser to see what the template will look like.
  4.  Lightroom Classic Web Photo Gallery

    Lightroom Web Photo Gallery

  5. Close the browser tab to return to Lightroom.
  6. In the Site Info area, type in a site title, collection title, collection description, contact name, and web or mail link.

Export the Web Photo Gallery as an HTML File

  1. At the bottom right corner, click Export.
  2. Go to the location where you placed your student files.
  3. Type Web in the File name box.
  4. Click Save.
  5. Close Lightroom.

View the Web Photo Gallery

  1. Go to the location where you saved the Web folder. Open it.
  2. Double click the index.html file to open the photo gallery in a web browser.
  3. view file

    Double click the index.html file.

  4. Click a thumbnail to see a full-size image.
  5. Click Previous or Next to view each scrapbook page.
  6. When you are finished, close the web browser tab.

Looking for More Photo Editing Ideas?

TechnoKids has updated TechnoPhotoshop to work with the latest version of Adobe Photoshop CC. Filter, retouch, and superimpose images. Discover how easy it can be to use professional photo editing tools to create unique images.

Photo Editing Activities

Photo Editing Activities

Web Gallery in Photoshop CC

You can create a web gallery in Photoshop CC. This feature requires Bridge from Creative Cloud. You also need to download the Adobe Output Module and follow the installation instructions posted on the Adobe support site. The web gallery automatically creates a web page with a slide show of images that are ready to post to the Internet.

NOTE: This post is outdated. Adobe Bridge can no longer create a web photo gallery. Refer to the blog article, Make a Lightroom Web Photo Gallery for updated instructions.

  1. Place photos you want to include in the web gallery into a folder.
  2. Open Adobe Photoshop CC.
  3. From the File menu, click Browse in Bridge.
  4. In the FOLDERS panel, locate your folder from step 1.
  5. Thumbnails of the photos will appear in the CONTENT panel. Select the photos (hold the SHIFT key to select more than one). The photos appear in the PREVIEW panel.
  6. place photos in a folder

    Select the photos to include in the Web Gallery.

  7. From the Window menu, select Workspace – Output.
  8. From the OUTPUT panel, select Web Gallery.
  9. web gallery in photoshop cc

    Select Web Gallery

  10. Select a template: click the Template arrow to select an option. If there are options on the Style arrow, select a style.
  11. Click Preview in Browser to see what the template will look like.
  12. Close the browser tab and return to Bridge to try another.
  13. Add site information in the RIGHT pane and set the appearance.
  14. Scroll to the bottom of the pane to view the Create Gallery pane.
  15. Select the Save Location.
  16. web gallery title

    Select the location to save the web gallery.

  17. Click Save. When the Create Gallery window appears, click OK.
  18. Go to where the web gallery is saved. Open the folder. Double click the index.html file to view it.

More fun ideas for middle and high school students using Photoshop CC are included in the TechnoPhotoshop CC technology project. In this project, students learn photo editing techniques. They apply their skills to make scrapbook pages.