How to: Create a Web Photo gallery in 5 mins

galery shot

On this guide you will learn how to create a Web Photo gallery (Flash or pure HTML) in 5 minutes using Adobe Bridge and Adobe Photoshop. No Flash knowledge is needed!

  1. Create a folder on your computer and name it as you like (here you will store your final files that need to be uploaded to your web site).
  2. Open Adobe Bridge and navigate to the folder that contains the pics you are going to use. Using control (for PCs) or command (for Macs) select the images you want.

    shot1

  3. Click on tools -> Create Metadata Template. Fill in the fields you want and click save.
  4. After the Metadata info is saved, click on tools -> Photoshop -> Web Photo Gallery.
  5. When Photoshop loads, an option window opens. Choose in the first field any style you like (in the demo I used Flash-Gallery 2), but there are many. Previews are shown on the right.
  6. On the “use” field in source images select “Selected Images From Bridge”. Select “include all subfolders” if your photos are placed in many folders.
  7. Fill the”destination” field with the folder you created in step 1.
  8. In options tab, modify banner, colors and image sizes as you like.

    shot2

  9. In the security option tab you can write something that will appear over your pics, to inform visitors that they are copyrighted and to ensure that they will not be usable in case of copy.
  10. After filling the option tabs click OK to create your Photo Gallery. If you want a soundtrack to play on the background, choose a .mp3 file, rename it as “useraudio”.mp3 and place it in the folder you created in step 1.
  11. Upload the folder (yes the one you created in step 1 🙂 ) to your server, navigate there and enjoy!
  12. If you want to check your gallery locally, open the index.html file.

Note that if you use audio soundtrack, it is preferable that the audio file will be small to ensure fast loading times. Click here to see the demo galley in action.

7 thoughts on “How to: Create a Web Photo gallery in 5 mins

  1. Jim

    Great overview, thanks.

    I would like to take the output and incorporate it into a WordPress post. Any tricks on how to take the index.html and put it into a WordPress post? Do you have to manually edit all the file references? Any help appreciated.

  2. Nikos Typpz Post author

    @Jim: You can put the output anywhere by just puting the Flash object code (or embed but it does not validate as XHTML). The code is just like the one you use when you embed youtube videos!

Leave a Reply

Your email address will not be published. Required fields are marked *