Creating a Variation of the Web Gallery

view movie Click icon to view demonstration

I return to Photoshop where I will show you how to create a variation on the default Web Gallery. I use the same 10 images as my raw materials for this new gallery. I access the File menu > Automate > Web Photo Gallery. The gallery window appears and I begin to change settings.

I access the styles selection box and review my options. I try various settings and the thumbnail at the right changes to preview the look of that setting. I settle on the setting of "Dotted border - White on Black" for a dramatic look.

The value for the "Source Images" remains the same. I need to change the value for the "Destination" since I want to keep the 2 versions of the gallery separate. I click on the "Destination" button, and create an new folder on the Desktop named "yard-web-gallery2". I select the Open button to identify that this is the folder I want to be my destination.

Now I move down to the option of "General" and access the drop down menu. I select "Large Images" and the window expands to allow me to enter values for the larger image. There is an area to identify the "Resize Images" value, I leave the setting at Medium. the "Constrain" option remains the same, and then the "JPEG Quality" allows me to set the compression level.

My first change is to set the JPEG Quality to "High". I leave the Resize Image and Constrain values the same. I access options again, where I see there is a place to change the size of the thumbnail and another area to create "Custom Colors". I select that option and see that here is where I can set background color, text color, and link colors to match the values at my Web site.

Now I am ready to create another version of the Web Gallery I select the OK button and Photoshop goes to work. Each image in my "yard-originals" folder is resized to a thumbnail and then resized again to a larger image. When the gallery is complete Photoshop opens the page in a Web browser.

The layout is quite different from the side by side iframes displayed in the default gallery. Now when I click on a thumbnail, the larger image displays and the thumbnails disappear. You can then either use the left and right arrows to move through the images, or select the home icon and skip to a specific image you want to see.

I also want to see if there is a difference in the quality of the large images, since they were compressed at a High Quality level. As I compare an image from the first gallery with the new gallery the difference is subtle.

Now let's take a look at the files created for this gallery. Within the yard-web-gallery2 folder I see similar "pieces" of folders and files. First lets look at the "images" folder which contains resized versions of my original images. I also see left and right arrows, and various images which are used to create the background of the page. The images are 36K when set to a High Quality compression, in the previous gallery the compression was Medium Quality and the file size was 28K.

The "Thumbnail" folder contains 10 small images which are almost exactly the same as the first gallery, the "Pages" folder contains 10 Web pages each of which displays 1 of my larger images. These pages are black, with navigation at the bottom and the home icon at the top.

I see an "index.htm" file just like in the first gallery, however there is no "ThumbnailFrame.html" file as we saw in the previous example. This gallery does not use iframes and does not need this page. There are also the same XML, JavaScript, and .txt files as seen in the default gallery.

Finally I compare the size of the total gallery, which is 620K compared to the first gallery which was 444K. Decreasing the amount of compression produces a higher quality image but increases the file size. I feel that 620K is still small enough to make the gallery load quickly.

Now lets validate these galleries to see how the HTML code holds up to HTML standards. I open the gallery in the Web Browser where I have installed the Firefox Web Developers Toolkit. Under the Tool icon there is a command for "Validate HTML", if you try this you will receive an error message. This command only works if the files are uploaded to the Web. I try again, this time selecting "Validate Local HTML" Now when I validate the page I see 141 errors when checked against the HTML 4.0 Transitional standard.

I am pointing out this problem, so you will understand that using this command is great to create a quick demo for a client, but does not create clean code which can be used for the actual site. As I open my original web gallery which was based on iframe code, I see that there are 38 errors under HTML 4.01 Transitional, not as bad, but still not good enough for the real site.

View the Variation of a Web Gallery