Get Your Photos onto the Web

with Photoshop, Bridge, and Dreamweaver

By Barry Haynes Back to

Haynes1ja9

After opening my Spirit of Place photography gallery, I wanted to update my Web site to emphasize my photographs and workshops rather than my books. I also wanted a way to easily generate gallery pages on the site when I create new or improved images. There are many tools these days to help one create photography Web sites, but I wanted to stick with my philosophy of seeing what can be done with Photoshop before turning to other software. Creating the site this way allows me to do it myself, put it anywhere, and have complete control over the images and how they look.

Sorting thousands of images

A key part of creating an online gallery for your work is choosing which images to use. I don’t have the space to go into detail, but I sorted images into folders in Adobe Bridge (which comes with Photoshop), tagged them with stars, and created folders that contained the best images of topics for which I wanted to create galleries. (I also kept copies of these images in their original folders that were sorted by date.)

With these folders, it’s easy to generate a new gallery from any particular folder, and then quickly update that part of my Web site. As you read on, you’ll see how to do that. To learn more about how to sort and rate your images using Bridge, see the article I wrote in the July/August 2007 PHOTO Techniques. (You can also check for any previous articles on www.barryhaynes.com.) Some people prefer to use keywords to organize their images. One reason I’ve chosen to use the folder-name model is that I can easily make backups of all my most important files by dragging a copy of that entire folder hierarchy to another hard disk. Any time I make significant changes, I make a backup to one of several external drives that are not usually online.

Adobe also has a separate application, Lightroom, which costs less than Photoshop (about $300) and allows users to sort and organize images, add keywords, and color-correct images. You also can use Lightroom to organize, sort, and color-correct your images.

When sorting images, you sometimes may want to make quick initial adjustments to see which of several images is likely to make a better final image. (Often these adjustments alone are good enough to display the image on a Web site). Raw files must have their initial color correction done using the Camera Raw filter. The Raw filter is automatically accessed from Bridge when you double-click on a Raw file. With Lightroom, the Camera Raw tools are built into the application.

Once you’ve narrowed your images down to the few that will actually be on your Web site, you can manually sort their order. In Bridge, choose View > Sort > Manually from the menu bar, which allows you to drag image thumbnails into any order you want. This is the order in which the images will appear when you generate your Web galleries.

Generating a Web gallery

To organize images for a Web site, I suggest you create one folder—let’s call it “My Web Site.” Inside that root folder, create a new folder for each Web gallery you are making. On my site, the root gallery has 16 images (each of which later becomes a link to a nested gallery). Check www.barryhaynes.com to see what this looks like in the end. As you can see, some of the nested galleries have other galleries nested within them, too. I’ll demonstrate how to make the galleries one at a time using Bridge and Web Photo Gallery in Photoshop, then I’ll show you how to link them together and nest them using Adobe Dreamweaver.

To generate a Web gallery from a folder full of images, select all the images you want in that gallery from a Bridge window by clicking on the first image, then Shift-clicking on the last image. You’ve already ordered the images as described in the previous section. Now choose Tools > Photoshop > Web Photo Gallery. This switches you from Bridge into Photoshop and automatically puts you into the Web Photo Gallery dialog, which is in the File > Automate menu. Various formats of Web Galleries are available to choose from. Try them and decide which style you like best. I chose the Simple style from the Styles menu because it has many options and doesn’t require any special browser or system features to work properly. As a result, it should work in most Web browsers.

Web Photo Gallery options

Let’s now go through several option dialogs. Leave Source Images set to Use Selected Images from Bridge. In the General Options menu, you need to choose the Destination folder for the Web pages. For the root gallery, this would be your “My Web Site” folder; sub-galleries are generated from folders created inside this root gallery folder. You also want to check the Preserve Metadata checkbox so all your copyright information stays inside the files you are generating for your site. I set the Extension option to .htm. Type your e-mail address at the top if you want that included in the banner at the top of each page.

In the Banner Options dialog, you may want to type in the name of your Web site and your contact info. Choose the font and the font size; try several until you find the one you like.

In the Large Images dialog, I set the Width to 750 pixels by choosing Resize Images, Custom, typing 750 in the pixels box and then picking Constrain Width. The large images are then shown one to a page when users click on a thumbnail of that image in the gallery. Set the JPEG quality to maximum because we are going to open these images in Photoshop and tweak them. We do this because the auto resizing Web Photo Gallery does isn’t very good at sharpening the downsized images. If you pick a border size, a border will be put around your image. I made a border that includes a drop shadow that had to be done later in Photoshop. Finally, check Title and uncheck Filename in the Titles section because we want the Document Title metadata to be used as the title for each image.

In the Thumbnails Options menu, I set the size to Custom and typed in 150, then chose 4 Rows and 4 Columns to create a total of 16 images on a page. Again, you need to uncheck Filename and check Title in the Titles Use section, as well as choose a font and size.

