Photoshop Smackdown: Web Graphics the Easy Way with Keynote
January 20th, 2008 by Glenn
Darren 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:
- 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
- Using Finder, drop the exported image file into ImageWell
- 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.
Like to read more? Subscribe with RSS
January 28th, 2008 at 10:22 am
Thanks for pointing out this use for Keynote. I hadn’t previously considered using Keynote for the creation of graphics like this.
You also can’t go past the multimedia capabilities of Keynote either. A case in point is the presentations it allows me to put together of the type that are posted in my blog and that are becoming more popular with online marketers.
That’s probably why I recently upgraded to the amazing 24inch imac. A great piece of kit that allows me to be much more productive with a lot less fuss.
January 28th, 2008 at 12:26 pm
You are spot on Edmund, it was the ability to record presentations with voiceovers and be able to export them to the web that triggered me to buy Keynote in the first place.
A friend of mine recently took my advice and bought a 24″ iMac … I was pleased for him, but jealous
March 19th, 2008 at 1:32 pm
Thanks for the writeup. Keynote is very good for mocking ideas up quickly. It really does have a simple UI that makes easy a lot of the annoying tasks you do in web graphics. I’m sick of mucking around photoshop or inkscape just to create a simple shape with a drop shadow.
August 3rd, 2008 at 11:03 pm
You can actually do the sizing and cropping right within Keynote, no need to export to an image first. Since Keynote objects copied to the clipboard are already high resolution PDF’s with alpha channels already there, you can pass any set of shapes copied out of Keynote through Preview to save as the image file type of your choice. I describe it here (Preview Passthru) but in short, simply
1) Copy the set of objects you want to export
2) Open Preview
3) Do Command-N
Now, you’ve got a PDF with an alpha channel that can be used in almost any other graphics app on the Mac. Preview doesn’t export transparent bitmaps from PDF’s like these, but other apps like Skitch can convert them to bitmaps AND apply transparency with no problem. (Not sure if ImageWell does)
Most of the images on my site were created using Keynote.
August 4th, 2008 at 2:04 am
Nice tip Mak, wasn’t aware of that at all.
I’ve been using Picturesque more than ImageWell - great for batch resizing, shadowing etc. ImageWell still has a place as you can crop while showing dimensions.