Skip to content

great web hosting with Dreamhost


Get MTW by Email

Enter your Email


Powered by FeedBlitz


  • Syndicate RSS 2.0
  • Syndicate with Atom

Creative Commons License

Blog Directory - Add Link

NoSpec!

Feedburner!

Performancing

Blog Directory

get camino browser

GeoURL


Using iPhoto for Web Design

iphotoiPhoto has always been a good consumer level image catalog. And with each new version, just as you would expect, Apple has added features. Now iPhoto 6 coupled with Tiger’s built in editing tools actually gives us a reasonable photo editing tool for our web work.

I’ll not describe iPhoto’s cataloging and photo sharing options as those are well covered elsewhere. And I’ll save for later a discussion of iPhoto add-ons that allow web photo galleries and Flickr integration and focus on iPhoto for preparing photos for the web. I’m also not going to say any more about iPhoto to iWeb features other than I’m absolutely not a fan of iWeb in its current incarnation.

iphoto adjust palette

iPhoto’s integration with the new Core Image features in OS X.4 makes editing images quite easy. Not all of Core Image’s features are built into iPhoto but the ones that are seem to be well chosen.

iphoto adjust palette

The Adjust palette focuses primarily on color correction and obvious editing options like brightness/contrast and sharpness. New to iPhoto 6 is the Straighten slider that allow you to correct for a less than level photo, not that you or I would ever take one. Click on the Straighten slider and a grid appears overlaying the image. Moving the slider rotates the image to the right or left. It is actually easier to use than Photoshop’s Transform feature.

iphoto straighten image

Replacing the Black & White and Sepia toolbar buttons of earlier iPhoto versions is the Effects palette, which gives 9 photo variations including vignetting and edge blurring. Successive clicks strengthen the effects. The effects are fairly subtle and well chosen.

iphoto adjust palette

Most photo would be improved by cropping and iPhoto’s Crop tool is ready and able to do the job.

Sample workflows

Size individual photos for the web

  1. Import your photos
  2. Select the photos you want to use and drop them into their own album
  3. Rotate photos where necessary.
  4. Straighten photos where necessary
  5. Adjust color, saturation, etc.
  6. Using the Sharpen slider, slightly over sharpen the image. (Saving the photo compressed for the web will soften it)
  7. Crop if necessary
  8. Return to Gallery view
  9. Single click your photo to select it.
  10. In the File menu, choose Export (make sure the File Export tab is selected)
    iphoto export
  11. Select the Scale images no larger than: option
  12. Enter your final image size.
  13. Make certain that Use file name is selected.
  14. From the pull down menu select the file type for export. (don’t use TIFF)
  15. Click Export
  16. Name the image.

iPhoto has no JPEG compression setting available during the Export process so you get a preset. Comparing the file sizes with Photoshop’s Save For Web, shows that iPhoto exports with a JPEG quality of 70-80. That is a bit big if you are concerned with download speed but seems in keeping with Apple’s concern with high quality presentation.

Batch size photos for the web:

  1. Edit your photos above
  2. Select all the photos you want to export by either selecting the entire contents of an album or holding down the Command (Apple) key and clicking on individual images.
  3. In the File menu, choose Export (make sure the Web Page tab is selected)
  4. In the Image field set your Maximum Width or Height.
  5. Click Export
  6. Name the folder you are exporting to. (iPhoto exports and entire photo gallery with thumbnails and gallery pages)
  7. In the folder you exported to you will find another folder titled (exported folder name)-Pages.
  8. The resized photo are in this folder. You may discard the rest of the exported files and folder.

Possibly related:

Leave a Comment

You must be logged in to post a comment.

Trackback this post  |  Subscribe to the comments via RSS Feed