Photoshop Smackdown: Web Graphics the Easy Way with Keynote

Mac OS X Keynote vs PhotoshopDarren Rowse has identified 14 essential Mac OS X applications for bloggers. If you use a Mac and run an online business, you should read it.

Darren has mentioned two tools that are favourites of mine.

  • Keynote (from Apple’s iWork bundle)
  • ImageWell (free download from from Xtralean – useful for cropping and resizing images)

Darren hasn’t called it out, but there are features in Keynote that are incredibly useful for producing web graphics to go into web pages, blog posts or sidebars. The features justify my (only somewhat tongue-in-cheek) claim of a Photoshop smackdown.

How can Keynote (isn’t it a presentation program, like Powerpoint?) be better at web graphics than Photoshop? Or Gimp, for that matter. Simple. Photoshop is hard to use. Very hard. I’ve seen graphic designers use it, and I decided I would never, ever try to master it. And anyway, I’ve got better things to do with our money than spend thousands on Photoshop software (and the grunt to run it). I tried using Gimp, and it was too hard. Yes, if I spent enough time, I’m sure I could master it. But life is short. And I know there are other open source image editors as well, but too hard.

Keynote is a different matter. Around $100. I can use it to do web graphics. It is easy.

Using Keynote for Web Graphics

Ok, this is how I use Keynote to prepare web headers, images for blog posts, text logos – all sorts of images for our web sites.

First of all, use Keynote to prepare your web graphic on a slide. You aren’t going to display it, you will turn it into an image and resize it for your website.

If you purchase a graphic from iStockPhoto.com, download it and add it to your slide using the Insert menu and Choose …

Keynote lets you crop, remove backgrounds (Alpha), add shadows and reflections, add text and shapes, do frames .. all very easily. You can user layers, just put text/images etc over the top of one another (you can also make images fully or partially transparent). There is a lot of support for fonts, so this is a great place to do text overlays, text logos etc.

It is very easy to see how big images are, so preparing a 760 pixel wide web page header, for example, is a snap.

Once you have your web graphic completed then:

  1. Use the File, Export function to export your slide as a TIFF or JPG file. I use hi res TIFF, because it preserves transparent backgrounds
  2. Using Finder, drop the exported image file into ImageWell
  3. Crop the image, set the image dimensions (width/height), set the file type to JPG and reduce the quality so the file size is appropriate

Here are three videos from Apple that give you an idea of what you can do with Keynote to create web images:

I still use Graphic Designers to do larger jobs. But when you just need a simple button, or a new web header, it is so quick to put together a great web graphic using Keynote and ImageWell.

If you are a Photoshop or Gimp user, I know there are a gazillion features in there that Keynote doesn’t support. So don’t bother sending me the list. Keynote does the web graphics you need to run a web business day to day, without having to wait on a graphic designer. And it is easy.

Keynote 1 for ease of use and doing just the things needed. Photoshop 0 for being too hard for mere mortals and too expensive. That is my Photoshop Smackdown.