Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise I'm going to introduce you to the Web Gallery function here inside the Output panel, and this is an absolutely great feature regardless of who you are, I think you're going to like it. But I want you to know its limitations. First of all the whole purpose behind Web Gallery is to generate a Web site based on the selected images here inside the Bridge, so that you can show off those images via the Internet of course to either existing clients or potential clients or friends or family members, that kind of thing and you will generate a freestanding Web site from scratch using this feature in record time, it goes very quickly.
However, you have to bear in mind a couple things, first of all there is not that many options inside the Web Gallery so whatever you create is going to have a very similar look and feel to what a lot of other folks have created out there. But of course your images will be unique. The other thing to bear in mind is that it's a freestanding site so all you get to do with it is check it out, customize it a little bit and then upload it to an FTP so that you can serve it out to the world. If what you really want to do is integrate your images into an existing Web site.
Let's say you have a blog site or something along those lines then you want to check out the next chapter which is where I discuss how to use the Save for Web command. All right, anyway here I am inside the Bridge pointed at the contents of the 11_printing folder. I have all eight images from Jason Stitt selected, I will switch over to Web Gallery, and notice this Web Gallery icon includes a little Flash logo which is demonstrating to you that nearly all of the templates that ship along with the Bridge are Flash-based templates, so you will need Flash in order to view these sites on the Web.
And the good news there is that if you don't have Flash, the Flash Player is a free application, and your browser will ask to install it automatically. The bad news is if you're not super- technically adept, and when I say this I mean let's say your clients aren't super-technically adept or your family members don't really know what they are doing with the computer. Why then you're going to be in- charge of a fair amount of tech-support? So you have to bear that in mind. If you don't want to have anything to do with that tech-support then here's your one exception, the HTML Gallery does not require Flash.
It doesn't have the same degree of interactivity either but it's good enough for most purposes, I have to say, and that's where we'll be starting. I do want you to notice these guys of the airtight options, very cool, very interactive designed by this guy named Felix Turner, and we'll be checking them out as well, but again they require Flash. All right. Let's start with HTML Gallery and we're not going to see any difference inside the Output Preview because again we have to click on Refresh Preview, nothing happens automatically here. So I'll go ahead and click on it and now we see a preview of the site here inside the Output Preview panel.
I want you to notice that it's called Adobe Web Gallery, so you are going to learn to change that and it just says My Photographs in Web Photo Gallery created by Adobe Bridge, that's nothing. None of that stuff will you want to keep in my opinion. So here is what I recommend you do. Let's start by going to Site Info, and notice right now the Style is set to Lightroom. That's the color scheme that's going on here all of these grays, really great color scheme in my opinion. You might want to switch to grays around and you can do that by clicking on this Color palette area and changing your colors as much as you want, but I recommend you stick with grays, that way your background is not competing with the colors inside your images.
I'm going to leave the colors alone but you can tweak them if you want to. Anyway I'm going to go to Site Info and as soon as I change anything here, for example, I'm going to go ahead and call this My Web Gallery or something incredibly creative like that, and then press the Tab key to advance to Gallery Caption. Notice Style has changed to Custom so we're going to have to save off our Style using this little Save button right there after we're done. But I just want you to notice you can't save your own settings if you like and you can't overwrite Adobe settings as well. All right.
Let's go ahead and call this caption something like Jason Stitt photos or something along those lines and About This Gallery, I could say, These are images from Jason Stitt, of course, I've got a typo right there you may notice. So let's go ahead and change that and then the Contact name well be his agent Jason and I have always gotten along quite famously, even though I must admit I've never met him. And my e-mail Address will be let's say firstname.lastname@example.org, I'm not sure if that e-mail works but we'll see, and then Copyright Info but of course, you remember how to enter a copyright symbol, right.
It's Alt, press and hold the Alt key here on the PC, dial-in 0169 on your keypad, release the Alt key, and of course it's Option+G on the Mac 2010 Jason Incorporated or something along those lines that works nicely, and then I'll go ahead and click on Appearance because I want change the way these items display here inside of my gallery, and by the way if you want to see what you just did might as well click on Refresh Preview in order to see your changes up there at the top of screen, nice.
All right, I'm going to click on this Ice Queen right here because I want you to see that we've got this file number that's listed at the top and then this caption at the bottom, and that is information that Photoshop is finding inside of the File Info, the metadata that's associated with this file. So I'll go ahead and click on Fake snow.jpg to select it independently, and then I'll go to the File menu and choose File Info or press Ctrl+I, Command+I on the Mac to bring up the File Info dialog box, and notice right there, Document Title is File Number: 14364993.
That's where it's getting that information and then Description is This is all that remains of her wealthy ex-husband, which is now appearing underneath the image. So all that stuff is found inside the image Document Title and Description, every one of these images includes that kind of information, and so that information will be displayed here inside the gallery as well. In other words before you create a Web Gallery, you probably want to go ahead and include that metadata along with your images. All right, notice back here at the Index, that we have these big numbers, I don't want those so I'm going to turn off Show Cell Numbers and I'm going to turn on File Names along with the Extension, that way my client likes something, they tell me what the file name is, I can find it very easily.
I'm going to change Preview Size as 600 pixels that will make the big images bigger still. And I want to go with four columns. I don't care about the rows because we only have eight images to work with in the first place here and let's go ahead and refresh the Preview once again and see what we've got. Oops I goofed. I only have one image, why is that? Because I only selected one image down here inside Content, oh dear! All right, I'll click on one Shift+ Click on the other in order to select them, like so, and then I'll click on Refresh Preview in order to see a bunch of the images, all eight of them.
And let's say I want Fake snow to appear before Dappled brickwork, and I want to change these two guys around as well. I come down here to the Content panel, click on her, let's say, drag her to this location then drag her to this location, then select them all once again and click Refresh Preview. And so you can actually manually sort the images down here on Content panel. You already know that, but that gets reflected here inside of the Standard HTML Gallery as well. And now I'm going to go ahead and save off my style by clicking on this little Save Style button and I will name it 4 col HTML, like so, because it is four columns and it's an HTML site after all, and then click Create, and we now have that style saved and ready to go in the future.
In the next exercise we are going to actually generate this HTML site and view it inside a browser.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42907 Viewers
119 Video lessons · 54241 Viewers
65 Video lessons · 14501 Viewers
113 Video lessons · 82889 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.