Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you want to display your photos or other images on the web, the very easiest way is to create a web gallery which is entire website to display images. In the past, you could make a web photo gallery from inside of Photoshop, but if you look for a Web Photo Gallery command or Web Gallery command in Photoshop CS4, you are going to be disappointed because there isn't one there. In this version of the program, the web gallery feature, like the contact sheet feature, has been moved out of Photoshop completely and it's now in Bridge. I am here in Bridge in the Chapter 15 Exercise Files folder and I'd like to make a web gallery out of some of my photos.
The first step is to change the workspace that I'm using here in Bridge. I need to go into the Output workspace. To get there I'll go up to these labels,for each of the workspaces that come with Bridge. I don't have room on my screen to see them all. So I get this arrow instead. I'll click the arrow and I go down to Output. That opens the Output workspace and I have closed the left-hand panel there to give more room to the Output preview area right here. The first step in creating a web gallery is to go to column on the right and instead of PDF, which you would use if you're going to make a slideshow or printed output like a contact sheet, I'm going to go to Web Gallery and that changes all of the controls in this column.
Next I am going to go to the of the Filmstrip view in the Content panel at the bottom of the screen and I am going to click the slider at the bottom and move over until I see the pictures that I want to include in my web gallery. I will click on the first of those this first red tent called light_1, I will hold the Shift key and I click on the last one and the one called light_5. Now I am going to set up my web gallery over here in the column on the right. The first choice is what style I am going to use for my web gallery. I am going to click in the Template field to see the available styles.
Most of these templates are made with Flash and so they are interactive and some have animation. There is only one HTML-based web gallery, this one of the bottom. You can take a look at all of these at your leisure, but for now I'm just going to use the Left Filmstrip template. Then I will come to the Style area and here I can choose the size of the thumbnail images that will be displayed to show each of my selected photos. I will choose Medium. If I want to see the web gallery with the current settings, I will click Refresh Preview and as I make changes here in these controls, every time I want to see how it looks, I need to refresh preview again.
When you click Refresh Preview, you get a preview of the entire web gallery or website over here in the Output Preview panel of Bridge. If you'd like to see the preview larger, you can always choose Preview in Browser and that will open your default web browser to show you what your gallery will look like when it's uploaded to the web. So with these default settings what I get are thumbnails of individual images over here and if I click on one, the larger view in the middle changes and it has that nice animated effect between images.
You can also see that there are controls underneath the main image. If I click the Play button, I get an automatic slideshow. I can pause the slideshow if I wish, and I can use the other arrows to move slide by slide through the images. I am going to close the web browser and go back into Bridge and here I can use these various settings available in the Output column to customize the default template. So for example, I can type a title for my gallery. It will appear at the top of the screen.
I might type something like Kabili Studios and for a caption or a tag line for this particular gallery, I might type Nature Abstracts. In About This Gallery I could type some text that describes what the gallery is. I will just type of bunch of Xs for now, but you get the point. Here you can have any text you want. And here I have entered my name. I can put my e-mail address, and I can put copyright information.
So I am going to press the Option key and the G key on a Mac. That's Alt+0169 on a PC, and I'm going to type my name and the date. By the way, if you're following along with me and using these images, please type my name, not yours, because I am the photographer. Thanks. If I scroll down, I see that I can change the colors for the background here for the menus, for the thumbnails and for the title. I will leave everything at its defaults.
I also can choose to Show File Names beneath each one of these thumbnails if I wish. I can change the duration of slides in a slideshow. If I come down here, I can change the name of the gallery and what this does is change the name that will appear in the title bar at the top of a web browser window. So I am going to change that to Kabili Studios. When I am all done filling in these fields, I would preview in browser one more time, but I'm not going to do that right now in the interests of time. Instead, I'm just going to make sure that Save to Disk is selected and then I'm going to click the Browse button to go out to my Desktop and choose to save my gallery there.
I have another choice here that I want to show you before I save it to my Desktop and that is I can choose to upload the web gallery to the web. The web gallery that Photoshop is going to produce will include HTML files and Flash files and image files, all in a package that makes up a website. If I click here, I can upload the entire website that Bridge is going to be making for me to my web host, but I first have to set up an account with a web hosting service that includes access to an FTP server and hosting of a website.
The information that I would put into these fields would come from that web host. Having the upload capability here in Bridge means that I don't have to use a separate FTP program to transfer my files up to my website. For now I am just going to save to disk and I am going to click Save. Bridge is now creating an entire website for me, complete with HTML and Flash files and image files. I will click OK and I go out to my Desktop to see what Bridge has made. Here is my Kabili Studios gallery.
I'll open that folder to see what Bridge has made and here I can see the main HTML file for the website along with a folder full of resources. In the sub-folder are images and there are SWF files, which are Flash files, and more. So I'm going to double-click the index. html file to open it in a web browser locally. I will say OK at this warning and there is my web gallery with the text that I typed in, as you can see on the top right and the top left, all of my thumbnails, and my slideshow available from here.
So if I uploaded this to the web, this is exactly what the public would see too. The whole process of creating this website took no more than a few minutes of making choices in the Bridge Output workspace. You can see how really great the new templates are. If you've been waiting for a chance to get your own photos on the web, now it's super easy. Give it a try with the Web Gallery feature in Adobe Bridge CS4.
Get unlimited access to all courses for just $25/month.Become a member
180 Video lessons · 70237 Viewers
64 Video lessons · 92049 Viewers
86 Video lessons · 60297 Viewers
103 Video lessons · 28948 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.