Technical iOS Photo Watermarking/Text App Tutorial – ‘Phonto’ – A Few Words on Words – by Jerry Jobe

After the splash screen, you are presented with a very minimal workspace. The Gear, Camera and Arrowed Box represent Settings, Load and Save, respectively.

Pressing the Gear brings up the Settings menu. The settings are divided into four sections: Keyboard, Text Menu, Add On, and Miscellaneous. The Ad-Free version is .99 USD, and well worth not seeing ads changing constantly on your screen. The Image Pack and Filter Pack will be discussed at the appropriate time below. The first portion we will look at is the Text Menu portion, which consists of the Preset Text and the Date.

Tapping on Preset Text brings up the following screen. At the top you can see an example of the “Add Text” pop-up that will appear when you tap on your photo. By default, that pop-up will just say “Add Text”. If you add boilerplate text here in the Settings, then that boilerplate will be accessible in the pop-up. Below I have tapped the “Add New Text” button, then entered “I AM TESTING PHONTO” on 3 lines, all in caps. If I like, I can hide Preset Text from the pop-up by turning on the “Hide from menu” button – but don’t worry, all presets are still available in the Add Text window.

Date can be added to the pop-up as well. Four different formats are available, and these formats do comply with General>International>Region Format settings on your iDevice.

The Keyboard portion of the Settings consists of three toggles: Auto Correction, Auto Capitalization and Spell Checking, all of which use your iDevice’s normal spelling settings.

Once you’re done with Settings, tapping the camera icon will bring up the Load menu. You may take a picture, load one from your iDevice, start with a Plain Image, or restore your last session. The Plain Image can be a plain white or colored image in various custom sizes, or can be a gradient that you define yourself. It can also be one of the templates from the Add-on Image Pack (1.99 USD), which has many different layouts that would be handy for invitations or announcements. I have not found the need for any of that so far, as I use Phonto for adding text to photos or artwork.

Here I’ve loaded a textured background that I built in iColorama, and that was saved in my Camera Roll. At this point you can filter your base image with one of the built-in filters (18 of these are pre-loaded) or you can use one of those in the Add-on Filter Pack (.99 USD). Chances are, though, that you already have the image as you want it and will not be using the filters.

Upon loading, your image is displayed on the workplace. Tap anywhere on the image to bring up the pop-up menu. In my case, I can choose from Add Text, the Date, or the preset I loaded.

I chose the preset, and that text is loaded into the text window. If I had chosen not to have the preset shown in the pop-up menu, then I could have chosen Add Text, then tapped the word Preset just above the keyboard to access all my presets.

The text window shows your text in the currently selected Font. You can change the font here, in the Text window, of change it later from a second pop-up menu. The alignment (left, center or right) must be set from this window.

Phonto comes delivered with approximately 280 fonts (or variations like Italic, Bold or Thin). At the bottom of the list you will see three buttons: Fonts (Phonto’s built-in fonts). Recent (those you have used in a quick list for easy retrieval), and My Fonts.

My Fonts is the list of fonts that you have added to the app from other sources. You’ll see in the example that I have loaded three fonts. There’s a how-to on loading fonts included.

This loading tutorial explains how to use iTunes to load your own fonts to the app. However, you may prefer to do that entirely on the iDevice, and I explain how to do that later in this tutorial.

Once you’re done entering your text, you’re taken back to your image and a second pop-up menu appears. The options include Text, Font, Style, Size, Tilt and Move. Text would take you back to the text entry window, and Font would take you to the Font list. Let’s take a look at the Style window, because a lot of work can be done here.

In the Style window the first thing you set is your colors. At the top you choose between modifying Color or Style. Immediately below that is the preview window. Then you choose between your Text, the Stroke (outline color) or Background (area behind the letters). Next you’ll see a horizontally-scrollable list of preset colors. Alternatively, you can use the next three sliders to set the red, green and blue values, enabling you to create any color. The final slider is an opacity slider. At the bottom are two buttons – one to choose a color pattern rather than a single color, and another to create your own color pattern.

