Web Photo Gallery

Here's a real-world scenario: Imagine that you're working on a video that needs some stock photos of the healthcare industry. Your clients provided you with a shot list, but they are across town and can't approve things until they come in tomorrow. After searching for the right stock photos, you've narrowed it down to 25 choices, about three per each shot needed. You could: (a) sit on your hands, (b) e-mail the client a bunch of attachments that are likely too big and will get stuck in their corporate firewall, or (c) just go ahead with your gut (and then redo things later).

Photoshop provides you with a fourth option: one of the hugest time-savers of all, the Web Photo Gallery feature. After a couple of clicks, Photoshop can take an entire folder of images, instantly resize them for the Web, author a preview page complete with thumbnails, and set up the whole site while you take a break. Don't worry; it's perfectly safe and leaves your original files and layers intact. Just think

of the timesavings. You can e-mail the whole folder to your client or post it to your company's site with a blind link. (The folder is there, but there is no visual link on your Web site's home page; customers access it through a text link you send them.)

Best of all, Photoshop offers templates for gathering client comments. Be sure to check out the feedback templates, which create elaborate (but easy to use) Web pages. You can use these styles to collect precise client comments on a project's images. These comments are then e-mailed directly back to you so you can integrate the feedback into your show. Let's give it a try.

Step 1. Choose File > Automate > Web Photo Gallery.

Step 2. Specify the site's appearance:

• Choose a style from the pop-up menu. For this sample, choose one of the Feedback templates.

• Enter an e-mail or other contact info to be displayed on the page.

• Choose an extension (.htm or .html) for your pages. To determine which one, look at your corporate page. The .htm is more likely these days.

Step 3. Under Folders, specify the image source:

• Choose or Browse to identify the folder that contains the images you need. Don't worry about making copies first, the originals will not be permanently modified. You can reuse the PDF presentation images to try the Web Gallery out.

Storyboards Plus

^ Use the Web Gallery for fQi dynamic storyboards.

Customize It

^ Photoshop gives you several templates to choose from for use in the Web Photo Gallery command. If you know HTML, or if you have a Web developer on you can use a customized style for pages that feature your company logo and colors.

• Include All Subdirectories if there are folders inside your targeted folder.

• Specify the destination. You cannot save the images into the same folder they came from, because this would cause an endless loop. Specify a final destination.

Step 4. Modify the banner options with the rest of the site information that you want displayed.

• For Site Name, enter the project's name.

• For Photographer, enter your client's name.

• For Contact Info, tell the client whom to call with questions.

• For Date, enter the date that the page was built or modified.

• Specify fonts and font size. Remember, the default Web sizes on Macs and PCs differ. Text that looks just right on a Mac will be significantly bigger on a PC.

Step 5. Choose Large Images from the Options pop-up menu and specify how big the display images should be. A higher-quality JPEG will take up more space and take longer to load. A setting of 6 to 8 is usually sufficient for preview purposes. Be sure to tell Photoshop to display the file name as a caption so that you and your clients are speaking the same language when they call.

Step 6. Next, modify the thumbnails from the Options pop-up menu. Choose a size for the thumbnails, and then specify how many columns and rows that you want on each index page (if the style you choose uses index pages).

Step 7. If you want, modify the colors for the page.

Step 8. You can add a watermark over each image (such as Confidential or For Approval Purposes) by choosing Security from the Options pop-up menu.

When you run the automation, Photoshop will go into autopilot and begin building the site. In the destination folder, you will find an image's subfolder, a thumbnail subfolder, an htm sub-folder, and an index page. The index page should be opened in a standard browser to view the preview site (or lightbox).

Posting Animations

Looking for a way to post animations on a Web page for clients with very low-bandwidth connections? I have found that the Web Photo Gallery works well for those clients who are stuck on dialup or mobile phones.

Step 1. In After Effects you can change a composition's setting to be 2 frames per second. This technique can also be used as a way to get an animation's storyboard approval. You can render out a PICT or TARGA sequence, then post two or three frames from each second to a thumbnail page.

Step 2. Add the Composition to the Render Queue.

Step 3. Specify a target folder and output an image sequence.

Step 4. Return to Photoshop and use the Web Photo Gallery feature.

If you don't have access to After Effects, many applications can output an image sequence. In fact, QuickTime Pro can convert a .mov file into an image sequence. Just be sure to throw away the frames that you don't want before creating a gallery.

The Web browser is an easy way to show your clients animations or storyboards, especially if your client has a slower-speed Internet connection or is traveling.

Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook

Post a comment