The Custom Colors section allows you to pick the background, banner, text, link, active link, and visited-link colors for your pages. Play with these until you get the ones you want. Click on a color box to change it.

Finally, the Security section allows you to put a copyright notice on your images. If you choose Custom Text, you can type in your own notice. The format I’ve used for the eight editions of my Photoshop Artistry books is: “©2009, Barry Haynes, All Rights Reserved.” (Talk to a lawyer for legal advice about copyright issues.) This dialog offers various options; play with them till you get one you like.

Generate the basic gallery

Once you’ve entered all the categories of options, click on OK to generate the gallery. Photoshop will be busy awhile opening each image and resizing it twice, once for the larger image and then for the thumbnail. It’s best to make sure Photoshop has no files open before you start this, and don’t do anything in Photoshop or Bridge while the gallery is being generated or the process may fail.

If the new gallery doesn’t open in your browser when it’s finished generating, choose Open File (or the equivalent) from within your browser, and open the file named “index.htm,” which should now be within your root “My Website” folder. This is the root page for your new Web gallery. You’ll also notice folders named Images, Thumbnails, and Pages. Those three folders contain the larger images, the thumbnail images, and an HTML code page for each image in your new Web gallery. Several other f iles generated by Web Photo Gallery also will be in that root folder (leave them there).

Improving images with Actions The built-in Web Photo Gallery generator does not optimally sharpen the images after it resamples them. To correct this problem, I’ve made a Photoshop Action that opens a file, sharpens it, and closes it. Since Web Photo Gallery only allows solid-color borders around images, I’ve also added to this Action steps to add a gray border and a drop shadow around the image.

To create an Action in Photoshop, first open an image of the type for which the Action will be used. In this case, I’d open one of the larger photos created by Web Photo Gallery from the Images folder within the “My Web Site” folder. Then from the Actions palette, choose New Action, and start going through the steps you want to apply to that image.

For images created with Web Photo Gallery, I wanted to assign the correct profile to them, then convert them to the sRGB color space that is used on the Web. Next, I wanted to make a gray background behind each image that is 10% larger than the image in each dimension. This gray background was to be the same color as the background color of the Web page set in the Custom Colors Web Photo Gallery options. I wanted to have a drop shadow between the image and its background, and I wanted to correctly sharpen each image so it looks best at the size at which it will be displayed. To accomplish these things, I created one Action for the large images (in the Images folder), and a different Action for the smaller images (in the Thumbnails folder).

The Action steps are outlined in the caption for Figure 10, where you see a picture of the Action named ProcessLargeDSsRGB. Once you go through these steps on an initial image and save the Action, you can use the Action to automatically run these steps on any image.

Creating Droplets

Droplets, along with Actions, are a tool that allows you to carry out the same set of Photoshop tasks to a large number of files without having to open all those files into Photoshop (or even being in Photoshop).

To make a Droplet, first highlight an Action in the Actions palette, such as ProcessLargeDSsRGB. Then go to File > Automate > Create Droplet. If you place Droplets on your Desktop, you can just select a group of files from the Finder, then drag and drop them onto the Droplet. That opens the files and runs the Action on them. When you have to process a lot of files quickly, Droplets and Actions are the way to go.

Now select all the JPEG files from the Images folder and drag them on top of the ProcessLargeDSsRGB droplet. This converts them all to the sRGB color space, sharpens them, and adds the drop-shadow effect. Finally, drop all the JPEG files in the Thumbnails folder onto the ProcessSmallDSsRGB Droplet to f inish work on those files.

Image profiles and backgrounds

Originally, I converted all my images to the AdobeRGB color space, then saved them with this color space tag. Unfortunately, most Web browsers display images in the sRGB color space whether they are tagged or not. If the images are in some other color space, even if they are tagged, their colors get displayed incorrectly by most browsers. Some browsers (such as Safari on the Mac) actually look at the color space tag in the image and display the image in the correct color space.

This is great—except that the gray edge we’ve added around the drop shadow, though it exactly matches the background color of the page, is not displayed the same in Safari even when the images are tagged as sRGB. The gray edge of the image and the background match perfectly in Netscape, Firefox, and Explorer, but not with Safari. (Welcome to the complex world of Web development.)


Editing with Dreamweaver

If you don’t like everything that the Web Photo Gallery does to make your gallery, you can easily edit what it did using Adobe Dreamweaver or some other Web site editor. If you know HTML code well, you can edit it directly using any text editor, but this is more diff icult. Applications such as Dreamweaver allow you to open a Web page and edit it using a graphic interface. I’m not interested in becoming an expert in creating Web sites—I want to spend the time on my photography. On the other hand, I don’t usually like the totally automated systems that create Web sites for you using one of several canned looks. Making a site with Web Photo Gallery allows you to quickly generate the basic site and then edit the way it looks and its content using Dreamweaver, GoLive, or something similar.

