Introduction to the Web Gallery

view movieClick icon to view demonstration

Now let's use Adobe Photoshop to help us create a "Web Gallery". A Web Gallery is a page where you have thumbnails and larger version of the thumbnail. You click on the thumbnail, a larger version of the image appears, and in this way you can have a single Web page and display many images in that one valuable piece of screen real estate.

You can do this manually by resizing each original image into a thumbnail and a larger version of the thumbnail, but that takes a lot of time and energy. Photoshop has a way to automate the process so you don't have to do much at all.

Before I show you the steps to follow, I want to talk about my original images. These photos came directly from my digital camera and the images are quite large. As I view the Image Size window the image is 2593 pixels wide and 1944 tall. This is a gigantic file which should never go on the Web. Because the images are so large they will need to be dramatically scaled down, to produce both the thumbnail and the larger image.

The other thing I want to mention about these images is that we have both landscape (wider than tall) and portrait (taller than wide). The automation process will handle both types of image easily to produce an attractive gallery

To create a gallery access the File menu > Automate > Web Photo Gallery. A window displays which shows the options for creating a gallery. On the right side of the window you will see a thumbnail of how the gallery will look in the browser. My first gallery will follow the default settings, but after creating one gallery you can always go back and try other options.

I need to identify where the "Source images" are stored. I like to keep all my original images in a folder since it makes for a neater work space. I select the folder "yard originals". I suggest you name the folder that holds your source images with the word "originals" in the title. I also create a folder named "yard-web-gallery". Using this naming convention reminds me that these 2 folders go together and helps me easily find my original art work if I need to modify it.

Next I need to designate a folder that is the "Destination" for the finished Web Gallery. I create a new folder on the Desktop and name the folder "yard-web-gallery". As I return to the Web Gallery window I see that the path for the "Source Images" and "Destination" have been identified. Since this is my first attempt at a gallery, I just let it run with default values. I select OK and the fun begins.

Basically, I sit back and Photoshop opens every image in my "yard-originals" folder and creates a thumbnail and a larger version of the thumbnail. This is just soooo slick. Then Photoshop opens a Web browser and displays the Web Gallery. The look of the default page is thumbnail images along the left, and when I click on them the larger version of the image appears at the right.

Here is the Web Gallery created by Photoshop

The good news is that this is an extremely easy process, the bad news is that this may not be exactly the look you were hoping for. One thing I notice is that my image names are displaying, and they aren't very helpful. When creating a demo, using camera file names is fine, but for an actual web site you would want to rename the images with either descriptive names or product numbers.

Before we move on, let's view the code that Photoshop created. This code will not validate at XHTML 1.0, instead it is set to 4.01 Transitional. Code problems that catch my eye, are the use of attributes in the body tag, instead of CSS styles, and the use of tables to create the layout, instead of div tags and CSS layout properties.

After seeing the code problems you may be wondering why I even use this feature. The answer is that this is a great way to create a " demo" gallery for a client. Once they have agreed to a gallery and chosen a style, you can use code that validates. However, creating a gallery that validates will take you longer than the time you invest when using the Photoshop Web Gallery automatioin function.