Creating a web gallery with Adobe Photoshop and Adobe Bridge

Header_MoreImageSpacePhotoshop

A web gallery can be defined as a site that features a home page with thumbnail images and gallery pages with full-size images. Each page contains links that allow visitors to navigate the site; for example, when a visitor clicks a thumbnail image on the home page, the associated full-size image is loaded into a gallery page.

When you use the Web Photo Gallery command to automatically generate a web photo gallery from a set of images it will display multiple images or content that even advertising can fill into this category.

Photoshop provides a variety of styles for your gallery, which you can select using the Web Photo Gallery command. If you are an advanced user who knows HTML, you can then create a new style or customize an existing one by editing a set of HTML template files.

Each template for gallery styles comes with different options. When using a preset style some options may be dimmed, or unavailable for that particular style.

Through this article we are going to explain a simple way to make a web gallery with Adobe Photoshop and Adobe Bridge.

CREATE WEB GALLERIES

  1. First you must get the images to be placed in a gallery. Size does not matter as pre display images are created to be viewed on the web
  2. In Adobe Photoshop you can access the menu File> Browse In Mini Bridge… which will open Adobe Bridge software as a search engine to the folder containing the images. There you have to select the desired folder and the images are displayed at the bottom of Photoshop.

01CreatingWebGallery

  1. Images can be worked individually, applying any necessary correction with Adobe Photoshop. Your images will then be presented in the order in which they’re displayed inside Bridge. In case you want to use a different order, change the order in Bridge.

02CreatingWebGallery

  1. Once you have processed the images you can access to Adobe Bridge by clicking on the logo.

03CreatingWebGallery

In Adobe Bridge select the “OUTPUT” tab and select the content you want to belong to the gallery; in this case all entities are selected

04CreatingWebGallery

  1. Now you must select the “Web Gallery” and then select the type of gallery you want to perform according to various templates styles.

05CreatingWebGallery

Choose the desired template and then click on the “Preview in Browser” button so you can visualize the chosen in a browser such as Internet Explorer, Mozilla Firefox or Google Chrome. For this work the template “Standard” was selected.

06CreatingWebGallery

You should keep trying different templates to find the right for a Web page. For example, using the template “Slideshow” images will change at set time intevals or through users’ action

07CreatingWebGallery

And by using the template “Journal With Slideshow” we have all the info displayed below

08CreatingWebGallery

  1. Once chosen the right template, you should be able to see more detailed information regarding the content to be presented at the panel “Site Info”, where the most important parameters to be entered are:
  • Gallery Title. It is the title of the gallery.
  • Caption Gallery. It is the secondary title of the gallery.

09CreatingWebGallery

In the “Color Palette” panel colors of letters and background of the gallery are defined.

10CreatingWebGallery

In the “Appearance” panel parameters of the images to be presented are defined.

11CreatingWebGallery

In the “Create Gallery” panel parameters local or remote FTP storage are defined.

12CreatingWebGallery

  1. Once registered the necessary information in all the panels seen, you can proceed to its storage using the “Save” button, then it can be copied to a Web server as “Apache” or “Internet Information Server”. Also, the gallery can run locally.

When making storage a ‘index.html “file and a folder is created resources.

13CreatingWebGallery

The resources folder contains the source files for the operation of the gallery. And separately has an “images” folder with all the images in the gallery in sizes large, medium and thumb.

14CreatingWebGallery

And this is the final result of a web gallery with the help of Adobe Photoshop and Adobe Bridge.

15CreatingWebGallery

ABOUT CUSTOMIZING WEB PHOTO GALLERY STYLES

You can customize an existing web photo gallery style by editing one or more of its HTML template files. When customizing a style, you need to follow these guidelines so that Photoshop can generate the gallery correctly:

  • The style folder must contain these files: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm, and FrameSet.htm.
  • You can rename the style folder but not the HTML template files in the folder.
  • You can have an empty Caption.htm file, and place the HTML code and tokens determining the layout of the caption in the Thumbnail.htm file.
  • You can replace a token in a template file with the appropriate text or HTML code, so that an option is set through the template file rather than through the Web Photo Gallery dialog box. For example, a template file may contain a BODY element with the following background color attribute that uses a token as its value: bgcolor=%BGCOLOR%
  • To set the background color of the page to red, you can replace the token %BGCOLOR% with “FF0000.”
  • You can add HTML code and tokens to the template files. All tokens must be in uppercase characters, and begin and end with the percent (%) symbol.

ADVICES TO FOLLOW WHEN CREATING A WEB GALLERY

It is recommended for professional work an advanced knowledge of HTML and Javascript, so you can create customized Web Gallery content.

For cases that do not require a detailed interaction of the web gallery, we recommend using the template “HTML Gallery”.

REFERENCES

  1. ADOBE (2013), ADOBE PHOTOSHOP Help and tutorials, link [https://helpx.adobe.com/pdf/photoshop-elements_reference.pdf] visited as of 2015-08-02.
  2. ADOBE (2014), Adobe® Photoshop® CC Help, link [https://helpx.adobe.com/pdf/photoshop_reference.pdf] visited as of 2015-08-02.

Add a Comment

Your email address will not be published. Required fields are marked *