When changing the Stroke, the Color Pattern buttons are replaced with a slider to change the width of the Stroke.

Up to four different colors can be in a pattern. At the top of the screen below you’ll see the word “Horizontal”. Tapping that word allows you to choose from horizontal, vertical. Character by Character or Word by Word. The Horizontal and Vertical choices will blend the chosen colors in a gradient. The other two choices will alternate the colors either by character or word.

Under the Style submenu of the Style menu (confused yet? remember, at the top of the Style menu you have submenus for Color and Style) there are three choices: Shadow, Spacing and Underline. Below you’ll see the controls for Shadow. The Alpha slider is an opacity slider for the drop shadow. The Blur controls how hard or soft the edge of the shadow is. X and Y sliders control how far away from the text the shadow is and in what direction. Finally, you can choose a preset color for the shadow but you cannot define your own.

Spacing works on the space between letters or lines. In my example I will be increasing the space between letters, but decreasing the space between lines.

Underlining has several options like single, double, thick and dashed. However, while the underline will take on the shadow of the text, it will not include the stroke, which can look odd.

The next control on the pop-up menu after Style is Size. Size can’t be changed with a pinch, as in other programs; you must use the slider.

Below I’ve increased the size to a value of 2.33. I then dragged it into place. While pinching does not work in Phonto, a single-finger drag moves the text on the screen.

Tilt is next, and it allows you to rotate the text.

The final pop-up option is Move. In addition to dragging with a finger, there are two buttons at the bottom of the screen that allow for centering the text horizontally or vertically. There is also a button called Layout, which brings up the following list for automatic placement of the text in various places on your image. Caution: these layouts will effect the tilt of the text, setting it back to 0.

Finally, the save button allows for the standard iOS 7 save options.

And here’s the result.

Adding additional pieces of text is just a matter of tapping elsewhere on the image and using the pop-up menu to add more text. When adding, Phonto uses some of the characteristics of the previously added text, but not all.

In this case, I had to take note of the angle of tilt on the first piece of text and then match it (-17º) with the other pieces.

Before wrapping up with some examples, I had promised to show you how to load fonts into Phonto using only your iDevice. You start by using your browser to access one of the many sites that offer free fonts. In my case, I am using Font Squirrel, and like the looks of the Ostrich Sans font. I click on the “Download TTF” arrow.

Font Squirrel delivers fonts in a compressed .zip file, which is not directly usable in Phonto. Since I previously downloaded the free app WinZip, Safari asks if I want to open the zip file in WinZip – which I do.

When it is opened in WinZip, I have to touch the button in the upper left corner to see a list of files in the compressed file. In this case there is a text file, followed by six different .ttf (True Type font) files. I select the first of the font files, then click the button in the upper right to open the font file in another app.

This gives me the opportunity to open the font file in Phonto. Clicking the Phonto icon opens Phonto.

Phonto then asks if I want to install the font. I tap Install.

Phonto tells me the font installed correctly, and also gives me the name as it will be listed in My Fonts, which is normally more descriptive than the file name. This method of loading fonts has more steps, but can be done on the fly without attaching your device to your computer.

Although there are some interface “opportunities” (lack of stroke on the underline, no full copy of attributes onto additional added text), Phonto is a straightforward text app that allows for easy customization through the use of text presets and user fonts. Peruse the following examples and enjoy!

I’m a big fan of the poet e.e. cummings, and I thought a quote from him would be a nice addition to this work I created from a photo by a friend.

Here’s a “painting” done from a photo I took of a show I’m in currently (Almost, Maine by John Cariani), and by changing the characteristics of the two text pieces I indicate that these are lines spoken by the two characters. Notice the backgrounds of the two pieces, and how it is possible to have a transparent background with an added stroke, and that the corners of the background can be rounded.

In the following example, I show how you can use Phonto to add copyright information. As a matter of fact, I added the copyright symbol and my name as a preset, so I won’t have to retype it every time.

In the final example, I added the text in Phonto, then masked out the text over the girl’s head in iColorama. I finished with the Raise feature in iColorama, masking that out over the girl as well’.