Photoshop Tip: Using Photoshop to Create a Web Gallery

PHOTOSHOP TIP: Using Photoshop to Create a Web Photo Gallery
By Susan Seiling

In 1997, when I began making websites for photographers, creating web portfolios was tedious and time consuming. I would use action scripts to size down two sets of images—a thumbnail set, and a larger sized set—and then manually create the web pages using the very basic web page creation software available at the time—Claris HomePage. Though the process was slow-going, it allowed me to create effective web portfolios for many photographers and businesses.

Thankfully, the industry has advanced significantly in the past 6 years. Many graphic design and web design software packages include a feature that allow you to create a web photo gallery easily and quickly. There are countless ways to create a web portfolio, but few are easier than using Photoshop 7 to do most of the work for you--then using an HTML editor (such as Dreamweaver or Front Page) to customize the pages. This is how I create all of the galleries you see on West Coast Imaging’s website--including the portfolios in our featured artist section and our staff portfolios. A task that would take me hours to implement in 1997 now takes a matter of minutes using Photoshop’s "Web Photo Gallery" automated feature.

This Photoshop Tip walks you through how I do it.

Part One: Prepare your images

Choose which images you want to appear in your online portfolio.
Size them down so Photoshop can easily and quickly process them. I usually size them down to 640x480 at 72dpi. I then save the new files under a different name. This ensures that I don't overwrite the original file with the new, smaller image.
Make sure your images are in sRGB, otherwise your images may look washed out after Photoshop is done processing them. Read a previous Photoshop tip that walks you through how to do this.
Put all of your new small images into a single folder. Photoshop will use all of the images in this folder to create your web gallery.
Open each image and go to File/File Info. Photoshop will allow you to enter in a vast amount of information about each image. It will then take that information and incorporate it into your web gallery, if you wish. The specific areas it can incorporate into your web portfolio are:

Under the "general" pulldown menu:
- Title (The title of your image)
- Copyright Status (Whether your image is copyrighted or not)
- Copyright Notice (Copyright information, such as the date and the copyright icon ©)
- Caption: (A caption that explains your photo)

Under the "origin" pulldown menu:

Credit: (Your name, or the photographer’s name who took the photograph).

Whether you enter in this information or not is optional—think about what you want to appear beneath your photos in your gallery, and fill in the appropriate fields.

Part Two: Create Your Web Photo Gallery

Launch Photoshop, and go to File/Automate/Web Photo Gallery. A dialog box like the one below will appear. The information you enter into this dialog box will affect how your online portfolio will look and what information it will include. It allows a great amount of customization.

Styles:
Your first step is to choose a style for your photo gallery. There are many different layouts and ways of structuring your gallery, and which style you choose is up to you and your aesthetics. Scroll through the drop down menu (pictured below), and watch the image on the right side of the dialog box change with each style.

Do you want a basic page that shows small thumbnails of your images, which you can then click to view a separate page with a bigger version of the image? Then choose "simple."

Do you want your thumbnail images to appear in a scroll bar—and when you click on the thumbnail, the larger version of the image appears in the main part of the screen? Click one of the many "horizontal" or "vertical" options.

Pick the style you like most from the drop down menu.

Email:
If you want your page to include your email address, type it in here.

Extension:
It’s up to you whether you choose .htm or .html. Any decent web browser can read both types, and it really makes no difference.

Choose:
Click this button and locate the folder with all of your source images in it—the images that you prepared for your online gallery in Part One, above.

Include All Subfolders:
If your folder of images includes subfolders that you want Photoshop to include in your portfolio (such as a separate folder for vertical and horizontal images), then check this box. Otherwise, leave it unchecked.

Destination:
Click this button to choose the destination of the web pages and JPEGs that Photoshop will automatically create for you. This should be a separate folder then where your source files are located. I usually create a new folder on my desktop—or I create a new folder within the local copy of the website I’m working on. Creating a new folder is better than saving your images into an existing folder in your website, as Photoshop creates generic names for its HTML files (such as index.html and index_2.html). Creating a new folder ensures that you won’t overwrite pre-existing files.

Part Three: Customize Elements On Your Website

You will see a pulldown menu (pictured below) with the following options: Banner; Large Images; Thumbnails; Custom Colors; and Security. Scroll through each section of the menu to customize each area.

