Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you are a photographer or a designer or just want to share your images with your family, one of the things that you might want to learn how to do is create a Web Photo Gallery. Now, there are lots of different options available to you. If you want to create one that's a little bit interactive and has a slideshow and little thumbnails, you don't necessarily want to crack open a product like Flash and create that from scratch. Adobe Bridge can do a lot of the heavy lifting for you, if you take advantage of its Output module. So, here I have ten images. And I want to create a Web Photo Gallery of these ten images, and either post these online or save them to a folder and send that on a DVD to someone or something like that.
Let's begin by doing a Select All, Command+A, Ctrl+A of the images that I want to create a photo gallery of. I will switch over to the Output workspace inside Adobe Bridge. We are currently in Essentials. I will use the Workspace Switcher, the down arrow and switch over to Output. The default option for the Output module is to create a PDF contact sheet. We are going to go ahead and switch this to Web Gallery. I will go ahead and click on that. The first thing you want to experiment with is which Template you want to use. Bridge actually ships with quite a few different styles of Web Galleries that are very, very cool.
Let's just go ahead and choose the Standard one and see what that looks like. Now, to refresh the Preview, to get this to look like a Web Photo Gallery instead of a PDF contact sheet, you do need to hit the Refresh Preview button. That will update your center area here to actually show you what this looks like. You can see, just from the default Standard Template, you are already getting something really cool. This is actually an interactive Preview. You can actually test the interaction of your Web Photo Gallery right here inside Bridge, without actually having to go outside to our browser. You can see there is some placeholder text.
There is a default name of this called Adobe Web Gallery. You will probably want to change that to something more meaningful for you. You can put your Contact Information here. There is built-in navigation, and showing you how to go from slide to slide. You can click Play to slideshow and show you what number you are on. So, lots of flexibility, and there is color options and so forth. To customize your Web Photo Gallery, you have lots of options down below in this section here, starting with Site Info. Before we get there though, let's just try one of these other Templates. So, instead of Standard, we can choose Left Filmstrip, Filmstrip, Journal, and so forth.
I might even choose something like this, the Airtight PostcardViewer. Let's take a look what that looks like. Again, to preview this inside Bridge, you have to hit the Refresh Preview button. You will get a completely different looking Web Gallery. Now, this is actually kind of cool, because you zoom in, you click to zoom back out, your little thumbnails here. So, it's a much simpler navigation but kind of cool and engaging, like little snapshots thrown on an art table, so to speak. So, there is that version. Let's go back to Style. There is only one Style for this particular Template.
We can try Airtight AutoViewer. Let's see what that looks like. We will Refresh our Preview. So, this looks like it navigates from left to right. That's kind of cool as well. So, lots of different options here. You get really large preview images. Again, you can test this right inside Adobe Bridge. I am going to go back to a more standard one. Let's go back to just Filmstrip, and again, click the Refresh Preview button. You can start seeing what this is going to look like. We will just go from this one. All right.
Go into the Site Info. You see Gallery Title: Adobe Web Gallery. Let's call it Sisters. Gallery Caption: let's call this Greenlake Winter Shoot. We will hit Refresh Preview to make sure that's updated. You will see that changing here. You can put your Contact Information in here. So, I will put in Michael Ninness. Put your E-mail Address in there if you want, some Copyright information, and so forth.
You can give some information About This Photo Gallery. Go ahead and type in some stuff there if you want. I will just keep going. Here is where you can customize the Background colors and the menu colors and so forth. I am going to go ahead and leave everything at the defaults, but you can see, anywhere there is a Color Chip, that's something you can change. So, if I want to change the Main Background Color, you click on that. You get a Color Picker showing up. If I want this to be more of a dark gray, you can do that. We will click the Color Picker, and I would hit Refresh Preview again to modify that choice. You can see the background at the very back is this dark gray now.
Further customization, if you go down to Appearance, you have the ability to control the overall size of all the elements. So, the actual Thumbnail Size is the full size Gallery Image. If you want a Slideshow to happen automatically, how much time do you want to have happened between each Slide, what kind of Transition do you want? We will just go with the defaults and Fade, and so forth. When you are ready to actually save this out, you can either save this to your local hard drive, or if you have actually got a web page up and an access to your Web Server, your FTP Server, you can actually put the path to that FTP Server, your User Name or Password and a subfolder that you want to directly post this up to.
If you have got a live Internet connection, you can push this right from Adobe Bridge right up to your Web Server, which is pretty cool. For us, we are just going to go ahead and preview this in the browser, as if we had done a full on save. You would hit the Save button and give this a name. Save it to a location on your hard drive. We will assimilate that by just clicking the Preview in browser button, and that exports everything needed to create this custom Photo Gallery, and it will launch your default browser. We will go ahead and resize this browser window. You can see there is the Photo Gallery that we created without having to write any code, and we didn't have to crack open Dreamweaver or Flash Professional. It took care of all that, and you saw that we had quite a bit of customization available to us.
I can either just click the Play button to do an automatic Slideshow, and we said it would play for about five seconds, then fade into the next image. We can manually advance to each one if we want to do that. Again, we get that Fade transition from image to image. Or I can quickly jump to any specific Thumbnail with this Filmstrip mode down below. So, this is just to get you oriented, to see that you have a lot of power within Adobe Bridge. Let's go ahead and quit the browser. This will take us back to Adobe Bridge, and you see you have lots of different options to create a custom Photo Gallery that meets your needs, all from within Adobe Bridge, which, of course, is included with Photoshop.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42874 Viewers
119 Video lessons · 54221 Viewers
65 Video lessons · 14474 Viewers
113 Video lessons · 82883 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.