(For more resources on iAd, see here.)
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:
- To download and use iAd Producer, you need to be a paid member of the iOS Developer Program.
- Go to http://developer.apple.com/devcenter/ios/ and click on the Log in button.
- 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.
- 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 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.
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.
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.
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.
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.
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:
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:
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:
- If you haven't created a new project already, open iAd Producer from your Applications folder.
- 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.
- 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.
- 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.
(For more resources on iAd, see here.)
Building your banner
The banner is the hook to encourage the viewer to click and explore your iAd. We'll be using an image and an advertising slogan to create a simple but effective banner.
Time for action – making the banner
In order to make the banner, follow the ensuing steps:
- Open up the Dino Stores project and double-click on the Banner in the ad overview. It should be the first item on screen.
- Before you're able to edit any page of your ad, you need to assign a template to it. From the template chooser, you should see the available templates for banners. In this banner, we'll be using Image and Text; select this template and click on Choose.
- After choosing the banner type, select the banner again, from the iAd overview. You should now have the banner canvas open, ready to customize the banner, as shown in the following screenshot:
- The first item that we'll change is the Banner Message. Double-clicking on the text will change it to editing mode. Now, enter your own text, such as Rawr-some Pets. Click outside of the label to leave the editing mode.
In iAd Producer, each area of text is referred to as a label. They're called this because the user of the iAd cannot edit them. For editable areas of text, we can use a text box.
- Now let's make the text slightly bigger and center it, so it sits correctly in the banner. Click on the text again, so a selection box appears around it, and then click on the Inspector option in the lower-right corner of iAd Producer. This opens the inspector pane, which is used to adjust the appearance and styling of elements in your iAd.
The inspector pane can be toggled to open and closed by clicking on the icon again. You can use this to enlarge the maximum area available to the canvas so that you can edit your ad with more precision.
- In the inspector pane, click on the Text section to expand the text formatting options. We can center the text with the middle button in the alignment setting, then increase the font size to around 25. You can see the font size and alignment highlighted in the following screenshot:
What just happened?
We selected the Image and Text template to create the base layout of our banner. Then, we used the ad canvas for the first time, to edit the default. Now you know how to select a template, then edit and adjust its text and appearance.
Have a go hero – writing good banner text
When writing the text for your banner, you can use certain language and words to entice and grab your user's attention so they'll tap your banner. Consider updating your banner to use a call to action, where you combine the following:
- An actioning verb to encourage the user to tap the banner, such as, "try", "join", "take", "find out", "create", or "play"
- A word to add value or importance in order to motivate the tap action, such as free, now, or fast
- Keep content to a minimum, so as to not deter the user from reading it
The following screenshot shows an example of a complete call to action:
Time for action – changing the background
We have edited the text on our banner; let's now change the background to make it more prominent in the applications that it will appear in. We'll use a gradient to fill the background, fading between two colors.
- Click away from the label on the grey background to select the background properties in the inspector pane. Now click Background, to open the background properties section.
- A radial gradient had already been selected for us when we chose the banner template, so we only need to change the two colors that make the background.
A radial gradient is a smooth transition between two colors; think of them as blending two colored circles into one, from the center of the area they are filling.
- You should see a white-to-grey gradient strip with a small arrow and box at each end; click the box on the left to open the color selector. The color selector has a variety of ways to choose a color. We'll be using the simplest—the crayon selector. Select this by clicking the crayon box on the color selector. In the following screenshot, we can see the Background section along with the crayon color selector:
- We now have a selection of crayons to pick our color from. The first color we select is the inside of your radial gradient; select the naturally prehistoric orange (named Cantaloupe) from the bottom-left of the colors. You should see the inside of your banner turn to that color. If it hasn't, make sure that the first box on the gradient strip is selected and try again.
- Next, select the small gray box on the right of the gradient strip to change the outside color of the radial gradient. We'll change the outer color to white (named Snow), the far-right crayon on the bottom. Once both the colors have been selected, you can close the color picker.
- We can now fine tune the gradient by dragging the orange box on the left about one quarter of the way towards the right. This changes the start point of where the gradient fades, so more of the orange is visible in the center.
What just happened?
We just used the inbuilt gradients in iAd Producer to create a gradient with code instead of images, meaning they can scale to the high-or low-resolution screens with no loss of quality, while having a significantly smaller file size. iAd Producer automatically produces the CSS.
Have a go hero – learning about CSS3 gradients
CSS3 is a work-in-progress specification that is currently receiving support in the latest generation of browsers. If you're curious about CSS3 gradients and how they can be applied to websites, check out the following resources:
- The CSS3 Gradient Generator is a visual web tool which allows you to generate and view the CSS code for complex gradients; visit it at http://gradients. glrzad.com/.
- CSS Tricks has a comprehensive but understandable overview on browser support and quirks at http://css-tricks.com/5700-css3-gradients.
- The W3 writes and maintains the in-depth specification on CSS3 gradients; available at http://dev.w3.org/csswg/css3-images/#gradients.
Time for action – adding an image
With the background gradient in place, we now need to add the final component of our banner, a small graphic to complement the text:
- To add an image into our iAd, we need to add our media into the Asset Library of iAd Producer. We can add multiple assets at a time, so we'll import the entire Dino Stores project files. In iAd Producer, select Assets from the far bottom right to open the Asset Library. You should now see the Asset Library appear in the right of iAd Producer, as shown in the following screenshot:
- Select File | Import Assets and find the Dino Stores folder provided with this book's assets. Within this folder, there is a final folder with all the assets prepared for this iAd; select final and click on choose. You can also drag media straight from Finder to your Asset Library.
The assets in the final folder for the Dino Stores example have already been resized and optimized for use in this project. If you want to use the assets or if you've chosen to make your own resources, then import them now.
- Wait while iAd Producer imports your media and assets. It should then display a list of all the assets available for use in your iAd. Click-and-drag banner-icon-rex. png to the placeholder image (a landscape silhouette with a moon) on the left of the banner canvas. It should update with our new picture.
- Note that this is a PNG image; we picked PNG as we want the transparent areas to show the background gradient, something we cannot do with JPG. Now the new image is in our iAd, and the text seems to be too far to the right, so click on the text label and drag it slightly nearer to the left.
What just happened?
We imported the set of resources that we'll be using in our iAd to the Asset Library and updated our template to have our own image in it.
Time for action – supporting all orientations
Apple suggests that our banners should work in both portrait and landscape, and doing so ensures your iAd looks great and can appear in any app that supports iAd. We'll now look at modifying the banner to support both orientations:
- To see how the current banner looks in landscape, select View then Landscape from the menu bar. You'll see the iAd resize itself to match the new dimensions; we now have a thinner and longer canvas to customize our ad on.
- As you can see, our text is now too big and the image has been cut off. Select the text and change it to a more suitable size, such as 22. You might need to move the text to be centered in this new view.
- We'll now fix up the image; click to select the image. If the inspector pane isn't visible, open it from the bottom-right menu in iAd Producer.
- Under the image properties section in the inspector pane, change Actual size to Stretch to fit. This allows us to shrink the image down to fit in the banner.
By scaling the same image we used in portrait, we keep the total size of our banner down as we don't need to load in any extra resources for the landscape version of our banner.
- Still in the inspector pane, expand the Layout section and check the Constrain proportions option. Constraining the proportion means the image will always remain the right ratio when we resize it. Here, we can see the Layout section and the Constrain Proportions option selected for our image on the banner:
- Now, drag the image from one of the small boxes around the edge of the image, called drag handles, to resize it to fit correctly within the thinner landscape banner. If the image needs to be repositioned, drag it into a place where it looks good.
When dragging or moving elements on the ad canvas, iAd Producer will suggest certain points you could use; these are indicated by yellow lines appearing and the element snapping to them.
- Unfortunately, some of the changes we've made also affect the view in portrait because they share the same assets and some settings. Choose View then Portrait from the menu bar, to return to the portrait view.
- You may have noticed that the image has now shrunk and doesn't fit the banner correctly. This is because the Stretch to fit setting we chose is conflicting with this view. We can fix this by dragging the image from the drag handle to resize it to fit how it should.
- Reposition the image so that it's back in the correct position.
The arrow icon above the canvas next to the View drop-down menu can be used to quickly jump back and forth between the landscape and portrait versions of your banner.
- Check the banner again, in each orientation. Everything should be looking great now; if it isn't, fix up the issues until you're happy with the banner.
- Save your iAd project using the Save option in the File section of the menu bar.
What just happened?
We completed our banner by supporting both the landscape and portrait orientations to ensure that our ad is compatible and will, therefore, appear within as many apps as possible. If you were using the supplied assets, your banner should look something like the following screenshot:
This article explains the tool from Apple that allows us to make rich iAds. With drag-and-drop simplicity and step-by-step examples, we'll create our first demo iAd!
You should now know how to:
- Create a project in iAd Producer
- Build banners, splash pages, menus, and subpages
- Choose a template for each view
- Introducing Xcode Tools for iPhone Development [Article]
- iPhone: Customizing our Icon, Navigation Bar, and Tab Bar [Article]