My home page has 16 images on it, and I wanted each of them to be a link to a nested set of galleries or to other pages that describe my workshops, provide contact info, and so on. This is easy to do with Dreamweaver. First, open the index.htm file from the main home page gallery (the “My Website” gallery) and click on an image that you want to link to a nested gallery on some other page. That nested gallery needs to already have been created, and it should be in a folder that is within the root “My Website” folder. I generated all such folders with Web Photo Gallery so that each of them also contains an index.htm file that is the root file for that nested gallery. Once you click on one of the images on your root page, you’ll see a Link area in the Properties window of Dreamweaver. Clicking on the folder icon to the right of that link area brings up a file browser window allowing you to navigate to the index.htm file you want to link to. For the main home page, I had to link each image to a nested gallery or file in this way. After saving this edited index.htm file and opening it in a browser, clicking on one of those images takes me to the nested gallery (Figure 12).

The banner at the top of each page that Web Photo Gallery generates is quite simple. I wanted to divide that banner into multiple columns to provide more information. You can see how I did that in (Figure 13). In Dreamweaver, just click on the banner to select it, then bring up the Split Cell dialog from the Properties window.

Once that header was split into five sections, I added information and links to those sections. I wanted those five sections to be on the top of every gallery thumbnail page. They contain links that allow one to return to the home page, or to find out how much prints cost, or how much it costs to use one of my images in a publication. In the leftmost cell, I also added a TIFF file (that my wife made in Photoshop) containing a logo for Barry Haynes Photography.

Clicking on the Header band from within Dreamweaver’s Design mode highlights and selects that item.

Depending on where I click, this could be just one cell of the header, or the entire horizontal band. I can then switch to Code mode, which highlights the html code used to create that header (Figures 14 and 15). I can then copy that code and then open a different window and paste it in a similar location within the code for that window. After doing this, depending on where the new window is located within my Web site folder hierarchy, I may have to update the links within this pasted banner. It is best to make your links relative to the folder the html code resides in. This is better than having the links come from your main hard disk or from some other specific hard disk, because when you move your site to a server all the links will still work.

Moving files to your server

While you are working on your site, you should have a browser open so you can test the pages you are editing. The browser doesn’t even need to be online to do this. Just open a browser window, then choose File > Open and open the root index.htm file within your root “My Web Site” folder. From that index.htm file, you should be able to access the rest of your Web site as you add pages and galleries, along with linking to them from your root file or from files that are linked to from your root file.

Once your site is tested by opening all the windows locally on your computer, you can move it to the Internet server where your Web site is located. I’ve been doing that process from Adobe GoLive (which is now discontinued) for a long time and, since it was already set up to connect to my server, I used GoLive to transfer the site this time. All we are doing is transmitting data from a local hard disk to the server. I’m not going to get into the details of exactly how that is done, but it is not hard, and there are various programs that can do it, including GoLive and Dreamweaver, as well as smaller, cheaper applications such as Fetch.

When using the Mac file system, you are able to use most characters you can get from your keyboard within file and folder names. When you copy your files to a server, you don’t know what type of computer that server is running on. It may be Mac or PC or Unix or something else. Unix has different rules as to what characters are legal in file and folder names.

On Macs and PCs, “FOLDERNAME” and “foldername” are the same exact name. Unfortunately, f ile and folder names in Unix are case-sensitive so these two are not the same on a Unix server. This means that if you capitalize something in HTML code differently, that code should work properly on your Mac or PC, but it probably won’t work properly on a Unix server. Also, don’t have the character “#” in a file name because Unix doesn’t allow that—the file may not even transfer to the server.

Keep your file and folder names simple with letters and numbers only and make sure you always type the capitalization the same. If something is not working correctly or an image doesn’t show up, once you transfer your site to the server, this type of UNIX f ile-name incompatibility may be the problem or part of the problem. Make sure you test every page and all the links once you transfer the site to your server.

Conclusion

My Web site is in the middle of a total redesign to focus much more on my photography and images than it did in the past. In this article I’m trying to pass along to you some things I’ve learned in this process. I consider myself a photographer, printmaker, and Photoshop expert much more than a Web designer. This is why my site doesn’t have a bunch of f lashy Web features. My hope is to be able to create and manage the site myself, and to have the site do a good job of featuring my images. Hopefully this will help some of you do the same with your Web sites and images.


About the Author

Barry Haynes
Contributor
Barry Haynes is a photographer and author living in Gibsons, BC, Canada, just north of Vancouver, where he has his studio and photography gallery. See www.barryhaynes.com for info about his Outdoor Photography, Photoshop/Printmaking workshops,Photoshop books, images and gallery. His Photoshop Artistry: for Photographers using Photoshop CS2 and Beyond, from New Riders publishing, is the 8th edition of this series. See also www.maxart.com.