How to Create Captioned Images Using the idraw App on the ipad

Transcription

1 How to Create Captioned Images Using the idraw App on the ipad By Chuck Frey, The Mind Mapping Software Blog As social sharing services like Pinterest and Instagram grow in popularity, it s becoming more important for businesses to have a presence on these channels. One type of content that plays well in these visually-oriented environments are images with a brief message superimposed over them. The image may provide an inspiring quote or caption, show an example of a product, depict a special event or may simply be an evocative photograph, illustration or piece of art. As part of my coverage of visual thinking tools and methods of expression, this report explains a simple method to create such captioned images on your ipad or other tablet device. You can easily replicate this approach using your own images and creative thoughts and an app called idraw.

2 How to create captioned images on the ipad Page 2 Lately, I ve been using this method to produce captioned images to help spread the word about my new book, Up Your Impact: 52 Innovative Strategies to Add Value to Your Work (as an Insider member, you have access to it. Click here to download it, if you haven t already done so). You can view my collection of captioned images for the book here. I ve also created a number of captioned images to help promote the new book of some friends of mine: The Impact Equation: Are You Making Things Happen or Just Making Noise? by Chris Brogan and Julien Smith. This has given me an opportunity to add to the conversation about this popular book in meaningful ways, while also generating some visibility for my work. You can view my collection of captioned images inspired by The Impact Equation here. On the desktop, I utilize a program called Adobe Fireworks to create these evocative images. Fireworks is optimized for producing web graphics, and it handles this role very well. Watch for a description of my work process to create them in a future Insider report. But lately I have become fascinating with the idea of utilizing my ipad to create these images, any time, anywhere. So invested some time researching apps that could potentially do this for me. My app requirements Here were my requirements for image captioning on the ipad: Complete freedom of text placement and style, and the ability to incorporate multiple text blocks in a single image An attractive collection of fonts, so the captioned images I create won t all look alike, and to size text as needed, without restrictions The ability to add drop shadows to text and other elements The ability to add translucent rectangles or rounded rectangles and arrange them behind the text blocks. These let the background show through, but visually separate the text

3 How to create captioned images on the ipad Page 3 from it. In some captioned images, the background interferes badly with the text, making it hard to read. This design has become a part of my signature style, and so I wanted to be able to replicate it on the ipad app I selected. Support for moving elements forward and backward, either onto separate image layers or within a layer. This would enable me to stack captioned text with translucent backgrounds, as I described in the previous bullet. The ability to easily grab images from sources outside the ipad, so use as the basis for my captioning projects. The apps I evaluated High-end drawing apps like Adobe Ideas, SketchBook Pro and Brushes were too focused on illustration, and not enough on manipulating images and text, which is what I needed. I also explored apps that are designed to add captions to images so that people can add funny sayings to pictures of their friends or pets, for example. But those were too restrictive. I wanted complete freedom to move and resize elements at will, which these tools didn t allow. The solution I finally settled upon is an app called idraw (US$8.99, available in Apple s AppStore.). It gives me the freedom of sizing and placing elements that I needed, supports shadows, layers and other embellishments, and enables me to access images stored on my Dropbox account. This is a very impressive app that is almost perfectly suited to creating captioned images! If you want to follow along and recreate this project, you can download the background image and book cover image. How to create a captioned image in idraw Open idraw and select the file import command, next to New Document. When the drop-down box appears, select Import from Dropbox.

4 How to create captioned images on the ipad Page 4 idraw connects the Dropbox app on your ipad. The first time around, you will need to authorize Dropbox to communicate with idraw. After that, it should just work automatically. Navigate to the image you want to use as the background for your message or the quote you want to communicate in your project. In the case of this example, I m going to select the image ripple.jpg, which shows ripples after a drop of water has struck a pool of it. Tip: Try to select an image that is connected conceptually with the subject of your quote, and also evokes a certain feeling in the audience who will be viewing it. Visually, it should not be too busy. Ideally, it should have an area free of visual clutter where you can place your quote or other wording. The file ripple.jpg has now been added to idraw. Tap on it to open it. After idraw opens your image file, the first step is to add a block of text to it. Select the text icon in the vertical toolbar on the left side of the screen. It s the fourth icon from the top, and looks like a letter T. idraw inserts a text box on screen, and invites you to double-tap it in order to add your own text to it. Don t worry about its location for now. We ll adjust that later.

