Hack 50 Create a Web Photo Gallery

 < Day Day Up > 

figs/moderate.gif figs/hack50.gif

A great way to share your pictures is to post them on the Web. Here's an easy way for photographers to leverage the greatest publishing tool of all: the Internet .

Creating a web site is a cumbersome task, even for people with quite a bit of web design experience. So, what if you just want to get some images up for friends , family, or a client to review and comment on? This hack will get you on your way quickly, using a built-in feature of Adobe Photoshop. That's right, by using a powerful tool called Web Photo Gallery, you will have a professional-looking site up in no time.

All you need for this hack is a copy of Adobe Photoshop or Photoshop Elements. Before I go further, let me clarify the difference between the two applications. The professional offering from Adobe is called Photoshop CS (http://www.adobe.com/products/photoshop). It costs about US$650, runs on both Windows and Mac, and has many high-level tools, such as advanced batch processing that working designers need. Adobe also offers Photoshop Elements (http://www.adobe.com/products/photoshopel), which is available for about US$85 and has most of the tools that CS offers. Elements also runs on both Windows and Mac. For this hack, you can use either Photoshop CS or Elements. I refer to them both simply as Photoshop . The screenshots are from Photoshop CS.


When you have all your software together, you'll need access to web space for hosting your photo album. Check with your Internet service provider (ISP) to see if you have free web space (you almost always do!) and find out how to upload your files.

Most likely, your ISP will tell you to use an FTP application to move your files from your computer to their web servers. There are a number of good freeware or shareware FTP applications out there, and Mac OS X users have FTP built right into the operating system.

Okay, enough network stuff; let's start building a great-looking photo web site!

Open Photoshop and figure out which digital images you want to publish. They can be in any format Photoshop can open , and they can be as large as you want; Photoshop will take care of resizing them for the Web. You do need to make sure they are large enough to display in the larger size on your web page. A 200 KB JPEG is a good guide for a minimum size .

Go to the File menu and select Automate Web Photo Gallery. This will open a Web Photo Gallery dialog box, as shown in Figure 5-5.

Figure 5-5. Web Photo Gallery dialog box
figs/dphk_0505.jpg

The first thing you'll need to do is select the style of web page you want from the drop-down Styles menu. There are many styles available, and each will load a preview thumbnail in the right side of the window.

Pick the style you want and move onto the next step: entering your email address. You don't have to have an email address on your site, but it is a great way to solicit feedback.

Next, you need to tell Photoshop which folder to use as a source so that it knows where to access the photos from when it runs the script. Notice that you can also tell Photoshop to include all the subfolders in the source folder. This is handy if you keep all your digital photos in a folder with nested folders for different photo shoots [Hack #49] .

The destination folder is the folder where your HTML file and images will go. It cannot be the same folder as your source folder. The destination folder is the one you will post to the web server; it will contain all of your web photos and the HTML files that organize them.

There are a number of options available to you on the Options menu, as shown in Figure 5-6.

Figure 5-6. The Large Images dialog box of the Options menu
figs/dphk_0506.jpg

Let's take a gander at each option:


Banner

Title your site, include your name and contact information, and, if you want, have the date show up on your web site.


Large Images and Thumbnails

Set the size of the large images and thumbnails for your web site. The majority of web surfers still have a monitor resolution of 800 600 pixels, so keep this in mind when you size your images. When shooting images in JPEG mode, it is best to store them in the highest quality setting. However, for displaying images on the Web, these images will be too large to download in a reasonable amount of time, which could lead to people tapping their fingers while they wait for your images to load. Not good! I recommend a setting for JPEG quality of 5-7.

Next, if you want your images to have a border, enter a pixel value in the field to determine the width of the border. Web Photo Gallery can use the filename as a title, but it can also use a variety of other data that you can ascribe to an image in Photoshop. To ascribe additional data to your images before making a web photo gallery, open up your images and select File/File Info .

Don't forget that you can show different information in your thumbnails than you show in the large images. For example, you might want to show the title of the image in the thumbnail and the description in the large image. Make sure to experiment; one of the great things about this hack is that it takes just minutes for Photoshop to spit out your site. Don't like it? Just make a change and create your site again. Voil ! On to the next option.


Custom Colors

You can have custom colors for the background and more. Click on the color boxes and pick a new color in the Photoshop color picker. Remember, though, that web usability experts often recommend using the default bright blue for links; it's easier for users to recognize.


Security

You might want to have a copyright watermark on your images to prevent them from being downloaded and used without your permission. The Security window lets you create a watermark with the copyright symbol, filename, description, and more. You can choose the size, color, and opacity of the type, and Photoshop will automatically add the watermark to your large image. Neat.

After you click OK, Photoshop goes to work. Depending on the number of images you have, their size, and the speed of your computer, this could take seconds or a few minutes. Photoshop will open each of your images, save them in the thumbnail and large image size, and create the required HTML code.

When Photoshop has finished grinding away, visit your destination folder. Open the index.html file in your favorite web browser and examine the output, as displayed in Figure 5-7.

Figure 5-7. A web gallery created with Photoshop
figs/dphk_0507.jpg

The next step is to upload the HTML and images to your web server.

The Web Photo Gallery included in Photoshop is a powerful utility that can help you present your images on the Web or your company intranet, or even burn your collections to CD. Since almost anyone with a computer can navigate a web page, viewers will feel right at home with the photo CDs you create using this technique.

Hadley Stern

 < Day Day Up > 


Digital Photography Hacks
Digital Photography Hacks: 100 Industrial-Strength Tips & Tools
ISBN: 0596006667
EAN: 2147483647
Year: 2004
Pages: 161
Authors: Derrick Story

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net