Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The easy way to display your photos on the web is to make a Web Gallery in Adobe Bridge CS4, which as you know comes with Elements 8. You can start building that Web Gallery directly in Bridge CS4 or you can open images here into Elements and then there is a hook from Elements into the part of Bridge where you can build a Web Gallery. So, I am starting here with six images open in Elements' Full Edit workspace and I am going to switch those over to the Create workspace by clicking on the Purple Tab at the top of the panel on the right.
Now here in the Create workspace there is a list of projects you can create, including a Web Photo Gallery. So, I am going to click that and that opens Adobe Bridge, and it opens Bridge to the special output workspace where you can create a Web Photo Gallery. When the Web Photo Gallery button is enabled, as it is now, you'll see all of the controls here for creating that gallery. The first step is to choose a template for the Gallery, which I'll select from this Template menu. Most of these are Flash-based templates, except for the one at the bottom, the HTML Gallery.
I am going to use the first one, the Left Filmstrip template. Then I can go to the Style menu and I can choose the style of the photo thumbnails that will be in the Gallery. I'll leave that set to Medium Thumbnail. Now here is another thing that may trip you up. If you want to see what the Web Gallery is going to look like, now or at any time as you are setting the controls here, you need to click this button Refresh Preview. So, I am going to do that now and that creates a preview of the entire Web Gallery, and that preview will be displayed to the left of the output column in this Output Preview panel.
As you can see here, there are thumbnails on the left and as I click on different thumbnails, I get a transition in the Gallery area here to a larger version of that image. There is also a slideshow down here that I can start playing by clicking the Play button or I can move slide-by- slide by clicking the Forward arrow or the Back arrow here. So, this is all representing what your viewers will see in their Web Browsers when and if you publish this Web Gallery. I am going to stop this slideshow by clicking right here and now, I am going to go back over to the Output panel and now I'll go back to the Output panel.
There is another button here Preview in Browser. If I click that button, my default Web Browser will open with a preview of my Web Gallery here, and it works the same way that it did in Bridge. If I click the thumbnails, I get a transition to a larger version of the image here or I can play a slideshow down here. Now notice that there is some generic language up here, Adobe Web Gallery and My Photographs and Contact name.
I can customize this Web Gallery so that there is text here that makes sense for my particular situation. So, to do that I am going to close out of my Web Browser, by clicking this red button and back here in Bridge, I am going to go down to some of the other areas of the Output panel. Here in the Site Info area in the Gallery Title field, I can change Adobe Web Gallery to something customized for my Gallery. So, I'll click and type Kabili Gallery, and I can have a tagline, instead of My Photographs, I might type Union Station Photographs, because all of these were taken in the Union Station, train station in Los Angeles.
Now in the About This Gallery field I can type whatever I want. So, I can say, Photos by Jan Kabili, taken at Union Station in LA. Down here, I could put my Contact Name, which would appear here instead of the generic contact name. So, I'll type 'Jan Kabili'. I could put my E-mail Address here. Here I can add some Copyright Information, so I am going to press Option+G Key on my keyboard, to type a Copyright symbol and then I'll put my name again and the date.
And I can still down further using the scroll bar on the right, where I can change the colors in the default gallery, but I am going to leave those all the same. I could choose to Show File Names under the thumbnails over here. I could change the duration of slides, and if I scroll down further, I can change the name that will appear at the top of a Web Browser in the Title field. So, I'll change that to Kabili Gallery as well. When I am done with all those settings, I can choose either to save the completed Web Gallery to my hard drive, by clicking Save to Disk or if I happen to already have an FTP Server hosted by a web service and I know the upload information, I could click Upload here to directly upload the entire Web Gallery with all of its files to my Web Server.
If I don't have that information right now, that's fine. I'll just Save to Disk, which means save to my hard drive, and later I can use a separate FTP program to upload my Web Gallery to my own personal web server. When I save to disk I'll click the Browse button and I'll browse to my Desktop and I'll save my Web Gallery there, and then I'll click the Save button. Elements now creates my Web Gallery, writing HTML files and creating SWF files and optimizing the images and when it's all done, it tells me that it is and I can click OK.
I am going to stop that slideshow and you can see that all of the text is now customized from my particular Web Gallery. So, the next time that you want to create a website to show off your photos, try using the Web Gallery settings in the Output workspace in Adobe Bridge CS4.
Get unlimited access to all courses for just $25/month.Become a member
164 Video lessons · 48253 Viewers
64 Video lessons · 84234 Viewers
86 Video lessons · 54160 Viewers
148 Video lessons · 91057 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.