Gallery Site with Viewer Feedback

This complete site gives your viewers a way to communicate with you. Use it to show proofs or design comps to your clients and solicit their feedback. It's a snap to make using Photoshop's new and improved Web Photo Gallery. 1. Let Photoshop Do the Work for You In this project you'll use Photoshop's Web Photo Gallery feature to create a mulTIPage Web site, ready for upload to a Web server. This site displays thumbnails and larger versions of image files. Each large image has two pop-up areas. One gives viewers information about the image A. The other gathers Web viewers' feedback about your images B and incorporates the feedback in an email message to you. Creating this site is a completely automatic process. You don't have to know a thing about Web design or writing code. And you don't have to do anything special to prepare image files for inclusion in the site, other than attaching whatever file information you want to appear in the Image Info portion of the site (see sidebar). Read on to learn how to set up Photoshop to make this gallery site for you automatically. TIP Adding File Information. The project files you'll be using are Colin's award-winning Photoshop illustrations. They already contain copyright and other file information. Read the topic that follows this project to learn how to attach file information to your own files for use in a site like this one. 2. Select the Site Images Click the Toggle File Browser icon on the right side of Photoshop's Options bar to open the File Browser. Use the Folders panel A on the top left of the File Browser to navigate to the C04_02_art folder in the project files. The thumbnail area on the right side of the File Browser displays each of the image files in that folder. Command/Ctrl-click on the thumbnails to select the following six images for inclusion in the site: butterfly.tif camera.tif gameboy.jpg guitar.psd tentacles.jpg watch.tif Click the Flag icon at the top of the File Browser B to add a flag C to each of the selected images. Then choose Flagged Files D from the File Browser's Show menu to display only the images you flagged. Decide on the order in which you want the images to be displayed in the gallery site, and click and drag the thumbnails around the File Browser's preview pane E to reflect that order. Press Command/Ctrl-A to select all. TIP Image File Format. Your source images for the Web Photo Gallery can be in any color mode (RGB, CMYK, Grayscale) and format (PSD, TIFF, JPEG, GIF, PDF, AI, EPS, etc.) that can be compressed as a JPEG. 3. Open the Web Gallery Dialog Box Choose Automate>Web Photo Gallery from the menu bar at the top of the File Browser A. This opens the Web Photo Gallery dialog box B where you'll choose the parameters of your gallery site. (Alternatively, the Web Photo Gallery dialog box can be opened from the File>Automate menu in the main menu bar at the top of the screen.) This is a "sticky" dialog box that opens with the last settings you entered. Highlight and delete any old settings. Choose General Settings The Web Photo Gallery dialog box has several panels, each accessed from the Options pop-up menu A. The first is the General panel. Choose the following settings in that panel: Styles: Centered Frame 2 - Feedback B This is one of Photoshop's prebuilt Web Photo Gallery style templates. You'll see a small preview of this style on the right side of the dialog box C. The rest of the settings vary depending on which style you choose. Email: Enter your email address D. Your Web audience will use this address to send you email feedback about the images you display. Use any email box or alias you own. Use: Selected Images from File Browser E. The advantage of this choice is that it allows you to include images from anywhere on your hard drive, as long as they are currently displayed in your File Browser. If you choose Folder instead, you would have to prepare by putting all the images you plan to include in one folder. Destination: Click the Destination button F to open a destination dialog box. Create a new folder G to hold all the site files Photoshop will create for you, and click Choose. Leave the other settings in the General panel at their defaults, and leave the Web Photo Gallery dialog box open for the next step. 5. Set Banner Options Choose Banner A from the Options menu in the Web Photo Gallery dialog box. These settings determine the information that will appear in the small space at the top of the thumbnails in this design. Enter Portfolio in the Site Name field B and Colin Smith in the Photographer field C. Leave the Contact Info and Date fields blank if you want white space in your design. You don't have to comply with the labels on the Banner fields; they are only suggestions. You can type in anything that fits in the available space. Choose Large Image Settings Choose Large Images A from the Options menu to open more settings. These settings govern the display of the large images on the right side of the design. Set these fields as follows: Resize Images B: Add a checkmark and type 360 into the pixel size box. This sets the largest dimension of the images. The menu of presets automatically changes to Custom. Constrain C: Leave this set to Both to maintain the proportions of the images. JPEG Quality D: High (8) to ensure that each image looks its best when the program compresses the image as a JPEG. The File Size slider automatically changes. The trade-off for higher JPEG Quality is larger file size. Border Size: 1 E. This adds a narrow black border around each image to set it off from the background. Titles Use F: Check all. These appear in the Image Info pop-up window for each image. The information is taken from the File Info dialog box. Set Thumbnail Options Choose Thumbnails from the Options menu A. These settings determine how the thumbnails in the lefthand vertical bar will be displayed. Size B: Large. This sizes each thumbnail to fit proportionally within a 100–pixel square area. Border Size C: Leave this set to 0 so there will be no border around the thumbnails in the site. Titles Use D: Leave Filename checked to add the filename of each image next to its thumbnail. Choose Custom Colors Choose Custom Colors from the Options menu A Click in the Background field B to open the Color Picker. Check Web Colors Only, choose dark gray (R: 102, G: 102, B: 102), and click OK. This determines the background color of each page in the site. Click in the Banner field C.and choose white (R: 255, G: 255, B: 255) in the Color Picker. This sets the color of the vertical banner on the left of each page. Leave the other options at their defaults. Set Security Options Choose Security from the Options menu A. Here you can specify text that will appear on top of each large image to protect it from unauthorized use. We'll apply a custom copyright message. Set the options as follows: Content B: Custom Text. Custom Text C: Type © Colin Smith (pressing Option-G/typing Alt-0169 for the © symbol). Font: Helvetica and Font Size: 9 pt D. Color: White and Opacity: 50% E. This will give the copyright message a ghosted look so it doesn't interfere with the view of the image. Position: Bottom Right, and Rotate: 90 Degrees CW F to locate the copyright vertically along the right edge of each image. Complete the Site Click OK in the Web Photo Gallery dialog box to set Photoshop in motion creating your site. It resizes each image as a thumbnail and a large image, compresses the images as JPEGs, and writes the code for a complete Web site. In a few seconds a Web browser opens to the first page of the site. Preview the Site as a User Put yourself in the shoes of your Web audience for the steps that follow. In the Web browser, click on a thumbnail on the left A to see a large version of the corresponding image on the right B. Use the vertical scrollbar to scroll down to more thumbnails. Click on the Image Info tab C.to open a pop-up window displaying information about the selected image, including the file name and copyright information. This is information that we attached to each image in the File Info dialog box and the File Browser's Metadata panel.Learn how to prepare your own images with similar information in the topic that follows this project—Adding File Information to Images. Click Close D to close this pop-up window. Prepare Image Feedback In the Web browser, click on the Feedback tab A to open the Feedback pop-up window. Your Web viewers can use this window to approve and correspond with you about the images. Put a checkmark next to Approved B and type a message ordering a print in the box C. Then click Save Feedback D. This stores the message so that it can be combined with feedback on the other images before being automatically emailed to you—the site owner. You'll see a Save notation in the Feedback window E. Prepare Feedback on other Images Select another thumbnail in the Web browser and click the Feedback tab to provide feedback on that image A. Put a checkmark next to Other and write a message in the box. Click Save Feedback. Select a third thumbnail and prepare feedback the same way. This time click E-mail Feedback B. Type the name of a fictitious viewer in the JavaScript dialog box that opens and click OK. Email Feedback to the Site Owner The default mail program automatically opens with a message A from the viewer B addressed to the email address you entered earlier into the Web Photo Gallery dialog box. The message contains all of the viewer's feedback on the site images. The viewer can add to the message or send it as-is to you—the site owner—by simply clicking his mail program's Send button. As you can see, this built-in feedback makes it easy for viewers to communicate with you about the site and its images. CAUTION Save Your Gallery Site. Keep the site Photoshop made for you in a safe place. In the next Project, Wow Part-folio Site,you'll repurpose the site images, displaying them in a unique, custom-built inter face.

In this tutorial:

1. Web Site and Home Pages
2. Getting in the Game
3. Showing Off
4. Getting Serious
5. Create Game Site
6. Applying Patterns to Web Graphics
7. Web Pattern Recipes
8. Gallery Site with Viewer Feedback
9. Adding File Information to Images
10. Customizing a Web Photo Gallery
11. Portfolio Site
12. Information Site
13. Flash Splash Page