In this tutorial, we will walk through the process of preparing the graphics for the first page of an iPad storybook which we will create in Flash^R.

The original artwork that I am using for this Flash project is an old 5 page greeting card based on A Visit From St. Nicholas by C. Moore. Because this artwork was created long before the computer was available to retail consumers, it was painted with traditional pen and watercolor. The finished artwork is on watercolor paper and, of course, only one layer.

The first task is to scan the artwork into Photoshop^R. I won't go into details for this because you will probably have a different printer/scanner than I do. Just follow the instructions that came with your printer/scanner. When you scan your artwork, set the resolution to 300 ppi. Although the iPad project requires only 72 resolution, you might want to scan your artwork at 300 ppi in case you want to print the images.

Once your artwork is in Photoshop, check the brightness and color. You may want to make some adjustments.

Planned Animation

Your next task is to consider what part of the artwork you wish to use for interactive elements in your iPad storybook. In the sample project, I decided to use the three cats. If clicked on, the cats will jiggle and meow. Therefore, I needed to select these cats and copy/paste them on their own layers.

I also decided to redo the text on the page. When the artwork was created, we were still using IBM typewriters which had only a few fonts to choose from. To fix the text, I first needed to remove the text from the artwork and then use Photoshop's Horizontal Type tool to add the text back into the image.

This may sound like a lot of work but Photoshop makes it very easy with two great tools, the Clone Stamp and the Quick Selection tools. Here's how you would proceed.

Quick Selection Tool

Use the Quick Selection tool to select the cats from the artwork. Set the brush size to about a fifth the size of a cat. Click and drag the tool over the cat. Photoshop will be able to tell what to select due to the difference in color, hue and brightness between the cat and the surrounding area. If you do select some area outside of the cat, you can switch the tool from the Add to Selection to the Subtract from Selection setting in the Options panel. Then drag over the area you wish to omit from the selection.

Once you have a cat selected, click Edit - Copy. Then click Edit - Paste. Because Photoshop still has the area actively selected, it will automatically place the cat on a new layer above the artwork directly over the original cat.

Clone Stamp Tool

To use the Clone Stamp tool to remove the original cats, go back to the layer that contains the original scan. This technique works best if you have the Hardness for the tool set to zero to prevent sharp edges. First, hold down the Option key and click to "copy" the area next to the object you wish to remove. For the cats that will be the rug and floor behind them. Then, placing the Clone Stamp tool over the cat, you will see a preview of the floor/rug area. Click on the cat to "paint" the floor/rug area over the cat. As you move the mouse over the cat and click, you will paint more of the floor/rug over the cat. Photoshop does a good job of painting the correct pixels of the floor/rug area onto the cat, but you might need to make a few touch ups. Just continue this process until the cat has disappeared.

When finished you should have a file which contains the artwork on the first layer and the three cats on separate layers above. Select one cat and copy/paste the cat into a new window. Save this new file as cat1 in the png format. Repeat this for the other two cats. Now, delete the three cat layers from the original file, leaving only the bottom layer. Save this file as page1.png.

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.