Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

Moving and Adjusting Photos

After you have your pictures on a page, you might want to resize or move them. This is particularly true of photos that you place in addition to replacing the stock photos. You resize and move photos in the same way that your resize and move text boxes: by clicking the photo and then either dragging the squares along its edges to resize it or dragging the photo itself to move it (see Figure 7).

Figure 7

Figure 7 Selected photo to be resized or moved

You can even overlap photos and/or text boxes by dragging one on top of the other. After you have your overlapping items, however, you might want to change which one is displayed in front of the other(s). You can control this by selecting one of the overlapping items and then clicking Forward and Backward in the toolbar to bring that item forward or send it backward.

If you’ve worked with iPhoto, you’re probably familiar with its Adjustment palette, which allows you to adjust the brightness, contrast, color, exposure, and sharpness of a photo. That same palette is available in iWeb by selecting a picture on the page and clicking the Adjust button (see Figure 8). The nice feature is the fact that you are adjusting the copy of the picture in iWeb, not in your iPhoto library, which allows you to adjust the picture for your Web site without making changes to the original.

Figure 8

Figure 8 Adjust Image palette

You can also use Mask to mask out a portion of the photo. Masking a photo is similar to cropping it in that you select a portion of the photo, and only that portion is displayed (see Figure 9). Unlike cropping, however, when you mask a photo the masked area still exists as part of the file; it is just hidden from view. When you select a photo and click Mask, a box similar to a text box appears inside the photo. You can move this box around and drag the squares on its edges to resize it. The section of the photo inside the box will be displayed. The rest, which is grayed slightly when working with the masking tool, will not display. After you set the masking for a photo, click another item on the page to see what it looks like. To remove a mask, click the photo and then click the Unmask button in the toolbar (the Mask button changes to Unmask whenever you select a masked picture).

Figure 9

Figure 9 Masking a photo

  • + Share This
  • 🔖 Save To Your Account