5 How to create captioned images on the ipad Page 5 When you double-tap the text box, the ipad s virtual keyboard appears at the bottom of the screen. Type your quote or statement. When you re done, be sure to double-check it to make sure all the words are spelled correctly. In this case, the phrase lives of in the second line don t have a space between them. Before I move to the next step, I will need to correct this typographical error. Tap and drag the text box toward the bottom center of the image, using the first of the two arrow buttons in the vertical toolbar. A black popup appears on screen to show you the absolute coordinates of the text box. In addition, a small magnifier window appears in the upper left corner of the ipad s screen. The next step is to re-color the black text in your quote to white, so it contrasts better against the blue color of the ripples behind it. To do this, tap on the bottom icon in the vertical toolbar, which enables you to control object fills.

6 How to create captioned images on the ipad Page 6 You can also access object fill and other properties by tapping on the i icon near the center of the top toolbar. Tap on the shadow command to add one to our text block. This command was a bit hard to find at first. I had to look at idraw s documentation to figure it out. Tap on the i icon to open the formatting dialog box, and then upon the shadow properties button, near the bottom of the dialog box. This pop-over appears, which gives you extensive control over how it formats your drop shadow. Tap on the color command to adjust the color of the shadow.

7 How to create captioned images on the ipad Page 7 I selected a medium gray for the shadow. Note the sliders at the bottom of this dialog box. They control the intensity and level of transparency of the shadow. Note that I have dragged the bottom slider to about 75% to give the shadow a bit of an indistinct quality, which makes it look a bit more realistic. After you have finished embellishing the properties of your text block, it s time to crate the translucent (seethrough) background that will be displayed behind it. Select the rounded rectangle tool and draw out a shape colored white that is approximately the same size as the text block.

8 How to create captioned images on the ipad Page 8 When idraw creates a text box, it has a white background color with a thin black border. We re going to need to adjust those properties to meet our needs. Tap the fill button within the inspector to change these two properties. First, let s change the border or line color to none. That can be accomplished by tapping on the color swatch in the lower right corner the one that looks clear, except for a slash mark through it (circled, below right).

9 How to create captioned images on the ipad Page 9 Note that the property of stroke (another name for line) now has a slash through it in the color swatch of the appearance tab. Now let s change the rounded rectangle s fill opacity, to make it fade back and appear translucent. The bottom property in the appearance tab of the inspector is opacity. Tap and drag the slider to 40%. This makes it see-through, but not quite transparent. It will make a good background for our text block, but at this time, it s still in front of it (because we created it after the text block). That s what we ll work on next. To change the order, from front to back, in which these two objects appear, we must first select them both. To do this, select the second arrow in the vertical toolbar, and tap and drag your finger across both objects to group select them. Once you ve done that, tap on the icon in the horizontal toolbar that looks like two overlapping rectangles. This opens the arrange/modify menu. Tap and drag the slider to the right to place the text above the rounded rectangle. Note that you can also use this property inspector to exactly align objects to each other. But we can t do that just yet, because the rounded rectangle isn t quite sized to match the text.

10 How to create captioned images on the ipad Page 10 Tap anywhere in the image to deselect the two objects. Switch to the other arrow command and tap to select only the rounded rectangle. Tap and drag its control handles until you re satisfied with its proportions horizontally and vertically. There should be some extra space on all sides of the text, to ensure that it s easy to read and so that it looks attractive. To ensure that these two objects don t get accidentally messed up, group them together. Use the second arrow command to once again group select them, and use the group command (under the arrange/modify menu) to group them together.

11 How to create captioned images on the ipad Page 11 The final step in our captioned image is to add the book cover. This step is purely optional. I decided to go this route to brand my captioned images, so that no matter how much this image gets shared across the web, people will always know where this idea came from my book! Placing the book cover within this image communicates both the book s name and my name within it in an attractive format. I ve also done some of these images with the text upyourimpact.com in white, with a translucent rounded rectangle behind it. See my Pinterest board for examples. Here s where I encountered one minor quirk of idraw: You cannot add image objects to your project from Dropbox. The only time you can use that online storage service is to add an image background to your project. Strange So I had to use the Safari browser on my ipad to navigate to my book website, locate a book cover image and save it to the saved photos gallery of my ipad. Once you have stored the image you want to use on your ipad, use the add image command to tap and select it.

12 How to create captioned images on the ipad Page 12 This places the book cover image in a random location within our project. Tap and drag to move it to the upper right corner of the ripple image; that s where there s room for it and it looks good there. Most of the time, I try to place the book cover consistently in the lower right corner, but in this case, it would have interfered too much with the caption. Creating these captioned images is definitely a case of experimentation. Move elements around. Change their color and size. Try different fonts until you find one that s clearly legible. Play with different font sizes, which changes how much emphasis you give your caption. Play with it until you re satisfied with it! Now tap and drag one of the corner control handles of the book cover object to proportionally resize it. Here is where I encountered the second quirky behavior of idraw: You cannot add a drop shadow to an image that you have inserted into a project. I don t know why this is, but hopefully, it s something that the developer will address in a future update. That s OK, however we have a workaround, which we can implement using the skills we ve already learned in this tutorial.

