Creating a Web Gallery in Adobe Photoshop CS5
Note: This excerpt does not include the lesson files. The lesson files are available with purchase of the book.
From the book
From the book
From the book
Using Bridge, you can easily showcase your images in an online gallery, so that visitors can view individual images or a slide show of your work. You’ll create a media gallery linked to the exhibits.html file in the museum website.
- In Bridge, double-click the Watercolors folder. (The Watercolors folder is in the Lesson13/13Start folder.)
You’ll create a slide show from the images in the Watercolors folder.
- Select the first image, and then Shift-select the last, so that all the images are selected. Remember that you can use the Thumbnails slider at the bottom of the Bridge window to reduce the size of the thumbnails, so that more fit in the Content panel at a time.
- Click Output at the top of the Bridge window to display the Output workspace. If there is no Output button, choose Window > Workspace > Output.
- In the Output panel, click the Web Gallery button.
- Click the triangle next to Site Info if its contents aren’t already displayed. In the Site Info area of the Output panel, enter Watercolors for the Gallery Title, Paintings from the Watercolors exhibit for the Gallery Caption, and Now showing at Museo Arte in the About This Gallery box. You can also add contact name and information if you want to.
- Click the triangle next to Site Info to collapse its contents. Scroll down to the Create Gallery area. Expand its contents if they aren’t already visible.
- Name the gallery Watercolors. Click Browse, and navigate to the Lesson13/13Start/Museo folder. Click OK or Open to close the dialog box, and then click Save at the bottom of the Output panel in Bridge.
)
)
)
Bridge creates a gallery folder named Watercolors that contains an index.html file and a resources folder containing the watercolor images.
- Click OK when Bridge reports that the gallery has been created. Then, in Bridge, click the Essentials button at the top of the window to return to the default workspace.
- Navigate to the Lesson13/13Start/Museo folder. Double-click the Watercolors folder, which is the gallery folder Bridge just created. Right-click or Control-click the index.html file, choose Open With, and select a browser.
- If you see a security warning, click OK, or follow the instructions to change settings.
)
The gallery opens. One image is displayed on the right side, and thumbnails of the others are shown on the left.
- Click the View Slideshow button beneath the larger image to start the slide show. Click the View Gallery button beneath the featured image to return to gallery view.
- Close the browser application.
The exhibits.html file already contains a link to the folder you created, as long as you named the folder exactly as specified in step 7. Now you’ll open your website and use the link to view the gallery.
- In Bridge, navigate to the Lesson13/13Start/Museo folder. Right-click (Windows) or Control-click (Mac OS) the home.html file, and choose Open With from the context menu. Choose a web browser to open the HTML file.
- In the website, click the Exhibits link in the navigation area. Then, on the Exhibits page, click the link to the Watercolors gallery. The gallery opens.
- Explore the gallery and the website further, if you’d like. When you’re finished, close the browser application, Bridge, and Photoshop.
)
You’re on your way to building engaging websites from Photoshop images. You’ve learned how to create slices, optimize images for the web, use Zoomify, and create media slide shows in Bridge.