Create your first iAd for the iPad

Alan Lokhman
8 March, 2011
View more articles fromthe author

The launch of Apple’s iAd Network presents an exciting new opportunity to advertise on iOS devices. However, the process of building iAds seemed complex and time-consuming at first, and only few developers knew how to produce a good-looking iAd in HTML5.

That changed with the introduction of Apple’s iAd Producer, a free Mac application available to registered iOS developers – it will cost you US$99 a year to become one. With a clean, intuitive interface, iAd Producer makes creating an iAd extremely easy, and you won’t have to write a single line of code if you don’t want to.

A basic iAd has a banner that sits at the bottom of the screen. Touch it and you’re taken to a series of pages that deliver more information or send you to a website where you can buy the product or service being advertised. The pages can contain text, images, video and carousels for a full multimedia experience. They’re built in HTML5, CSS3 and JavaScript – but with iAd Producer you won’t need any knowledge of these, and can instead concentrate on the design.

Step 1 Before using iAd Producer you need to create a banner, splash screen, menu screen – all mandatory – and at least three content pages.

For the iPhone 3/3GS, the banner should be 320 x 50 pixels (portrait) or 480 x 32 (landscape); for the iPhone 4 640 x 100 (portrait) or 960 x 64 (landscape), and for the iPad 768 x 66 (portrait) and 1,024 x 66 (landscape). The other pages should be 320 x 480 (iPhone 3/3GS), 640 x 960 (iPhone 4) or 768 x 1,024 (iPad). Here we’ll be creating an iAd for the iPad.

When you’ve got these assets together, launch iAd Producer, choose iPad as the target device for your iAd and click the Select button. Save the project.

Step 2 Double-click the Banner screen and choose a template; we’ll select the Image template to create a banner containing nothing except an image. Double-click the Banner screen again to open the screen editor. Click on the image to select it, go to the Inspector panel and bring in your banner image. Click the Overview button to return to the project chart.

Step 3 Double-click the Splash screen and select the portrait Blank template. Bring up the screen editor, open the Objects panel and double-click on the Image icon. Resize the blank image to cover the entire page and select the image file you want in the Properties tab on the Inspector panel.

Step 4 Back in the Overview, double-click the Menu screen and select the Hide-Reveal template, which animates moving to the next page. Double-click the Menu screen to edit it. Open the Objects panel and double-click on the Image icon. Resize the image to the full size of the page and select the image file you want. In the Animation panel, specify how the image will animate when showing or hiding the page.

Step 5 Return to the Overview. For the first content page, select the Cover Flow template to create a carousel of slides that can be swiped and then opened. Bring up the page editor and double-click the Cover Flow widget to edit individual cells. Change the number of cells to the match the number of slides you have, then assign the images you want in each slide to each cell. To add a background image, add an image as in previous steps, and then select Object > Send to Back.

Step 6 Choose the Video Carousel for the second page and open it in the editor. As with the Cover Flow carousel, edit each individual cell of the Video Carousel, selecting your video files, and setting the title of each and the description. I had just five video files, but the carousel looks better with eight or more cells, so I duplicated the content and ended up with 10 cells in total. You can add a background image too, if needed, as set out in the previous step.

Step 7 For the final page, we’ll select the Purchase template. As ads will often be used to sell paid versions of apps within free versions, or additional content in paid apps, Apple has included a handy way to allow viewers to buy directly from within an iAd. To sell an app, open the page in the editor and go to the Inspector panel. Select App and specify the Store ID your app has been given.

Step 8 It’s time to test the iAd. Click on the Simulate button to bring up the iOS Simulator and browse through the screens. Now you can fine-tune details like colours, screen animation settings and fonts. When you’re done, your iAd is ready to be uploaded to Apple’s iAd test servers.

Leave a Comment

Please keep your comments friendly on the topic.

Contact us