How to Make a Web Photo Gallery Using Photoshop CS3 & CS4

Article by Mike Piero (3,329 pts )
Edited & published by Rhonda Callow (10,566 pts ) on Nov 10, 2008

Looking for a way to share your photos with the world on your own website? Adobe Photoshop CS3 and CS4 allow someone with little or no web design experience to make stunning photo galleries. Check out this article to find out how easy it is.

Beginning in Adobe Bridge

When using Adobe Photoshop CS3 or Photoshop CS4 to generate web galleries, I like to start working in Adobe Bridge. If you already have the photos selected and organized in a folder ready for publication, then you can skip this step. Usually, I have a folder labelled “Finished”, making it extremely easy to sort through them in Adobe Bridge to choose which ones I want to publish in my web gallery.

Holding down the Ctrl button (or Command, for Mac users), you can select as many photos as you want to include in your web gallery.

Once they are selected, go to Tools, Photoshop, and then click on Web Photo Gallery. This will launch Photoshop and bring up the photo gallery window, where you choose the options that you want.

(Click on images to enlarge)

2bridge

Photoshop Web Photo Gallery Feature

Once in Photoshop CS3, it’s only a matter of a few more steps. The photo gallery window has some very important information on it.

If you didn’t begin in Adobe Bridge, you can access the web photo gallery tool by going to File, Automate, and then to Web Photo Gallery.

1

At the very top of the window, take some time to choose the template you like best under the Styles drop down menu. Keep in mind that the Flash templates will take more bandwidth, require more time to load, and must be supported by a flash plugin (which most web browsers have anyway). With this in mind, the Flash-based styles do look very modern and attractive.

Below that, insert your email address if you want it to be published on your site. If not, then just leave this segment blank.

Under Source Images, it should say Selected Images from Bridge. Now, if you didn’t start with Bridge, you can select your images from a folder on your computer.

The Destination is where you want all of the web pages and supporting files to go. I would recommend making a new folder in your documents folder or desktop and save the files there. Then, you can move the folder around as you need.

The rest of the settings can be left to their default selection. After you click OK, Photoshop will begin generating the photos, thumbnails, etc. This may take some time, depending on the size of your web gallery. If you have Dreamweaver installed, it may open the main index.html file upon completion. You can close it if you want, or make some changes such as adding meta tags and keyword descriptions. Otherwise, just close the file and exit out of Dreamweaver.

Now, all of the files you need for your own web gallery are in the folder you created. Just upload that folder to your website (I use the FTP program, Fetch) and create a link to the index.html file in that folder, and the world will be viewing your photos in no time!

Comments

Jan 7, 2010 11:11 AM
Erin Pellegrino
white screen
I had the same issue. The only way I found to fix it was to not use a flash gallery. Rather, choose the HTML gallery in Bridge and use that one. For some reasons I cant get the other ones to work. I am also using fetch but I dont think that is the problem.

Also, you need to contain the gallery's index.html in a folder on the server. (Lets say you call it, Gallery) Then, in dreamweaver, link it as /gallery/index.html

That should work
Jul 18, 2009 9:42 PM
RE: Web Gallery
Hello,
Do you already have an existing website with a homepage uploaded that you are hosting? If you already have a website in place, you can link to the index.html file by doing the following:

Let's say we exported a web gallery to a folder named "Photos" for posting on my website, mikepiero.com . We want to copy that folder to the main root directory. Then, we can put a link on the homepage to it by creating a link to your web gallery such as this: www.mikepiero.com/Photos/index.html

If you wanted to put it in your html folder, your link would be this:
www.mikepiero.com/HTML/Photos/index.html

It is case sensitive, so be careful. Just use your website address for the link- not mine :)

If you don't have any website right now, then just copy the contents of the folder (not the actual folder itself) into the main root directory. In this way, the web gallery's index.html will serve as your homepage. In your main directory, there needs to be an index.html file. Whether its the web gallery one or a different homepage is up to you.

Let me know how this turns out for you. Hope this helps.

Sincerely,

Mike Piero
Jul 18, 2009 5:47 AM
Iain Gunther
Web Gallery
Hi Mike
Using Bridge CS4 I made a Web Gallery which works great on my MacPro and from a usb key on my MacBook Pro when I click on the index.html file. However I am having a problem getting it to work from my site (where I want my family to see it.

In the root of my website I have two folders, 1 is CGI-BIN and 2 is HTML. Both these folders are empty.

I have tried putting the index.html in the root with Resources in the root but I just get a white screen with the title Adobe Web Gallery. And I have tried to put both index.html and Resources in the HTML folder with the same blank screen with a title Adobe Web Gallery. (I delete everything before trying another way)

I have been searching for the correct architechture for the site but only seem to get info like "Upload the entire folder" (but to where?)

You wrote in your very clear article "(I use the FTP program, Fetch) and create a link to the index.html file in that folder, ". Could you explain this in more detail please?

Many thanks from the south west of France
 
Subscribe to Digital Photography
RSS
Get free weekly updates, directly to your inbox.
Subscribe
Browse Digital Photography