Making Your iAd

Getting iAd Producer

iAd Producer is the tool that allows us to assemble great interactive ads with a simple drag-and-drop visual interface. Download and install iAd Producer on your Mac, so that you can start creating an ad.

Time for action – installing iAd Producer

To install iAd Producer, follow these steps:

1. To download and use iAd Producer, you need to be a paid member of the iOS Developer Program.
2. Go to https://developer.apple.com/ios/ and click on the Log in button.
3. Enter your Apple ID and password, and click on Sign In. After you've signed in, find the Downloads section at the bottom of the page. Click on iAd Producer to start downloading it. You can see the download highlighted here:

   

   If you cannot see iAd Producer in the Downloads, make sure you're logged in and your developer account has been activated.

4. After the download is complete, open the file and run iAd Producer.mpkg to start the installation wizard. Follow the steps in the installation and enter your Mac password, if asked for it.

When installing certain software, you need to enter your Mac password to allow it to have privileged access to your system. Don't confuse this with your Apple ID that we set up for the iOS Developer Program. If you don't have a password on your Mac, just leave the password area blank and click on OK.

5. When you've gone through the installation steps it'll take a couple of moments to install. After you get a The installation was successful message you can close the installer.

What just happened?

We now have iAd Producer installed; whenever you need to open it, you can find it in the Applications folder on your Mac.

Working with iAd Producer

Let's take a look at some of the main parts of iAd Producer that you'll be using regularly, to familiarize yourself with the interface.

Launch screen

When you first open iAd Producer, you'll be able to start a new iPhone or iPad project from the project selector, as shown in the following screenshot. As the screen size and experience is so different between the two devices, we have to design and build ads specifically for each one:

From the launch screen, you can also open existing projects you've been working on.

Default ad

Once you have chosen to create either an iPad or iPhone iAd, a placeholder ad is created for you, showing the visual flow. This is the overview of your ad, which you'll be using to piece the sections of your ad together. The following screenshot shows the default overview:

Double-clicking on any of the screens in your ad flow will ask you to pick a template for that page; once assigned, you're then able to design the iAd using the canvas editor.

Template selector

Before we edit any page of an ad, we have to apply a template to it, even if it's just a blank canvas to build upon. iAd Producer automatically shows the relevant templates to the current page you're editing. This means your ad follows a structure that the users expect. Templates provide some great starting points for your iAd, whether it's for a simple banner with an image and text or a 3D image carousel that the user can flick and manipulate, all created with easy point and click. The following screenshot is an example of the template chooser:

Asset Library

The Asset Library holds all the media and content for your iAd, such as the images, videos, and audio. When adding media to your Asset Library, make sure you're using high-resolution images for the high-resolution Retina display. iAd Producer automatically generates the lower-resolution images for your ad, whenever you import resources.

If you wanted an image to be 200px wide and 300px high, you should double the horizontal and vertical pixels to 400px wide and 600px high. This will mean your graphics look crisp and awesome on the high-resolution screens.

The following screenshot shows an example of media in the Asset Library:

Ad canvas

Once you've selected a template, you can double-click on the item in the Overview to open up the canvas for that page. The ad canvas is where you customize your iAd with a powerful visual editor to manipulate each page of your ad. Here's an example of the ad canvas with a video carousel added to it:

Setting up your ad

Let's create and save an empty project to use as we create our iAd; you'll only need to do this once for each ad.

Whenever you're working with something digital, it's important to save your iAd whenever you make a significant change, in case iAd Producer closes unexpectedly. Try to get into the habit of saving regularly, to avoid losing your ad.

Time for action – creating a new project

In order to create a new project, follow the ensuing steps:

1. If you haven't created a new project already, open iAd Producer from your Applications folder.
2. Select the iPhone from the launch screen and choose Select. You'll now see the default ad overview. iAd Producer has automatically made us a project called Untitled and populated it with the default set of pages.
3. From the File menu, select Save to save your empty iAd, ready to have the components added to it later. Name the project something like Dino Stores, as that is the ad we'll be working on.
4. You can now save the progress of your project at any time by choosing File then Save from the menu bar or pressing Command + S on your keyboard.

What just happened?

You've now seen the project selector and the launch screen in action, and have the base project that we'll be building upon as we make our first iAd. If you quit this project you can now open the project from within iAd Producer by clicking on File | Open, from the menu bar; or, simply double-click the project file in Finder to automatically open it.

Getting the resources

In this article, we'll be using the Dino Stores example resources that are available to download with this book. If you want to use your own assets, you'll need the following media:

• An image for your banner, approximately 120px wide and 100px high
• An image of your company logo or name, around 420px wide and 45px high
• An 80px square image, with transparency, to be used as a map pin
• A loading image, approximately 600px wide and 400px high
• Between six and 10 images for a gallery, each around 304px wide and 440px high
• Two or more images that will change when the iPhone is shaken, each around 600px wide and 800px high
• An image related to your product or service, at least 300px wide, to use on the main menu page

These pixel sizes are at double-size to account for the high-resolution Retina display found on the iPhone 4 and later. iAd Producer will automatically create the lower-resolution versions for older devices.