New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating web galleries in Bridge

From: Photoshop Elements 8 for Mac Essential Training

Video: Creating web galleries in Bridge

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.

Creating web galleries in Bridge

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.

Now, if I go out to my Desktop, I'll see a Kabili Gallery folder, if I double-click that to open it, I'll see an index.html file which is the first page of my website, and then in the resources folder, I'll see Flash files, this gallery.swf and loading.swf, some JavaScript files, some XML and all of that makes up my Web Gallery. If I want to view the Web Gallery, here in a Web Browser on my machine, I can double-click the index.html file and that will open my default Web Browser, which is Safari in my case, and let me see my entire working website, complete with all of the settings that I chose.

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.

Show transcript

This video is part of

Image for Photoshop Elements 8 for Mac Essential Training
Photoshop Elements 8 for Mac Essential Training

81 video lessons · 7157 viewers

Jan Kabili
Author

 
Expand all | Collapse all
  1. 2m 35s
    1. Welcome
      1m 18s
    2. Using the exercise files
      1m 17s
  2. 13m 0s
    1. Touring Elements
      7m 24s
    2. Starting from the Welcome screen
      5m 36s
  3. 16m 11s
    1. Importing photos from a camera
      8m 48s
    2. Dividing scanned photos
      3m 52s
    3. Capturing frames from video
      3m 31s
  4. 23m 13s
    1. Touring Bridge CS4
      7m 44s
    2. Opening files from Bridge into Elements
      5m 1s
    3. Rotating photos
      1m 17s
    4. Moving, deleting, and hiding photos
      4m 11s
    5. Renaming photos
      5m 0s
  5. 29m 16s
    1. Tagging photos with keywords
      6m 28s
    2. Rating and labeling photos
      5m 55s
    3. Sorting photos by filter
      6m 23s
    4. Finding photos
      4m 33s
    5. Organizing photos in Collections
      5m 57s
  6. 52m 52s
    1. Touring the Quick Fix workspace in the Editor
      8m 34s
    2. Applying Quick Fix lighting controls
      3m 33s
    3. Applying Quick Fix color controls
      6m 30s
    4. Applying Quick Fix sharpening
      3m 44s
    5. Using Quick Fix touchup tools
      7m 43s
    6. Fixing group shots in Guided Edit
      6m 25s
    7. Merging multiple exposures in Guided Edit
      7m 24s
    8. Applying the Scene Cleaner in Guided Edit
      6m 31s
    9. Running Automated Actions in Guided Edit
      2m 28s
  7. 30m 57s
    1. Touring the Full Edit workspace
      6m 5s
    2. Working with tabbed documents
      4m 28s
    3. Arranging panels
      4m 14s
    4. Using tools
      8m 15s
    5. Setting editing preferences
      3m 8s
    6. Adjusting color settings
      4m 47s
  8. 46m 0s
    1. Using Undo History
      6m 6s
    2. Zooming and navigating
      5m 38s
    3. Creating a blank file
      5m 43s
    4. Photo resizing and resolution
      8m 21s
    5. Enlarging the canvas
      3m 10s
    6. Cropping and straightening an image
      3m 12s
    7. Using the Recompose tool
      3m 23s
    8. Processing multiple files
      6m 16s
    9. Saving and formats
      4m 11s
  9. 23m 25s
    1. Understanding layers
      3m 30s
    2. Working in the Layers panel
      8m 53s
    3. Combining images with layer masks
      11m 2s
  10. 22m 24s
    1. Understanding selections
      3m 39s
    2. Manual selection tools
      7m 36s
    3. Automatic selection tools
      3m 9s
    4. Refining a selection
      3m 59s
    5. Modifying and saving selections
      4m 1s
  11. 55m 51s
    1. Using adjustment layers
      9m 21s
    2. Adding a Levels adjustment layer
      4m 49s
    3. Applying a Shadows/Highlights adjustment
      3m 24s
    4. Adding a Hue/Saturation adjustment layer
      5m 30s
    5. Adjusting with Color Curves
      4m 3s
    6. Removing a color cast
      3m 55s
    7. Correcting skin tone
      2m 10s
    8. Reducing digital noise
      3m 44s
    9. Sharpening photos
      9m 42s
    10. Working with raw photos
      9m 13s
  12. 18m 58s
    1. Using the Smart Brush tool
      5m 20s
    2. Using the Detail Smart Brush tool
      3m 30s
    3. Dodging and burning
      1m 49s
    4. Healing blemishes
      3m 51s
    5. Removing content with the Clone Stamp tool
      3m 15s
    6. Removing red-eye
      1m 13s
  13. 26m 26s
    1. Applying filters
      5m 6s
    2. Adding effects
      3m 0s
    3. Using layer styles
      3m 36s
    4. Using shapes
      8m 25s
    5. Using the Cookie Cutter tool
      2m 54s
    6. Converting color to black and white
      3m 25s
  14. 7m 35s
    1. Creating text
      4m 7s
    2. Editing text
      3m 28s
  15. 27m 26s
    1. Making a photo collage
      7m 15s
    2. Stitching a photo panorama
      3m 43s
    3. Saving for the web
      6m 40s
    4. Creating web galleries in Bridge
      6m 47s
    5. Creating a PDF slideshow
      3m 1s
  16. 4m 34s
    1. Printing photos and contact sheets
      2m 49s
    2. Sending photos by mail
      1m 45s
  17. 23s
    1. Goodbye
      23s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.