Tom Gorham
It may be billed as a presentation tool, but Keynote can actually turn its hand to a variety of tasks, such as web page mockups and illustrations.
Eton headmaster William Horman certainly wasn’t thinking of presentation programs when he wrote, almost 500 years ago, that necessity was the mother of invention.
However, it’s a sentiment that, in my experience at least, could be applied to my recent dealings with iWork’s Keynote. Earlier this week I had to mock up a very basic website design quickly. In most cases, it would be normal to use an image editing program, such as Adobe Photoshop, as a web mockup tool. However, I was on a Mac with no version of Photoshop installed and, with no alternative, I turned to Keynote to put something together. And the truth is that it made a surprisingly good job of it.
Let’s be clear about this: I’m not claiming that Keynote is a design or illustration application of the quality of Adobe’s offerings. Nevertheless, it’s surprising how many illustration and editing features it has and how easily these can be tailored to meet a number of design needs.
Certainly thinking of Keynote as an illustration program isn’t as daft as it might at first sound. Many people who use Keynote as a presentation tool may not even be aware that it comes with its own Illustrator-like Pen tool that can draw freehand vector paths, and you can expand the program’s basic shape options to make them infinitely extensible.
Select a shape, choose Format > Shape > Make Editable to make them editable. You can then hold down the Alt key and click on any part of the shape’s paths to add an anchor point there, and double-clicking this point switches it between sharp angle and smooth Bézier curve, which you can further adjust by dragging Bézier handles. The same technique also works with lines, which lets you create curved arrows easily. There’s support for gradients and, as you can group elements, you can apply effects to multiple elements at once.
Further, in a bitmap head-to-head against Photoshop, Keynote actually comes out level in several areas. It has a number of image editing effects built in – contrast, brightness, saturation and so on – but none better than the excellent ‘Instant Alpha’ feature, which quickly and automatically masks out unwanted areas of an image. You can quickly add drop shadows and reflections to shape or text elements and adjust their opacity. And it integrates with iPhoto through its Media Browser, and lets you drag images from the Desktop directly over the active window.
Mocking up web pages in Photoshop certainly has some advantages. It’s the natural environment for many designers and the place where they create many of the graphics they incorporate in their website, and it has workflow advantages, too. Organising elements by layers means you can group related elements or turn some off others to preview different views. But if Keynote lacks these features it does at least offer alternatives, including master slides, where you can place common site elements – background, navigation bars and so on – before you add content unique to individual page mockups on separate slides.
But how do you go about creating a website mockup in Keynote? The first step is to set up the document so it resembles a web page. In the Document Inspector, switch the Slide Size pull-down menu from the default 800 x 600 display to something more suitable for web design mock ups – I chose a custom size, set to 960 pixels wide.
At the same time, I made sure my document rules were in pixels (set up under the Rulers tab in the programs preferences) and that I adjusted the Master Gridlines accordingly in the same window.
To create a master, first make sure master slides are viewable in the source pane on the left (View > Show Master Slides). Select the slide on which you want to base your master slide and choose Slide > New Master Slide. On this slide, you can set the image background. In the Slide Inspector, choose Image Fill and either choose between the options: a flat colour, a Web 2.0 style gradient or a background image. Handily, you can replicate the same background tiling effect used in many websites by setting the background image to tile.
The big advantage of Keynote is clear when you start to add page elements, whether shapes for graphic elements or text boxes. Adding and adjusting shapes is much easier in Keynote than it is in Photoshop, where in my experience it’s always a bit of a fiddle to modify the size of vector shapes. In Keynote, you can easily drag the shape edges to change their size and interactively alter their corner radius by dragging a blue handle at each corner. Further, there can be little argument that text is dealt with far better in Keynote than it is in Photoshop. It has infinitely better text handling – down to checking spelling – and much more reliable text previews.
I also found creating pages quicker in Keynote: aligning elements is also easier, thanks to its alignment guides and its Align and Distribute commands.
And Keynote’s hyperlinking feature comes into its own when creating web mockups: through the Hyperlink Inspector, you can add links to elements that mimic buttons being pressed. The hyperlinks can link either internally to other slides, or to separate websites, so you can get a far more interactive mockup than is possible with Photoshop. There are ways to extend this further: by exporting the slideshow as a QuickTime movie file, you could create an interactive movie of how the site would work.
There are other Keynote advantages: you can embed video and slideshows directly onto Keynote slides – great if you’re planning to include video on your site – and to top it off you can export the whole bunch of slides to HTML, which can then be previewed in a web browser – giving you a browser’s eye view of the mockup.
However, creating a mockup in Keynote doesn’t mean turning your back on Photoshop permanently. If you want to add the final touches there, you can copy and paste the Keynote elements into a Photoshop document, where they appear as smart vector objects. Mind you, while smart objects should allow you to edit the object in its originating application, Photoshop tends to throw you out not to Keynote, but to Illustrator for vector files and the Finder for image files. The translation also works the other way: you can copy and paste vector elements from applications such as Illustrator or OmniGraffle straight into a Keynote document.
It’s worth noting that Keynote shares many of its image editing features with Pages and Numbers, although Keynote has one advantage over both its iWork siblings, as it lets you export the final document as Jpeg, Tiff or PNG files.
And while I used Keynote in this case to create a website mockup, it’s just as easy to think of other applications for its features, whether it’s putting together a quick illustration – which can be saved to PDF for further tweaking in Illustrator – or even knocking up a quick organisational chart.
The truth is that while I’m not recommending you throw away your copy of Photoshop, Keynote is simply too good to be thought of as simply a presentation application. That’s no bad thing. For all of its undoubted power, its main role as a presentation program means that for practical purposes, most of us won’t use it nearly as much as Numbers or Pages. Keynote’s features deserve an audience wider than that provided by the occasional presentation.
