MULTIMEDIA EXPLORATIONS
The World Wide Web has become more than a bulletin board for posting simple galleries of text and images. It has evolved into a rich, experimental platform for combining still
photos with video, text, audio, and graphics to create complex visual stories. These multimedia presentations challenge our conventional notions of photography while simultaneously allowing photographers great freedom to tell broader, more dynamic stories than a single still image can convey. Although a print is still considered the purest presentation of photography, multimedia is deeply engaging, informing and entertaining audiences around the world.
Dubois Badlands, Dubois, Wyoming. Olympus E-3, 12–60mm lens 1/25 second at f22, ISO 100
476
Multimedia photo presentations are nothing new—photographers have created multi-carousel slideshows for many years—but the Internet has emerged as a sophisticated publishing platform for photographers to realize ideas that cannot be conveyed with
a single photo or static set of slides. For example, compare the differences between a slideshow of your friend’s trip to Italy
with a series of static slides, versus an online presentation incorporating the same photos and adding ambient sounds of the waters in the canals lapping at the hulls of Venetian gondolas, the banter and ambient sounds of a lively café in Milan, and a map allowing you to follow each day’s travels.
Because this discipline of photography is a state of flux, and
Types of Multimedia
Publishing
Today, several distinctly different forms of multimedia publishing are available. I’ll walk you through the options, from the simplest to the most complex.
Preparing Images for the Web
The simplest means by which to begin publishing your photos online is to upload your photos to an online sharing site such as Flickr.com, Snapfish.com, or Shutterfly.com. These sites handle all the technical details associated with web publishing, from creating the HTML pages to hosting the website. All you need to do is upload a folder of images from your computer and you’re published online.
On the Web
multimedia presentations don’t
lend themselves to the printed page, I’ll concentrate on describing the tools for multimedia production, the types of presentations, and accessible means of publishing your multimedia work online. On our companion website, www
.perfectdigitalphotography.com/ multimedia.php, you’ll find more information on multimedia publishing and dozens of links to our favorite multimedia presentations.
The possibilities provided by multimedia publishing makes this an exciting, and possibly lucrative, time to be a photographer.
Although these sites take care of all the technical details associated with web publishing, you’ll want to perform a few
simple preparatory steps to get the best results and make your photos more web-friendly.
For example, you’ll have better image quality and your upload will progress more quickly if you resize your photos and convert them to the sRGB color space prior to uploading. You will also need to save your photos in the JPEG format before uploading, as most photo- sharing sites cannot accept camera raw files
or files in the TIFF or PSD format. You can use the Save As command, demonstrated in Chapter 17, or use Photoshop’s Save for Web & Devices command.
To get started with online photo sharing, check out these popular sites:
■ Flickr www.flickr.com
■ SmugMug www.smugmug.com
■ Photo.net http://photo.net
■ BetterPhoto.com www.betterphoto.com
Resize Images
To ensure that your photos upload quickly and display correctly, you should resize your photos from their native resolution to a size more appropriate for display online. Many websites list technical specifications and preferred image sizes. If not, resize your images to 800 × 600 pixels for web galleries or 1024 × 768 for galleries that allow you to display your images in a full-screen mode. This size is large
enough to display beautifully at any screen size, while being small enough to upload relatively quickly.
In Lightroom, resize your images during the export process. Specify width and height in the Image Sizing portion of the Export dialog. Set the Resolution to 100 pixels per inch.
In Photoshop, use the Image Size command (Image > Image Size) to downsample your image to the correct size. Be sure Resample Image is checked and select Bicubic or Bicubic Sharper for your Resampling method.
After resizing, sharpen your image at the final output size for the best quality.
477
478 Convert to sRGB
Currently, the Web lacks widespread
On the Web
support for color
management. Unfortunately, this ensures that your photos will look slightly different on every monitor. Currently, only Safari and Firefox 3 and later versions honor ICC profiles embedded in digital photos. You can
test your browser’s color management capability by visiting www.perfectdigitalphotography.com/ multimedia.php.
The best approach for the Web is to convert your photos to the sRGB color space before posting them online. The sRGB color space will offer a reasonable match to the monitors of most of your site’s visitors.
Although this won’t guarantee that your photos will appear exactly as you intended, it will bring them closer to the ideal.
In Lightroom, select the sRGB color space from the File Settings portion of the Export dialog. Lightroom will convert your original file to sRGB during the export process.
In Photoshop, use the Convert to Profile command (Edit > Convert to Profile) to convert from Adobe RGB 1998 to sRGB.
Make sure Use Black Point Compensation is checked along with Flatten Image to Preserve Appearance.
Save as JPEG
Most web browsers support three types of image file formats: JPEG, GIF, and PNG. Of these three, the JPEG format is the most widely supported and offers the best image
quality. As you’ll remember from Chapter 17, the JPEG format saves space on your hard drive by compressing the pixel information in your photo. The amount of compression applied to your photo is determined by the
Quality setting. The higher the Quality setting, the less compression will be applied to your image. This will result in an image with good quality but a large file size, making for a slow download. An image with a low Quality setting will be heavily compressed and have
a small file size. Although it will download quickly, it won’t look very good, as the heavy compression eliminates details, making a photo appear blocky and unnatural.
A JPEG image with a high Quality setting
Whenever you save an image in JPEG format, you are forced to choose between a small file size for quick download or a high image quality. Since most web visitors in the United States and Europe are using high- speed, broadband Internet connections, it is probably safe to use a larger file size because the difference in download time likely will be minimal to the user.
In Lightroom, select the JPEG Format and Quality settings in the File Settings portion of the Export dialog. For most images, a Quality setting of 70–80 strikes a nice balance between file size and image quality.
479
A JPEG image with a low Quality setting
In Photoshop, select File > Save As to save your photo in the JPEG format and prevent overwriting your full resolution photo. In the Save As dialog, select JPEG from the Format pull-down menu, then click Save.
480
In the next dialog box, choose your Quality setting. Use the image preview to see the effect different quality settings will have on your image quality. The expected file size is listed below the Preview checkbox. This
is useful for balancing file size with image quality, as decreasing the Quality sometimes has a minimal effect on file size. In these cases, use the higher Quality setting.
Publishing Web Galleries from Lightroom
It is hard to beat the ease of publishing photos to a photo-sharing site, but you are limited to the gallery displays created by the site, and you cannot host photos on your own web domain. This can be limiting if you are a professional or semi-pro photographer who wants to publish
a promotional gallery of your best work or a gallery from a recent photo shoot for a client. Fortunately, Lightroom makes it easy to publish professional-looking web galleries of your work with minimal effort.
Tip Before you can publish your web galleries, you need to have a web-hosting account to store the files used in your web gallery and make them accessible online. If you have a website with a personalized domain name, such as www.yourcompanyname.com, you can publish your web galleries to this hosting account. If you don’t have a web-hosting account, check to see if your Internet service provider (ISP) includes
a personalized domain for storing your files. If not, you can choose from hundreds of different web-hosting companies. One of my favorites is MediaTemple at www.mediatemple.net.You’ll need to gather some basic information from your web host to publish your web galleries and make them accessible on the Web. I’ll cover the specifics after you create your web gallery.
Before you create your web gallery, you’ll want to select the images for your gallery and store them in a collection. This allows you to arrange the order in which images will appear in your gallery manually and edit your gallery to the very best images.
Newspapers conducting research on visitors to their online slideshows find that viewers tend to lose interest with a slideshow of more than 15 images. To keep your viewers engaged and interested, I recommend publishing no more than 15 images in a
single gallery. You can always publish multiple galleries, each covering a different topic. You’re better off leaving your viewers eagerly wanting to see more of your photography than having them wearily click through a 100-image slideshow.
Once your images are edited and sequenced inside a collection, enter Lightroom’s Web module to begin preparing your web gallery. The images from your collection should appear in the Filmstrip at the bottom of the screen. If not, be sure your collection is selected from the Collections panel on the left side of the screen.
Step 1 Like most procedures in Lightroom, you’ll follow a clockwise rotation through the module’s options, beginning in the top-right corner. Here, in the Engine panel, select the
template design Lightroom will
use for your web gallery. Choose between HTML-based and Flash-based templates. Both HTML and Flash are widely supported on all web browsers, but Flash is not supported on all mobile browsers. If you think users may be visiting your site with mobile devices, such as a cell phone, you might decide to use an HTML-based template.
Step 2 Select a template from the Engine panel, and Lightroom begins creating a preview gallery in the main window using images from your collections. For my gallery, I’m using the Airtight SimpleViewer.
The options you see in the following panels may vary depending on the template you choose for your gallery.
Step 3 Enter your name or Site Title in the Site Info panel. Your site name will appear at the top of the viewer’s browser window and will serve as a descriptive clue to the gallery’s contents.
481
482
Step 4 The Color Palette panel allows you to customize the color scheme used for your web gallery. The Background, Border, and Text colors can all be modified from their defaults to match your site’s existing color scheme, or set to colors of your choosing.
Tip Looking for color inspiration? Visit the Adobe Kuler site at www.adobe.com/ products/kuler/ to view a broad range of prebuilt color palettes, or to generate your own color palette using common color relationships.
Typically, when I’m creating a web gallery, I try and keep the colors in the gallery subtle so as not to draw attention away from the colors in the image. This is particularly true with black and white images, as the colors used in the gallery
design will cause viewers to “see” colors in the photos.
Step 5 The Appearance panel is where you adjust the positioning of the thumbnail images relative to the large preview image.
Here you can also adjust the layout and size of the thumbnails by adjusting the number of thumbnail Rows and Columns. If you have more images than spaces for thumbnails, Lightroom displays a large
arrow to point the user to additional images.
Step 6 The Image Info panel lets you select what, if any, image metadata you would
like displayed with the preview image. You can select from several common presets (Caption, Date, Exposure, and so on), or you can click the Edit menu and make other selections to create your own preset.
The Text Template Editor, used for creating your preset, works similarly to the template editor used for creating your file naming preset. Click the Insert button to add a badge for each of the file attributes you’d like to be displayed automatically in your web gallery.
I prefer to show the image’s filename and my copyright notice alongside the preview image. After you insert the Filename and Copyright badges separated by a colon, selecting Save Current Settings as New Preset allows you to name and create your new preset. This preset will now appear in the Image Info panel for easy access the next time you create a web gallery.
Tip The color of the displayed text is controlled by the Text option in the Color Palette panel.
Step 7 Using the options in the Output Settings panel, you can adjust the size of the large preview image, the JPEG Quality setting used when creating the gallery, and the width of the borders surrounding your photos.
I recommend leaving the Large Images Size set at the default 600 pixels and decreasing the Quality setting to 70–80.
This will help your gallery load more quickly, which is particularly important if you want to include a large number of images. I also recommend decreasing the Photo Borders slider from 5 to 2 pixels.
Tip To help your photos appear more prominent in the gallery, change the Border and Text colors in the Color Palette from white to light gray. This allows your photos to be the lightest, and therefore most important, element in the gallery.
Step 8 Although configuring the Upload Settings is an optional step for web gallery creation, it is one of the most valuable time-savers in Lightroom’s Web module. Normally, publishing a web gallery is a two-step process. First, you create the
gallery, building all the HTML pages, Flash elements, thumbnail images, and large previews. Second, you upload the gallery folder to your web host to make it visible on the Internet.
The Upload Settings feature allows you to automate the process by creating and publishing the gallery simultaneously. Once you’ve configured the Upload Settings, creating your web gallery is literally a one- step process.
In the Upload Settings panel’s FTP Server pull-down menu, select Edit to open the Configure FTP File Transfer dialog.
FTP stands for File Transfer Protocol, a commonly used method for transferring files between a desktop computer and a web server. Here, you’ll need to enter the login information for your website to allow Lightroom to publish directly to your site.
483
484
You may need to ask your web hosting company for the following information:
■ FTP server address Typically, your FTP address will be something like ftp.yourdomainname.com.
■ Username and password This is the screen name and password used for administrative access to the files on your host’s web server.
■ Server path Your hosting company may want you to publish your web galleries to a specific folder to avoid overwriting or corrupting any of the text pages in your website. If this is the case, entering the folder structure in the Server Path field ensures that Lightroom will always publish to the correct location. For my example, I publish to a Projects subdomain used specifically for storing web galleries, client projects, and downloadable files.
Step 9 Enter your server information, and then save this information as a preset for future use. Click OK to close the dialog.
Step 10 Before leaving the Upload Settings panel, be sure your FTP server preset is selected, and then check the Put in Subfolder option and type a short name for your web gallery. This places your web gallery in a specific subfolder to avoid conflicts with your other web galleries.
Step 11 If you’ve configured your FTP settings and server destination in the preceding two steps, all you need to do is click Upload to create and publish your web gallery. If you’ve skipped those steps, you’ll want to click Export to export the gallery to your hard drive and then manually upload the gallery to your website.
If you’ve selected the Upload option and the upload process was successful, your web gallery is live and ready to view. Unfortunately, Lightroom doesn’t show you the URL (web address) you should use to access your website. Fortunately, the URL is easy to deduce.
If you’ve published to a normal folder structure (not a subdomain) on your website, the URL will be as follows (URLs are case sensitive):
■ http://www.yourdomainname.com/
ServerPath/Subfolder/index.html
■ (domain name)/(folder used in Server Path section of FTP Setup)/(subfolder from Upload Settings panel)/index.html
For my sample gallery, this would be www
.prorgb.com/Projects/KinghornPhoto/index
The subdomain system I use works a little differently. You may need to contact your web hosting company to find out which
folder system you’re using for your site. With a subdomain, the URL looks like the following:
■ http://subdomain/yourdomainname/
■ (subdomain folder specified in FTP Setup)/ (domain name)/(subfolder from Upload Settings panel)/index.html
For my sample gallery, this would be http:// projects.prorgb.com/KinghornPhoto/index
If you encounter difficulty, try contacting your web host’s webmaster for assistance. Once you’ve established the base URL for your web galleries, the only element to change will be the subfolder name at the end of the URL.
Creating a Web Gallery Template
After configuring the settings for your web gallery, you’ll want to save these settings in a template for two reasons: First, it saves you a lot of time when you’re creating future galleries. Once your first gallery is created,
subsequent galleries can be created in less than 30 seconds. Second, you want the galleries
on your site to be consistent. If a visitor to your site sees gray text in one gallery and blue text in another, it reflects poorly on your photography.
So, in the interest of speed and consistency, take a few moments to create a template for your web gallery.
Step 1 After following all the preceding steps, direct your attention to the Template Browser panel on the left site of the Web module, immediately below the Preview panel. Click on the plus (+) sign to the right of the Template Browser title to open the New Template dialog.
485
486
Step 2 In the New Template dialog, type a descriptive name for your template and click Create. Your template will be saved in the User Templates section of the Template Browser panel.
Step 3 Next time you need to create a web gallery, you can select the template from the Template Browser panel, change the Subfolder name in the Upload Settings panel, and click Upload.
Multimedia Explorations
One of the hallmarks of a multimedia presentation is the synthesis of two or more artistic disciplines. Adding audio to still photos or incorporating video footage, ambient sound, and still photos into a single, cohesive video presentation are common multimedia presentation methods. Because these packages involve more that just
photos, Lightroom and Photoshop alone are insufficient to assemble the disparate pieces of
a multimedia presentation. You’ll need to use Lightroom and Photoshop in conjunction with other software applications to produce true multimedia presentations. In the following sections, I’ll introduce several common multimedia presentation types. Where appropriate, I’ll include links to additional resources to help you begin exploring the creative frontiers in multimedia.
Geotagging
Geotagging, or adding Global Positioning System (GPS) coordinates to photos, isn’t the first type of multimedia presentation that
comes to mind for most photographers. That’s unfortunate, though, because geotagging is a unique means of adding context to a photo, enriching its value to the viewer.
Consider, for example, a photo of the tailings from an abandoned mine shaft. By itself, it is a poetic reminder of the expansion and development of the American West. When GPS data is added to the photo, the physical location of the photo may reveal that the mine tailings lie directly above a creek that serves as the source of the town’s drinking water several miles downstream.
Connecting photos to their geographic location opens the door to increased collaboration among photographers by allowing several photographers to publish and group their photos collectively by the photo’s physical location. Geotagging improves a
photo’s value as a historical record and creates a unique means of sorting, identifying, and filtering photos within your Lightroom library.
The most common workflow for embedding GPS data within your digital photos is to bring a GPS receiver with you while shooting. At the beginning of your photo shoot, check to ensure that the clock on your camera matches the GPS receiver and that your GPS is set to record waypoints at frequent intervals to track your movements correctly.
When you return to your computer, you’ll match the GPS coordinates from the GPS log with your photos using a specialized geotagging software application. The software matches the coordinates in the GPS log with
Once the information is embedded within the files, you can geolocate your photos on one of several world maps, such as Google Earth, Flickr, or Microsoft Virtual Earth.
To get started, check out these sites:
■ Lightroom Journal http://blogs
.adobe.com/lightroomjournal/2007/11/ geocoding_your_photos_with_lig.html
■ Adobe Bridge CS3 Geotagger www.hoeben.net/%5Buser%5D/ adobe_bridge_cs3_geotagger
■ Flickr www.flickr.com/groups/ geotagging/pool/map?/mode=group
For additional resources, visit the
487
the time/date stamp embedded in your photos’ metadata by the camera. This embeds each
On the Web
geotagging page on our website:
photo’s latitude and longitude in the photo’s metadata.
488
Audio Slideshows
Adding audio to your photos is a powerful storytelling tool. Hearing an audio clip of an old woman telling the story of her life while viewing her portrait and seeing her complete her daily routines provides an immediate link to her character. Unlike other multimedia options, audio slideshows are among the easiest and least costly to produce. All you need
is a digital audio recorder or a music track
creativity to begin experimenting in the world of multimedia.
To begin creating audio slideshows, visit these sites:
■ Soundslides www.soundslides.com
■ Olympus VisionAge www.pdnonline
For additional resources on creating audio slideshows and links to our
for the audio, basic audio-editing software,
On the Web
favorite audio slideshows, visit
and Soundslides, a unique application for assembling and publishing audio slideshows.
The brilliance of audio slideshows lies in their simplicity. Using simple tools and a knack for storytelling, you can create compelling presentations that engage,
enlighten, and entertain viewers. Soundslides is multimedia at its most egalitarian, allowing virtually anyone with a camera and some
Rich Media Narratives
Once you master the art of the audio slideshow, you may want to begin experi- menting with rich media narratives. These presentations incorporate video, graphics, audio, photos, and text to tell dynamic,
multidimensional stories. You can think of rich media narratives as short documentaries that emphasize the use of still photos in lieu of video. Because of the increased complexity of these presentations, you’ll need to use professional-level software for editing video and generating 3-D graphics.
While you may not have the funds, or inclination, to purchase and learn these
professional applications, you can often create comparable quality from consumer-level video- editing programs, such as Apple Final Cut Express or Adobe Premiere Elements.
Creating a rich media narrative requires far more preproduction than creating a web
your footage. Expect to spend far more time in post-production than you would with an audio slideshow.
With a strong story, some patience, and a willingness to experiment, you can make rich media narrative a cutting-edge and meaningful way to use multimedia to tell your unique story.
For the best examples of this new genre, visit these sites:
■ MediaStorm www.mediastorm.org
■ Merge Group www.mergegroup.com
For additional resources, samples, and guidelines on getting started
489
gallery or an audio slideshow. You’ll want to
On the Web
with your own rich media
develop your script or idea fully and outline the components you’ll need to capture to
narratives, visit www.perfectdigitalphotography