Digital photos are great! It’s so easy to take pictures with your digital camera and transfer them to your Mac, then retouch and categorize them in iPhoto. With iWeb, it’s straightforward to add a gallery to your Web site so visitors can read about a vacation trip and then view pictures from the trip in an animated slideshow.
iWeb has a special page type specifically for publishing your pictures on your Web site. iWeb creates an attractive photo album page and provides a slideshow feature to show your pictures in sequential order. Let’s create an online gallery:
If you want to export photos from iPhoto to iWeb, you can continue with these steps, but if you’d prefer to work in iPhoto immediately before the export, perhaps to double-check photo names, or to make sure an album is properly set up, skip these steps and instead follow the steps in Export Photos from iPhoto to iWeb.
Add a Photo page to your Web site by choosing File > New Page (Command-N) or pressing the Add Page
button below the Site Organizer. Click the Photo template, and then click Choose.A Photo page with placeholders appears (Figure 48).
If you plan to have more than one Photo page or don’t like the name Photo, you can change the name. Double-click Photo in the Site Organizer to select it, type the new name, and press Return. Since my example site only has one photo album, I’m going to continue calling the page Photos.
The headline on the page, “My Photos,” may be descriptive, but it’s not original. Double-click the headline placeholder and type a new title. For my example Photo page, I changed the headline to Geocaching Pictures.
That paragraph of lorem ipsum needs to go. Double-click it, and then type a description of the pictures you’re adding to the Photo page. Since readers might not be familiar with geocaching, I replaced the placeholder text with a quick description of the sport.
There are two ways you can add photos to your Photo page. You can drag individual pictures from the Media Browser and drop them on the photo placeholder or you can drag a complete photo album from the Media Browser onto the photo placeholder. A Photo page can hold up to 99 pictures.
You may decide that a photo looks better in a different location on the Photo page. To move a photo, drag it. The other photos will shift as you do this.
What if you have unnecessary duplicates? Select any photos you want to delete by clicking them, and then press Delete. You can select multiple photos for deletion by Command-clicking them, or highlight a range of photos by Shift-clicking.
Photos that you bring into iWeb may have a short default caption, perhaps something like 2005Photo(113), 105-0501_IMG, or equal nonsense. To edit a caption, click it to select it, and then type your new text. You can type longer captions than those that appear on the Photo page, but they will be visible only in the slideshow.
By default, iWeb shows only two lines of your photo captions. To add more lines, open the Graphic Inspector (Figure 49) and move the Caption Height slider to the right. To show fewer caption lines, drag the slider to the left.
When it’s time to format your Photo page, use the Graphic Inspector to change the number of columns and the caption height, border your pictures (the Style and Stroke areas control borders), and add 3D-looking shadows to framed photos.
You can also make the photos transparent (use the Opacity slider), although this isn’t advisable since it can hamper the visibility of the pictures.
Figure 49.
In most iWeb templates, pictures are initially placed in 3 columns. To make your photos appear larger, you can change the layout to 3 columns by selecting the appropriate Layout radio button at the upper right of the Graphic Inspector (Figure 49).
Wouldn’t your photos look nice with picture frames around them? Scroll through the available frames under Style on the Graphic Inspector, then click one to apply it.
Note
There’s an alternative to frames that looks just fine on many Web sites. You can add a color border to all your photos by selecting a plain frame style, then using the Stroke controls to add a solid line: choose a color for the border from the color well, then increase the line thickness by adjusting the points in the un-labeled field.
You can add even more depth to your photos by adding a shadow. Check the “Shadow” box; then adjust the color, angle, offset, blur, and opacity of the shadow to your liking. I used a frame that makes it look like I printed my pictures on photo paper and then taped them to the page (Figure 50).
You have now created a Photo page. After you next publish your site, you can send email to your friends, relatives, and co-workers and brag about your Photo page. Also, you may wish to link to your new Photo page from the “My photo albums” list on your About Me page—see Step 4 in Make Your About Me Page.
Earlier, in Create Web Hyperlinks, you saw the power of using text based hyperlinks to connect your Web pages to other Internet locations. Picture-based hyperlinks let you turn any image into the source of a link, so that readers can click the picture to follow the link.
To turn an image into the source of a link, follow these steps:
Click the image to select it.
In the Link Inspector, check the “Enable as a hyperlink” box.
Enter the link:
If you are linking to another Web site, enter (or paste) URL in the URL field.
If you are linking to another page on your site, in the Link Inspector, choose One of My Pages from the Link To pop-up menu and then choose a page from the Page pop-up menu.
A small icon that looks like the Link Inspector button (
) appears in the lower right corner of the picture to indicate that the picture is now a clickable hyperlink. This icon won’t appear on your published Web page, but people reading your site will see whatever cues their browsers offer for graphical links, such as the pointer changing to a hand when it moves over the image or a yellow help tip popping up and showing the linked URL.Test the link by clicking it in iWeb.
Tip
For more information about options for different types of links available in the Link To pop-up menu of the Link Inspector, see Create Other Link Types, earlier.
Dragging individual photos or albums from the Media Browser to your Photo page isn’t the only way to copy photos to iWeb. In many cases, you may be working in iPhoto when the desire to publish your photographs strikes you. Here’s what to do:
First edit the names of the photos in iPhoto, since the names will serve as captions in iWeb.
Select the items you want to share, and hold down the iWeb button in the iPhoto toolbar to pop up two choices—Photo Page and Blog:
Choose Photo Page to export the photos to a new iWeb Photo page. (If you had an album selected when you chose Photo Page, the page will have the same name as the album.)
Choose Blog to share photos with one of your iWeb blogs. iWeb adds one new entry for each photo.
Your photos now appear in iWeb, ready to share with the world. You may wish to link to your new Photo page from the “My photo albums” list on your About Me page—see Step 4 in Make Your About Me Page.
I love the new photocasting feature in iPhoto 6. A photocast is an online iPhoto album that you can share with other iPhoto users and with people who view the photocast with an RSS reader. You must have a .Mac account to be able to export photocasts as this feature doesn’t work with other hosting providers and your Mac must be running Mac OS X 10.4.4 or later.
What makes photocasting different from a regular photo album is the option for people to subscribe to the photocast and see changes immediately. As an example, our cat Ruby is constantly doing things that force us to take pictures of her, and we’d like to share her latest glamour shots. So I’ve created an iPhoto album called Cute Ruby Photos and have photocasted it through iPhoto. My friends and relatives with iPhoto 6 or an RSS reader can subscribe to the photocast and always see the most recent pictures we’ve taken, as well as the complete library of Ruby pictures.
Publishing a photocast doesn’t add it to iWeb, but you can link to it from your Web site. Once you’ve published your photocast in iPhoto, a dialog appears with an automatically generated .Mac URL. Highlight the URL and copy it; then create a text or picture hyperlink in iWeb by pasting the URL into the appropriate field in the Link Inspector (see Create Web Hyperlinks or Create Picture Hyperlinks).
Do you post pictures with most of your blog or podcast entries? If so, you can turn those photos into a photocast. To do this you must have a .Mac account.
In iWeb, select one of your blogs or podcasts in the Site Organizer by clicking the Blog or Podcast summary page icon, then choose Insert > Button > Subscribe to Photocast. A new Subscribe button appears near the top of the page. Once you save and publish your Web site, your readers can click this button on your Blog or Podcast summary page. If they’re using Safari, your site will display the RSS feed. Clicking on a photograph expands it to full size, while the Read More button gives readers the opportunity to view all the text associated with a blog or podcast.
People viewing your Web site can also use an RSS reader or a photo compatible Web browser to subscribe to the photocast. If they try to subscribe to in a browser that doesn’t support RSS feeds (Firefox, for example), they’ll see an error message (Figure 51).
Every time you update your blog or podcast and post a picture, subscribers automatically see the new additions to your photocast. It’s a terrific way of keeping your readers up to date on what you’ve been seeing lately.
Here are my favorite tips for formatting photos in iWeb:
Removing, adding, or changing reflections: Some iWeb templates automatically place a reflection under large pictures on certain pages. You can add, remove, or change reflections on almost any picture through the Graphic Inspector: select the picture, open the Graphic Inspector, and configure the “Reflection” checkbox and slider.
Reflections aren’t always appropriate. I like them under large single photos on a page, but they seem distracting and unnecessary on pages with a lot of text or multiple photos. I tried reflections under the photos on the Blog page of my example Web site and didn’t like them (Figure 52).
Adding, removing, or changing shadows: You can make photos appear to float over a Web page by adding a shadow. I find shadows to be much less of a distraction than reflections, and they can add depth to an otherwise flat and uninteresting page: select a photo, open the Graphic Instructor, and set the “Shadow” checkbox and other controls:
Color: I usually don’t adjust this, since most shadows are shades of gray in nature. However, you can click the color well to pick a new tone.
Angle: I recommend the default, which is 315°. That places the “sun” above and to the left of your Web page.
Offset: The offset is the apparent depth of the shadow—a small number makes the picture appear to float above the Web page, while entering the highest offset (50) gives the illusion that the photo is about three-quarters of an inch above the page.
Blur: The blur defines whether the shadow is sharp or fuzzy. Smaller numbers make the edge of the shadow sharper, and the shadow edge becomes more diffuse as the number gets higher (the highest setting is 100). I prefer slightly more diffuse edges for higher offset numbers.
Opacity: Smaller opacity numbers create a light shadow, while larger numbers (the maximum is 100) make a dark shadow. I prefer to make the shadow slightly less opaque as the offset increases (Figure 53).
Changing the opacity of photos: In the Graphic Inspector, move the Opacity slider left to decrease the opacity and make the selected picture appear more transparent. Use for this effect to make a photo appear hazy, as in a distant memory.
Using photos as page backgrounds: Open a page and then open the Page Inspector (
). Choose Tinted Image Fill from the Page Background pop-up menu, and then click Choose to select the picture you wish to use as the background. Once you’ve selected a picture, choose Scale to Fill from the middle pop-up menu. Finally, click the color well (
) to tint the picture, if desired. I don’t to tint my pictures, but I adjust the Opacity slider so that only a hint of the picture shows in the page background (Figure 54).
One of my first complaints about iWeb was that if I dragged my pictures from iPhoto to iWeb, it seemed to take forever for a Web browser to render them. iWeb now does a much better job of optimizing your photos for the Web than the original 1.0 release did, but you still may wish to do some manual optimization.
It’s easy optimize your photos for Web viewing. To learn how, follow along with me as I fix a photo. First, download and install GraphicConverter, a nifty shareware utility from Lemke Software (http://www.lemkesoft.com/, €25).
Important iPhoto info
If you are working in iPhoto, follow these steps before editing photos in GraphicConverter:
Create an album for photos you intend to optimize, and put duplicates of your photos in it, so edits you make to those copies won’t change your originals: Choose File > New Album (Command-N) to make the album. Now, select the desired photos and choose Photos > Duplicate (Command-D). Finally, drag the photos with “copy” in the title to your new album.
In iPhoto’s General preference pane, from the Edit Photo pop-up menu, choose In Application and then choose GraphicConverter to tell iPhoto that GraphicConverter should be an editing choice.
If you want to usually use GraphicConverter to edit photos, leave the Edit Photo pop-up menu set to GraphicConverter. But, if you want to usually edit photos in iPhoto, change the Edit Photo menu to another option.
Now, you can edit a photo in the new album in GraphicConverter, either by double-clicking it normally, or by Control-clicking (or right clicking) it and choosing GraphicConverter from the contextual menu that appears.
I’ll open a photo in GraphicConverter, and then open the Information panel by choosing Window > Show Information (Control-Command-I). Here’s what it says about my photo:
Size: 2,048 x 1536 pixels
Resolution: 180 x 180 ppi
Colors: 16.7 million (32-bit)
File Length: 931.7 KB
This explains why it takes so long for that picture to load. My iWeb page is only 700 pixels wide, so the image is being scaled down to fit. And since most monitors display graphics at about 72 pixels per inch, the resolution is overkill. And must I show the picture in 16.7 million colors? Clearly, there is room to shrink this photo:
Decrease the bit depth (number of available colors): I start manipulating the picture in GraphicConverter by changing the bit depth (number of colors available) to 16-bit (32,768 colors) by choosing Picture > Colors > Change to 32768 colors (16-bit) (Control-Command-5). This didn’t change the look of the photo noticeably, but it did reduce the file size (called file length in the Information panel).
Reduce the resolution: Next, I reduce the resolution to 72 x 72 ppi by choosing Picture > Resolution (Command-Option-R) and entering 72 in both fields. This decreases the size of the image to 819 x 614 pixels, decreasing the file size as well.
Scale: Finally, I scale the picture down to 700 pixels wide while keeping the proportions of the original photo. I choose Picture > Size > Scale (Control-Command-Y), make sure the “Keep Proportions” and “Scale Picture” boxes are checked, and then enter a width of 700 pixels.
Now the Information panel shows the following statistics:
Size: 700 x 525 pixels
Resolution: 72 x 72 ppi
Colors: 32,768 (16-bit)
File Length: 294.1 KB
The new file size is less than a third of the original, meaning it should load about three times faster than the original picture.
Watch out for masking!
Even if you optimize your images, the automatic masking that iWeb performs on images that are dropped into certain placeholders will still slow rendering of those pictures in Web browsers. To avoid this, use the predefined graphic placeholders sparingly, and turn off masking if you do use them.
Note
GraphicConverter isn’t the only software you can use to optimize your photos for use in iWeb, but I recommend it because it’s inexpensive and powerful. Some other applications are:
Adobe Photoshop Elements:
Adobe Photoshop CS2:
Apple Aperture: http://www.apple.com/aperture/, $299
ArcSoft PhotoStudio: