12.3. Promoting Your Images on the Web By far the most efficient means of selling yourself and your work is getting it on the web as many ways as possible. That includes communicating with clients and potential clients with photo-illustrated e-mail newsletters, putting up your own web site, and getting your photos out to one or more stock agencies. 12.3.1. Optimize Images for Web Viewing If you're going to the trouble and expense of putting up a web portfolio, you're going to want as many people to view it as possible. You'll also want plenty of space for all of your best images. If your thumbnails don't appear instantlyor if people have to wait more than three or four seconds for the larger image to appearit is quite likely that your audience will quickly surf to someone else's web site. By the same token, if your pictures don't impress the viewer with their quality, it is unlikely that you'll get swamped with requests for assignments or orders for exhibition prints. You must learn to make the right compromises so that your portfolio will perform efficiently and still look stunning. Most of the routines for creating a web gallery, suggested further on in this chapter, automatically optimize your JPEGs at an acceptable level. Still, there will always be exceptionsand some of them may be truly glaring. (See Figures 12-25 and 12-26.) Every picture is different, and the same compression rules won't work for all of them. The automation programs choose a compression formula that works more often than not. Figure 12-25. This image was oversharpened and saved at low JPEG quality and resolution. It loads fast, but would you want to show it to an art director?. Figure 12-26. The same image as Figure 12-25when optimization is not an issue. Here's the most efficient workflow I've found for optimizing web photos: Using the Photoshop Browser (or an image management program that produces large thumbnails and lets you drag and drop), go to the folder where the auto-generated web portfolio has been stored. Open each image in Photoshop and examine it carefully. Make sure that each image is set at 100 percent magnification. If you can't see compression problems at normal magnification, neither can your audience. If an individual image seems just fine, simply close it without saving it. If it doesn't, minimize the window or drag it out of the way so that you can use it in the next step. When you have a set of images that you'd like to see improved, make a list of them and their dimensions and then close them. You are going to have to resize the originals and then do your own manual optimizations on each image. Minimize Photoshop and use your operating system's file browser in thumbnail mode to open the folder that contains the original JPEGs. Press Cmd/Ctrl and click on each image you want to reoptimize. Now create a new subfolder in a new browser window (Finder on the Mac) that uses the name of the original folder with "man-opt" appended to the end of the filename (this will tell you that the folder contains manually optimized files). Now drag the files that you wish to optimize into the new folder. Create an Action that will automatically resize the files in the new "man-opt" subfolder to the same size as was created automatically by the web gallery program you used. Be sure to save them with the same filenames and that the JPEG quality is set to the maximum of 12. Now run the Action and resize all the files in the subfolder. Click the Edit in ImageReady button at the bottom of the Tools palette. The on-screen interface will change to the ImageReady interface and you will see a series of tabs at the top of each image window. Start with the image on the top of the stack and click the 2-Up tab. You will see the original image on the left and the version that has been optimized according to the present Optimize palette settings on the right (see Figure 12-27). On the right side of the screen are several palettes; one of them should be the Optimize palette (if it's not there, choose Window Optimize). Figure 12-27. The Save for Web dialog with the Optimize palette on the right. Make adjustments in the Optimize palette and watch the results in the righthand image of the 2-Up window. Because you can immediately see the effects of your optimizations, you'll know when the result is of acceptable quality. When you reach that point, the next question will be whether the image will display quickly enough for your purposes. If you edit the image in ImageReady in Photoshop, you will see the Information menu in the status line at the bottom of the document window (see Figure 12-28). Since most people viewing my site will be professional buyers and gallery owners, and since high-speed Internet connections are now the rule rather than the exception, I generally go by how the image looks and how fast it loads at 512Mb, an average speed for DSL and cable high-speed Internet connections. I also look at its performance at 56 Kb, the typical speed for dial-up modem connections. If that speed is slower than 15 seconds, I will consider lowering the quality of the image. However, my rationale is that dial-up viewers are used to relatively poor performance and are willing to put up with it to some extent. Figure 12-28. The Information menu at the bottom of the document window. Once an image is optimized, save it to the same directory from which it was opened. When all the files have been optimized and saved, copy and paste them into the Image directory in the HTML folder that was created by the web gallery program. When the program asks if you want the new file to overwrite the original, click Yes.
Additional Tabs There are also tabs for showing only the optimized version of the file and for showing a 4-Up view that displays the original and three optimized views. You can then apply three different optimizations to the same original and choose the one you like best. |
12.3.2. Protecting Your Copyright with Watermarks Many expert photographers are afraid to put their photos on the Web for fear they'll be stolen and then used without pay or be claimed as the work of someone else. But giving up web exposure for your photography means giving up one of best ways of becoming known (especially if your career is just starting) and of communicating with clients. Also, web graphics are highly compressed and merely 72 dpi in resolution, which is so low that, even if an image is easily stolen, its use is pretty much limited to the Web anyway. You certainly couldn't make prints of high enough definition to have any commercial value, nor could you use the images in print publications (unless they were just used as small icons). Of course, it's still not a very pleasant idea that someone could use your image for their own web site or put it into their web portfolio and claim it as their own. And although there's no surefire way to prevent that, there is a way to prove the image is yours if it's stolen. At least, that could be grounds for a profitable lawsuit. The way to do this is to watermark your images. Watermarking places identification text over the surface of the image in such a way that it is not visible to the naked eye, but can be easily read by the appropriate softwareeven if the image has been cropped or otherwise modified. NOTE You can only watermark RGB images. If you want to watermark GIFs, you have to cheat by first converting the GIF to JPEG, embedding the watermark, and converting it back to GIF. The most widely usedand therefore easiest to verifywatermarking system at the time of this writing is Digimarc. Digimarc ships with Photoshop 5.5 and later, as well as with some other image editing programs such as PaintShop Pro. 12.3.2.1. Creating a watermark with specialized software Before you can actually watermark your images, you need to create and register your watermark with the company whose watermarking software you are using. Instructions for doing this will be included with the program. The following method shows you how to watermark your files using Digimarc from within either Photoshop or ImageReady. (Note that you must be online for this procedure to work.) Choose OtherDigimarc to bring up the Embed Watermark dialog (see Figure 12-29). Click the Personalize button. Figure 12-29. The Digimarc Embed Watermark dialog. The Personalize Digimarc ID dialog will appear (see Figure 12-30). You will first need to register with Digimarc, so click the Info button. Figure 12-30. The Personalize Digimarc ID dialog (the information shown in the fields is entirely fictitious). The Digimarc registration site will appear. You will see a chart of rates for different numbers of images. (These rates may inspire you to watermark only your most important images, but that's up to you.) Also note that for an additional charge, Digimarc can automatically search the Web for your watermarked images, which can be a very valuable service. Follow the instructions to register with Digimarc for the number of images you want to watermark. When you have finished registering, enter your Digimarc ID and PIN number in the appropriate fields in the Personalize Digimarc ID dialog and click OK. A new dialog will appear; fill in the required fields and click OK when complete.
Watermarking is an annual and not inconsequential expense. You can do it a little at a time, however, by adding new registrations whenever you have new images to watermark. 12.3.2.2. Creating a free watermark in Photoshop There is another free way to protect your images: use Photoshop (or any other layer-supporting image editor) to superimpose your copyright information over the image. Unlike the Digimarc watermark, these are readily visible. To do this, simply create a new transparent layer at the top of the Layers palette and then use the Text tool to type in any size and style that will fit inside the image frame. You can make the watermark semi-transparent by adjusting the layer's Transparency or Fill sliders. If you have lots of contrast in the print, use transparent type and a Layer Style that creates a dark edge (choose Window Layer Styles to get a thumbnail dialog that will automatically apply the style shown). This way, your watermark will be readable in both light and dark areas of the photo. There are two major drawbacks to such free watermarks: Still, it's good to have options, and you will probably discover situations in which these watermarks will work just fine. 12.3.3. Creating the Web Gallery Creating a web gallery is by far the most immediate and efficient way to show your portfolioyou can then post it on your own web site or on other sites that cater to photographers. There are also numerous sites that will allow you to display your web portfolio for the purpose of selling your prints. Best of all, Photoshop CS2 and Lightroom let you create web portfolios pretty much automatically. One of the things you can do with those portfolios is use them on your own web site. You could have a button on your home page for specific categories of work that you do. And each of those buttons could open a different portfolio. If you own your own web site domain, you can create different pages for different categories of photos. For example, you might want to have a link called "portfolios" or "photographs" on your main menu and have that link direct the viewer to another page listing different styles, types of subject matter, specific events, or what have you. Each of these topics could then link to an individual page. 12.3.3.1. Preparing the images for your gallery There are a number of additional considerations that you'll want to keep in mind if you're publishing your images on the Web. For example, your images may be perfectly exposed, color-balanced, and adjusted for viewing individually as prints. However, when you put them on a web site they're going to be viewed as part of a group, so it's ideal to have more uniform brightness, contrast, and color values between them. (For example, compare the three side-by-side photographs in both Figures 12-31 and 12-32.) You'll also want to crop and transform these images in such a way as to make them complement one another as much as possible. The difficult part is doing this efficiently to many images at once so you don't run into any holdups getting your site up and running. Figure 12-31. The original images as the camera saw them. Figure 12-32. After matching the exposure and contrast so that all three images have a uniform appearance. The solution to these issues lies in setting up a routine that is likely to produce the most pleasing and uniform results. Don't have one yet? No problem. Just use mine: First, gather all the files together and place them in individual folders that will hold the contents for each portfolio category. Use the Image Processor to save the files in each folder to JPEG format at the highest quality setting mode (12). This keeps the originals in excellent shape but also compresses them so that they will be easy to store on a CD. (It also makes them quick to render if the portfolio-making software has to resize and optimize them.) Feel free to add whatever other changes you need (e.g., color correction) to the images before you save them. Use the Photoshop File Browser to quickly compare images. Here, you can eliminate any duplicates, check to make sure all files are large enough for your purposes, and easily see which images require adjustments in color saturation, contrast, or brightness when seen in the context of the rest of the collection (Figure 12-33). Figure 12-33. Viewing the adjusted images in the Photoshop Browser after matching their exposure and contrast. If the files have coded names, go through all the images and give them names that will serve as titles. This will make it much easier to retitle images when you do the final editing on your gallery in your HTML editor (e.g., Macromedia Dreamweaver or Adobe GoLive).
Once you've done all this, use the Photoshop Browser to pick the images that are most in need of editing. Then use the following routine for each of those images: A Solid-Color Frame If you just want a quick, solid-color frame, record the following Action. First, choose Select All; choose ImageCanvas Size and increase the canvas size by half the number of pixels you want in the frame; choose EditStroke and enter a pixel width for the frame thats twice the desired width (the other half will be outside the current canvas); choose the color you want for the frame and click OK. Stop recording the Action. You can now play it for all the images you want to frame. |
Crop and transform the image to improve composition and straighten perspective. Use the Levels command to adjust the range and brightness of that image. Use the Curves command to tweak the brightness and contrast of the image, if needed. Use the Soft Light layer technique (and/or Photoshop Shadows/Highlights command) to extend the range of shadows where needed. Use a Brightness/Contrast adjustment layer for vignetting, burning, or dodging large areas. To do this, use the Lasso to select the general area and then feather the selection so that the Brightness/Contrast command will blend smoothly with the rest of the image. Use the Hue/Saturation command to bring the images' colors to life, if necessary. Consider preframing your images. The quickest way to do fancy framing is to pick a plug-in that automatically frames images, create an Action that preframes one image, and then use the Photoshop File Browser's AutomateBatch command to frame all the images in the gallery.
If you've followed the recommendations above, you'll find that most of the automated web gallery routines do a decent job of optimization on their own. (If they don't, see the "Optimize Images for Web Viewing" section earlier in this chapter for information on how to do it yourself.) Note, however, that what you'll actually be doing is optimizing the images individually and substituting them for the images automatically optimized by the web gallery application. 12.3.4. Put Together the Web Gallery Great web designers are expensive to hire and hard to find. Even if you do end up having someone else do most of your web design, it's a good idea to learn enough about it to speak knowledgeably to your designer and to have reasonable expectations. You'll probably end up creating web portfolios and email/CD portfolios in Photoshop or Lightroom since they are the applications you'll have at your disposal and they get better at it with each new version. However, it would be worth your while to examine all the products mentioned in this section because each one creates galleries (portfolios) in different styles and some of them have bigger style collections. For example, Figure 12-34 shows a web gallery dialog in Photoshop CS2. Figure 12-34. Creating web gallery created in Photoshop CS2. Creating the pages is the easy part; you can do it in either Photoshop (actually Version 6 and above), in Photoshop Elements 2-4, or in Lightroom, each of which offer different sets of gallery styles. The styles in Photoshop CS2 are much more professional and flexible than those in earlier versions. With a basic understanding of HTML, it is quite easy to customize any gallery you automatically create. Photoshop writes the end result in legal HTML code, which you can easily edit using the search and replace command in your HTML editor if you want to change the positioning, size, text style, or any other characteristic of an element. NOTE If you've followed my advice about keeping an original JPEG library for each gallery, you can even create larger image sizes in your editor. You'll know which image belongs in each frame, so just run Image Processor to re-size the originals to the size you want and then paste them into the large space specified in your edited version of the gallery. The following method will give you a good idea of how to create an automatic portfolio in Photoshop. By studying the screen shots, you'll see that you have quite a few modifiable style and format options. Use the keyword search capability in Bridge to locate, organize, and place the photos into any of the individual galleries. Once the search is completed, you'll see all of the thumbnails for the photos in the Bridge Workspace. Select all the images you want to include or (better yet) use a label color you rarely use for anything else or that you use to designate pictures to include in a project. Then use the Unfiltered menu to show only the images with that label. From the Bridge menu, choose ToolsPhotoshopWeb Gallery. The Web Photo Gallery dialog will open, as shown in Figure 12-35. Figure 12-35. The Web Photo Gallery dialog. Choose the Style you want to use. You'll get a preview of these styles each time you choose one, so you can go through the list until what you see is as close as possible to what you want. Actually, I'd suggest you choose about six images in the Browser and then create a test of each style. When the gallery opens, make a screen capture of each "page" in the gallery. Then paste the screen capture into a Photoshop New file with an 8x10 dimension at printer resolution. You can then put the gallery style, settings, and both the thumbnails and large image view on the same page and print out a catalog. You'll get a much better of what style you want to use for what purpose. Besides, you can show it to a client and let the client decide. Enter your email address in the email fieldunless you don't want any feedback from the people who view your gallery, or want to make it really difficult for them to contact you. Under Source Images, choose Folder as the source and click the Browse button to locate the folder into which you placed the images for the gallery. Be sure to uncheck the "Include all Subfolders" box unless you had a very odd way of storing your images. Next, click the Destination button, browse to the location where you want to place the finished web gallery and HTML code, and create a folder. Now comes the fun part: choose the Options settings that will allow you to customize your gallery. In Photoshop CS2, they appear as a set of configurable items inside the Options box that switch depending on which drop-down menu is selected (see Figure 12-36). Figure 12-36. The options in Photoshop Album's Web Photo Gallery dialog. Choose Banner from the Options tab or drop-down menu. In the Site Name field, enter the name as you want it to appear on your site. In the Photographer field, enter the name of the person or organization you would like to designate as the owner of the photo (e.g., yourself). You can actually enter any information you wish in any of the Banner Options fields. For instance, I put all my contact information in the Contact Info field, but if I want to include ordering instructions or comments about the photos, I write that information in the Date field. (I don't like to "date" my galleries, unless it's a private gallery for use by a specific client, where the creation date might be important. Note that the date is automatically entered in the date field by default, so be sure to delete it if you don't want that information there.) Finally, you can change the font style and size of the banner textjust be sure to choose a small enough font size that all your information will fit within the banner when the gallery is displayed on the Web. NOTE In order for the Titles Use settings to have any effect at all, you must have entered additional EXIF data in the File Browser for the images in your gallery before you start creating the gallery according to these instructions. To do this, open the source image folder in the Photoshop CS File Browser. Click the Metadata tab in the bottom left of the File Browser dialog and scroll down until you start to see pencil icons in the left columns, which indicate editable fields into which you can enter data. (Note that this does not work in Photoshop Elements 2.0.) Getting Feedback on Styles There are many noteworthy features in Photoshop Web Gallery command, such as gallery styles with the word "feedback" in their name. Choosing one of these styles creates a gallery with a feedback banner that appears beneath the large image. If the viewer clicks the feedback banner, a two-tab dialog appears. One tab says "Image Info" and the other says "Image Feedback." If the Image Info tab is clicked, all of the EXIF data for that image appearsprovided you have told the program to preserve EXIF data. If the Image Feedback tab is clicked, an email form appears. The viewer can click the email tab, type a name into the Explorer User Prompt dialog, and click OK. This opens the viewer's OS-assigned email editor. The viewer can then type an email message of any length and automatically mail it to the address assigned to that web gallery. |
Choose Large Images from the Options drop-down menu in Photoshop (see Figure 12-37). The options presented here tell Photoshop how to resample and resave your existing images for the Web. Happily, Photoshop does all the work for you, saving you much time and pain. These settings also allow you to customize the look of the currently chosen style. For example, you can automatically place borders around the images. Note that you can't choose the border color, but you can change the width of the border by entering a specific number of pixels in the Border Size field. You will also notice a Titles Use section with several checkboxes. This will extract the appropriate EXIF information about the photo and insert it into the title. Be sure to experiment to find the settings you like best. Figure 12-37. The Large Images options in the Web Photo Gallery dialog.
The Custom Colors tab or drop-down menu options will let you choose any color for the following items: Background, Text, Link, Banner, Active Link, and Visited Link. To change a color, simply click the color swatch for that item to bring up the standard Color Picker for your OS, and then follow the standard procedure for picking that color. The remaining options are self-explanatory and a matter of personal preference. You'll often find that the defaults are the best choices for a given style. When you click the OK button at the top right of the Web Photo Gallery dialog (regardless of which Options screen is showing), the program will do everything it needs to do to optimize and size both the thumbnail and large images, implement all the options for styling the gallery, store the images in the appropriate folder, and write all the HTML code needed to run the gallery on your web site. When it finishes doing all that, your default file browser will automatically open and your web gallery will appear. It will behave exactly as it does on the Web. NOTE Options vary for different gallery styles. So if I've mentioned making a change that you don't find in the style you pick, either pick another style or just don't worry about it. I believe it's important to use several different programs for creating automatic web galleries so that you can choose from a wider variety of prefab styles. That way, you can get some quick previews of a variety of visual alternatives. Most of these programs are quite inexpensive. Here's a few that I like:
iPhoto 06 (www.apple.com/ilife/iphoto) This Mac-only program has a new feature called Photocasting that Windows photographers will really yearn forif you email a gallery to a client and then change the gallery on your computer, it will automatically update on the computer you sent it to. Imagine the possibilities.
ImageRodeo (www.imagerodeo.com) This Mac-only program is by far the best and most versatile of all the products that automatically create web galleries. There are 15 templates that you can edit. You can also drag and drop to rearrange images in the gallery, delete the ones you don't want, and add your own HTML text and titles. Now, if someone would just make a program just like this for Windows, we'd all be happy. Here's the best partsometimes the best things in life really are free.
iView Media (www.iview-multimedia.com) This is a cross-platform, $49 program that does slide shows and web galleries. iView Media pro is $199 and gives you the added benefit of currently being the fastest and most efficient media management program for Windows.
ACDsee 8.0 (http://na.acdsystems.com) This excellent $49 image management software for Windows lets you create web galleries for both your own and for their own online image sharing service.
Thumbs Plus 7.0 (www.cerious.com) This Windows-only program comes in Professional ($89.95) and Standard ($49.95) versions. The program offers easy choices for background colors, generates easily editable HTML, and can be made to publish directly to your web site.
Express Thumbnail Creator (www.neowise.com) Thumbnail Creator is strictly for making thumbnail galleries and uses editable HTML. There's a free trial download. The program is $39.95.
Ulead PhotoImpact 11 (www.ulead.com) Windows only; not only does web galleries, but publishes web pages with interactive slide shows. In this latest version, you can edit your HTML galleries with JavaScript enhancements, according to the literature.
Ulead Photo Explorer 8 (www.ulead.com) For a mere $29.95, you get a program that creates web slide shows or web galleries. There's a lot of versatility here; you can change the background color of all the elements, choose font styles (but not, oddly, text color), and choose from a number of template layouts. There's only one style, but it is very clean and professional looking.
Corel Paint Shop Pro 10 (www.corel.com) This $79.95 package has many useful tricks up its sleeve. It will publish a single image to an HTML page, but doesn't create web galleries as a whole. It now comes with what used to be JASC PhotoAlbum, one of my favorites for automatic web gallery creation because it's intelligent enough to use the filenames as image titles without adding the file extension (which is usually one of the main reasons for editing the results of most other WYSIWYG HTML editors). You can also instantly add your own photos as backgroundsjust make them up in your image editing program and pop them in. The one issue I have is that there's no way to scale the thumbnails and gallery shots; hopefully this will change with the next upgrade. The last upgrade added a couple of new features, not least of which was very nice automatic web gallery creator with a set of 40 templates that create easily edited HTML pages. Windows only.
Roxio PhotoSuite 8 (www.roxio.com) This $29.95 program does a very complete job of letting you create and edit sites. The templates are oriented toward holidays and family photos and therefore do not look very commercial or business-like, but it is much easier to redesign various aspects of these templates than in most of the other programs. PhotoSuite also lets you send a web site as email, so you can make interactive attachments.
Extensis Portfolio 8 (www.extensis.com) Available for both Mac and PC, it can now automatically generate web galleries that automatically update as you add new images to a category. I haven't tested it yet, but this sounds like a photographer's dream come true.
Canto Cumulus (www.canto.com) Can export thumbnails to HTML, which is not the same as creating a web gallery. It creates a web page with thumbnails, but there's no obvious way to edit the page in Dreamweaver. A web publishing option for Cumulus, Web Publisher Pro, is available for $1,495. This add-on will publish in a Dreamweaver-compatible format and offers so many options that there's no room to cover them here. If you're interested in an industrial-strength solution, check out Canto's web site. A Good Way to Start Even if you want a very sophisticated design for your Web gallery, it's a good idea to start with a program that automatically creates it. This way, all the basic HTML is written and all the images are collected into the appropriate folders. You can then use a WYSIWYG HTML editor (such as Adobe Dreamweaver, Adobe GoLive, or Microsoft FrontPage) to open your site and tweak it from there. If you're familiar with Photoshop, a little practice makes it easy to change titles and captions, background colors and patterns, and text styles. |
Before You Start Handing Out CDs Be sure that the images on the CD are copyrighted and have all the pertinent metadata imbedded in them and that they are not print-quality size and resolution. I only give out DVDs that are 8x10 resolution JPEGs at no more than quality level 8. I also have a notice on the label that all images are copyright the owner and not licensed for publication. |
|