Banner:
The banner is the section at the top of your web page. Anything you type into the boxes on this dialog box (such as the site name, the photographer, contact info, etc.) will show on the top of your pages. You can type in all of the pages, or none of them.

Font: Choose a font from the list

Font Size: Choose a size from the list. I usually use "2"

Large Images:
Photoshop automatically creates a page for each image in your portfolio.The information you enter into this section will affect how the pages featuring your individual images will appear.

Resize Image Box:
If the images in your source folder are sized to how you want them to appear, and they do not need to be resized, then UNCHECK the resize images box.

If Photoshop needs to resize your images, then CHECK the resize images box. Several fields will become available for entry:

Choose the size- I usually use "medium" (350 pixels) or "large" (450 pixels). If you would like your image to be larger, or an odd size, you can choose "custom" and type in the size on the dialog box to the right.
Constrain – Choose "both". Otherwise, Photoshop will resize only one side of your photograph, which will make your image look either squished or stretched out.
JPEG quality – I usually choose "high" or "maximum." This creates a larger file size, but the increased quality is worth the slightly longer download time—especially since so many people have high speed internet connections.

Border Size:
If you want a border to appear around your image, enter the size here. If I use a border, then I usually enter "1".

Titles Use:
Remember how you entered information into the "file info" field on each image? This is where your prep work comes in handy. Check whatever boxes you desire to include the information on your images web page. The information will appear centered beneath the image.

Font:
Choose a font from the list

Font Size:
Choose the size of the font. I usually use "2".

Thumbnails:
This area controls how your thumbnail images will be sized, and how they will appear on your web page.

Size:
Choose how large you want your thumbnails to appear. I usually enter a custom size of 250 pixels.

Rows and Columns:
Choose how you want your thumbnails to appear on your page. Do you want 3 images in one row? Then enter "3" columns and "1" row. Do you want 3 rows of 3 images? Then enter "3" columns and "3" rows.

Border Size:
If you want a border around your images, enter the size of the border. When I use a border, I usually enter a size of "1"

Titles:
You can feature information from the "file info" field of each image on your thumbnail pages. Check whatever boxes you desire to include for each image. The information will appear centered beneath each small thumbnail image.

Font:
Choose a font

Font Size:
Choose a font size. I usually choose "2".

Custom Colors:
You can customize the colors of your background, text, links, etc. in this area. This is a handy feature that allows you to match elements of your web page to your logo or to the rest of your website.

Security:
Many photographers use this feature, which embeds words or text over the image. The thought is that this will prevent people from lifting your image from your page, and using on their own website. I, personally, find this feature to be very distracting, especially since most web files are so tiny, they can’t be used for making prints larger than a postage stamp. This, combined with the fact that people can still lift and use your images means that the security feature is more like a cheap lock on a suitcase—it may deter a thief, but someone who really wants to steal from you will do it anyway.

You can choose from the following security options:

None (This is the default - nothing will appear over your image)
Custom text (whatever text you want to type, such as "Don’t steal this photo."
File Name (Photoshop uses the actual name of the image file)
Information pulled from the "file info" area on your image file, including copyright, caption, credits or title.

Font:
Choose the font you would like to use.

Font Size:
Choose the font size. If you want the security message to appear large, then enter a large font size, such as 24 or 36. If you want it to be small and subtle, choose a smaller size.

Color and Opacity:
Choose the color and opacity of the security text.

Position:
Choose where you want the text to appear on the image.

Rotate:
If you want the text to be rotated, select an option from this dialog box.

Part Four: Watch Photoshop Do Its Magic

FINALLY you are done entering in the information required to make your web gallery. Click "OK" and watch Photoshop automatically create your gallery.

Part Five : Check Your Work

Now, you're ready to check your work. Find the "destination folder" on your hard drive, and open up one of the html pages to view the results.

If you don’t like how the portfolio looks, throw all of the files Photoshop just created in the trash, and start over again—it only takes a few minutes. It’s common for me to retweak a gallery of images 3 or 4 times before coming up with a result that pleases me.

You can then post the portfolio as-is online, or you can further customize the pages by using a web editing program like Macromedia Dreamweaver, Microsoft Front Page or Adobe GoLive.