Automated Photoshop Web Gallery

Here's how to go about making an automated photo web gallery in photoshop. It's not the *prettiest* thing, but it's awesome for creating the template files (the pages, resize images, thumbnails, links, etc.) Basically, it does all of the grunt work for you so all that's left is the fun part!

Have fun with it!

~ daisey



examples for this tutorial:     sushi gallery  -   photo gallery  -   art gallery


1. Put all of the images you want in your gallery in one empty folder.


2. In Photoshop, choose File > Automate > Web Photo Gallery to get this window




3. First, select which layout you would like.
I generally choose horizontal (ex. sushi & photo gallery) or vertical (ex. art gallery) You will see the little example thumbnail of each layout style.


4. The 2nd dropdown box has the following options...


BANNER:
You *could* fill in all that stuff about title, photographer, date, blah, blah...
but i generally overwrite all of that later anyway once the template files are created.


GALLERY IMAGES:
You could put a border, or resize the images here.
For instance, in the sushi gallery, I knew I didn't want the images to be more than 300 px high. Sometimes, you may have to go back and resize images by hand according to your layout, but again, this is just setting up the template... doing the grunt work for you.


GALLERY THUMBNAILS:
I generally use a border of 1 for this. Later we'll set the active link color so you can tell which thumbnail you're currently looking at in the gallery.

I normally don't worry about the font size, face, etc because I'm just interested in the images themselves.

Set your thumbnail size (you can choose small, medium, large or custom)


CUSTOM COLORS:
Pick your background, text, link, etc colors.
Like I said, I normally do away with all the text anyway, but do what you need to do here for your own needs.

Ok, remember i said "later we'll set the active link color for the thumbnail borders" Well, this is where you pick a color for the active link... for the sushi gallery, i chose white. You can see when you click a thumbnail, it has a white border.

5. Now tell it where your images are (at the bottom of the screen) "Source"
Drill down to the folder where all of your images are located.


6. And where you'd like the files to go - "Destination"
It's best to create a new empty folder for this.




Photoshop will take it from here... as soon as you click okay, it will start chugging along, opening each image, resizing, saving, closing... something similar to a machine in the Willy Wonka and the Chocolate Factory. After about 2 minutes, Photoshop will just sit there (quite anti-climactic, I must say!)

Go to your "Destination" folder and you will see alll kinds of stuff in there now.

  • images (folder) - all of your resized gallery images
  • thumbnails (folder) - all of your little thumbnails
  • pages (folder) - each gallery image has it's own page
  • Index.htm - this is the one that has all of the thumbnails
  • FrameSet.htm - go ahead and view this one in your browser

Well congratulations! You did it!!


But wait! There's more...

Remember I said you can cuztomize it and use these as your template files?
Well, here's some tips on what you can do.



[ FrameSet.htm ]
First of all... get rid of that hideous frameborder... set it to "0"
You may also want to set scrollbars to "no" depending on your design.
Also, you might need to tweek the size of the frame pages to fit your needs.


[ Index.htm ]
You may want to reorganize the thumbnails...
For instance, in my galleries, I like to have all of my ducks in a row (and colums too!) Play around with your TD's and TR's until you have it the way you want it.


[ thumbnails ]
I like to use cropped pieces of the original image for my thumbnails. By default, photoshop just shrinks the entire image so you can't really tell what it is. Try this:
  • Open all of your gallery images in the images folder.

  • Create a new file, really big in size, like 600x600 px

  • fill the entire thing with black (or white) whatever your background color is

  • in the middle of that new file, select an area the size you want your thumbnails

  • delete the selected area -
    woo hoo! we're making a "jig"

  • Ctrl + Shift + I (invert selection)
    and copy... this is your jig.

  • paste your jig over one of your gallery images

  • slide it around until it lands somewhere that looks cool, you want to try to capture the most interesting part of the piece, like an eye or a corner, or a leaf, etc.

  • once you get it where you want it crop and save
    *be sure not to overwrite your gallery images!
    save these in your thumbnails folder*





[ pages ]
For each individual page, you will want to get rid of the "banner" across the top. That's where it sticks all of the info about photographer, date, file names, etc. It's not pretty, so get rid of it!

Be creative here... add your logo, or some fancy framework. You can get some ideas from my galleries to get you started... feel free to poke around in the code to see what's been changed and customized.



That's it!!

Once you get the hang of playing with the files it makes, your options are endless...

Go wild! Get crazy! Have fun with it!



If you have any questions or comments... please let me know.


PLEASE NOTE: Photoshop does not PUBLISH the files to your website. To do that, you will need to use an FTP program (such as WSFTP) or use your hosting account control panel.