A tutorial inside an iPhone app which explains the workings of the app indicates that the app is complicated to begin with but there are some apps which exposes a lot of features and for those apps a tutorial is the only way to express their workings. In this article we are going to create a tutorial overlay similar to the one seem in the Pulse application.

Taking the Screenshots of the Actual Application:

The first task is to take the screenshot of the actual application on which we are going to impose an overlay. Run the app on the device and then press the power button and the start button both at the same time. You will hear a click sound and the screenshot will be saved in your "Photos" app. Open the Photos app and then email the photo to your self. In the next section we are going to edit the photo to include the overlay on it.

Using Inkscape to Add Overlay:

You can use any photo editing software but for this article we are going to use Inkscape. Open Inkscape and start a new project. Adjust the dimensions of the page to 320 X 480. Import your screenshot into Inkscape and adjust the x and y axis so the image fits into the view. By default when you add an image it will be added to the default layer. We have changed the name of the default layer to "BackgroundLayer". Also change the opacity of the layer to 40.0. The screenshot below shows the result:

Now add a new layer and name it "TutorialLayer". Add all the tutorial information on this layer as shown in the screenshot below:

You can make it more pretty if you want!

When you are done hide the "BackgroundLayer" and export the project to a PNG file. The exported image will look like this:

In the next section we are going to show the tutorial overlay on the top of our application.

Adding Tutorial Overlay to the App:

In this section we are going to add the tutorial overlay to our application. The overlay is added in the form of multiple views. Here is the description for all the things we are going to add.

topView: This is the container view which will contain the tutView, button and tutImageView.

tutView: This is the tutView which sets as an overlay on the top of the application. We set the alpha property for this view to be 0.4.

button: This is a custom type button which will make sure that when the view is clicked the tutorial is removed and user can use the application. The button is not visible when added to the UIView.

tutImageView: This is an UIImageView and it is used to display the tutorial image which we created using Inkscape in the last section.

The complete implementation is shown below:

The above code is triggered from inside the viewDidLoad event as shown in the code below:

The screenshot below shows the effect in action:

Pretty cool right!


The overlay tutorial technique allows the users to quickly grasp the basic features of the application without much effort. And since the overlay points to the actual controls on the screen it makes it more appealing than create a text or video tutorial.