[an error occurred while processing this directive]
Adobe
Tutorials
Create Web photo galleries
Want to organize your images into an online gallery? Need to put together a quick portfolio for a prospective client to view? Learn how the Web Photo Gallery tool in Adobe® Photoshop® 7.0 generates a gallery with easy navigation for viewing your images in a browser.
main
1. Set up your image files.
Make sure the images you want to use are in one folder, and create a destination folder to contain all of the HTML and image files generated for your Web gallery. You can give these two folders any names you want. (In our example, we named them Source and Destination to make it easier for you to identify the folder we mean when we refer to them.)
   
 
step01_int
2. Choose a style for your photo gallery.
Choose File > Automate > Web Photo Gallery to open the Web Photo Gallery dialog box. Select the format for your gallery from the Styles pop-up menu. A sample preview of each style is displayed on the right side of the dialog box.
   
 
step02_int
3. Set up your banner.
Choose Banner in the Options pop-up menu in the Web Photo Gallery dialog box, and type the title of your gallery in the Site Name field. Use the Font and Font Size pop-up menus to specify the text appearance in your banner. (We used Arial at the default size of 3.) Now take a moment to decide whether you want to add borders around your images, whether you want to resize them or not, and what level of optimization you want. You'll specify those settings in the next step.
   
 
step03_int
4. Define the look of thumbnails and captions.
Choose Thumbnails from the Options pop-up menu. If you want to use the filename as the caption, select Filename under the Titles Use option. If you prefer to display caption text drawn from the File Info dialog box, select the Caption option.
   
5. Determine how your images are displayed.
Choose Large Images from the Options pop-up menu, and enter the Border Size you want. (We didn't want borders, so we entered 0 pixels.) If you don't want your images to be resized, deselect Resize Images. Finally, use the slider bar to set the JPEG Quality.
   
 
step05_int
6. Add color to your gallery.
To change the background of your Web gallery from the default white, choose Custom Colors from the Options pop-up menu, and use the Adobe Color Picker to make any color changes. You can also specify the color of the text and links.
   
 
step06_int
7. Specify your Security settings.
Choose Security from the Options pop-up menu to set options to display text over each image as an anti-theft deterrent. To display the image's file information, choose Copyright from the Content pop-up menu. To display customized text, choose Custom Text from the Content pop-up menu and type in the Custom Text field. You can adjust the font, font size, color, opacity, position, and orientation of the security information.
   
8. Choose your source and destination folders.
Click the Browse (Windows) or Choose (Mac OS) button in the Web Photo Gallery dialog box to locate your source folder. Then click the Destination button to select destination folder for your Web gallery. (These are the folders you set up in step 1.)
   
 
step08_int
9. View your gallery in a browser.
After you click OK to close the Web Photo Gallery dialog box, Photoshop generates your Web gallery. The HTML files and JPEGs for your Web gallery are placed in the destination folder. Once the process is finished, Photoshop launches your browser to display your Web photo gallery.
   
 
step09_int
10. Modify a style if you want to.
If you know HTML, you can open a Web photo gallery style template in a text editor and customize it to contain the font, colors, and formatting you want. Each Web Photo Gallery style has a set of HTML template files, located in the WebContactSheet folder of the Photoshop 7.0 Presets folder. When you open a template file, you'll see tokens in addition to the HTML tags. Tokens are text strings that are replaced by Photoshop when its corresponding option is set in the Web Photo Gallery dialog box. To customize the style, edit the HTML and the tokens in a template file. When you save the edits, your new style appears in the Styles pop-up menu.