13 How to create captioned images on the ipad Page 13 Tap the rectangle icon in the vertical toolbar and then tap and drag to add a rectangle approximately the same size as the book cover. It s not important where you create it; I picked an open area of my project where I could manipulate it before I move it to its final position. To color it, as shown at right, I selected the fill command, tapped on the gray swatch and then changed its intensity to about 50%. Remember, idraw likes to put borders around the rectangles it creates. Shadows don t have borders, so we re going to need to eliminate this one. Tap on the line properties icon and then on the swatch with the slash through it, like we did when we created the rounded rectangle. This removes the line from the gray box.

14 How to create captioned images on the ipad Page 14 The next step in our manual shadow creation process is to make it exactly the same size as the book cover. The developers of idraw cleverly included a geometry inspector, which gives us a very finite level of control over the sizes of objects down to a thousandth of a pixel! Select the book cover and tap on the geometry icon. Grab a pen and paper and write down the exact dimensions of the book cover. They are the third and fourth items in this dialog box. Don t pay attention to X and Y they define the absolute position of the book cover horizontally and vertically within your project s workspace. Next, select the gray rectangle, tap on the geometry icon and input the dimensions you just wrote down. This will change its size to exactly match the book cover. Now tap and drag it until it is slightly to the right and below the book cover. This will position it on top of the book cover. That s OK. We ll adjust its order in the next step.

15 How to create captioned images on the ipad Page 15 Group select the book cover and its shadow (using the second arrow icon) and tap on the arrange/modify icon. Drag the order back/front slider to the right to place the gray box behind the book cover. Use the two-finger gesture on the screen of the ipad to zoom in on the book cover and its shadow. Tap in a blank area of the canvas to deselect the two objects. Then tap on the first arrow icon and tap to select only the shadow. Drag the shadow slightly vertically or horizontally until it is in a realistic-looking position ideally the same amount of the box should be showing to the right of book cover as below it. The reason you need to zoom in is to make it easier for you to select the shadow and then manipulate it.

16 How to create captioned images on the ipad Page 16 The last step is to group the book cover and the shadow together. Since you ve already done this once, you know how to do it. Now that you re done creating your first captioned image, it s time to export it from idraw. Return to the app s main menu, where you ll see the project you just created in the upper left corner of the document view. Before you can do anything with it, you must first change the app into edit mode. Tap on the blue button at the far right of the horizontal toolbar. It changes to say done and several new commands, including export, appear on the left side of this toolbar. Tap your completed project to select it; a yellow border appears around it to show that you have successfully done so.

17 How to create captioned images on the ipad Page 17 Tap on the first icon in the horiztonal toolbar. A dropdown menu appears, which gives you 6 options for sharing your idraw project. Select save to Dropbox. If you don t use Dropbox, your next best options would be to it to yourself or to save it to the ipad s photo gallery. Once you have selected Dropbox as the destination for your image, the app asks you which image format you want it saved into. I selected PNG, because that s the native file format of Adobe Fireworks. For posting to a blog, Pinterest or other online channel, either PNG or JPG will work.

18 How to create captioned images on the ipad Page 18 idraw sends your file to your preferred destination in this case, Dropbox. And you re done! I hope this tutorial inspires you to try creating your own captioned images in idraw. The process isn t as complex as it is to explain to you. It s actually a lot of fun! If you write a blog or create content for online consumption, captioned images are great little content nuggets that you can include in your arsenal. The cool thing is that they are easily sharable. For my Up Your Impact images, for example, I have: Posted them to a special Up Your Impact board on Pinterest Shared them to my personal Google+ stream as well as a G+ page I created for the book Created brief teaser posts for my personal and Up Your Impact twitter feeds that point to one of my captioned images on Pinterest Shared them to my Up Your Impact fan page on Facebook Go ahead and click on the links above to see examples of each content placement in action. As you can see, captioned images can be shared in many ways. That makes them excellent tools to help create visibility for you, your company and its products/services. Have fun!

19 How to create captioned images on the ipad Page 19 Questions? Please contact Chuck Frey at Please visit the Mind Mapping Software Blog for all of the latest news, trends and resources related to visual mapping. You can also follow Chuck Frey on Twitter for even more insights and ideas. Published 11/19/12